Skip to content

Commit

Permalink
Add "Forgot Password" Feature apu52#1614
Browse files Browse the repository at this point in the history
  • Loading branch information
@saras-69
saras-69 committed Nov 3, 2024
1 parent 7680cdf commit 2f00946
Show file tree
Hide file tree
Showing 4 changed files with 244 additions and 71 deletions.
171 changes: 171 additions & 0 deletions forgotPassword.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password</title>
<link rel="icon" type="image/x-icon" href="log/favicon.ico">
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./login/login.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins");

* {
box-sizing: border-box;
}

body {
display: flex;
background-color: #f6f5f7;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Poppins", sans-serif;
overflow: hidden;
height: 100vh;
background: url("login/Aboe.gif") no-repeat center center fixed;
background-size: cover;
opacity: 1.2;
}

.main-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
background: url("login/Aboe.gif");
border-radius: 25px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
padding: 20px;
}

.container {
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;

padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-container {
display: flex;
flex-direction: column;
background-color: transparent;
align-items: center;
}

.form-container h1 {
margin-bottom: 20px;
}

.form-container input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.form-container button {
padding: 10px 20px;
border-radius: 25px;
font-size: 16px;
border: none;
cursor: pointer;
background-color: #4bb6b7;
color: white;
}

.form-container button:hover {
background-color: #4bb6b7;
}

.button-container {
display: flex;
justify-content: space-between 100px;
margin-top: 20px;
width: 100%;
}

.back-button,
.home-button {
padding: 10px 20px;
border-radius: 50%;
font-size: 16px;
border: none;
cursor: pointer;
background-color: #4bb6b7;
color: white;
text-decoration: none;
display: flex;
align-items: center;
}

.back-button i,
.home-button i {
margin-right: 8px;
}

.back-button:hover,
.home-button:hover {
background-color: #4bb6b7;
}
</style>
</head>

<body>
<div class="main-container">
<div class="container">
<div class="form-container">
<form id="forgotPasswordForm">
<h1>Forgot Password</h1>
<input type="email" placeholder="Enter your email" id="recoveryEmail">
<button type="submit">Send Recovery Link</button>
</form>
<div class="button-container">
<a href="newLogin.html">
<button type="button" class="back-button">
<i class="lni lni-arrow-left"></i> Back to Login
</button>
</a>
<a href="index.html">
<button type="button" class="home-button">
<i class="lni lni-home"></i> Home
</button>
</a>
</div>
</div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("forgotPasswordForm").addEventListener("submit", function (event) {
event.preventDefault();
const recoveryEmail = document.getElementById("recoveryEmail").value;
if (!validateEmail(recoveryEmail)) {
alert("Please enter a valid email address");
return;
}

// Implement your password recovery logic here
alert("Password recovery link has been sent to your email address");
});

function validateEmail(email) {
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return re.test(email);
}
});
</script>
</body>

</html>
83 changes: 42 additions & 41 deletions login/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ body {
opacity: 1.2;

}

h1 {
font-weight: 700;
letter-spacing: -1.5px;
Expand Down Expand Up @@ -116,26 +117,26 @@ button.ghost {
color: #fff;
}

button.ghost i{
button.ghost i {
position: absolute;
opacity: 0;
transition: 0.3s ease-in-out;
}

button.ghost i.register{
button.ghost i.register {
right: 70px;
}

button.ghost i.login{
button.ghost i.login {
left: 70px;
}

button.ghost:hover i.register{
button.ghost:hover i.register {
right: 40px;
opacity: 1;
}

button.ghost:hover i.login{
button.ghost:hover i.login {
left: 40px;
opacity: 1;
}
Expand Down Expand Up @@ -204,6 +205,7 @@ input {
}

@keyframes show {

0%,
49.99% {
opacity: 0;
Expand Down Expand Up @@ -253,11 +255,9 @@ input {
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(
to top,
rgba(46, 94, 109, 0.4) 40%,
rgba(46, 94, 109, 0)
);
background: linear-gradient(to top,
rgba(46, 94, 109, 0.4) 40%,
rgba(46, 94, 109, 0));
}

.container.right-panel-active .overlay {
Expand Down Expand Up @@ -314,60 +314,60 @@ input {



#login-section{
#login-section {
display: flex;
align-items: center;
width: 100%;
}
}

#loginPassword{
#loginPassword {
position: relative;
}
}

#toggleLoginPassword{
#toggleLoginPassword {
position: absolute;
background: transparent;
border: none;
color: #505050;
right: 15%;
padding:2px;
padding: 2px;
transition: 0.3s ease-in-out;
}
}



#register-section{
#register-section {
display: flex;
align-items: center;
width: 100%;
}
}

#registerPassword{
#registerPassword {
position: relative;
}
}

#toggleRegisterPassword{
#toggleRegisterPassword {
position: absolute;
background: transparent;
border: none;
color: #505050;
right: 15%;
padding:2px;
padding: 2px;
transition: 0.3s ease-in-out;
}


/* Add styles for the success banners */
.success-banner {
display: none;
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
}


/* Add styles for the success banners */
.success-banner {
display: none;
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}

/* Add styles for the success banners */
.decline-banner {
Expand All @@ -387,12 +387,13 @@ input {
color: white;
background-color: #1877F2;
}

.social-container .goog:hover {
color: white;
background-color: #DB4437;
}

.social-container .lin:hover {
color: white;
background-color: #0A66C2;
}

}
29 changes: 14 additions & 15 deletions login/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("DOMContentLoaded", function () {
const registerButton = document.getElementById("register");
const loginButton = document.getElementById("login");
const container = document.getElementById("container");
Expand Down Expand Up @@ -35,23 +35,22 @@ function togglePasswordVisibility(buttonId, inputId, iconId) {
const icon = document.getElementById(iconId);

toggleButton.addEventListener('click', function (e) {
// Toggle the type attribute
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

// Toggle the icon
if (type === 'password') {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
} else {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
}
// Toggle the type attribute
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

// Toggle the icon
if (type === 'password') {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
} else {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
}
});
}

togglePasswordVisibility('toggleLoginPassword', 'loginPassword', 'loginIcon');
togglePasswordVisibility('toggleRegisterPassword', 'registerPassword', 'registerIcon');



Loading

0 comments on commit 2f00946

Please sign in to comment.