Javascript not working in azure ad b2c custom sign-up page

user_13835572 0
Viewed 798

I have created custom signup page in azure ad b2c, But javascript is not working.

I have also enabled [Enable JavaScript enforcing page layout] option in property,

***Currently I am using userflow not custom policy

Custom page sample :

<!DOCTYPE html>
<!-- saved from url=(0080)../assets/AzureBlue/selfAsserted.cshtml -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Sign up</title>

    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="https://demostorage.z11.web.core.windows.net/slate_gray/css/assets.css" rel="stylesheet" type="text/css" />
    <link href="https://demostorage.z11.web.core.windows.net/slate_gray/css/common.css" rel="stylesheet" type="text/css" />
    <link href="https://demostorage.z11.web.core.windows.net/slate_gray/css/selfasserted.css" rel="stylesheet" type="text/css" />

    <style>
        .tnc-container {
            height: 100px; 
            overflow-y: scroll;
            text-align: left !important;
            border: 1px gray solid;
            padding: 5px;
            margin: 20px 0px 0px 0px;
        }

        .buttons #continue {
            float: none !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var checkbox = document.querySelector("input[type=checkbox]");
            checkbox.addEventListener( 'change', function(e) {
                var currentdate = new Date(); 
                var datetime = currentdate.getFullYear() + "/"
                                + (currentdate.getMonth()+1)  + "/" 
                                + currentdate.getDate() + " "  
                                + currentdate.getHours() + ":"  
                                + currentdate.getMinutes() + ":" 
                                + currentdate.getSeconds();

                this.value = datetime;
            });
        }, false);
    </script>

</head>
<body>
    <div class="container  self_asserted_container ">
        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img alt="Company Logo" class="companyLogo" src="https://demostorage.z11.web.core.windows.net/assets/images/logo.svg">
                        <div id="api">
                        </div>
                        <div class="tnc-container">
                            <b>Terms and Conditions Sample Generator</b> <br>
Help protect your website and its users with clear and fair website terms and conditions. These terms and conditions for a website set out key issues such as acceptable use, privacy, cookies, registration and passwords, intellectual property, links to other sites, termination and disclaimers of responsibility. Terms and conditions are used and necessary to protect a website owner from liability of a user relying on the information or the goods provided from the site then suffering a loss.

Making your own terms and conditions for your website is hard, not impossible, to do. It can take a few hours to few days for a person with no legal background to make. But worry no more; we are here to help you out.

All you need to do is fill up the blank spaces and then you will receive an email with your personalized terms and conditions.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body></html>

I have testing this javascript locally... Its working properly.

Using javascript function, I want to store current datetime on checkbox "Team of service consent" check

azure-ad-b2c azure javascript
1 Answers

You Can are use a CombinedSignUpAndSignIn policy and you can display the Checkbox by following process

Go to the User Flow properties.

  1. Select Page layout.
  2. Select 'Local account sign up page'.
  3. Under User Attributes, find your attribute which should be a Boolean.
  4. Set User input type to CheckboxMultiSelect.

Then go to the Languages menu within the User Flow.

  1. Enable Language Customisation.
  2. Download the English default language file for the 'Local account sign up page'.
  3. Look for the extension attribute name within "LocalizedCollections".
  4. Add a value as follows:

https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-language-customization#provide-a-list-of-values-by-using-localizedcollections

  "Items":[
{
     "Name":"Agree",
     "Value":"True"
}

Save your file and upload it as an override to the English localisation. You should now see the checkbox and it will return True when selected, and False when not selected.

enter image description here

There is a sample related to this which presents a checkbox, and writes the version of the TOU that was presented.

The TOU needs to be offered up by your HTML customisation, or you can write it in a paragraph claim.

user_133234600
Related