Skip to content

Commit

Permalink
Merge pull request #1623 from saras-69/forg-pass
Browse files Browse the repository at this point in the history 
fix: Forg pass
  • Loading branch information
@apu52
apu52 authored Nov 8, 2024
2 parents ce9ac47 + 2d0b1cc commit 74e1043
Show file tree
Hide file tree
Showing 4 changed files with 317 additions and 71 deletions.
244 changes: 244 additions & 0 deletions forgotPassword.html
View file
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>
Loading

0 comments on commit 74e1043

Please sign in to comment.