-
Notifications
You must be signed in to change notification settings - Fork 598
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1623 from saras-69/forg-pass
fix: Forg pass
- Loading branch information
Showing
4 changed files
with
317 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,244 @@ | ||
<!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="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: url("login/Aboe.gif") no-repeat center center fixed; | ||
background-color: rgba(255, 255, 255, 0.8); | ||
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; | ||
animation: fadeIn 1s ease-in-out; | ||
} | ||
|
||
@keyframes fadeIn { | ||
from { | ||
opacity: 0; | ||
transform: scale(0.9); | ||
} | ||
|
||
to { | ||
opacity: 1; | ||
transform: scale(1); | ||
} | ||
} | ||
|
||
.container { | ||
background-color: rgba(255, 255, 255, 0.3); | ||
backdrop-filter: blur(10px); | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 50px; | ||
border-radius: 10px; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
form { | ||
background-color: #fff; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
flex-direction: column; | ||
padding: 0 50px; | ||
height: 100%; | ||
text-align: center; | ||
} | ||
|
||
input { | ||
background-color: #eee; | ||
border-radius: 10px; | ||
border: none; | ||
padding: 12px 15px; | ||
margin: 8px 0; | ||
width: 100%; | ||
} | ||
|
||
.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: 30px; | ||
width: 100%; | ||
} | ||
|
||
.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 { | ||
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; | ||
margin-right: 100px; | ||
} | ||
|
||
.back-button i, | ||
.home-button i { | ||
margin-right: 8px; | ||
} | ||
|
||
.back-button:hover, | ||
.home-button:hover { | ||
background-color: #4bb6b7; | ||
} | ||
|
||
a { | ||
text-decoration: none; | ||
} | ||
</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" required> | ||
<button type="submit">Send Recovery Link</button> | ||
</form> | ||
<div class="button-container"> | ||
<a href="newLogin.html" class="no-underline"> | ||
<button type="button" class="back-button"> | ||
<i class="lni lni-arrow-left"></i> Back to Login | ||
</button> | ||
</a> | ||
<a href="index.html" class="no-underline"> | ||
<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; | ||
} | ||
|
||
// Prepare data for backend integration | ||
const data = { | ||
email: recoveryEmail | ||
}; | ||
|
||
// Implement your password recovery logic here | ||
fetch('YOUR_BACKEND_ENDPOINT', { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json' | ||
}, | ||
body: JSON.stringify(data) | ||
}) | ||
.then(response => response.json()) | ||
.then(data => { | ||
if (data.success) { | ||
alert("Password recovery link has been sent to your email address"); | ||
} else { | ||
alert("An error occurred. Please try again."); | ||
} | ||
}) | ||
.catch((error) => { | ||
console.error('Error:', error); | ||
alert("An error occurred. Please try again."); | ||
}); | ||
}); | ||
|
||
function validateEmail(email) { | ||
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; | ||
return re.test(email); | ||
} | ||
}); | ||
</script> | ||
</body> | ||
|
||
</html> |
Oops, something went wrong.