Skip to content

Commit

Permalink
Forgot Password shows incorrect email FORMAT (#800)
Browse files Browse the repository at this point in the history 
Forgot Password shows incorrect email FORMAT
Description
As users type in the email field, real-time validation highlights any
format issues, prompting immediate correction without needing to submit
the form.

If an invalid format is entered, a clear and specific error message
appears (e.g., “The email format is invalid. Ensure it includes ‘@’ and
a domain name”), and the field shows a helpful placeholder (e.g.,
"[[email protected]](mailto:[email protected])") to guide users on the
correct input format.

- Closes #769 

## Type of PR
- [x] (Bug)

## Screenshots / videos (if applicable)
Before:
![Screenshot 2024-10-31
143622](https://github.com/user-attachments/assets/ab1030aa-a9d8-40d0-aa6f-5d1e9c007826)


 After:
![Screenshot 2024-10-31
143633](https://github.com/user-attachments/assets/74594069-ae70-4680-9a8e-fd98c12215e5)
![Screenshot 2024-10-31
143647](https://github.com/user-attachments/assets/e68f8885-f97c-4403-9884-bd262b9ef0b2)



## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 31, 2024
2 parents d393add + e2b04d5 commit 4d95f1f
Showing 1 changed file with 2 additions and 107 deletions.
109 changes: 2 additions & 107 deletions Html-files/forgot-pass.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,126 +9,21 @@
<title>Retro - Forgot Password</title>
</head>
<body>
<div class="circle-container">
<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>
<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>
</form>
<p class="switch-link">Remembered your password? <a href="login.html">Login</a></p>
</div>
</div>

<script>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#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) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

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;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
// 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 = '';

if (!emailPattern.test(emailInput)) {
document.getElementById('error-message').textContent = 'Invalid email format.';
} else {
window.location.assign('reset-confirmation.html');
}
});
</script>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
Expand Down

0 comments on commit 4d95f1f

Please sign in to comment.