The Multi-Factor Authentication (MFA) app is a simple web application built using HTML, CSS and JavaScript with the Tailwind CSS for styling. It allows users to verify their identity using the combination of username, password and a one-time password (OTP) sent to their registered mobile device.
Approach to create Multi Factor Authentication Card:
-
Begin with a basic HTML structure, including the
<!DOCTYPE html>
declaration,<html>
,<head>
, and<body>
tags. Include a form with input fields for username, password, and OTP, along with buttons for sending OTP and verifying. - Import external resources like Tailwind CSS for styling.
- Use Tailwind CSS classes to style the form, input fields, and buttons. Apply classes for padding, border, background color, and text color to achieve a visually appealing design.
- Use JavaScript to generate a random OTP when the “Send OTP” button is clicked. Store this OTP in a variable. When the form is submitted, retrieve the entered OTP and compare it with the generated OTP. Display a success or error message based on the comparison result.
- Create a function to display messages on the page. This function should take a message and a text color as parameters and update the message element accordingly. Use this function to display success or error messages based on the OTP verification result.
Example: Implementation to design multifactor authentication template.
HTML
<!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 >
|
Output:
Article Tags :
Recommended Articles