222 lines
12 KiB
HTML
222 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: 'Arimo', sans-serif;
|
|
--font-sans: 'Arimo';
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
font-family: 'Libre Franklin', sans-serif;
|
|
--font-sans: 'Libre Franklin';
|
|
}
|
|
</style>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: 'Arimo', sans-serif;
|
|
--font-sans: 'Arimo';
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
font-family: 'Libre Franklin', sans-serif;
|
|
--font-sans: 'Libre Franklin';
|
|
}
|
|
</style>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="dark flex items-center min-h-screen p-4 sm:p-6 bg-gray-900">
|
|
<div class="mx-auto w-full max-w-md space-y-8">
|
|
<header class="text-center">
|
|
<div class="space-y-2">
|
|
<h1 class="text-3xl font-bold text-white">Forgot password</h1>
|
|
<p class="text-gray-500 dark:text-gray-400">Enter your email below to reset your password</p>
|
|
</div>
|
|
</header>
|
|
<form class="space-y-4" method="post" action="">
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white" for="password">Password</label>
|
|
<input type="password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white" id="password" name="password" required />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white" for="confirmPassword">Confirm Password</label>
|
|
<input type="password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white" id="confirmPassword" required />
|
|
</div>
|
|
<div class="flex justify-start mt-3 ml-4 p-1">
|
|
<ul>
|
|
<li class="flex items-center py-1">
|
|
<div id="matchSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
|
|
<svg id="matchSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path id="matchGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
<path id="matchBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<span id="matchStatusText" class="font-medium text-sm ml-3 text-red-700"> Passwords do not match</span>
|
|
</li>
|
|
<li class="flex items-center py-1">
|
|
<div id="lengthSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
|
|
<svg id="lengthSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path id="lengthGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
<path id="lengthBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<span id="lengthStatusText" class="font-medium text-sm ml-3 text-red-700"> Password length must be at least 8 characters</span>
|
|
</li>
|
|
<li class="flex items-center py-1">
|
|
<div id="requirementsSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
|
|
<svg id="requirementsSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path id="requirementsGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
<path id="requirementsBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<span id="requirementsStatusText" class="font-medium text-sm ml-3 text-red-700">The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="bg-slate-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full" type="submit" id="submit" name="submit" disabled>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var isMatch = false
|
|
var isValid = false
|
|
var isSecure = false
|
|
function validatePasswords() {
|
|
var password = document.getElementById('password').value;
|
|
var confirmPassword = document.getElementById('confirmPassword').value;
|
|
var matchGoodPath = document.getElementById('matchGoodPath');
|
|
var matchBadPath = document.getElementById('matchBadPath');
|
|
var lengthGoodPath = document.getElementById('lengthGoodPath');
|
|
var lengthBadPath = document.getElementById('lengthBadPath');
|
|
var requirementsGoodPath = document.getElementById('requirementsGoodPath');
|
|
var requirementsBadPath = document.getElementById('requirementsBadPath');
|
|
var matchSvgContainer = document.getElementById('matchSvgContainer');
|
|
var lengthSvgContainer = document.getElementById('lengthSvgContainer');
|
|
var requirementsSvgContainer = document.getElementById('requirementsSvgContainer');
|
|
var matchStatusText = document.getElementById('matchStatusText');
|
|
var lengthStatusText = document.getElementById('lengthStatusText');
|
|
var requirementsStatusText = document.getElementById('requirementsStatusText');
|
|
var symbolRegex = /[!@#$%^&*]/;
|
|
var uppercaseRegex = /[A-Z]/;
|
|
var numberRegex = /\d/g;
|
|
|
|
|
|
if (password === confirmPassword && password.length > 0 && confirmPassword.length > 0 && password.length === confirmPassword.length) {
|
|
matchSvgContainer.classList.remove('bg-red-200');
|
|
matchSvgContainer.classList.add('bg-green-200');
|
|
matchStatusText.classList.remove('text-red-700');
|
|
matchStatusText.classList.add('text-green-700');
|
|
matchGoodPath.style.display = 'inline';
|
|
matchBadPath.style.display = 'none';
|
|
matchStatusText.textContent = "Passwords match";
|
|
console.log("anjay")
|
|
isMatch = true
|
|
} else {
|
|
matchSvgContainer.classList.remove('bg-green-200');
|
|
matchSvgContainer.classList.add('bg-red-200');
|
|
matchStatusText.classList.remove('text-green-700');
|
|
matchStatusText.classList.add('text-red-700');
|
|
matchGoodPath.style.display = 'none';
|
|
matchBadPath.style.display = 'inline';
|
|
matchStatusText.textContent = "Passwords do not match";
|
|
isMatch = false
|
|
}
|
|
|
|
if (password.length >= 8) {
|
|
lengthSvgContainer.classList.remove('bg-red-200');
|
|
lengthSvgContainer.classList.add('bg-green-200');
|
|
lengthStatusText.classList.remove('text-red-700');
|
|
lengthStatusText.classList.add('text-green-700');
|
|
lengthGoodPath.style.display = 'inline';
|
|
lengthBadPath.style.display = 'none';
|
|
lengthStatusText.textContent = "Password length meets requirement";
|
|
isValid = true
|
|
} else {
|
|
lengthSvgContainer.classList.remove('bg-green-200');
|
|
lengthSvgContainer.classList.add('bg-red-200');
|
|
lengthStatusText.classList.remove('text-green-700');
|
|
lengthStatusText.classList.add('text-red-700');
|
|
lengthGoodPath.style.display = 'none';
|
|
lengthBadPath.style.display = 'inline';
|
|
lengthStatusText.textContent = "Password length must be at least 8 characters";
|
|
isValid = false
|
|
}
|
|
|
|
var symbolCheck = symbolRegex.test(password);
|
|
var uppercaseCheck = uppercaseRegex.test(password);
|
|
var numberCount = (password.match(numberRegex) || []).length;
|
|
|
|
if (symbolCheck && uppercaseCheck && numberCount >= 3) {
|
|
requirementsSvgContainer.classList.remove('bg-red-200');
|
|
requirementsSvgContainer.classList.add('bg-green-200');
|
|
requirementsStatusText.classList.remove('text-red-700');
|
|
requirementsStatusText.classList.add('text-green-700');
|
|
requirementsGoodPath.style.display = 'inline';
|
|
requirementsBadPath.style.display = 'none';
|
|
requirementsStatusText.textContent = "Password meets additional requirements";
|
|
isSecure = true
|
|
} else {
|
|
requirementsSvgContainer.classList.remove('bg-green-200');
|
|
requirementsSvgContainer.classList.add('bg-red-200');
|
|
requirementsStatusText.classList.remove('text-green-700');
|
|
requirementsStatusText.classList.add('text-red-700');
|
|
requirementsGoodPath.style.display = 'none';
|
|
requirementsBadPath.style.display = 'inline';
|
|
requirementsStatusText.textContent = "The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers";
|
|
isSecure = false
|
|
}
|
|
|
|
console.log(isSecure)
|
|
console.log(isValid)
|
|
console.log(isSecure)
|
|
if (isSecure && isValid && isSecure && password === confirmPassword) {
|
|
document.getElementById("submit").disabled = false;
|
|
} else {
|
|
document.getElementById("submit").disabled = true;
|
|
}
|
|
}
|
|
|
|
document.getElementById('password').addEventListener('input', validatePasswords);
|
|
document.getElementById('confirmPassword').addEventListener('input', validatePasswords);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |