Skip to content

Commit

Permalink
Added Frontend for Resetting Password
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sarthak1970
Sarthak1970 committed Oct 16, 2024
1 parent 755cb12 commit a86a76b
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 1 deletion.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
2 changes: 1 addition & 1 deletion public/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h4 style="text-align: center; margin: 10px 0px 6px 0px;font-size: 22px;">(for R
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<a href="">Forgot Password?</a>
<a href="password_reset.html">Forgot Password</a>
<button type="button" onclick="login()">Login</button>
<div class="register">
<p style="display: inline;">Haven't Register?&nbsp;</p><a href="signup.html">Register Now</a>
Expand Down
238 changes: 238 additions & 0 deletions public/password_reset.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/login_style.css">
<title>Reset Password</title>
<style>
.error {
color: red;
display: none;
}

.valid {
border-color: green;
}

.invalid {
border-color: red;
}

.criteria {
list-style: none;
padding-left: 0;
display: none;
}

.criteria li {
color: red;
}

.criteria li.valid {
color: green;
}
</style>
</head>

<body>
<img src="images/moon.webp" id="icon">
<div class="container">
<div class="image">
<img src="images/logo.webp" alt="">
</div>
<div id="box2">
<p>Invalid Email or Error Occurred! Please Try Again.</p>
</div>
<div id="box3">
<p>Error Occurred! Please Try Again</p>
</div>
<div class="form" id="reset">
<form id="resetForm">
<h2 style="text-align: center; margin: 10px 0px 6px 0px;font-size: 32px;">Reset Password</h2>
<h4 style="text-align: center; margin: 6px 0px 10px 0px;font-size: 22px;">Enter your email to reset your password</h4>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<span id="error-message" class="error">Invalid email domain. Please use Gmail, Outlook, Yahoo, Protonmail, Icloud, or Tutanota.</span>

<label for="password">New Password:</label>
<input type="password" id="password" name="password" placeholder="Enter the new password" required>
<ul id="password-criteria" class="criteria">
<li id="length">At least 8 characters long</li>
<li id="uppercase">At least 1 uppercase letter (A-Z)</li>
<li id="lowercase">At least 1 lowercase letter (a-z)</li>
<li id="number">At least 1 number (0-9)</li>
<li id="special">At least 1 special character (e.g., !@#$%^&*())</li>
</ul>

<button type="submit">Reset Password</button>
</form>
</div>
<div id="box1">
<p>Password Reset Successfully... Redirecting to Login Page...</p>
</div>
</div>

<script>
var icon = document.getElementById("icon");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
icon.src = "images/sun.png";
} else {
icon.src = "images/moon.png";
}
}

document.addEventListener('DOMContentLoaded', function () {
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
const passwordInput = document.getElementById('password');
const passwordCriteria = document.getElementById('password-criteria');

const lengthCriteria = document.getElementById("length");
const uppercaseCriteria = document.getElementById("uppercase");
const lowercaseCriteria = document.getElementById("lowercase");
const numberCriteria = document.getElementById("number");
const specialCriteria = document.getElementById("special");

const allowedDomains = ["gmail.com", "outlook.com", "yahoo.com", "protonmail.com", "icloud.com", "tutanota.com"];

// Show/hide email error message
emailInput.addEventListener('input', function () {
const emailValue = emailInput.value;
const emailDomain = emailValue.split('@')[1];

if (emailDomain && allowedDomains.includes(emailDomain.toLowerCase())) {
emailInput.classList.remove('invalid');
emailInput.classList.add('valid');
errorMessage.style.display = 'none';
} else {
emailInput.classList.remove('valid');
emailInput.classList.add('invalid');
errorMessage.style.display = 'inline';
}

if (emailValue === '') {
emailInput.classList.remove('valid', 'invalid');
errorMessage.style.display = 'none';
}
});

// Show password criteria when the user clicks on the password field
passwordInput.addEventListener('focus', function () {
passwordCriteria.style.display = 'block';
});

// Check if the password input is empty on blur
passwordInput.addEventListener('blur', function () {
if (passwordInput.value === '') {
passwordCriteria.style.display = 'none';
}
});

// Real-time password validation
passwordInput.addEventListener('input', function () {
const password = passwordInput.value;

// Validate length
if (password.length >= 8) {
lengthCriteria.classList.add('valid');
} else {
lengthCriteria.classList.remove('valid');
}

// Validate uppercase letter
if (/[A-Z]/.test(password)) {
uppercaseCriteria.classList.add('valid');
} else {
uppercaseCriteria.classList.remove('valid');
}

// Validate lowercase letter
if (/[a-z]/.test(password)) {
lowercaseCriteria.classList.add('valid');
} else {
lowercaseCriteria.classList.remove('valid');
}

// Validate number
if (/[0-9]/.test(password)) {
numberCriteria.classList.add('valid');
} else {
numberCriteria.classList.remove('valid');
}

// Validate special character
if (/[\W_]/.test(password)) {
specialCriteria.classList.add('valid');
} else {
specialCriteria.classList.remove('valid');
}

// Show the criteria if the password field is not empty
if (password.length > 0) {
passwordCriteria.style.display = 'block';
}
});
});

document.getElementById('resetForm').addEventListener('submit', async function (event) {
event.preventDefault();

let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
const result1 = document.getElementById('box1');
const result2 = document.getElementById('box2');
const result3 = document.getElementById('box3');
const reset = document.getElementById('reset');

const allowedDomains = ["gmail.com", "outlook.com", "yahoo.com", "protonmail.com", "icloud.com", "tutanota.com"];
const emailDomain = email.split("@").pop();

if (!allowedDomains.includes(emailDomain)) {
result2.innerHTML = "Invalid email domain. Please use Gmail, Outlook, Yahoo, Protonmail, Icloud, or Tutanota.";
result2.style.display = 'block';
setTimeout(() => {
result2.style.display = 'none';
}, 2000);
return;
}

try {
const response = await fetch('http://localhost:5000/reset_password', { // Updated URL for Flask backend
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
});

if (response.ok) {
reset.style.opacity = '0.2';
result1.style.opacity = '1';
result1.style.display = 'block';
setTimeout(() => {
window.location.href = 'login.html';
}, 2000);
} else if (response.status === 400) {
document.getElementById('password').value = '';
const message = await response.json();
result2.innerHTML = message.error;
result2.style.display = 'block';
} else {
result3.style.display = 'block';
setTimeout(() => {
result3.style.display = 'none';
}, 2000);
}
} catch (error) {
console.error('Error:', error);
}
});
</script>
</body>

</html>

0 comments on commit a86a76b

Please sign in to comment.