Skip to content

Commit

Permalink
Forgot password takes the email correctly
Browse files Browse the repository at this point in the history
  • Loading branch information
@sania-2912
sania-2912 committed Oct 31, 2024
1 parent d393add commit 8842fda
Showing 1 changed file with 31 additions and 53 deletions.
84 changes: 31 additions & 53 deletions Html-files/forgot-pass.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,20 @@
</head>
<body>
<div class="circle-container">
<!-- Circles for background animation -->
<div class="circle" style="background-color: rgb(255, 181, 107) !important; left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105) !important; left: 504px; top: 59px; scale: 0.95;"></div>
<div class="circle" style="background-color: rgb(248, 157, 99) !important; left: 504px; top: 59px; scale: 0.9;"></div>
<div class="circle" style="background-color: rgb(245, 151, 97) !important; left: 504px; top: 59px; scale: 0.85;"></div>
<div class="circle" style="background-color: rgb(239, 134, 94) !important; left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: rgb(236, 128, 93) !important; left: 504px; top: 59px; scale: 0.75;"></div>
<div class="circle" style="background-color: rgb(227, 110, 92) !important; left: 504px; top: 59px; scale: 0.7;"></div>
<div class="circle" style="background-color: rgb(223, 104, 92) !important; left: 504px; top: 59px; scale: 0.65;"></div>
<div class="circle" style="background-color: rgb(213, 88, 92) !important; left: 504px; top: 59px; scale: 0.6;"></div>
<div class="circle" style="background-color: rgb(209, 82, 92) !important; left: 504px; top: 59px; scale: 0.55;"></div>
<div class="circle" style="background-color: rgb(197, 65, 93) !important; left: 504px; top: 59px; scale: 0.5;"></div>
<div class="circle" style="background-color: rgb(192, 59, 93) !important; left: 504px; top: 59px; scale: 0.45;"></div>
<div class="circle" style="background-color: rgb(178, 44, 94) !important; left: 504px; top: 59px; scale: 0.4;"></div>
<div class="circle" style="background-color: rgb(172, 38, 94) !important; left: 504px; top: 59px; scale: 0.35;"></div>
<div class="circle" style="background-color: rgb(156, 21, 95) !important; left: 504px; top: 59px; scale: 0.3;"></div>
<div class="circle" style="background-color: rgb(149, 15, 95) !important; left: 504px; top: 59px; scale: 0.25;"></div>
<div class="circle" style="background-color: rgb(131, 0, 96) !important; left: 504px; top: 59px; scale: 0.2;"></div>
<div class="circle" style="background-color: rgb(124, 0, 96) !important; left: 504px; top: 59px; scale: 0.15;"></div>
<div class="circle" style="background-color: rgb(104, 0, 96) !important; left: 504px; top: 59px; scale: 0.1;"></div>
<!-- Additional circles... -->
<div class="circle" style="background-color: rgb(96, 0, 95) !important; left: 504px; top: 59px; scale: 0.05;"></div>
</div>
<div class="home-btn"><a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a></div>
<div class="container" style="display: flex;
align-items: center;
justify-content: center;">
<div class="container" style="display: flex; align-items: center; justify-content: center;">
<div class="card-forgot">
<h1>Forgot Password</h1>
<form id="forgotPassForm">
<div class="textfield">
<label for="email" style="color: black;">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
</div>
<button type="submit" class="btn-reset">Reset Password</button>
<p id="error-message" class="error-message"></p>
Expand All @@ -50,32 +33,17 @@ <h1>Forgot Password</h1>
</div>

<script>
const coords = { x: 0, y: 0 };
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');

const colors = [
"#ffb56b",
"#fdaf69",
"#f89d63",
"#f59761",
"#ef865e",
"#ec805d",
"#e36e5c",
"#df685c",
"#d5585c",
"#d1525c",
"#c5415d",
"#c03b5d",
"#b22c5e",
"#ac265e",
"#9c155f",
"#950f5f",
"#830060",
"#7c0060",
"#680060",
"#60005f",
"#48005f",
"#3d005e"
"#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e",
"#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c",
"#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f",
"#950f5f", "#830060", "#7c0060", "#680060", "#60005f",
"#48005f", "#3d005e"
];

circles.forEach(function (circle, index) {
Expand All @@ -87,18 +55,15 @@ <h1>Forgot Password</h1>
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;

});

function animateCircles() {

let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";

circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
Expand All @@ -113,17 +78,30 @@ <h1>Forgot Password</h1>
}

animateCircles();

// Email validation function
function validateEmail(email) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPattern.test(email);
}

// Real-time email validation
emailInput.addEventListener('input', function() {
if (validateEmail(emailInput.value)) {
errorMessage.textContent = '';
} else {
errorMessage.textContent = 'The email format is invalid. Ensure it includes “@” and a domain name (e.g., [email protected]).';
}
});

// Form submission event listener for password reset
document.getElementById('forgotPassForm').addEventListener('submit', function(event) {
event.preventDefault();

const emailInput = document.getElementById('email').value;
const emailPattern = /^[^\\s@]+@[^\s@]+\\.[^\\s@]+$/;

document.getElementById('error-message').textContent = '';
const emailInputValue = emailInput.value;

if (!emailPattern.test(emailInput)) {
document.getElementById('error-message').textContent = 'Invalid email format.';
if (!validateEmail(emailInputValue)) {
errorMessage.textContent = 'The email format is invalid. Ensure it includes “@” and a domain name (e.g., [email protected]).';
} else {
window.location.assign('reset-confirmation.html');
}
Expand Down

0 comments on commit 8842fda

Please sign in to comment.