update with password reset avalable

This commit is contained in:
BIG2EYEZ
2023-12-20 17:07:11 +08:00
parent e543c855d6
commit 68ba9f8f67
6 changed files with 867 additions and 1160 deletions

View File

@ -0,0 +1,89 @@
<!-- forgot-password.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password - Your Website</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
text-align: center;
color: #333;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.error-message {
color: red;
margin-top: 10px;
}
.success-message {
color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="forgotPasswordForm">
<form action="/forgot-password" method="post">
<% if (typeof error !== 'undefined' && error !== null && error !== '') { %>
<div class="error-message"><%= error %></div>
<% } else if (typeof success !== 'undefined' && success !== null && success !== '') { %>
<div class="success-message"><%= success %></div>
<% } %>
<div class="input-box">
<span class="details">Username or Email</span>
<input type="text" name="usernameOrEmail" placeholder="Enter your username or email" required>
</div>
<div class="button">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>

View File

@ -3,84 +3,95 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login - Eco Saver</title>
<title>Login - Eco Saver</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
text-align: center;
color: #333;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
margin: auto; /* Center the container horizontally */
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
color: #333;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
}
form {
margin-top: 20px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input {
width: calc(100% - 16px); /* Adjust the width and center the input */
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.reset-link-container {
text-align: center;
margin-top: 10px;
}
.reset-link {
color: #4caf50;
text-decoration: underline;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error-message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="loginForm" class="user-creation-container">
<div class="title">Login</div>
<div class="content">
<form action="/login" method="post">
<% if (error) { %>
<div class="error-message"><%= error %></div>
<% } %>
<div class="input-box">
<span class="details">Username</span>
<input type="text" name="username" placeholder="Enter your username" required>
</div>
<div class="input-box">
<span class="details">Password</span>
<input type="password" name="password" placeholder="Enter your password" required>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
<div class="login-container">
<h1>Login</h1>
<form action="/login" method="post">
<% if (error) { %>
<div style="color: red; text-align: center;"><%= error %></div>
<% } %>
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<button type="submit">Login</button>
</form>
<div class="reset-link-container">
<p>If you have forgotten your password, please <span class="reset-link" onclick="location.href='/forgot-password'">reset here</span>.</p>
</div>
</div>
</body>

View File

@ -0,0 +1,34 @@
<!-- reset-password.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Reset</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<% if (error) { %>
<div class="alert alert-danger"><%= error %></div>
<% } else if (success) { %>
<div class="alert alert-success"><%= success %></div>
<p>Password changed successfully. <a href="/login">Click here to log in</a>.</p>
<% } else { %>
<h2 class="mb-4">Reset Your Password</h2>
<form action="/reset-password/<%= token %>" method="post">
<div class="form-group">
<label for="password">New Password:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
</div>
<button type="submit" class="btn btn-primary">Reset Password</button>
</form>
<% } %>
</div>
</body>
</html>