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

Added in editor login feature to login into editor

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2022-07-29 20:00:36 +01:00
parent 315a0484b0
commit 90a3e4f533
31 changed files with 831 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/css/login.css
+100
View File
@@ -0,0 +1,100 @@
/*** Login Styles ***/
h1 {
text-transform: none;
}
html, body {
height: 100%;
}
main {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: radial-gradient(var(--primaryDefault), hsl(80, 50%, 30%));
}
div#login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
padding: 2em 5em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
box-shadow: 0 6px 4px 0 var(--mutedBlack);
}
div#login form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
}
div#login #password {
font-family: Verdana, serif;
letter-spacing: 0.125em;
}
div#login input[type=submit]{
margin: 0;
}
div.error {
background: var(--errorDefault);
color: #FFFFFF;
padding: 0.5em 0.8em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
align-self: flex-start;
flex-direction: row-reverse;
position: relative;
height: 75px;
visibility: visible;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
opacity: 1;
margin-top: 1em;
}
div.error button {
border: none;
background: none;
outline: none;
cursor: pointer;
color: #FFFFFF;
font-size: 1.25rem;
margin-top: -5px;
position: absolute;
transform: translate(0, 0);
transform-origin: 0 0;
right: 10px;
top: 10px;
}
div.error.hidden {
opacity: 0;
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}
div.error button:hover {
text-shadow: -1px 2px var(--mutedBlack);
}
src/editor/css/main.css
+8
View File
@@ -0,0 +1,8 @@
/******** Imports *******/
@import "/node_modules/normalize.css/normalize.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
/*local imports*/
@import "../../css/templateStyles.css";
@import "login.css";
/*other styles*/
src/editor/editor.html
+12
View File
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor</title>
</head>
<body>
<h1>Editor</h1>
<script src="js/editor.js"></script>
</body>
</html>
src/editor/index.html
+36
View File
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<div id="login">
<h1>Login To Editor</h1>
<form action="" method="POST">
<div class="formControl">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="formControl">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div class="error hidden" id="loginError">
<button class="close" type="button">&times;</button>
<div></div>
</div>
<input type="submit" value="Submit">
</form>
</div>
</main>
<script src="js/index.js"></script>
</body>
</html>
src/editor/js/editor.js
+12
View File
@@ -0,0 +1,12 @@
document.addEventListener('DOMContentLoaded', e =>
{
// check if the user is logged in, if not redirect to login
fetch('/api/user/isLoggedIn').then(res =>
{
if (!res.ok)
{
window.location.href = './';
}
});
})
src/editor/js/index.js
+54
View File
@@ -0,0 +1,54 @@
document.addEventListener("DOMContentLoaded", e =>
{
// check if the user is logged in and if so load the editor
fetch("/api/user/isLoggedIn").then(res =>
{
if (res.ok)
{
window.location.href = "./editor.html";
}
});
});
function showErrorMessage(message)
{
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerText = message;
}
document.querySelector("#login form").addEventListener("submit", e =>
{
e.preventDefault();
let loginData = new FormData();
if (e.target.username.value.length > 0 && e.target.password.value.length > 0)
{
loginData.append("username", e.target.username.value);
loginData.append("password", e.target.password.value);
fetch("/api/user/login",
{
method: "POST",
body: loginData
}).then(res =>
{
if (res.ok)
{
window.location.href = "./editor.html";
return;
}
if (res.status === 400)
{
showErrorMessage("Please type in a username and password.");
return;
}
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerHTML = "Invalid username or password";
});
return;
}
document.querySelector("#loginError").classList.remove("hidden");
document.querySelector("#loginError div").innerHTML = "Please type in a username and password";
});
document.querySelector("#loginError .close").addEventListener("click", () =>
document.querySelector("#loginError").classList.toggle("hidden"));