composer.json

@@ -10,6 +10,7 @@
         "laminas/laminas-diactoros": "^2.6",
         "laminas/laminas-httphandlerrunner": "^2.0",
         "selective/samesite-cookie": "^0.3.0",
-      "ext-json": "*"
+      "ext-json": "*",
+        "slim/slim": "^4.10"
     }
 }

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "5ddb974cba41098a51ddfa43a17c9520",
+    "content-hash": "bbd0a827a6d61bc9032697dbd94a5045",
     "packages": [
         {
             "name": "fig/http-message-util",

dist/api/index.php

@@ -39,7 +39,7 @@ $app->setBasePath("/api");
 // return all responses as JSON
 $app->add(function($request, $handler) {
     $response = $handler->handle($request);
-    return $response->withHeader('Content-Type', 'application/json');
+    return $response->withHeader("Content-Type", "application/json");
 });
 
 $timelineData = new timelineData();
@@ -54,12 +54,14 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     //otherwise return an error
     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")
     {
-        return $response->getBody()->write(json_encode($timelineData->getWorkData()));
+        $response->getBody()->write(json_encode($timelineData->getWorkData()));
+        return $response;
     }
     
     // something went wrong
@@ -67,7 +69,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     return $response->withStatus(404);
 });
 
-$app->get('/projectData', function (Request $request, Response $response)
+$app->get("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
 
@@ -86,7 +88,7 @@ $app->get('/projectData', function (Request $request, Response $response)
     return $response;
 });
 
-$app->post('/contact', function (Request $request, Response $response)
+$app->post("/contact", function (Request $request, Response $response)
 {
     $data = $request->getParsedBody();
     if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
@@ -259,7 +261,7 @@ $app->post('/contact', function (Request $request, Response $response)
     return $response->withStatus(201);
 });
 
-$app->post('/user/login', function (Request $request, Response $response) {
+$app->post("/user/login", function (Request $request, Response $response) {
     
     global $user;
     
@@ -282,7 +284,7 @@ $app->post('/user/login', function (Request $request, Response $response) {
     return $response->withStatus(401);
 });
 
-$app->get('/user/isLoggedIn', function (Request $request, Response $response) {
+$app->get("/user/isLoggedIn", function (Request $request, Response $response) {
     
     global $user;
 
@@ -302,4 +304,55 @@ $app->get('/user/isLoggedIn', function (Request $request, Response $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)
+{
+    global $user;
+    
+    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->run();

dist/api/timelineData.php

@@ -42,5 +42,4 @@ class timelineData
         return array("errorMessage" => "Error, work data not found");
     }
     
-    
 }

dist/api/user.php

@@ -35,4 +35,50 @@ class user
     {
         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;
+    }
 }

dist/editor/index.html

@@ -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">&times;</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"></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></div><div class="error hidden" id="loginError"><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="#" 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><script src="js/index.js"></script></body></html>

dist/editor/js/index.js

@@ -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("#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")}));

src/api/index.php

@@ -39,7 +39,7 @@ $app->setBasePath("/api");
 // return all responses as JSON
 $app->add(function($request, $handler) {
     $response = $handler->handle($request);
-    return $response->withHeader('Content-Type', 'application/json');
+    return $response->withHeader("Content-Type", "application/json");
 });
 
 $timelineData = new timelineData();
@@ -54,12 +54,14 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     //otherwise return an error
     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")
     {
-        return $response->getBody()->write(json_encode($timelineData->getWorkData()));
+        $response->getBody()->write(json_encode($timelineData->getWorkData()));
+        return $response;
     }
     
     // something went wrong
@@ -67,7 +69,7 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     return $response->withStatus(404);
 });
 
-$app->get('/projectData', function (Request $request, Response $response)
+$app->get("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
 
@@ -86,7 +88,7 @@ $app->get('/projectData', function (Request $request, Response $response)
     return $response;
 });
 
-$app->post('/contact', function (Request $request, Response $response)
+$app->post("/contact", function (Request $request, Response $response)
 {
     $data = $request->getParsedBody();
     if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
@@ -259,7 +261,7 @@ $app->post('/contact', function (Request $request, Response $response)
     return $response->withStatus(201);
 });
 
-$app->post('/user/login', function (Request $request, Response $response) {
+$app->post("/user/login", function (Request $request, Response $response) {
     
     global $user;
     
@@ -282,7 +284,7 @@ $app->post('/user/login', function (Request $request, Response $response) {
     return $response->withStatus(401);
 });
 
-$app->get('/user/isLoggedIn', function (Request $request, Response $response) {
+$app->get("/user/isLoggedIn", function (Request $request, Response $response) {
     
     global $user;
 
@@ -302,4 +304,55 @@ $app->get('/user/isLoggedIn', function (Request $request, Response $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)
+{
+    global $user;
+    
+    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->run();

src/api/timelineData.php

@@ -42,5 +42,4 @@ class timelineData
         return array("errorMessage" => "Error, work data not found");
     }
     
-    
 }

src/api/user.php

@@ -35,4 +35,50 @@ class user
     {
         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;
+    }
 }

src/css/templateStyles.css

@@ -65,13 +65,17 @@ h2 {
 a.btn, form input[type="submit"] {
     text-decoration: none;
     display: inline-block;
-    padding: 1rem 2rem;
+    padding: 1em 2em;
     border-radius: 0.625em;
     border: 0.3215em solid var(--primaryDefault);
     color: #FFFFFF;
     text-align: center;
 }
 
+form input[type="submit"] {
+    padding: 1.1em 2em;
+}
+
 a.btn:hover, form input[type="submit"]:hover {
     border: 0.3215em solid var(--primaryHover);
 }
@@ -121,11 +125,6 @@ form .formControl {
     width: 100%;
 }
 
-form input[type="submit"] {
-    margin-top: 1em;
-    align-self: flex-start;
-}
-
 form .formControl input:not([type="submit"]), form .formControl textarea {
     width: 100%;
     border: 4px solid var(--primaryDefault);

src/editor/css/login.css

@@ -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;
@@ -98,3 +117,19 @@ 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

@@ -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

@@ -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(`#${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 => 
@@ -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");
+            showErrorMessage("Invalid username or password.", "login");
-            document.querySelector("#loginError div").innerHTML = "Invalid username or password";
         });
        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").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");
+    });
+
+});