Skip to content

Commit

Permalink
Merge pull request #97 from iAmDiksha/fogrot_password
Browse files Browse the repository at this point in the history
Issue #63 solved. Implemented "Forgot Password" Feature on Login Page.
  • Loading branch information
swaraj-das authored Oct 4, 2024
2 parents 64c0c24 + 5bf1906 commit 3d8f56f
Show file tree
Hide file tree
Showing 3 changed files with 335 additions and 1 deletion.
271 changes: 271 additions & 0 deletions login/forgot.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*to change bg image use here*/
body {
background: url("https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center center fixed;
background-size: cover;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
text-shadow: 1px 1px 2px #000;
}
.login-container {
backdrop-filter: blur(10px);
opacity: 0.85;
background-color: rgba(0, 0, 0, 0);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
text-align: center;
max-width: 40px;
width: 100%;
animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 0.75;
transform: scale(10);
}
}

h1 {
margin-bottom: 2rem;
font-size: 1.5rem;
color: #fb5283;
}

.input-group {
margin-bottom: 1.5rem;
text-align: left;
}

label {
display: block;
margin-bottom: 0.5rem;
font-size: 16px;
}

input[type="text"], input[type="password"] {
width: 100%;
padding: 0.75rem;
border: 2px solid #6a1b9a;
border-radius: 5px;
background-color: #3a3f44;
color: white;
font-family: 'Press Start 2P', cursive;
font-size: 0.875rem;
}

input[type="text"]:focus, input[type="password"]:focus {
outline: none;
border-color: #ba68c8;
background-color: #2a2e32;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* and here for bg image*/
body {
background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
background-size: cover;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
text-shadow: 1px 1px 2px #000;
}

.login-container {
background-color: rgba(0, 0, 0, 0.8);
padding: 5rem;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
text-align: center;
max-width: 500px;
width: 100%;
animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 0.75;
transform: scale(1);
}
}

h1 {
margin-bottom: 2rem;
font-size: 1.5rem;
color: #fb5283;
}

.input-group {
margin-bottom: 1.5rem;
text-align: left;
}

label {
display: block;
margin-bottom: 0.5rem;
font-size: 16px;
}

input[type="email"]{
width: 100%;
padding: 0.75rem;
border: 2px solid #6a1b9a;
border-radius: 5px;
background-color: #3a3f44;
color: white;
font-family: 'Press Start 2P', cursive;
font-size: 0.875rem;
}

input[type="email"]:focus{
outline: none;
border-color: #ba68c8;
background-color: #2a2e32;
}

body{
text-align:center;
background-color:#ffcc8e;
}

.button{
position:relative;
display:inline-block;
margin:15px;
}

/*reset button*/
.button a{
color:white;
font-family:Helvetica, sans-serif;
font-weight:bold;
font-size:20px;
text-align: center;
text-decoration:none;
background-color:#FFA12B;
display:block;
position:relative;
padding:15px 50px;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: 0px 1px 0px #000;
filter: dropshadow(color=#000, offx=0px, offy=1px);

-webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
-moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.button a:active{
top:10px;
background-color:#F78900;

-webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
-moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}

.button:after{
content:"";
height:100%;
width:100%;
padding:4px;
position: absolute;
bottom:-15px;
left:-4px;
z-index:-1;
background-color:#2B1800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.links {
margin-top: 18px;
display: flex;
justify-content: space-between;
}

.links a {
color: #fb5283;
text-decoration: none;
transition: color 0.3s;
font-size: 18px;
flex: 1;
text-align: center;
}

.links a:first-child {
font-size: 15px;
}

.links a:first-child: hover{
text-decoration: underline;
}

.links a:not(:last-child) {
margin-right: 20px;
}

.links a: hover {
color: #ff80ab;
}


.links {
margin-top: 18px;
display: flex;
justify-content: space-between;
}

.links a {
color: #fb5283;
text-decoration: none;
transition: color 0.3s;
font-size: 18px;
flex: 1;
text-align: center;
}

.links a:first-child {
font-size: 15px;
}

.links a:first-child: hover{
text-decoration: underline;
}

.links a:not(:last-child) {
margin-right: 20px;
}

.links a: hover {
color: #ff80ab;
}
63 changes: 63 additions & 0 deletions login/forgot.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collect your GamingTools</title>
<link rel="stylesheet" href="forgot.css">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
</head>

<body>
<div class="login-container">
<h1>Forgot Password</h1>
<form action="#" method="post">
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<span id="error-message"></span>
<div ontouchstart="">
<div class="button">
<a href="#">Reset Password</a>
</div>
</div>
</form>
<div class="links">
<a href="login.html">Back to Login</a>
</div>
</div>

<script>
let btn = document.querySelector(".button");
const errorMessage = document.getElementById('error-message');
const emailInput = document.getElementById('email');

function isValidEmail(email) {
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(email);
}

btn.addEventListener("click", (e) => {
e.preventDefault(); // prevent form submission
const emailValue = emailInput.value.trim();

if (emailValue === '') {
errorMessage.textContent = 'First write your email';
errorMessage.style.color = 'red';
} else if (!isValidEmail(emailValue)) {
errorMessage.textContent = 'Invalid email address';
errorMessage.style.color = 'red';
} else {
// submit the form or perform the password reset logic here
errorMessage.textContent = '';
setTimeout(() => {
alert("Please check your Email to reset your password.")
}, 300)
}
})
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion login/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h1>Login to Your Account</h1>
</div>
</form>
<div class="links">
<a href="#">Forgot Password?</a>
<a href="forgot.html">Forgot Password?</a>
<a href="../SignUp/signup.html">Sign Up</a>
</div>
</div>
Expand Down

0 comments on commit 3d8f56f

Please sign in to comment.