saltukalakus · June 2, 2025 20:46
diff --git a/classic-hosted-page.html b/classic-hosted-page.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" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 </head>
  <style>
    body, html {
      height: 100%;
      background-color: #f9f9f9;
    }

    .login-container {
      position: relative;
      height: 100%;
    }

    .login-box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 15px;
      background-color: #fff;
      box-shadow: 0px 5px 5px #ccc;
      border-radius: 5px;
      border-top: 1px solid #e9e9e9;
    }

    .login-header {
      text-align: center;
    }

    .login-header img {
      width: 75px;
    }

    #error-message {
      display: none;
    }
  </style>
 <body>
  <div class="login-container">
    <div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
      <div class="login-header">
        <img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"/>
        <h3>Welcome</h3>
        <h5>PLEASE LOG IN</h5>
      </div>
      <div id="error-message" class="alert alert-danger"></div>
      <form onsubmit="return false;" method="post">
        <button
          type="button"
          id="btn-login"
          class="btn btn-primary btn-block">
            Log In with User/Password
        </button>
        <hr>
        <button
          type="button"
          id="btn-passwordless"
          class="btn btn-default btn-danger btn-block">
            Log In with Passwordless
        </button>
      </form>
    </div>
  </div>

  <!--[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/polyfills/1.0/base64.min.js"></script>
  <script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
  <![endif]-->
  <script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
  <script src="https://cdn.auth0.com/js/lock/11.28/lock.min.js"></script>
  <script>
    window.addEventListener('load', function() {
    // 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 || {};

      function login(e) {
        console.log("Regular login");
        e.preventDefault();
        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:    colors.primary ? colors.primary : 'green'
        },
        prefill: loginHint ? { email: loginHint, username: loginHint } : null,
        closable: true,
        defaultADUsernameFromEmailPrefix: false,
        // uncomment if you want small buttons for social providers
        socialButtonStyle: 'small'
        });
        lock.show();
      }

      function loginWithPasswordless(e) {
        console.log("Passwordless");
        e.preventDefault();
        var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
        auth: {
          redirectUrl: config.callbackURL,
          responseType: (config.internalOptions || {}).response_type ||
            (config.callbackOnLocationHash ? 'token' : 'code'),
          params: config.internalOptions
        },
        /* additional config needed to use custom domains
        configurationBaseUrl: config.clientConfigurationBaseUrl,
        overrides: {
  	      __tenant: config.auth0Tenant,
  	      __token_issuer: config.auth0Domain
        }, */
        assetsUrl:  config.assetsUrl,
        allowedConnections: connection ? [connection] : null,
        rememberLastLogin: !prompt,
        language: language,
        languageDictionary: languageDictionary,
        theme: {
          //logo:            'YOUR LOGO HERE',
          //primaryColor:    'green'
        },
        closable: true,
        // uncomment if you want small buttons for social providers
        // socialButtonStyle: 'small'
        });
        lock.show();
      }

      document.getElementById('btn-login').addEventListener('click', login);
      document.getElementById('btn-passwordless').addEventListener('click', loginWithPasswordless);
    });
  </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" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<style>
	body, html {
	height: 100%;
	background-color: #f9f9f9;
	}

	.login-container {
	position: relative;
	height: 100%;
	}

	.login-box {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 15px;
	background-color: #fff;
	box-shadow: 0px 5px 5px #ccc;
	border-radius: 5px;
	border-top: 1px solid #e9e9e9;
	}

	.login-header {
	text-align: center;
	}

	.login-header img {
	width: 75px;
	}

	#error-message {
	display: none;
	}
	</style>
	<body>
	<div class="login-container">
	<div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
	<div class="login-header">
	<img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"/>
	<h3>Welcome</h3>
	<h5>PLEASE LOG IN</h5>
	</div>
	<div id="error-message" class="alert alert-danger"></div>
	<form onsubmit="return false;" method="post">
	<button
	type="button"
	id="btn-login"
	class="btn btn-primary btn-block">
	Log In with User/Password
	</button>
	<hr>
	<button
	type="button"
	id="btn-passwordless"
	class="btn btn-default btn-danger btn-block">
	Log In with Passwordless
	</button>
	</form>
	</div>
	</div>

	<!--[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/polyfills/1.0/base64.min.js"></script>
	<script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
	<![endif]-->
	<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
	<script src="https://cdn.auth0.com/js/lock/11.28/lock.min.js"></script>
	<script>
	window.addEventListener('load', function() {
	// 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 \|\| {};

	function login(e) {
	console.log("Regular login");
	e.preventDefault();
	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: colors.primary ? colors.primary : 'green'
	},
	prefill: loginHint ? { email: loginHint, username: loginHint } : null,
	closable: true,
	defaultADUsernameFromEmailPrefix: false,
	// uncomment if you want small buttons for social providers
	socialButtonStyle: 'small'
	});
	lock.show();
	}

	function loginWithPasswordless(e) {
	console.log("Passwordless");
	e.preventDefault();
	var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
	auth: {
	redirectUrl: config.callbackURL,
	responseType: (config.internalOptions \|\| {}).response_type \|\|
	(config.callbackOnLocationHash ? 'token' : 'code'),
	params: config.internalOptions
	},
	/* additional config needed to use custom domains
	configurationBaseUrl: config.clientConfigurationBaseUrl,
	overrides: {
	__tenant: config.auth0Tenant,
	__token_issuer: config.auth0Domain
	}, */
	assetsUrl: config.assetsUrl,
	allowedConnections: connection ? [connection] : null,
	rememberLastLogin: !prompt,
	language: language,
	languageDictionary: languageDictionary,
	theme: {
	//logo: 'YOUR LOGO HERE',
	//primaryColor: 'green'
	},
	closable: true,
	// uncomment if you want small buttons for social providers
	// socialButtonStyle: 'small'
	});
	lock.show();
	}

	document.getElementById('btn-login').addEventListener('click', login);
	document.getElementById('btn-passwordless').addEventListener('click', loginWithPasswordless);
	});
	</script>
	</body>
	</html>