Skip to content

Commit

Permalink
reset-pass
Browse files Browse the repository at this point in the history
  • Loading branch information
@pinakviramgama
pinakviramgama committed Nov 6, 2024
1 parent 397642f commit 8b29720
Show file tree
Hide file tree
Showing 2 changed files with 237 additions and 39 deletions.
139 changes: 139 additions & 0 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Reset</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #fff;
padding: 20px;
width: 300px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

h2 {
margin-top: 0;
}

form {
display: flex;
flex-direction: column;
}

input[type="email"], input[type="password"] {
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#message {
margin-top: 10px;
font-size: 1.2em;
color: green;
}

</style>
</head>
<body>

<div class="container" id="emailFormContainer">
<h2>Forgot Your Password?</h2>
<p>Enter your email to reset your password:</p>
<form id="emailForm">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required>
<button type="submit">Send Reset Link</button>
</form>
<div id="emailMessage"></div>
</div>

<div class="container" id="resetFormContainer" style="display: none;">
<h2>Reset Your Password</h2>
<p>Enter your new password:</p>
<form id="resetForm">
<label for="newPassword">New Password:</label>
<input type="password" id="newPassword" placeholder="Enter your new password" required>

<label for="confirmPassword">Confirm New Password:</label>
<input type="password" id="confirmPassword" placeholder="Confirm new password" required>

<button type="submit">Reset Password</button>
</form>
<div id="resetMessage"></div>
</div>

<script>
// Simulate sending a reset link to the email address
document.getElementById("emailForm").addEventListener("submit", function(event) {
event.preventDefault();

const email = document.getElementById("email").value;
const emailMessageDiv = document.getElementById("emailMessage");

// Simulate the email being sent
setTimeout(() => {
// In a real app, an email would be sent here
emailMessageDiv.innerText = `A password reset link has been sent to ${email}. Please check your inbox.`;
emailMessageDiv.style.color = "green";

// Show reset password form
document.getElementById("emailFormContainer").style.display = "none";
document.getElementById("resetFormContainer").style.display = "block";
}, 1500); // Simulate a delay before showing reset form
});

// Handle reset password form submission
document.getElementById("resetForm").addEventListener("submit", function(event) {
event.preventDefault();

const newPassword = document.getElementById("newPassword").value;
const confirmPassword = document.getElementById("confirmPassword").value;
const resetMessageDiv = document.getElementById("resetMessage");

// Validation: Check if the new password and confirm password match
if (newPassword !== confirmPassword) {
resetMessageDiv.innerText = "New passwords do not match. Please try again.";
resetMessageDiv.style.color = "red";
return;
}

// Simulate password reset success
setTimeout(() => {
resetMessageDiv.innerText = "Your password has been successfully reset!";
resetMessageDiv.style.color = "green";

// Clear the form fields
document.getElementById("resetForm").reset();
}, 1500); // Simulate an API delay (1.5 seconds)
});
</script>

</body>
</html>
137 changes: 98 additions & 39 deletions passwordRecovery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,109 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Reset</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
background: linear-gradient(135deg, #4b6cb7, #182848);
display:block;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
color: #333;
}

.container {
background-color: #fff;
padding: 20px;
width: 300px;
padding: 30px 40px;
width: 350px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-radius: 10px;
transition: 0.3s;
margin-top: 300px;
margin-left: 800px;
}

.container h2 {
font-size: 1.5em;
color: #333;
margin-bottom: 10px;
}

h2 {
margin-top: 0;
p {
color: #666;
margin-bottom: 20px;
font-size: 0.95em;
}

form {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}

input[type="email"], input[type="password"] {
padding: 10px;
margin: 10px 0;
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 4px;
border-radius: 5px;
font-size: 1em;
transition: border-color 0.3s;
}

input[type="email"]:focus, input[type="password"]:focus {
border-color: #4b6cb7;
outline: none;
}

button {
padding: 10px;
background-color: #007bff;
color: white;
padding: 12px;
background-color: #4b6cb7;
color: #fff;
border: none;
border-radius: 4px;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
background-color: #3b5a9b;
}

#message {
margin-top: 10px;
font-size: 1.2em;
color: green;
font-size: 1em;
margin-top: 15px;
color: #28a745;
}

#resetMessage {
font-size: 1em;
color: #28a745;
}

/* Centered Home Link */
.home-button {
display: block;
text-align: center;
margin: 20px auto 0;
color: #fff;
text-decoration: none;
padding: 10px 15px;
background-color: #4b6cb7;
border-radius: 5px;
transition: background-color 0.3s;
width: 155px;
}

.home-button:hover {
background-color: #3b5a9b;
}
</style>
</head>
<body>
Expand All @@ -67,73 +116,83 @@
<h2>Forgot Your Password?</h2>
<p>Enter your email to reset your password:</p>
<form id="emailForm">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required>
<button type="submit">Send Reset Link</button>
</form>
<div id="emailMessage"></div>
<div id="emailMessage" aria-live="polite"></div>
</div>

<div class="container" id="resetFormContainer" style="display: none;">
<h2>Reset Your Password</h2>
<p>Enter your new password:</p>
<form id="resetForm">
<label for="newPassword">New Password:</label>
<input type="password" id="newPassword" placeholder="Enter your new password" required>

<label for="confirmPassword">Confirm New Password:</label>
<input type="password" id="confirmPassword" placeholder="Confirm new password" required>

<button type="submit">Reset Password</button>
</form>
<div id="resetMessage"></div>
<div id="resetMessage" aria-live="polite"></div>
</div>

<script>
// Validate email format
function isValidEmail(email) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPattern.test(email);
}

// Validate password length
function isValidPassword(password) {
return password.length >= 3;
}

// Simulate sending a reset link to the email address
document.getElementById("emailForm").addEventListener("submit", function(event) {
event.preventDefault();

const email = document.getElementById("email").value;
const emailMessageDiv = document.getElementById("emailMessage");

// Simulate the email being sent
if (!isValidEmail(email)) {
emailMessageDiv.innerText = "Please enter a valid email address.";
emailMessageDiv.style.color = "red";
return;
}

setTimeout(() => {
// In a real app, an email would be sent here
emailMessageDiv.innerText = `A password reset link has been sent to ${email}. Please check your inbox.`;
emailMessageDiv.style.color = "green";

// Show reset password form
document.getElementById("emailFormContainer").style.display = "none";
document.getElementById("resetFormContainer").style.display = "block";
}, 1500); // Simulate a delay before showing reset form
}, 1500);
});

// Handle reset password form submission
document.getElementById("resetForm").addEventListener("submit", function(event) {
event.preventDefault();

const newPassword = document.getElementById("newPassword").value;
const confirmPassword = document.getElementById("confirmPassword").value;
const resetMessageDiv = document.getElementById("resetMessage");

// Validation: Check if the new password and confirm password match
if (!isValidPassword(newPassword)) {
resetMessageDiv.innerText = "Password must be at least 8 characters long.";
resetMessageDiv.style.color = "red";
return;
}

if (newPassword !== confirmPassword) {
resetMessageDiv.innerText = "New passwords do not match. Please try again.";
resetMessageDiv.innerText = "Passwords do not match. Please try again.";
resetMessageDiv.style.color = "red";
return;
}

// Simulate password reset success
setTimeout(() => {
resetMessageDiv.innerText = "Your password has been successfully reset!";
resetMessageDiv.style.color = "green";

// Clear the form fields
document.getElementById("resetForm").reset();
}, 1500); // Simulate an API delay (1.5 seconds)
}, 1500);
});
</script>

<a href="index.html" class="home-button">Go to Home</a>
</body>
</html>

0 comments on commit 8b29720

Please sign in to comment.