Completed reset password section and added in eye button to toggle between shown and hidden password.

Signed-off-by: rodude123 <rodude123@gmail.com>

dist/api/index.php

@@ -37,10 +37,10 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
 $app->setBasePath("/api");
 
 // return all responses as JSON
-$app->add(function($request, $handler) {
+/*$app->add(function($request, $handler) {
     $response = $handler->handle($request);
     return $response->withHeader("Content-Type", "application/json");
-});
+});*/
 
 $timelineData = new timelineData();
 $projectData = new projectData();
@@ -100,8 +100,7 @@ $app->post("/contact", function (Request $request, Response $response)
     if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL)) 
     {
       $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
@@ -261,7 +260,8 @@ $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;
     
@@ -276,7 +276,7 @@ $app->post("/user/login", function (Request $request, Response $response) {
 
     if ($user->checkUser($data["username"], $data["password"]))
     {
-        // yay user is logged in
+        // yay, user is logged in
         $_SESSION["token"] = $user->createToken();
         $_SESSION["username"] = $data["username"];
         return $response;
@@ -284,8 +284,8 @@ $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;
 
     if (empty($_SESSION["token"]) && empty($_SESSION["username"])) 
@@ -299,9 +299,11 @@ $app->get("/user/isLoggedIn", function (Request $request, Response $response) {
         // user is logged in but no token was created
         $_SESSION["token"] = $user->createToken();
         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)
@@ -339,8 +341,6 @@ $app->get("/user/resendEmail", function (Request $request, Response $response)
 
 $app->get("/user/checkResetCode/{code}", function (Request $request, Response $response, array $args)
 {
-    global $user;
-    
     if (empty($args["code"]))
     {
         // uh oh sent empty data
@@ -352,7 +352,35 @@ $app->get("/user/checkResetCode/{code}", function (Request $request, Response $r
         // 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();

dist/api/user.php

@@ -81,4 +81,19 @@ class user
         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;
+    }
 }

dist/editor/index.html

@@ -1 +1 @@
-<!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>
+<!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">&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="resetCodeError"><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"> <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">&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,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")}));
+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")}));

src/api/index.php

@@ -37,10 +37,10 @@ $errorMiddleware = $app->addErrorMiddleware(true, true, true);
 $app->setBasePath("/api");
 
 // return all responses as JSON
-$app->add(function($request, $handler) {
+/*$app->add(function($request, $handler) {
     $response = $handler->handle($request);
     return $response->withHeader("Content-Type", "application/json");
-});
+});*/
 
 $timelineData = new timelineData();
 $projectData = new projectData();
@@ -100,8 +100,7 @@ $app->post("/contact", function (Request $request, Response $response)
     if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL)) 
     {
       $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
@@ -261,7 +260,8 @@ $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;
     
@@ -276,7 +276,7 @@ $app->post("/user/login", function (Request $request, Response $response) {
 
     if ($user->checkUser($data["username"], $data["password"]))
     {
-        // yay user is logged in
+        // yay, user is logged in
         $_SESSION["token"] = $user->createToken();
         $_SESSION["username"] = $data["username"];
         return $response;
@@ -284,8 +284,8 @@ $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;
 
     if (empty($_SESSION["token"]) && empty($_SESSION["username"])) 
@@ -299,9 +299,11 @@ $app->get("/user/isLoggedIn", function (Request $request, Response $response) {
         // user is logged in but no token was created
         $_SESSION["token"] = $user->createToken();
         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)
@@ -339,8 +341,6 @@ $app->get("/user/resendEmail", function (Request $request, Response $response)
 
 $app->get("/user/checkResetCode/{code}", function (Request $request, Response $response, array $args)
 {
-    global $user;
-    
     if (empty($args["code"]))
     {
         // uh oh sent empty data
@@ -352,7 +352,35 @@ $app->get("/user/checkResetCode/{code}", function (Request $request, Response $r
         // 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();

src/api/user.php

@@ -81,4 +81,19 @@ class user
         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;
+    }
 }

src/css/templateStyles.css

@@ -140,7 +140,6 @@ form .formControl textarea {
     padding: 0.5em;
 }
 
-
 form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
     border: 4px solid var(--errorDefault);
 }
@@ -163,7 +162,6 @@ form .formControl {
 }
 
 form input[type="submit"] {
-    margin-top: 1em;
     align-self: flex-start;
 }
 
@@ -199,6 +197,17 @@ form .formControl input:not([type="submit"]) {
     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 {
     padding: 0 5rem;
 }

src/editor/css/login.css

@@ -18,7 +18,7 @@ main {
 }
 
 div.container {
-    display: flex;
+    /*display: flex;*/
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -129,7 +129,3 @@ div.btnContainer {
 div.btnContainer a:not(.btn) {
     color: #000000;
 }
-
-div.btnContainer a.btn {
-    align-self: flex-end;
-}

src/editor/index.html

@@ -5,7 +5,7 @@
     <title>Editor</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css">
-    
+    <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
 </head>
 <body>
 <main>
@@ -21,6 +21,7 @@
             <div class="formControl">
                 <label for="password">Password</label>
                 <input type="password" id="password" name="password" required>
+                <i class="fa-solid fa-eye"></i>
             </div>
 
 
@@ -67,7 +68,7 @@
                 <input type="text" id="code" name="code">
             </div>
 
-            <div class="error hidden" id="codeError">
+            <div class="error hidden" id="resetCodeError">
                 <button class="close" type="button">&times;</button>
                 <div></div>
             </div>
@@ -85,15 +86,17 @@
             <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">&times;</button>
+                <button class="close" type="button">&times;</button>
                 <div></div>
             </div>
             

src/editor/js/index.js

@@ -61,6 +61,30 @@ document.querySelector("#login form").addEventListener("submit", e =>
 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(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", () =>
@@ -105,7 +129,7 @@ document.querySelector("#checkResetCode form").addEventListener("submit", e =>
         return;
     }
     resetCode.append("code", e.target.code.value);
-    fetch(`/api/user/checkResetCode//${e.target.code.value}`).then(res =>
+    fetch(`/api/user/checkResetCode/${e.target.code.value}`).then(res =>
     {
         if (res.ok)
         {
@@ -114,5 +138,36 @@ document.querySelector("#checkResetCode form").addEventListener("submit", e =>
         }
         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");
+    }); 
 });

src/index.html

@@ -37,7 +37,7 @@
         <div>
             <h1>full stack developer</h1>
             <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>
     </header>
 
@@ -157,7 +157,7 @@
             <div class="spacer"></div>
             <p>&copy; 2021 Rohit Pai all rights reserved</p>
             <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>
         </footer>
     </main>