jatinvaidya · July 25, 2023 23:56
diff --git a/classic_hosted_login_page.html b/classic_hosted_login_page.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Auth0 Hosted Login Page</title>
 		<link
 			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
 			rel="stylesheet"
 		/>
 		<style>
 			.form-container {
 				display: none;
 			}
 		</style>
 		<script>
 			function showForm(formId) {
 				var formContainers = document.getElementsByClassName("form-container");
 				for (var i = 0; i < formContainers.length; i++) {
 					formContainers[i].style.display = "none";
 				}
 				document.getElementById(formId).style.display = "block";
 			}
 		</script>
 		<script src="https://cdn.auth0.com/js/auth0/9.18/auth0.min.js"></script>
 		<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
 		<script>
 			var config = JSON.parse(
 				decodeURIComponent(escape(window.atob("@@config@@")))
 			);

 			var leeway = config.internalOptions.leeway;
 			if (leeway) {
 				var convertedLeeway = parseInt(leeway);

 				if (!isNaN(convertedLeeway)) {
 					config.internalOptions.leeway = convertedLeeway;
 				}
 			}

 			var params = Object.assign(
 				{
 					overrides: {
 						__tenant: config.auth0Tenant,
 						__token_issuer: config.authorizationServer.issuer,
 					},
 					domain: config.auth0Domain,
 					clientID: config.clientID,
 					redirectUri: config.callbackURL,
 					responseType: "code",
 				},
 				config.internalOptions
 			);

 			var webAuth = new auth0.WebAuth(params);
 			var databaseConnection = "Username-Password-Authentication";

 			function loginWithPassword(e) {
 				e.preventDefault();
 				var button = this;
 				var username = document.getElementById("email").value;
 				var password = document.getElementById("password").value;
 				button.disabled = true;
 				webAuth.login(
 					{
 						realm: databaseConnection,
 						username: username,
 						password: password,
 					},
 					function (err) {
 						if (err) displayError(err);
 						button.disabled = false;
 					}
 				);
 			}

 			function sendOtp(e) {
 				e.preventDefault();
 				var button = this;
 				var mobile = document.getElementById("mobile").value;
 				var dob = document.getElementById("dob").value;
 				var postalCode = document.getElementById("postalcode").value;
 				button.disabled = true;
 				webAuth.passwordlessStart(
 					{
 						connection: "sms",
 						send: "code",
 						phoneNumber: mobile,
 					},
 					function (err, res) {
 						if (err) {
 							displayError(err);
 							button.disabled = false;
 							return;
 						}
 						button.disabled = true;
 						document.getElementById("btn-verify-otp").disabled = false;
 					}
 				);
 			}

 			function verifyOtp(e) {
 				e.preventDefault();
 				var code = document.getElementById("otpcode").value;
 				var mobile = document.getElementById("mobile").value;
 				var dob = document.getElementById("dob").value;
 				var postalCode = document.getElementById("postalcode").value;

 				// Perform authentication with the entered code
 				webAuth.passwordlessLogin(
 					{
 						connection: "sms",
 						phoneNumber: mobile,
 						verificationCode: code,
 						dob: dob,
 						postalCode: postalCode,
 					},
 					function (err, res) {
 						if (err) {
 							displayError(err);
 							return;
 						}
 						// Authentication successful, handle the result
 						console.log("Authentication successful!", res);
 					}
 				);
 			}

 			function signup() {
 				var button = this;
 				var email = document.getElementById("email").value;
 				var password = document.getElementById("password").value;

 				button.disabled = true;
 				webAuth.redirect.signupAndLogin(
 					{
 						connection: databaseConnection,
 						email: email,
 						password: password,
 					},
 					function (err) {
 						if (err) displayError(err);
 						button.disabled = false;
 					}
 				);
 			}

 			function displayError(err) {
 				var errorMessage = document.getElementById("error-message");
 				errorMessage.innerText = err.policy || err.description;
 				errorMessage.style.display = "block";
 			}

 			// on-load
 			window.addEventListener("load", function () {
 				document
 					.getElementById("btn-login-password")
 					.addEventListener("click", loginWithPassword);
 				document
 					.getElementById("btn-send-otp")
 					.addEventListener("click", sendOtp);
 				document
 					.getElementById("btn-verify-otp")
 					.addEventListener("click", verifyOtp);
 				document.getElementById("btn-verify-otp").disabled = true;
 				document.getElementById("btn-signup").addEventListener("click", signup);
 			});
 		</script>
 	</head>
 	<body class="flex justify-center items-center h-screen">
 		<div class="w-full max-w-md">
 			<div
 				id="error-message"
 				class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4"
 				role="alert"
 				style="display: none"
 			></div>
 			<h1 class="text-center mb-4">Login Method</h1>
 			<div class="text-center mb-4">
 				<select
 					onchange="showForm(this.value)"
 					class="border border-gray-300 px-2 py-1 rounded"
 				>
 					<option value="">Select login method</option>
 					<option value="form1">Login with Password</option>
 					<option value="form2">Login Passwordless</option>
 				</select>
 			</div>
 			<div class="text-center mb-4">
 				<input
 					type="button"
 					id="btn-signup"
 					value="Sign Up"
 					class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
 				/>
 			</div>
 			<form
 				id="form1"
 				class="form-container"
 			>
 				<h1 class="text-center mb-4">Email & Password</h1>
 				<div class="mb-4">
 					<label
 						for="email"
 						class="block mb-1"
 						>Email:</label
 					>
 					<input
 						type="email"
 						id="email"
 						name="email"
 						required
 						class="border border-gray-300 px-2 py-1 rounded w-full"
 					/>
 				</div>

 				<div class="mb-4">
 					<label
 						for="password"
 						class="block mb-1"
 						>Password:</label
 					>
 					<input
 						type="password"
 						id="password"
 						name="password"
 						required
 						class="border border-gray-300 px-2 py-1 rounded w-full"
 					/>
 				</div>

 				<div class="text-center">
 					<input
 						type="button"
 						id="btn-login-password"
 						value="Login"
 						class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
 					/>
 				</div>
 			</form>

 			<form
 				id="form2"
 				class="form-container"
 			>
 				<h1 class="text-center mb-4">Mobile, DOB & Postal Code</h1>
 				<div class="mb-4">
 					<label
 						for="mobile"
 						class="block mb-1"
 						>Mobile Number:</label
 					>
 					<input
 						type="tel"
 						id="mobile"
 						name="mobile"
 						pattern="[0-9]{10}"
 						required
 						class="border border-gray-300 px-2 py-1 rounded w-full"
 					/>
 				</div>

 				<div class="mb-4">
 					<label
 						for="dob"
 						class="block mb-1"
 						>Date of Birth:</label
 					>
 					<input
 						type="date"
 						id="dob"
 						name="dob"
 						required
 						class="border border-gray-300 px-2 py-1 rounded w-full"
 					/>
 				</div>

 				<div class="mb-4">
 					<label
 						for="postalcode"
 						class="block mb-1"
 						>Postal Code:</label
 					>
 					<input
 						type="text"
 						id="postalcode"
 						name="postalcode"
 						required
 						class="border border-gray-300 px-2 py-1 rounded w-full"
 					/>
 				</div>

 				<div class="mb-4">
 					<label
 						for="otpcode"
 						class="block mb-1"
 						>OTP Code:</label
 					>
 					<input
 						type="text"
 						id="otpcode"
 						name="otpcode"
 						class="border border-gray-300 px-2 py-1 rounded w-full"
 					/>
 				</div>

 				<div class="text-center">
 					<input
 						type="button"
 						id="btn-send-otp"
 						value="Send OTP"
 						class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
 					/>
 				</div>
 				<div class="text-center">
 					<input
 						type="button"
 						id="btn-verify-otp"
 						value="Verify OTP"
 						class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
 					/>
 				</div>
 			</form>
 		</div>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Auth0 Hosted Login Page</title>
	<link
	href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
	rel="stylesheet"
	/>
	<style>
	.form-container {
	display: none;
	}
	</style>
	<script>
	function showForm(formId) {
	var formContainers = document.getElementsByClassName("form-container");
	for (var i = 0; i < formContainers.length; i++) {
	formContainers[i].style.display = "none";
	}
	document.getElementById(formId).style.display = "block";
	}
	</script>
	<script src="https://cdn.auth0.com/js/auth0/9.18/auth0.min.js"></script>
	<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
	<script>
	var config = JSON.parse(
	decodeURIComponent(escape(window.atob("@@config@@")))
	);

	var leeway = config.internalOptions.leeway;
	if (leeway) {
	var convertedLeeway = parseInt(leeway);

	if (!isNaN(convertedLeeway)) {
	config.internalOptions.leeway = convertedLeeway;
	}
	}

	var params = Object.assign(
	{
	overrides: {
	__tenant: config.auth0Tenant,
	__token_issuer: config.authorizationServer.issuer,
	},
	domain: config.auth0Domain,
	clientID: config.clientID,
	redirectUri: config.callbackURL,
	responseType: "code",
	},
	config.internalOptions
	);

	var webAuth = new auth0.WebAuth(params);
	var databaseConnection = "Username-Password-Authentication";

	function loginWithPassword(e) {
	e.preventDefault();
	var button = this;
	var username = document.getElementById("email").value;
	var password = document.getElementById("password").value;
	button.disabled = true;
	webAuth.login(
	{
	realm: databaseConnection,
	username: username,
	password: password,
	},
	function (err) {
	if (err) displayError(err);
	button.disabled = false;
	}
	);
	}

	function sendOtp(e) {
	e.preventDefault();
	var button = this;
	var mobile = document.getElementById("mobile").value;
	var dob = document.getElementById("dob").value;
	var postalCode = document.getElementById("postalcode").value;
	button.disabled = true;
	webAuth.passwordlessStart(
	{
	connection: "sms",
	send: "code",
	phoneNumber: mobile,
	},
	function (err, res) {
	if (err) {
	displayError(err);
	button.disabled = false;
	return;
	}
	button.disabled = true;
	document.getElementById("btn-verify-otp").disabled = false;
	}
	);
	}

	function verifyOtp(e) {
	e.preventDefault();
	var code = document.getElementById("otpcode").value;
	var mobile = document.getElementById("mobile").value;
	var dob = document.getElementById("dob").value;
	var postalCode = document.getElementById("postalcode").value;

	// Perform authentication with the entered code
	webAuth.passwordlessLogin(
	{
	connection: "sms",
	phoneNumber: mobile,
	verificationCode: code,
	dob: dob,
	postalCode: postalCode,
	},
	function (err, res) {
	if (err) {
	displayError(err);
	return;
	}
	// Authentication successful, handle the result
	console.log("Authentication successful!", res);
	}
	);
	}

	function signup() {
	var button = this;
	var email = document.getElementById("email").value;
	var password = document.getElementById("password").value;

	button.disabled = true;
	webAuth.redirect.signupAndLogin(
	{
	connection: databaseConnection,
	email: email,
	password: password,
	},
	function (err) {
	if (err) displayError(err);
	button.disabled = false;
	}
	);
	}

	function displayError(err) {
	var errorMessage = document.getElementById("error-message");
	errorMessage.innerText = err.policy \|\| err.description;
	errorMessage.style.display = "block";
	}

	// on-load
	window.addEventListener("load", function () {
	document
	.getElementById("btn-login-password")
	.addEventListener("click", loginWithPassword);
	document
	.getElementById("btn-send-otp")
	.addEventListener("click", sendOtp);
	document
	.getElementById("btn-verify-otp")
	.addEventListener("click", verifyOtp);
	document.getElementById("btn-verify-otp").disabled = true;
	document.getElementById("btn-signup").addEventListener("click", signup);
	});
	</script>
	</head>
	<body class="flex justify-center items-center h-screen">
	<div class="w-full max-w-md">
	<div
	id="error-message"
	class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4"
	role="alert"
	style="display: none"
	></div>
	<h1 class="text-center mb-4">Login Method</h1>
	<div class="text-center mb-4">
	<select
	onchange="showForm(this.value)"
	class="border border-gray-300 px-2 py-1 rounded"
	>
	<option value="">Select login method</option>
	<option value="form1">Login with Password</option>
	<option value="form2">Login Passwordless</option>
	</select>
	</div>
	<div class="text-center mb-4">
	<input
	type="button"
	id="btn-signup"
	value="Sign Up"
	class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
	/>
	</div>
	<form
	id="form1"
	class="form-container"
	>
	<h1 class="text-center mb-4">Email & Password</h1>
	<div class="mb-4">
	<label
	for="email"
	class="block mb-1"
	>Email:</label
	>
	<input
	type="email"
	id="email"
	name="email"
	required
	class="border border-gray-300 px-2 py-1 rounded w-full"
	/>
	</div>

	<div class="mb-4">
	<label
	for="password"
	class="block mb-1"
	>Password:</label
	>
	<input
	type="password"
	id="password"
	name="password"
	required
	class="border border-gray-300 px-2 py-1 rounded w-full"
	/>
	</div>

	<div class="text-center">
	<input
	type="button"
	id="btn-login-password"
	value="Login"
	class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
	/>
	</div>
	</form>

	<form
	id="form2"
	class="form-container"
	>
	<h1 class="text-center mb-4">Mobile, DOB & Postal Code</h1>
	<div class="mb-4">
	<label
	for="mobile"
	class="block mb-1"
	>Mobile Number:</label
	>
	<input
	type="tel"
	id="mobile"
	name="mobile"
	pattern="[0-9]{10}"
	required
	class="border border-gray-300 px-2 py-1 rounded w-full"
	/>
	</div>

	<div class="mb-4">
	<label
	for="dob"
	class="block mb-1"
	>Date of Birth:</label
	>
	<input
	type="date"
	id="dob"
	name="dob"
	required
	class="border border-gray-300 px-2 py-1 rounded w-full"
	/>
	</div>

	<div class="mb-4">
	<label
	for="postalcode"
	class="block mb-1"
	>Postal Code:</label
	>
	<input
	type="text"
	id="postalcode"
	name="postalcode"
	required
	class="border border-gray-300 px-2 py-1 rounded w-full"
	/>
	</div>

	<div class="mb-4">
	<label
	for="otpcode"
	class="block mb-1"
	>OTP Code:</label
	>
	<input
	type="text"
	id="otpcode"
	name="otpcode"
	class="border border-gray-300 px-2 py-1 rounded w-full"
	/>
	</div>

	<div class="text-center">
	<input
	type="button"
	id="btn-send-otp"
	value="Send OTP"
	class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
	/>
	</div>
	<div class="text-center">
	<input
	type="button"
	id="btn-verify-otp"
	value="Verify OTP"
	class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 cursor-pointer"
	/>
	</div>
	</form>
	</div>
	</body>
	</html>