password resetting (frontend)

front/src/index.ts

@@ -168,6 +168,12 @@ const hideElements = (elements: string[]) =>
     (document.querySelector(elementName)! as HTMLElement).style.display = "none";
   });
 
+const toggleElements = (elements: string[]) =>
+  elements.forEach((elementName) => {
+    const element = document.querySelector(elementName)! as HTMLElement;
+    element.style.display = element.style.display === "block" ? "none" : "block";
+  });
+
 const openError = (content: string) => {
   const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
   const txt = <HTMLParagraphElement>errorBox.querySelector(".error-box-text")!;
@@ -199,12 +205,24 @@ const request = (resource: string, data: any) =>
           case -2:
             // mail unverified
             showElements([".mail-box"]);
-            hideElements([".login-box", ".register-box", ".sms-box", ".package-list", ".logout-button"]);
+            hideElements([
+              ".login-box",
+              ".register-box",
+              ".sms-box",
+              ".package-list",
+              ".logout-button",
+            ]);
             break;
           case -3:
             // phone unverified
             showElements([".sms-box"]);
-            hideElements([".login-box", ".register-box", ".mail-box", ".package-list", ".logout-button"]);
+            hideElements([
+              ".login-box",
+              ".register-box",
+              ".mail-box",
+              ".package-list",
+              ".logout-button",
+            ]);
             break;
           default:
             openError(res.description || res.msg || `Session error: ${res.status}`);
@@ -383,13 +401,12 @@ ${d.pickupPointPostCode} ${d.pickupPointCity}`,
 };
 
 window.addEventListener("load", () => {
-  const login = document.querySelector(".login-form")!;
+  const login = document.querySelector(".login-form")! as HTMLFormElement;
   login.addEventListener("submit", (event) => {
     event.preventDefault();
-    const form = event.target as HTMLFormElement;
     request("login", {
-      login: form.login.value,
-      password: form.password.value,
+      login: (login.querySelector('input[name="login"]')! as HTMLInputElement).value,
+      password: (login.querySelector('input[name="password"]')! as HTMLInputElement).value,
     }).then((res) => {
       if (res.status == 200) {
         refreshPackages().then(() => {
@@ -409,6 +426,45 @@ window.addEventListener("load", () => {
     });
   });
 
+  const pwdResetOpen = document.querySelector(".password-reset-open-box button")!;
+  pwdResetOpen.addEventListener("click", () => {
+    toggleElements([".password-reset-box"]);
+  });
+
+  const pwdReset = document.querySelector(".password-reset-form")! as HTMLFormElement;
+  pwdReset.addEventListener("submit", (event) => {
+    event.preventDefault();
+    request("reset_request", {
+      login: (pwdReset.querySelector('input[name="login"]')! as HTMLInputElement).value,
+    }).then((res) => {
+      if (res.status == 200) {
+        hideElements([".login-box", ".register-box", ".description", ".password-reset-box"]);
+        showElements([".password-reset-verify-box"]);
+      } else {
+        openError(res.msg || "Error during password reset. Try again in a while?");
+      }
+    });
+  });
+
+  const pwdResetVerify = document.querySelector(".password-reset-verify-form")! as HTMLFormElement;
+  pwdResetVerify.addEventListener("submit", (event) => {
+    event.preventDefault();
+    request("reset_confirm", {
+      login: (pwdReset.querySelector('input[name="login"]')! as HTMLInputElement).value,
+      hash: (pwdResetVerify.querySelector('input[name="hash"]')! as HTMLInputElement).value,
+      password: (pwdResetVerify.querySelector('input[name="password"]')! as HTMLInputElement).value,
+    }).then((res) => {
+      if (res.status == 200) {
+        // yes, error, I'm too lazy to implement a separate information modal 🤷‍♀️
+        openError("Your password has been reset successfully.");
+        hideElements([".password-reset-verify-box"]);
+        showElements([".login-box", ".register-box", ".description"]);
+      } else {
+        openError(res.msg || "Error during password reset. Try again in a while?");
+      }
+    });
+  });
+
   const register = document.querySelector(".register-form")!;
   register.addEventListener("submit", async (event) => {
     event.preventDefault();
@@ -419,7 +475,8 @@ window.addEventListener("load", () => {
       login: (form.querySelector('input[name="login"]')! as HTMLInputElement).value,
       password: (form.querySelector('input[name="password"]')! as HTMLInputElement).value,
       mail: (form.querySelector('input[name="email"]')! as HTMLInputElement).value,
-      hcaptcha: (form.querySelector('textarea[name="h-captcha-response"]')! as HTMLInputElement).value,
+      hcaptcha: (form.querySelector('textarea[name="h-captcha-response"]')! as HTMLTextAreaElement)
+        .value,
     });
     if (res.status == 200) {
       hideElements([".register-box", ".login-box"]);

front/src/style.scss

@@ -19,6 +19,8 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
 @import "../node_modules/bulma/sass/components/navbar.sass";
 
 .login-box,
+.password-reset-box,
+.password-reset-verify-box,
 .register-box,
 .mail-box,
 .sms-box,
@@ -51,12 +53,14 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
   font-weight: bold;
 }
 
-.description {
-	margin-top: 25px;
+.description,
+.password-reset-open-box {
+  margin-top: 25px;
 }
-.paragraph {
-	margin-top: 10px;
+.paragraph,
+.password-reset-box {
+  margin-top: 10px;
 }
 .navbar-item > img {
-	max-height: 2rem;
+  max-height: 2rem;
 }

webroot/index.html

@@ -52,6 +52,43 @@
             <input type="submit" class="button" value="Login">
           </div>
         </form>
+        <div class="password-reset-open-box">
+          <span>Forgot your password?</span>
+          <button class="button is-light is-small">Reset it here.</button>
+        </div>
+        <div class="password-reset-box">
+          <form class="password-reset-form">
+            <div class="field">
+              <label for="login" class="label">Username</label>
+              <div class="control">
+                <input type="login" name="login" class="input" placeholder="filip.grzywok" required>
+              </div>
+            </div>
+            <div class="control">
+              <input type="submit" class="button" value="Reset password">
+            </div>
+          </form>
+        </div>
+      </div>
+      <div class="password-reset-verify-box column">
+        <form class="password-reset-verify-form">
+          <div class="field">
+            <label for="hash" class="label">Verification code</label>
+            <div class="control">
+              <input type="text" name="hash" class="input" placeholder="aoeu" required>
+            </div>
+            <p class="help">We've sent you that in an e-mail</p>
+          </div>
+          <div class="field">
+            <label for="password" class="label">Password</label>
+            <div class="control">
+              <input type="password" name="password" class="input" placeholder="***** ***" required>
+            </div>
+          </div>
+          <div class="control">
+            <input type="submit" class="button" value="Set password">
+          </div>
+        </form>
       </div>
       <div class="register-box column">
         <label class="label is-large">Register</label>