Merge pull request 'Reset password functionality for CMS' (#23) from cms-reset-password-before into master
Reviewed-on: #23
This commit is contained in:
commit
4428d5b6aa
@ -10,6 +10,7 @@
|
|||||||
"laminas/laminas-diactoros": "^2.6",
|
"laminas/laminas-diactoros": "^2.6",
|
||||||
"laminas/laminas-httphandlerrunner": "^2.0",
|
"laminas/laminas-httphandlerrunner": "^2.0",
|
||||||
"selective/samesite-cookie": "^0.3.0",
|
"selective/samesite-cookie": "^0.3.0",
|
||||||
"ext-json": "*"
|
"ext-json": "*",
|
||||||
|
"slim/slim": "^4.10"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
2
composer.lock
generated
2
composer.lock
generated
@ -4,7 +4,7 @@
|
|||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "5ddb974cba41098a51ddfa43a17c9520",
|
"content-hash": "bbd0a827a6d61bc9032697dbd94a5045",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "fig/http-message-util",
|
"name": "fig/http-message-util",
|
||||||
|
111
dist/api/index.php
vendored
111
dist/api/index.php
vendored
@ -37,10 +37,10 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
|
|||||||
$app->setBasePath("/api");
|
$app->setBasePath("/api");
|
||||||
|
|
||||||
// return all responses as JSON
|
// return all responses as JSON
|
||||||
$app->add(function($request, $handler) {
|
/*$app->add(function($request, $handler) {
|
||||||
$response = $handler->handle($request);
|
$response = $handler->handle($request);
|
||||||
return $response->withHeader('Content-Type', 'application/json');
|
return $response->withHeader("Content-Type", "application/json");
|
||||||
});
|
});*/
|
||||||
|
|
||||||
$timelineData = new timelineData();
|
$timelineData = new timelineData();
|
||||||
$projectData = new projectData();
|
$projectData = new projectData();
|
||||||
@ -54,12 +54,14 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
|||||||
//otherwise return an error
|
//otherwise return an error
|
||||||
if($args["timeline"] == "edu")
|
if($args["timeline"] == "edu")
|
||||||
{
|
{
|
||||||
return $response->getBody()->write(json_encode($timelineData->getEduData()));
|
$response->getBody()->write(json_encode($timelineData->getEduData()));
|
||||||
|
return $response;
|
||||||
}
|
}
|
||||||
|
|
||||||
if($args["timeline"] == "work")
|
if($args["timeline"] == "work")
|
||||||
{
|
{
|
||||||
return $response->getBody()->write(json_encode($timelineData->getWorkData()));
|
$response->getBody()->write(json_encode($timelineData->getWorkData()));
|
||||||
|
return $response;
|
||||||
}
|
}
|
||||||
|
|
||||||
// something went wrong
|
// something went wrong
|
||||||
@ -67,7 +69,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
|||||||
return $response->withStatus(404);
|
return $response->withStatus(404);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->get('/projectData', function (Request $request, Response $response)
|
$app->get("/projectData", function (Request $request, Response $response)
|
||||||
{
|
{
|
||||||
global $projectData;
|
global $projectData;
|
||||||
|
|
||||||
@ -86,7 +88,7 @@ $app->get('/projectData', function (Request $request, Response $response)
|
|||||||
return $response;
|
return $response;
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->post('/contact', function (Request $request, Response $response)
|
$app->post("/contact", function (Request $request, Response $response)
|
||||||
{
|
{
|
||||||
$data = $request->getParsedBody();
|
$data = $request->getParsedBody();
|
||||||
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
|
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
|
||||||
@ -98,8 +100,7 @@ $app->post('/contact', function (Request $request, Response $response)
|
|||||||
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
|
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
|
||||||
{
|
{
|
||||||
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
|
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
|
||||||
$response = $response->withStatus(400);
|
return $response->withStatus(400);
|
||||||
return $response;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// email form filler/conatcter
|
// email form filler/conatcter
|
||||||
@ -259,7 +260,8 @@ $app->post('/contact', function (Request $request, Response $response)
|
|||||||
return $response->withStatus(201);
|
return $response->withStatus(201);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->post('/user/login', function (Request $request, Response $response) {
|
$app->post("/user/login", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
|
|
||||||
global $user;
|
global $user;
|
||||||
|
|
||||||
@ -274,7 +276,7 @@ $app->post('/user/login', function (Request $request, Response $response) {
|
|||||||
|
|
||||||
if ($user->checkUser($data["username"], $data["password"]))
|
if ($user->checkUser($data["username"], $data["password"]))
|
||||||
{
|
{
|
||||||
// yay user is logged in
|
// yay, user is logged in
|
||||||
$_SESSION["token"] = $user->createToken();
|
$_SESSION["token"] = $user->createToken();
|
||||||
$_SESSION["username"] = $data["username"];
|
$_SESSION["username"] = $data["username"];
|
||||||
return $response;
|
return $response;
|
||||||
@ -282,8 +284,8 @@ $app->post('/user/login', function (Request $request, Response $response) {
|
|||||||
return $response->withStatus(401);
|
return $response->withStatus(401);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->get('/user/isLoggedIn', function (Request $request, Response $response) {
|
$app->get("/user/isLoggedIn", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
global $user;
|
global $user;
|
||||||
|
|
||||||
if (empty($_SESSION["token"]) && empty($_SESSION["username"]))
|
if (empty($_SESSION["token"]) && empty($_SESSION["username"]))
|
||||||
@ -297,9 +299,88 @@ $app->get('/user/isLoggedIn', function (Request $request, Response $response) {
|
|||||||
// user is logged in but no token was created
|
// user is logged in but no token was created
|
||||||
$_SESSION["token"] = $user->createToken();
|
$_SESSION["token"] = $user->createToken();
|
||||||
return $response;
|
return $response;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
|
||||||
|
return $response;
|
||||||
|
|
||||||
return $response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
|
});
|
||||||
|
|
||||||
|
$app->get("/user/checkResetEmail/{email}", function (Request $request, Response $response, array $args)
|
||||||
|
{
|
||||||
|
global $user;
|
||||||
|
|
||||||
|
if (empty($args["email"]))
|
||||||
|
{
|
||||||
|
// uh oh sent empty data
|
||||||
|
return $response->withStatus(400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($user->checkEmail($args["email"]))
|
||||||
|
{
|
||||||
|
// yay email does exist
|
||||||
|
$token = $user->sendResetEmail($args["email"]);
|
||||||
|
$_SESSION["resetToken"] = $token;
|
||||||
|
$_SESSION["resetEmail"] = $args["email"];
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
return $response->withStatus(404);
|
||||||
|
});
|
||||||
|
|
||||||
|
$app->get("/user/resendEmail", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
|
if (empty($_SESSION["resetToken"]))
|
||||||
|
{
|
||||||
|
// uh oh not authorized to resend email
|
||||||
|
return $response->withStatus(401);
|
||||||
|
}
|
||||||
|
global $user;
|
||||||
|
$user->sendResetEmail($_SESSION["resetEmail"]);
|
||||||
|
return $response;
|
||||||
|
});
|
||||||
|
|
||||||
|
$app->get("/user/checkResetCode/{code}", function (Request $request, Response $response, array $args)
|
||||||
|
{
|
||||||
|
if (empty($args["code"]))
|
||||||
|
{
|
||||||
|
// uh oh sent empty data
|
||||||
|
return $response->withStatus(400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_SESSION["resetToken"] === $args["code"])
|
||||||
|
{
|
||||||
|
// yay, code code matches
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $response->withStatus(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
$app->post("/user/changePassword", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
|
global $user;
|
||||||
|
if (empty($_SESSION["resetToken"]) && empty($_SESSION["resetEmail"]))
|
||||||
|
{
|
||||||
|
// uh oh not authorized to change password
|
||||||
|
return $response->withStatus(401);
|
||||||
|
}
|
||||||
|
|
||||||
|
$data = $request->getParsedBody();
|
||||||
|
if (empty($data["password"]))
|
||||||
|
{
|
||||||
|
// uh oh sent empty data
|
||||||
|
return $response->withStatus(400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($user->changePassword($_SESSION["resetEmail"], $data["password"]))
|
||||||
|
{
|
||||||
|
// yay, password changed
|
||||||
|
unset($_SESSION["resetToken"]);
|
||||||
|
unset($_SESSION["resetEmail"]);
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $response->withStatus(500);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->run();
|
$app->run();
|
||||||
|
1
dist/api/timelineData.php
vendored
1
dist/api/timelineData.php
vendored
@ -42,5 +42,4 @@ class timelineData
|
|||||||
return array("errorMessage" => "Error, work data not found");
|
return array("errorMessage" => "Error, work data not found");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
61
dist/api/user.php
vendored
61
dist/api/user.php
vendored
@ -35,4 +35,65 @@ class user
|
|||||||
{
|
{
|
||||||
return uniqid("rpe-");
|
return uniqid("rpe-");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function checkEmail($email): bool
|
||||||
|
{
|
||||||
|
$conn = dbConn();
|
||||||
|
$stmt = $conn->prepare("SELECT * FROM users WHERE email = :email");
|
||||||
|
$stmt->bindParam(":email", $email);
|
||||||
|
$stmt->execute();
|
||||||
|
|
||||||
|
// set the resulting array to associative
|
||||||
|
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
if ($result)
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendResetEmail($email): string
|
||||||
|
{
|
||||||
|
//generate a random token and email the address
|
||||||
|
$token = $this->createToken();
|
||||||
|
$headers1 = "From: noreply@rohitpai.co.uk\r\n";
|
||||||
|
$headers1 .= "MIME-Version: 1.0\r\n";
|
||||||
|
$headers1 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||||
|
|
||||||
|
$message = "
|
||||||
|
<!doctype html>
|
||||||
|
<html lang='en'>
|
||||||
|
<head>
|
||||||
|
<meta charset='UTF-8'>
|
||||||
|
<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
|
||||||
|
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Reset Password Verification Code</h1>
|
||||||
|
<br>
|
||||||
|
<p>Please enter the following code to reset your password: $token</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
";
|
||||||
|
|
||||||
|
mail($email, "Reset Password Verification Code", $message, $headers1);
|
||||||
|
return $token;
|
||||||
|
}
|
||||||
|
|
||||||
|
function changePassword($email, $password): bool
|
||||||
|
{
|
||||||
|
$conn = dbConn();
|
||||||
|
$stmt = $conn->prepare("UPDATE users SET password = :password WHERE email = :email");
|
||||||
|
$newPwd = password_hash($password, PASSWORD_BCRYPT);
|
||||||
|
$stmt->bindParam(":password", $newPwd);
|
||||||
|
$stmt->bindParam(":email", $email);
|
||||||
|
|
||||||
|
if ($stmt->execute())
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
2
dist/css/main.css
vendored
2
dist/css/main.css
vendored
File diff suppressed because one or more lines are too long
2
dist/editor/css/main.css
vendored
2
dist/editor/css/main.css
vendored
File diff suppressed because one or more lines are too long
2
dist/editor/index.html
vendored
2
dist/editor/index.html
vendored
@ -1 +1 @@
|
|||||||
<!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">×</button><div></div></div><input type="submit" value="Submit"></form></div></main><script src="js/index.js"></script></body></html>
|
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><main><div id="login" class="container shown"><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> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="loginError"><button class="close" type="button">×</button><div></div></div><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">×</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="resetCodeError"><button class="close" type="button">×</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"> <i class="fa-solid fa-eye"></i></div><div class="formControl"><label for="rePass">Password</label> <input type="password" name="rePass" id="rePass"> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="changeError"><button class="close" type="button">×</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><script src="js/index.js"></script></body></html>
|
2
dist/editor/js/index.js
vendored
2
dist/editor/js/index.js
vendored
@ -1 +1 @@
|
|||||||
function showErrorMessage(e){document.querySelector("#loginError").classList.remove("hidden"),document.querySelector("#loginError div").innerText=e}document.addEventListener("DOMContentLoaded",(e=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok&&(window.location.href="./editor.html")}))})),document.querySelector("#login form").addEventListener("submit",(e=>{e.preventDefault();let r=new FormData;if(e.target.username.value.length>0&&e.target.password.value.length>0)return r.append("username",e.target.username.value),r.append("password",e.target.password.value),void fetch("/api/user/login",{method:"POST",body:r}).then((e=>{e.ok?window.location.href="./editor.html":400!==e.status?(document.querySelector("#loginError").classList.remove("hidden"),document.querySelector("#loginError div").innerHTML="Invalid username or password"):showErrorMessage("Please type in a username and password.")}));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")));
|
function showErrorMessage(e,t){document.querySelector(`#${t}Error`).classList.remove("hidden"),document.querySelector(`#${t}Error div`).innerText=e}function switchView(e,t){document.querySelector(e).classList.toggle("shown"),setTimeout((()=>document.querySelector(e).style.transform="translateX(150vw)"),500),setTimeout((()=>document.querySelector(e).style.display="none"),500),setTimeout((()=>document.querySelector(t).style.removeProperty("display")),200),setTimeout((()=>document.querySelector(t).classList.toggle("shown")),300),setTimeout((()=>document.querySelector(t).style.removeProperty("transform")),400)}document.addEventListener("DOMContentLoaded",(e=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok&&(window.location.href="./editor.html")}))})),document.querySelector("#login form").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;if(e.target.username.value.length>0&&e.target.password.value.length>0)return t.append("username",e.target.username.value),t.append("password",e.target.password.value),void fetch("/api/user/login",{method:"POST",body:t}).then((e=>{e.ok?window.location.href="./editor.html":400!==e.status?showErrorMessage("Invalid username or password.","login"):showErrorMessage("Please type in a username and password.","login")}));showErrorMessage("Please type in a username and password.","login")})),document.querySelector("#loginError .close").addEventListener("click",(()=>document.querySelector("#loginError").classList.toggle("hidden"))),document.querySelector("#resetError .close").addEventListener("click",(()=>document.querySelector("#resetError").classList.toggle("hidden"))),document.querySelector("#changeError .close").addEventListener("click",(()=>document.querySelector("#changeError").classList.toggle("hidden"))),document.querySelectorAll("form i.fa-eye").forEach((e=>{e.addEventListener("click",(e=>{if("password"===e.target.previousElementSibling.type)return e.target.previousElementSibling.type="text",e.target.classList.remove("fa-eye"),void e.target.classList.add("fa-eye-slash");e.target.previousElementSibling.type="password",e.target.classList.remove("fa-eye-slash"),e.target.classList.add("fa-eye")}))})),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 t=new FormData;""!==e.target.email?(window.email=e.target.email.value,t.append("email",e.target.email.value),fetch(`/api/user/checkResetEmail/${e.target.email.value}`).then((e=>{e.ok&&switchView("#resetPassword","#checkResetCode"),showErrorMessage("Invalid email.","reset")}))):showErrorMessage("Please type in your email.","reset")})),document.querySelector("#checkResetCode form").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;""!==e.target.code.value?(t.append("code",e.target.code.value),fetch(`/api/user/checkResetCode/${e.target.code.value}`).then((e=>{e.ok&&switchView("#checkResetCode","#changePassword"),showErrorMessage("Invalid code.","resetCode")}))):showErrorMessage("Please type in your reset code.","check")})),document.querySelector("#changePassword form").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;""!==e.target.pass.value||""!==e.target.rePass.value?e.target.pass.value===e.target.rePass.value?(t.append("password",e.target.pass.value),fetch("/api/user/changePassword",{method:"POST",body:t}).then((e=>{e.ok&&switchView("#changePassword","#login"),showErrorMessage("Something went wrong.","change")}))):showErrorMessage("Passwords do not match.","change"):showErrorMessage("Please type in a new password.","change")}));
|
2
dist/index.html
vendored
2
dist/index.html
vendored
File diff suppressed because one or more lines are too long
@ -37,10 +37,10 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
|
|||||||
$app->setBasePath("/api");
|
$app->setBasePath("/api");
|
||||||
|
|
||||||
// return all responses as JSON
|
// return all responses as JSON
|
||||||
$app->add(function($request, $handler) {
|
/*$app->add(function($request, $handler) {
|
||||||
$response = $handler->handle($request);
|
$response = $handler->handle($request);
|
||||||
return $response->withHeader('Content-Type', 'application/json');
|
return $response->withHeader("Content-Type", "application/json");
|
||||||
});
|
});*/
|
||||||
|
|
||||||
$timelineData = new timelineData();
|
$timelineData = new timelineData();
|
||||||
$projectData = new projectData();
|
$projectData = new projectData();
|
||||||
@ -54,12 +54,14 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
|||||||
//otherwise return an error
|
//otherwise return an error
|
||||||
if($args["timeline"] == "edu")
|
if($args["timeline"] == "edu")
|
||||||
{
|
{
|
||||||
return $response->getBody()->write(json_encode($timelineData->getEduData()));
|
$response->getBody()->write(json_encode($timelineData->getEduData()));
|
||||||
|
return $response;
|
||||||
}
|
}
|
||||||
|
|
||||||
if($args["timeline"] == "work")
|
if($args["timeline"] == "work")
|
||||||
{
|
{
|
||||||
return $response->getBody()->write(json_encode($timelineData->getWorkData()));
|
$response->getBody()->write(json_encode($timelineData->getWorkData()));
|
||||||
|
return $response;
|
||||||
}
|
}
|
||||||
|
|
||||||
// something went wrong
|
// something went wrong
|
||||||
@ -67,7 +69,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
|||||||
return $response->withStatus(404);
|
return $response->withStatus(404);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->get('/projectData', function (Request $request, Response $response)
|
$app->get("/projectData", function (Request $request, Response $response)
|
||||||
{
|
{
|
||||||
global $projectData;
|
global $projectData;
|
||||||
|
|
||||||
@ -86,7 +88,7 @@ $app->get('/projectData', function (Request $request, Response $response)
|
|||||||
return $response;
|
return $response;
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->post('/contact', function (Request $request, Response $response)
|
$app->post("/contact", function (Request $request, Response $response)
|
||||||
{
|
{
|
||||||
$data = $request->getParsedBody();
|
$data = $request->getParsedBody();
|
||||||
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
|
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
|
||||||
@ -98,8 +100,7 @@ $app->post('/contact', function (Request $request, Response $response)
|
|||||||
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
|
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
|
||||||
{
|
{
|
||||||
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
|
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
|
||||||
$response = $response->withStatus(400);
|
return $response->withStatus(400);
|
||||||
return $response;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// email form filler/conatcter
|
// email form filler/conatcter
|
||||||
@ -259,7 +260,8 @@ $app->post('/contact', function (Request $request, Response $response)
|
|||||||
return $response->withStatus(201);
|
return $response->withStatus(201);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->post('/user/login', function (Request $request, Response $response) {
|
$app->post("/user/login", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
|
|
||||||
global $user;
|
global $user;
|
||||||
|
|
||||||
@ -274,7 +276,7 @@ $app->post('/user/login', function (Request $request, Response $response) {
|
|||||||
|
|
||||||
if ($user->checkUser($data["username"], $data["password"]))
|
if ($user->checkUser($data["username"], $data["password"]))
|
||||||
{
|
{
|
||||||
// yay user is logged in
|
// yay, user is logged in
|
||||||
$_SESSION["token"] = $user->createToken();
|
$_SESSION["token"] = $user->createToken();
|
||||||
$_SESSION["username"] = $data["username"];
|
$_SESSION["username"] = $data["username"];
|
||||||
return $response;
|
return $response;
|
||||||
@ -282,8 +284,8 @@ $app->post('/user/login', function (Request $request, Response $response) {
|
|||||||
return $response->withStatus(401);
|
return $response->withStatus(401);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->get('/user/isLoggedIn', function (Request $request, Response $response) {
|
$app->get("/user/isLoggedIn", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
global $user;
|
global $user;
|
||||||
|
|
||||||
if (empty($_SESSION["token"]) && empty($_SESSION["username"]))
|
if (empty($_SESSION["token"]) && empty($_SESSION["username"]))
|
||||||
@ -297,9 +299,88 @@ $app->get('/user/isLoggedIn', function (Request $request, Response $response) {
|
|||||||
// user is logged in but no token was created
|
// user is logged in but no token was created
|
||||||
$_SESSION["token"] = $user->createToken();
|
$_SESSION["token"] = $user->createToken();
|
||||||
return $response;
|
return $response;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
|
||||||
|
return $response;
|
||||||
|
|
||||||
return $response->getBody()->write(json_encode(array("token" => $_SESSION["token"])));
|
});
|
||||||
|
|
||||||
|
$app->get("/user/checkResetEmail/{email}", function (Request $request, Response $response, array $args)
|
||||||
|
{
|
||||||
|
global $user;
|
||||||
|
|
||||||
|
if (empty($args["email"]))
|
||||||
|
{
|
||||||
|
// uh oh sent empty data
|
||||||
|
return $response->withStatus(400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($user->checkEmail($args["email"]))
|
||||||
|
{
|
||||||
|
// yay email does exist
|
||||||
|
$token = $user->sendResetEmail($args["email"]);
|
||||||
|
$_SESSION["resetToken"] = $token;
|
||||||
|
$_SESSION["resetEmail"] = $args["email"];
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
return $response->withStatus(404);
|
||||||
|
});
|
||||||
|
|
||||||
|
$app->get("/user/resendEmail", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
|
if (empty($_SESSION["resetToken"]))
|
||||||
|
{
|
||||||
|
// uh oh not authorized to resend email
|
||||||
|
return $response->withStatus(401);
|
||||||
|
}
|
||||||
|
global $user;
|
||||||
|
$user->sendResetEmail($_SESSION["resetEmail"]);
|
||||||
|
return $response;
|
||||||
|
});
|
||||||
|
|
||||||
|
$app->get("/user/checkResetCode/{code}", function (Request $request, Response $response, array $args)
|
||||||
|
{
|
||||||
|
if (empty($args["code"]))
|
||||||
|
{
|
||||||
|
// uh oh sent empty data
|
||||||
|
return $response->withStatus(400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_SESSION["resetToken"] === $args["code"])
|
||||||
|
{
|
||||||
|
// yay, code code matches
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $response->withStatus(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
$app->post("/user/changePassword", function (Request $request, Response $response)
|
||||||
|
{
|
||||||
|
global $user;
|
||||||
|
if (empty($_SESSION["resetToken"]) && empty($_SESSION["resetEmail"]))
|
||||||
|
{
|
||||||
|
// uh oh not authorized to change password
|
||||||
|
return $response->withStatus(401);
|
||||||
|
}
|
||||||
|
|
||||||
|
$data = $request->getParsedBody();
|
||||||
|
if (empty($data["password"]))
|
||||||
|
{
|
||||||
|
// uh oh sent empty data
|
||||||
|
return $response->withStatus(400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($user->changePassword($_SESSION["resetEmail"], $data["password"]))
|
||||||
|
{
|
||||||
|
// yay, password changed
|
||||||
|
unset($_SESSION["resetToken"]);
|
||||||
|
unset($_SESSION["resetEmail"]);
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $response->withStatus(500);
|
||||||
});
|
});
|
||||||
|
|
||||||
$app->run();
|
$app->run();
|
||||||
|
@ -42,5 +42,4 @@ class timelineData
|
|||||||
return array("errorMessage" => "Error, work data not found");
|
return array("errorMessage" => "Error, work data not found");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -35,4 +35,65 @@ class user
|
|||||||
{
|
{
|
||||||
return uniqid("rpe-");
|
return uniqid("rpe-");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function checkEmail($email): bool
|
||||||
|
{
|
||||||
|
$conn = dbConn();
|
||||||
|
$stmt = $conn->prepare("SELECT * FROM users WHERE email = :email");
|
||||||
|
$stmt->bindParam(":email", $email);
|
||||||
|
$stmt->execute();
|
||||||
|
|
||||||
|
// set the resulting array to associative
|
||||||
|
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
if ($result)
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendResetEmail($email): string
|
||||||
|
{
|
||||||
|
//generate a random token and email the address
|
||||||
|
$token = $this->createToken();
|
||||||
|
$headers1 = "From: noreply@rohitpai.co.uk\r\n";
|
||||||
|
$headers1 .= "MIME-Version: 1.0\r\n";
|
||||||
|
$headers1 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||||
|
|
||||||
|
$message = "
|
||||||
|
<!doctype html>
|
||||||
|
<html lang='en'>
|
||||||
|
<head>
|
||||||
|
<meta charset='UTF-8'>
|
||||||
|
<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
|
||||||
|
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Reset Password Verification Code</h1>
|
||||||
|
<br>
|
||||||
|
<p>Please enter the following code to reset your password: $token</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
";
|
||||||
|
|
||||||
|
mail($email, "Reset Password Verification Code", $message, $headers1);
|
||||||
|
return $token;
|
||||||
|
}
|
||||||
|
|
||||||
|
function changePassword($email, $password): bool
|
||||||
|
{
|
||||||
|
$conn = dbConn();
|
||||||
|
$stmt = $conn->prepare("UPDATE users SET password = :password WHERE email = :email");
|
||||||
|
$newPwd = password_hash($password, PASSWORD_BCRYPT);
|
||||||
|
$stmt->bindParam(":password", $newPwd);
|
||||||
|
$stmt->bindParam(":email", $email);
|
||||||
|
|
||||||
|
if ($stmt->execute())
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
@ -65,13 +65,17 @@ h2 {
|
|||||||
a.btn, form input[type="submit"] {
|
a.btn, form input[type="submit"] {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 1rem 2rem;
|
padding: 1em 2em;
|
||||||
border-radius: 0.625em;
|
border-radius: 0.625em;
|
||||||
border: 0.3215em solid var(--primaryDefault);
|
border: 0.3215em solid var(--primaryDefault);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form input[type="submit"] {
|
||||||
|
padding: 1.1em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
a.btn:hover, form input[type="submit"]:hover {
|
a.btn:hover, form input[type="submit"]:hover {
|
||||||
border: 0.3215em solid var(--primaryHover);
|
border: 0.3215em solid var(--primaryHover);
|
||||||
}
|
}
|
||||||
@ -121,11 +125,6 @@ form .formControl {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form input[type="submit"] {
|
|
||||||
margin-top: 1em;
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
form .formControl input:not([type="submit"]), form .formControl textarea {
|
form .formControl input:not([type="submit"]), form .formControl textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 4px solid var(--primaryDefault);
|
border: 4px solid var(--primaryDefault);
|
||||||
@ -141,7 +140,6 @@ form .formControl textarea {
|
|||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
|
form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
|
||||||
border: 4px solid var(--errorDefault);
|
border: 4px solid var(--errorDefault);
|
||||||
}
|
}
|
||||||
@ -164,7 +162,6 @@ form .formControl {
|
|||||||
}
|
}
|
||||||
|
|
||||||
form input[type="submit"] {
|
form input[type="submit"] {
|
||||||
margin-top: 1em;
|
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -200,6 +197,17 @@ form .formControl input:not([type="submit"]) {
|
|||||||
height: 3em;
|
height: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form .formControl i.fa-eye, form .formControl i.fa-eye-slash {
|
||||||
|
margin-left: -40px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--primaryDefault);
|
||||||
|
}
|
||||||
|
|
||||||
|
form .formControl input:not([type="submit"]):focus + i.fa-eye,
|
||||||
|
form .formControl input:not([type="submit"]):focus + i.fa-eye-slash {
|
||||||
|
color: var(--primaryHover);
|
||||||
|
}
|
||||||
|
|
||||||
section#about, section#curriculumVitae h1 {
|
section#about, section#curriculumVitae h1 {
|
||||||
padding: 0 5rem;
|
padding: 0 5rem;
|
||||||
}
|
}
|
||||||
|
@ -17,8 +17,8 @@ main {
|
|||||||
background-image: radial-gradient(var(--primaryDefault), hsl(80, 50%, 30%));
|
background-image: radial-gradient(var(--primaryDefault), hsl(80, 50%, 30%));
|
||||||
}
|
}
|
||||||
|
|
||||||
div#login {
|
div.container {
|
||||||
display: flex;
|
/*display: flex;*/
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -28,9 +28,28 @@ div#login {
|
|||||||
-moz-border-radius: 1em;
|
-moz-border-radius: 1em;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
box-shadow: 0 6px 4px 0 var(--mutedBlack);
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -40,7 +59,7 @@ div#login form {
|
|||||||
|
|
||||||
div#login #password {
|
div#login #password {
|
||||||
font-family: Verdana, serif;
|
font-family: Verdana, serif;
|
||||||
letter-spacing: 0.125em;
|
letter-spacing: 0.125em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#login input[type=submit]{
|
div#login input[type=submit]{
|
||||||
@ -97,4 +116,16 @@ div.error.hidden {
|
|||||||
|
|
||||||
div.error button:hover {
|
div.error button:hover {
|
||||||
text-shadow: -1px 2px var(--mutedBlack);
|
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;
|
||||||
|
}
|
||||||
|
@ -3,11 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Editor</title>
|
<title>Editor</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="css/main.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<div id="login">
|
<div id="login" class="container shown">
|
||||||
<h1>Login To Editor</h1>
|
<h1>Login To Editor</h1>
|
||||||
|
|
||||||
<form action="" method="POST">
|
<form action="" method="POST">
|
||||||
@ -19,6 +21,7 @@
|
|||||||
<div class="formControl">
|
<div class="formControl">
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input type="password" id="password" name="password" required>
|
<input type="password" id="password" name="password" required>
|
||||||
|
<i class="fa-solid fa-eye"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -27,7 +30,80 @@
|
|||||||
<div></div>
|
<div></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">×</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="resetCodeError">
|
||||||
|
<button class="close" type="button">×</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">
|
||||||
|
<i class="fa-solid fa-eye"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="rePass">Password</label>
|
||||||
|
<input type="password" name="rePass" id="rePass">
|
||||||
|
<i class="fa-solid fa-eye"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error hidden" id="changeError">
|
||||||
|
<button class="close" type="button">×</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", e =>
|
document.addEventListener("DOMContentLoaded", _ =>
|
||||||
{
|
{
|
||||||
// check if the user is logged in and if so load the editor
|
// check if the user is logged in and if so load the editor
|
||||||
fetch("/api/user/isLoggedIn").then(res =>
|
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(`#${form}Error`).classList.remove("hidden");
|
||||||
document.querySelector("#loginError div").innerText = message;
|
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 =>
|
document.querySelector("#login form").addEventListener("submit", e =>
|
||||||
@ -38,17 +48,126 @@ document.querySelector("#login form").addEventListener("submit", e =>
|
|||||||
}
|
}
|
||||||
if (res.status === 400)
|
if (res.status === 400)
|
||||||
{
|
{
|
||||||
showErrorMessage("Please type in a username and password.");
|
showErrorMessage("Please type in a username and password.", "login");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
document.querySelector("#loginError").classList.remove("hidden");
|
showErrorMessage("Invalid username or password.", "login");
|
||||||
document.querySelector("#loginError div").innerHTML = "Invalid username or password";
|
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
document.querySelector("#loginError").classList.remove("hidden");
|
showErrorMessage("Please type in a username and password.", "login");
|
||||||
document.querySelector("#loginError div").innerHTML = "Please type in a username and password";
|
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector("#loginError .close").addEventListener("click", () =>
|
document.querySelector("#loginError .close").addEventListener("click", () =>
|
||||||
document.querySelector("#loginError").classList.toggle("hidden"));
|
document.querySelector("#loginError").classList.toggle("hidden"));
|
||||||
|
|
||||||
|
document.querySelector("#resetError .close").addEventListener("click", () =>
|
||||||
|
document.querySelector("#resetError").classList.toggle("hidden"));
|
||||||
|
|
||||||
|
document.querySelector("#changeError .close").addEventListener("click", () =>
|
||||||
|
document.querySelector("#changeError").classList.toggle("hidden"));
|
||||||
|
|
||||||
|
|
||||||
|
document.querySelectorAll("form i.fa-eye").forEach(i =>
|
||||||
|
{
|
||||||
|
i.addEventListener("click", e =>
|
||||||
|
{
|
||||||
|
if (e.target.previousElementSibling.type === "password")
|
||||||
|
{
|
||||||
|
e.target.previousElementSibling.type = "text";
|
||||||
|
e.target.classList.remove("fa-eye");
|
||||||
|
e.target.classList.add("fa-eye-slash");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.target.previousElementSibling.type = "password";
|
||||||
|
e.target.classList.remove("fa-eye-slash");
|
||||||
|
e.target.classList.add("fa-eye");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector("#changePassword form").addEventListener("submit", e =>
|
||||||
|
{
|
||||||
|
e.preventDefault();
|
||||||
|
let resetPassword = new FormData();
|
||||||
|
if (e.target.pass.value === "" && e.target.rePass.value === "")
|
||||||
|
{
|
||||||
|
showErrorMessage("Please type in a new password.", "change");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.target.pass.value !== e.target.rePass.value)
|
||||||
|
{
|
||||||
|
showErrorMessage("Passwords do not match.", "change");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
resetPassword.append("password", e.target.pass.value);
|
||||||
|
fetch(`/api/user/changePassword`,
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
body: resetPassword
|
||||||
|
}).then(res =>
|
||||||
|
{
|
||||||
|
if (res.ok)
|
||||||
|
{
|
||||||
|
// show login form
|
||||||
|
switchView("#changePassword", "#login");
|
||||||
|
}
|
||||||
|
showErrorMessage("Something went wrong.", "change");
|
||||||
|
});
|
||||||
|
});
|
@ -37,7 +37,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<h1>full stack developer</h1>
|
<h1>full stack developer</h1>
|
||||||
<a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
|
<a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
|
||||||
<a href="#about"><i class="fas fa-chevron-down"></i></a>
|
<a href="#about"><i class="fa-solid fa-chevron-down"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@ -157,7 +157,7 @@
|
|||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
<p>© 2021 Rohit Pai all rights reserved</p>
|
<p>© 2021 Rohit Pai all rights reserved</p>
|
||||||
<div class="button">
|
<div class="button">
|
||||||
<button id="goBackToTop"><i class="fas fa-chevron-up"></i></button>
|
<button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
Loading…
Reference in New Issue
Block a user