<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>The MFA Authentication</
title
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
href
=
rel
=
"stylesheet"
>
</
head
>
<
body
class="bg-gray-100 min-h-screen flex
flex-col items-center justify-center">
<
div
class="max-w-md w-full p-8 bg-white rounded-lg
shadow-lg border-2 border-green-400">
<
h1
class
=
"text-3xl font-semibold text-center mb-8"
>
Multi-Factor Authentication
</
h1
>
<
form
id
=
"mfa-form"
class
=
"space-y-4"
>
<
div
>
<
input
type
=
"text"
id
=
"username"
name
=
"username"
placeholder
=
"Username"
class="w-full border border-gray-300 rounded-md
py-2 px-3 focus:outline-none focus:border-blue-500
text-lg">
</
div
>
<
div
>
<
input
type
=
"password"
id
=
"password"
name
=
"password"
placeholder
=
"Password"
class="w-full border border-gray-300 rounded-md
py-2 px-3 focus:outline-none focus:border-blue-500
text-lg">
</
div
>
<
div
>
<
input
type
=
"text"
id
=
"otp"
name
=
"otp"
placeholder
=
"Enter OTP"
class="w-full border border-gray-300 rounded-md
py-2 px-3 focus:outline-none focus:border-blue-500
text-lg">
</
div
>
<
button
type
=
"button"
id
=
"otp-button"
class="w-full bg-blue-500 text-white
rounded-md py-2 px-4 hover:bg-blue-600
focus:outline-none">Send OTP
</
button
>
<
button
type
=
"submit"
class="w-full bg-blue-500 text-white rounded-md
py-2 px-4 hover:bg-blue-600 focus:outline-none">
Verify
</
button
>
</
form
>
<
div
id
=
"message"
class
=
"text-center text-sm mt-4"
></
div
>
</
div
>
<
script
>
let generatedOTP = '';
document.getElementById('otp-button')
.addEventListener('click', function () {
generatedOTP = generateOTP();
alert('OTP: ' + generatedOTP);
});
document.getElementById('mfa-form')
.addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(this);
const username = formData.get('username');
const password = formData.get('password');
const enteredOTP = formData.get('otp');
if (!username || !password || !enteredOTP) {
showMessage('Please fill in all fields.', 'text-red-500');
return;
}
if (enteredOTP === generatedOTP.toString()) {
showMessage('Verification successful!', 'text-green-500');
} else {
showMessage('Invalid OTP.', 'text-red-500');
}
});
function showMessage(message, textColor) {
const messageElement = document.getElementById('message');
messageElement.textContent = message;
messageElement.classList.remove('text-red-500', 'text-green-500');
messageElement.classList.add(textColor);
}
function generateOTP() {
return Math.floor(100000 + Math.random() * 900000);
}
</
script
>
</
body
>
</
html
>