saltukalakus/workaround.html

## workaround.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

  <!--[if IE 8]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
  <![endif]-->

  <!--[if lte IE 9]>
  <script src="https://cdn.auth0.com/js/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/11.11/lock.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;

    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;

    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      /* additional configuration needed for custom domains
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'YOUR_CUSTOM_DOMAIN'
      }, */
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        //primaryColor:    'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

    lock.show();

    // Once the user is navigated to Sign-up
    lock.on("signup ready", function(authResult) {

       // Hide user name field
       $('input[name=username]').hide();

       // Once the email is entered update the username with JQuery and dispatch a bubbles event
       // so that the React library updates the virtual DOM.
       $("input[name='email']")[0].addEventListener('input', e => {

         //Get the first 15 characters from the email before @.
         const emailToUserName = $("input[name='email']").val().replace(/@.*$/,"").substring(0,15)
         setNativeValue($('input[name=username]')[0], emailToUserName);
         $('input[name=username]')[0].dispatchEvent(new Event('input', { bubbles: true }));

      })
    });

    // Used the solution in below link for setting the field
    // https://github.com/facebook/react/issues/10135#issuecomment-314441175
    function setNativeValue(element, value) {
      const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
      const prototype = Object.getPrototypeOf(element);
      const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype,'value').set;

      if (valueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value);
      } else {
        valueSetter.call(element, value);
      }
    }
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sign In with Auth0</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>
	<body>

	<!--[if IE 8]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
	<![endif]-->

	<!--[if lte IE 9]>
	<script src="https://cdn.auth0.com/js/base64.js"></script>
	<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
	<![endif]-->

	<script src="https://cdn.auth0.com/js/lock/11.11/lock.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
	<script>
	// Decode utf8 characters properly
	var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
	config.extraParams = config.extraParams \|\| {};
	var connection = config.connection;
	var prompt = config.prompt;
	var languageDictionary;
	var language;

	if (config.dict && config.dict.signin && config.dict.signin.title) {
	languageDictionary = { title: config.dict.signin.title };
	} else if (typeof config.dict === 'string') {
	language = config.dict;
	}
	var loginHint = config.extraParams.login_hint;

	// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
	var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
	auth: {
	redirectUrl: config.callbackURL,
	responseType: (config.internalOptions \|\| {}).response_type \|\|
	(config.callbackOnLocationHash ? 'token' : 'code'),
	params: config.internalOptions
	},
	/* additional configuration needed for custom domains
	configurationBaseUrl: config.clientConfigurationBaseUrl,
	overrides: {
	__tenant: config.auth0Tenant,
	__token_issuer: 'YOUR_CUSTOM_DOMAIN'
	}, */
	assetsUrl: config.assetsUrl,
	allowedConnections: connection ? [connection] : null,
	rememberLastLogin: !prompt,
	language: language,
	languageDictionary: languageDictionary,
	theme: {
	//logo: 'YOUR LOGO HERE',
	//primaryColor: 'green'
	},
	prefill: loginHint ? { email: loginHint, username: loginHint } : null,
	closable: false,
	defaultADUsernameFromEmailPrefix: false,
	// uncomment if you want small buttons for social providers
	// socialButtonStyle: 'small'
	});

	lock.show();

	// Once the user is navigated to Sign-up
	lock.on("signup ready", function(authResult) {

	// Hide user name field
	$('input[name=username]').hide();

	// Once the email is entered update the username with JQuery and dispatch a bubbles event
	// so that the React library updates the virtual DOM.
	$("input[name='email']")[0].addEventListener('input', e => {

	//Get the first 15 characters from the email before @.
	const emailToUserName = $("input[name='email']").val().replace(/@.*$/,"").substring(0,15)
	setNativeValue($('input[name=username]')[0], emailToUserName);
	$('input[name=username]')[0].dispatchEvent(new Event('input', { bubbles: true }));

	})
	});

	// Used the solution in below link for setting the field
	// https://github.com/facebook/react/issues/10135#issuecomment-314441175
	function setNativeValue(element, value) {
	const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
	const prototype = Object.getPrototypeOf(element);
	const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype,'value').set;

	if (valueSetter && valueSetter !== prototypeValueSetter) {
	prototypeValueSetter.call(element, value);
	} else {
	valueSetter.call(element, value);
	}
	}
	</script>

	</body>
	</html>