nicosabena/hosted login page with password and passwordless.html

## hosted login page with password and passwordless.html
<!--
This shows how you can have both a regular Lock or Passwordless Lock in the
hosted login page, and decide between the two based on some logic (e.g. like
based on the clientID, see the "usePasswordless" variable at the bottom of this code).

If your applications have both DB and passwordless connections
enabled, you could also present the option to the user (e.g. with a couple of buttons)
and then show the proper widget based on the user's selection.
-->

<!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.30/lock.min.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;
    var colors = config.colors || {};

    var lockOptions = {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      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:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    };

    if(colors.page_background) {
      var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
                  colors.page_background +
                ' }';
      var style = document.createElement('style');

      style.appendChild(document.createTextNode(css));

      document.body.appendChild(style);
    }

    // your custom logic to decide which method to use.
    // e.g. var usePassowordless = config.clientID === 'SOME_CLIENT_ID';
    var usePasswordless = true;

    var lock;
    if (usePasswordless) {
      // optionally, specify which passwordless connection to use:
      // lockOptions.allowedConnections: ['email']; // or ['sms']

      // if using email passwordless, specify 'code' or 'link':
      // lockOptions.passwordlessMethod: 'code',

      lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, lockOptions);
    } else {
      lock = new Auth0Lock(config.clientID, config.auth0Domain, lockOptions);
    }

    lock.show();
  </script>
</body>
</html>
	<!--
	This shows how you can have both a regular Lock or Passwordless Lock in the
	hosted login page, and decide between the two based on some logic (e.g. like
	based on the clientID, see the "usePasswordless" variable at the bottom of this code).

	If your applications have both DB and passwordless connections
	enabled, you could also present the option to the user (e.g. with a couple of buttons)
	and then show the proper widget based on the user's selection.
	-->

	<!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.30/lock.min.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;
	var colors = config.colors \|\| {};

	var lockOptions = {
	auth: {
	redirectUrl: config.callbackURL,
	responseType: (config.internalOptions \|\| {}).response_type \|\|
	(config.callbackOnLocationHash ? 'token' : 'code'),
	params: config.internalOptions
	},
	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: colors.primary ? colors.primary : 'green'
	},
	prefill: loginHint ? { email: loginHint, username: loginHint } : null,
	closable: false,
	defaultADUsernameFromEmailPrefix: false,
	// uncomment if you want small buttons for social providers
	// socialButtonStyle: 'small'
	};

	if(colors.page_background) {
	var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
	colors.page_background +
	' }';
	var style = document.createElement('style');

	style.appendChild(document.createTextNode(css));

	document.body.appendChild(style);
	}

	// your custom logic to decide which method to use.
	// e.g. var usePassowordless = config.clientID === 'SOME_CLIENT_ID';
	var usePasswordless = true;

	var lock;
	if (usePasswordless) {
	// optionally, specify which passwordless connection to use:
	// lockOptions.allowedConnections: ['email']; // or ['sms']

	// if using email passwordless, specify 'code' or 'link':
	// lockOptions.passwordlessMethod: 'code',

	lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, lockOptions);
	} else {
	lock = new Auth0Lock(config.clientID, config.auth0Domain, lockOptions);
	}

	lock.show();
	</script>
	</body>
	</html>