rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added in base code for reset email

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2022-08-07 22:34:31 +01:00
parent c28e02279a
commit d8e16e8de1
16 changed files with 411 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/css/login.css
+39 -4
View File
@@ -17,7 +17,7 @@ main {
background-image: radial-gradient(var(--primaryDefault), hsl(80, 50%, 30%));
}
div#login {
div.container {
display: flex;
flex-direction: column;
justify-content: center;
@@ -28,9 +28,28 @@ div#login {
-moz-border-radius: 1em;
border-radius: 1em;
box-shadow: 0 6px 4px 0 var(--mutedBlack);
-webkit-transform: translateX(-150vw);
-moz-transform: translateX(-150vw);
-ms-transform: translateX(-150vw);
-o-transform: translateX(-150vw);
transform: translateX(-150vw);
-webkit-transition: transform 400ms ease-in-out;
-moz-transition: transform 400ms ease-in-out;
-ms-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
overflow: hidden;
}
div#login form {
div.container.shown {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
div.container form {
display: flex;
flex-direction: column;
justify-content: center;
@@ -40,7 +59,7 @@ div#login form {
div#login #password {
font-family: Verdana, serif;
letter-spacing: 0.125em;
letter-spacing: 0.125em;
}
div#login input[type=submit]{
@@ -97,4 +116,20 @@ div.error.hidden {
div.error button:hover {
text-shadow: -1px 2px var(--mutedBlack);
}
}
div.btnContainer {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
div.btnContainer a:not(.btn) {
color: #000000;
}
div.btnContainer a.btn {
align-self: flex-end;
}
src/editor/index.html
+75 -2
View File
@@ -3,11 +3,13 @@
<head>
<meta charset="UTF-8">
<title>Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<div id="login">
<div id="login" class="container shown">
<h1>Login To Editor</h1>
<form action="" method="POST">
@@ -27,7 +29,78 @@
<div></div>
</div>
<input type="submit" value="Submit">
<div class="btnContainer">
<input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut">
<a href="#" id="resetPwd">Reset Password</a>
</div>
</form>
</div>
<div id="resetPassword" class="container" style="display: none; transform: translateX(150vw)">
<h1>Reset Password</h1>
<form action="#" method="POST">
<div class="formControl">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div class="error hidden" id="resetError">
<button class="close" type="button">&times;</button>
<div></div>
</div>
<div class="btnContainer">
<input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut">
<a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="loginBtn">Login</a>
</div>
</form>
</div>
<div id="checkResetCode" class="container" style="display: none; transform: translateX(150vw)">
<h1>Check Reset Code</h1>
<form action="#" method="POST">
<div class="formControl">
<label for="code">Code</label>
<input type="text" id="code" name="code">
</div>
<div class="error hidden" id="codeError">
<button class="close" type="button">&times;</button>
<div></div>
</div>
<div class="btnContainer">
<input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut">
<a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="resendEmail">Resend Email</a>
</div>
</form>
</div>
<div id="changePassword" class="container" style="display: none; transform: translateX(150vw)">
<h1>Reset Password</h1>
<form action="" method="POST">
<div class="formControl">
<label for="pass">Password</label>
<input type="password" name="pass" id="pass">
</div>
<div class="formControl">
<label for="rePass">Password</label>
<input type="password" name="rePass" id="rePass">
</div>
<div class="error hidden" id="changeError">
<button class="close">&times;</button>
<div></div>
</div>
<div class="btnContainer">
<input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut">
<a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut">Login</a>
</div>
</form>
</div>
</main>
src/editor/js/index.js
+73 -9
View File
@@ -1,5 +1,5 @@
document.addEventListener("DOMContentLoaded", e =>
document.addEventListener("DOMContentLoaded", _ =>
{
// check if the user is logged in and if so load the editor
fetch("/api/user/isLoggedIn").then(res =>
@@ -11,10 +11,20 @@ document.addEventListener("DOMContentLoaded", e =>
});
});
function showErrorMessage(message)
function showErrorMessage(message, form)
{
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerText = message;
document.querySelector(`#${form}Error`).classList.remove("hidden");
document.querySelector(`#${form}Error div`).innerText = message;
}
function switchView(from, to)
{
document.querySelector(from).classList.toggle("shown");
setTimeout(() => document.querySelector(from).style.transform = "translateX(150vw)", 500);
setTimeout(() => document.querySelector(from).style.display = "none", 500);
setTimeout(() => document.querySelector(to).style.removeProperty("display"), 200);
setTimeout(() => document.querySelector(to).classList.toggle("shown"), 300);
setTimeout(() => document.querySelector(to).style.removeProperty("transform"), 400);
}
document.querySelector("#login form").addEventListener("submit", e =>
@@ -38,17 +48,71 @@ document.querySelector("#login form").addEventListener("submit", e =>
}
if (res.status === 400)
{
showErrorMessage("Please type in a username and password.");
showErrorMessage("Please type in a username and password.", "login");
return;
}
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerHTML = "Invalid username or password";
showErrorMessage("Invalid username or password.", "login");
});
return;
}
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerHTML = "Please type in a username and password";
showErrorMessage("Please type in a username and password.", "login");
});
document.querySelector("#loginError .close").addEventListener("click", () =>
document.querySelector("#loginError").classList.toggle("hidden"));
// showing and hiding different forms
document.querySelector("#resetPwd").addEventListener("click", () =>
{
switchView("#login", "#resetPassword");
});
document.querySelector("#loginBtn").addEventListener("click", () =>
{
switchView("#resetPassword", "#login");
});
document.querySelector("#resetPassword form").addEventListener("submit", e =>
{
e.preventDefault();
let resetData = new FormData();
if (e.target.email === "")
{
showErrorMessage("Please type in your email.", "reset");
return;
}
window.email = e.target.email.value;
resetData.append("email", e.target.email.value);
fetch(`/api/user/checkResetEmail/${e.target.email.value}`).then(res =>
{
if (res.ok)
{
// show check code form
switchView("#resetPassword", "#checkResetCode");
}
showErrorMessage("Invalid email.", "reset");
});
});
document.querySelector("#checkResetCode form").addEventListener("submit", e =>
{
e.preventDefault();
let resetCode = new FormData();
if (e.target.code.value === "")
{
showErrorMessage("Please type in your reset code.", "check");
return;
}
resetCode.append("code", e.target.code.value);
fetch(`/api/user/checkResetCode//${e.target.code.value}`).then(res =>
{
if (res.ok)
{
// show reset password form
switchView("#checkResetCode", "#changePassword");
}
showErrorMessage("Invalid code.", "resetCode");
});
});