nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2024-12-22 22:45:10 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

Add change-password page and login-error page

Browse source
This commit is contained in:
Kelvin Samuel 2021-11-16 12:35:11 +07:00
parent 29fbdeedde
commit 881258f23f
11 changed files with 435 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

189
public/css/change-password.css Normal file
View file

@ -0,0 +1,189 @@
body {
font-family: 'Poppins', sans-serif;
background-color: #1b1c1e;
}
.nav-color {
background-color: #212226;
}
.form-control {
background-color: #212226;
color: white;
}
.form-control:valid {
background-color: #212226;
color: white;
}
.form-control:invalid {
background-color: #2f0001;
color: white;
}
button[type="submit"] {
margin-bottom: 4%;
}
.btn-forgot {
width: 100%;
}
.hoverforgot-1 a {
color: white;
background-color: transparent;
position: center;
margin: auto;
text-align: center;
}
.hoverforgot-1 a:hover {
background-color: transparent;
color: white;
text-decoration: underline;
}
.card {
position: center;
margin: auto;
margin-top: 3%;
text-align: center;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: #212226;
}
.icon {
position: center;
margin: auto;
width: 100%;
height: 100%;
padding-bottom: 0%;
}
.form-check {
float: left;
}
.form .options-01 {
margin-bottom: 50px;
}
.form .options-01 input {
width: 15px;
height: 15px;
margin-right: 5px;
}
.form .options-01 .remember-me {
color: #bbb;
font-size: 6pt;
display: flex;
align-items: center;
float: left;
cursor: pointer;
word-break: keep-all;
}
.form .options-01 a {
color: #888;
font-size: 14px;
font-style: italic;
float: right;
text-align: right;
text-decoration: underline;
}
.text {
margin-bottom: -6%;
}
@media screen and (max-width: 425px) {
.card a,
input {
font-size: 3vw;
}
.card-header {
font-size: 6vw;
}
}
@media screen and (min-width: 426px) {
.card a,
input {
font-size: 2vw;
}
.card-header {
font-size: 5vw;
}
}
@media screen and (min-width: 767px) {
.card a,
input {
font-size: 2vw;
}
.card-header {
font-size: 4vw;
}
}
@media screen and (min-width: 993px) {
.card a,
input {
font-size: 1vw;
}
.card-header {
font-size: 2.5vw;
}
}
@media screen and (min-width: 1400px) {
.card a,
input {
font-size: 1vw;
}
.card-header {
font-size: 2.5vw;
}
}
@media screen and (max-width: 500px) {
.form {
width: 95%;
}
.form .user-input {
width: 100%
}
.form .btn {
width: 100%;
}
}
.btn-resetpassword {
width: 100%;
background-color: darkred;
border-color: darkred;
border-radius: 100px;
}
.btn-resetpassword:hover {
background-color: red;
border-color: red;
}

110
public/css/login-error.css Normal file
View file

@ -0,0 +1,110 @@
body {
font-family: 'Poppins', sans-serif;
background-color: #1b1c1e;
}
.nav-color {
background-color: #212226;
}
.nav-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.card {
position: center;
margin: auto;
text-align: center;
border-radius: 20px;
background-color: #212226;
}
.icon {
position: center;
margin: auto;
width: 65%;
height: 65%;
padding-bottom: 0%;
padding-top: -5%;
}
.btn {
background-color: darkred;
border-color: darkred;
border-radius: 100px;
width: 50%;
}
.btn:hover {
background-color: red;
border-color: red;
}
@media screen and (max-width: 766px) {
.card h2 {
font-size: 7vw;
}
.card h5 {
font-size: 5vw;
}
.navbar-brand {
width: 11vw;
height: 11vw;
}
}
@media screen and (min-width: 767px) {
.card h2 {
font-size: 4vw;
}
.card h5 {
font-size: 2vw;
}
.navbar-brand {
width: 8vw;
height: 8vw;
}
}
@media screen and (min-width: 993px) {
.card h2 {
font-size: 3vw;
}
.card h5 {
font-size: 1.3vw;
}
.navbar-brand {
width: 6vw;
height: 6vw;
}
}
@media screen and (min-width: 1400px) {
.card h2 {
font-size: 4vw;
}
.card h5 {
font-size: 2vw;
}
.navbar-brand {
width: 6vw;
height: 6vw;
}
:focus {
outline: 0 !important;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}
}

17
public/js/change-password.js Normal file
View file

@ -0,0 +1,17 @@
function revealhidePassword1() {
const x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function revealhidePassword2() {
const x = document.getElementById("verifypassword");
if (x.type === "verifypassword") {
x.type = "text";
} else {
x.type = "verifypassword";
}
}

2
public/js/login.js
View file

@ -1,5 +1,5 @@
function revealhidePassword() {
const x = document.getElementById("exampleDropdownFormPassword1");
const x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {

4
routes/index.js
View file

@ -24,6 +24,10 @@ router.get('/otp', (_req, res) => {
res.render('pages/otp');
})
router.get('/change-password', (_req, res) => {
res.render('pages/change-password');
})
router.get('/products', (_req, res) => {
product_controller.getProducts().then(data => {
res.render('pages/products', {data: data});

26
routes/registerlogin.js
View file

@ -126,31 +126,28 @@ exports.register = async function (req, res) {
};
exports.login = async function (req, res) {
var email = req.body.email;
var password = req.body.password;
if (
!req.body.email ||
!req.body.password
) {
// Empty Fields
res.render("pages/login-error");
} else {
db_connect.query(
"SELECT * FROM users WHERE email = ?",
[email],
async function (error, response, fields) {
const passCheck = await bcrypt.compare(password, response[0].password);
if (error) {
res.send({
code: 400,
failed: "An error has occured...",
});
// Error
res.render("pages/login-error");
} else {
if (response.length > 0) {
if (passCheck) {
if (response[0].verify == 0) {
res.send({
code: 204,
success: "Sorry You havent verified your email",
});
res.render("pages/login-error");
} else {
res.send({
code: 200,
success: "Login Successful!!",
});
res.render("pages/index");
}
} else {
res.send({
@ -168,6 +165,7 @@ exports.login = async function (req, res) {
}
);
};
};
/* verification email link */
exports.verifyemail = function (req, res, next) {

2
views/layouts/footer.ejs
View file

@ -33,6 +33,8 @@
<script type="text/javascript" src="/js/bag.js"></script>
<% } else if(state == "login") { %>
<script type="text/javascript" src="/js/login.js"></script>
<% } else if(state == "change-password") { %>
<script type="text/javascript" src="/js/change-password.js"></script>
<% } else if(state == "register") { %>
<script type="text/javascript" src="/js/register.js"></script>
<% } else if(state == "otp") { %>

4
views/layouts/header.ejs
View file

@ -35,6 +35,8 @@
<link href="/css/product.css" rel="stylesheet">
<% } else if(state == "login") { %>
<link href="/css/login.css" rel="stylesheet">
<% } else if(state == "login-error") { %>
<link href="/css/login-error.css" rel="stylesheet">
<% } else if(state == "register") { %>
<link href="/css/register.css" rel="stylesheet">
<% } else if(state == "register-verification-completed") { %>
@ -45,6 +47,8 @@
<link href="/css/register-error.css" rel="stylesheet">
<% } else if(state == "forgot-password") { %>
<link href="/css/forgot-password.css" rel="stylesheet">
<% } else if(state == "change-password") { %>
<link href="/css/change-password.css" rel="stylesheet">
<% } else if(state == "otp") { %>
<link href="/css/otp.css" rel="stylesheet">
<% } else if(state == "success-add") { %>

61
views/pages/change-password.ejs Normal file
View file

@ -0,0 +1,61 @@
<!doctype html>
<html lang="en">
<%- include('../layouts/header.ejs', {title: 'Change Password', state: 'change-password'}); %>
<body>
<%- include('../layouts/navbar.ejs', {types: 'v2', title: 'Change Password'}); %>
<div class="container">
<div class="row">
<div class="col">
<div class="card text-white col-md-8 col-lg-6 col-xl-5">
<h1 class="card-header text-white">Change Password</h1>
<lottie-player autoplay background="transparent" class="icon" loop speed="5" style="height: 300px;"
src="https://assets9.lottiefiles.com/packages/lf20_rlhnbbev.json"></lottie-player>
<div class="py-3 text" style="padding: 0% 5%; text-align: center;">
<a>Enter your New Password to receive instructions on how to login page.</a>
</div>
<div class="card-body">
<form class="px-4 py-3">
<div class="form-group" style="text-align: left;">
<a data-feather="key" href="" style="font-size: 40px;"></a>
<label for="password">New Password</label>
<div class="input-group">
<input class="form-control input-sm text-center" id="password" name="password"
placeholder="New Password" type="password">
<div class="input-group-append">
<span class="input-group-text" style="background-color: #212226; color: white;">
<i class="fa fa-eye" onclick="revealhidePassword1()"></i>
</span>
</div>
</div>
<br>
<div class="form-group" style="text-align: left;">
<a data-feather="lock" href="" style="font-size: 40px;"></a>
<label for="password">Confirm New Password</label>
<div class="input-group">
<input class="form-control input-sm text-center" id="password2" name="password2"
placeholder="Confirm New Password" type="password">
<div class="input-group-append">
<span class="input-group-text" style="background-color: #212226; color: white;">
<i class="fa fa-eye" onclick="revealhidePassword2()"></i>
</span>
</div>
</div>
</div>
<a href="login"><input class="btn btn-resetpassword btn-primary" style="width: 100%;"
type="button" value="Reset Password"></a>
<br><br>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('../layouts/footer.ejs', {state: 'change-password'}); %>
</body>
</html>

33
views/pages/login-error.ejs Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<html lang="en">
<%- include('../layouts/header.ejs', {title: 'Login', state: 'login-error'}); %>
<body>
<%- include('../layouts/navbar.ejs', {types: 'v2', title: 'Login'}); %>
<br>
<div data-aos="fade-in" data-aos-delay="500" class="container">
<div class="row">
<div class="col">
<div class="card col-md-6 col-lg-6 col-xl-8">
<div class="card-header" style="color: cyan;">
<h2>ERROR</h2>
</div>
<lottie-player style="display: -webkit-box;-webkit-box-pack: center;" autoplay background="transparent" class="icon" loop speed="1"
src="https://assets1.lottiefiles.com/packages/lf20_gzlupphk.json"></lottie-player>
<div class="card-body">
<h5 class="card-text" style="color: cyan;">An error has occured... Make sure to check if you have empty fields, or if your email has been login before. Click the button below to get back to the login page.</h5>
<br style="display: block;content: ' ';margin: 1vw 0;line-height: 1vw;">
<a class="btn btn-primary" href="login">Login</a>
</div>
</div>
</div>
</div>
</div>
<%- include('../layouts/footer.ejs', {state: 'login-error'}); %>
</body>
</html>

3
views/pages/otp.ejs
View file

@ -38,7 +38,8 @@
</div>
<div class="mt-3 mb-5">
<button class="btn btn-success px-4 verify-btn" style="width: 65%;">Verify</button>
<a href="change-password"><input class="btn btn-success btn-primary verify-btn" style="width: 65%;"
type="button" value="Verify"></a>
</div>
</div>
</div>