refactor(login): use inputValidation on login page (@fehmer) (monkeytypegame#6866)

Author: fehmer

frontend/src/ts/commandline/commandline.ts

@@ -15,18 +15,18 @@ import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
 import { parseIntOptional } from "../utils/numbers";
 import { debounce } from "throttle-debounce";
 import { intersect } from "@monkeytype/util/arrays";
-import { createInputEventHandler } from "../elements/input-validation";
+import {
+  createInputEventHandler,
+  ValidationResult,
+} from "../elements/input-validation";
 
 type CommandlineMode = "search" | "input";
 type InputModeParams = {
   command: Command | null;
   placeholder: string | null;
   value: string | null;
   icon: string | null;
-  validation?: {
-    status: "checking" | "success" | "failed";
-    errorMessage?: string;
-  };
+  validation?: ValidationResult;
 };
 
 let activeIndex = 0;

frontend/src/ts/controllers/account-controller.ts

@@ -404,66 +404,16 @@ async function signUp(): Promise<void> {
   LoginPage.disableInputs();
   LoginPage.disableSignUpButton();
   LoginPage.showPreloader();
-  const nname = ($(".pageLogin .register input")[0] as HTMLInputElement).value;
-  const email = ($(".pageLogin .register input")[1] as HTMLInputElement).value;
-  const emailVerify = ($(".pageLogin .register input")[2] as HTMLInputElement)
-    .value;
-  const password = ($(".pageLogin .register input")[3] as HTMLInputElement)
-    .value;
-  const passwordVerify = (
-    $(".pageLogin .register input")[4] as HTMLInputElement
-  ).value;
-
-  if (nname === "" || email === "" || emailVerify === "" || password === "") {
-    LoginPage.hidePreloader();
-    LoginPage.enableInputs();
-    LoginPage.updateSignupButton();
-    Notifications.add("Please fill in all fields", 0);
-    return;
-  }
-
-  if (
-    !email.match(
-      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-    )
-  ) {
-    Notifications.add("Invalid email", 0);
-    LoginPage.hidePreloader();
-    LoginPage.enableInputs();
-    LoginPage.updateSignupButton();
-    return;
-  }
-
-  if (email !== emailVerify) {
-    Notifications.add("Emails do not match", 0);
-    LoginPage.hidePreloader();
-    LoginPage.enableInputs();
-    LoginPage.updateSignupButton();
-    return;
-  }
-
-  if (password !== passwordVerify) {
-    Notifications.add("Passwords do not match", 0);
-    LoginPage.hidePreloader();
-    LoginPage.enableInputs();
-    LoginPage.updateSignupButton();
-    return;
-  }
 
-  // Force user to use a capital letter, number, special character and reasonable length when setting up an account and changing password
-  if (!Misc.isDevEnvironment() && !Misc.isPasswordStrong(password)) {
-    Notifications.add(
-      "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
-      0,
-      {
-        duration: 4,
-      }
-    );
+  const signupData = LoginPage.getSignupData();
+  if (signupData === false) {
     LoginPage.hidePreloader();
     LoginPage.enableInputs();
     LoginPage.updateSignupButton();
+    Notifications.add("Please fill in all fields", 0);
     return;
   }
+  const { name: nname, email, password } = signupData;
 
   try {
     const createdAuthUser = await createUserWithEmailAndPassword(

frontend/src/ts/elements/input-validation.ts

@@ -10,7 +10,7 @@ import Config, * as UpdateConfig from "../config";
 import * as Notifications from "../elements/notifications";
 
 export type ValidationResult = {
-  status: "checking" | "success" | "failed";
+  status: "checking" | "success" | "failed" | "warning";
   errorMessage?: string;
 };
 
@@ -28,7 +28,7 @@ export type Validation<T> = {
    * @param thisPopup the current modal
    * @returns true if the `value` is valid, an errorMessage as string if it is invalid.
    */
-  isValid?: (value: T) => Promise<true | string>;
+  isValid?: (value: T) => Promise<true | string | { warning: string }>;
 
   /** custom debounce delay for `isValid` call. defaults to 100 */
   debounceDelay?: number;
@@ -67,7 +67,17 @@ export function createInputEventHandler<T>(
             if (result === true) {
               callback({ status: "success" });
             } else {
-              callback({ status: "failed", errorMessage: result });
+              if (typeof result === "object" && "warning" in result) {
+                callback({
+                  status: "warning",
+                  errorMessage: result.warning,
+                });
+              } else {
+                callback({
+                  status: "failed",
+                  errorMessage: result,
+                });
+              }
             }
           }
         )
@@ -140,14 +150,18 @@ export function validateWithIndicator<T>(
       icon: "fa-times",
       level: -1,
     },
+    warning: {
+      icon: "fa-exclamation-triangle",
+      level: 1,
+    },
     checking: {
       icon: "fa-circle-notch",
       spinIcon: true,
       level: 0,
     },
   });
   const callback = (result: ValidationResult): void => {
-    if (result.status === "failed") {
+    if (result.status === "failed" || result.status === "warning") {
       indicator.show(result.status, result.errorMessage);
     } else {
       indicator.show(result.status);

frontend/src/ts/modals/forgot-password.ts

@@ -3,7 +3,7 @@ import AnimatedModal from "../utils/animated-modal";
 import Ape from "../ape/index";
 import * as Notifications from "../elements/notifications";
 import * as Loader from "../elements/loader";
-import { z } from "zod";
+import { UserEmailSchema } from "@monkeytype/schemas/users";
 
 export function show(): void {
   if (!CaptchaController.isCaptchaAvailable()) {
@@ -47,9 +47,7 @@ async function submit(): Promise<void> {
     return;
   }
 
-  const emailSchema = z.string().email();
-
-  const validation = emailSchema.safeParse(email);
+  const validation = UserEmailSchema.safeParse(email);
   if (!validation.success) {
     Notifications.add("Please enter a valid email address");
     CaptchaController.reset("forgotPasswordModal");

frontend/src/ts/modals/simple-modals.ts

@@ -39,7 +39,7 @@ import {
 } from "../utils/simple-modal";
 import { ShowOptions } from "../utils/animated-modal";
 import { GenerateDataRequest } from "@monkeytype/contracts/dev";
-import { UserEmailSchema, UserNameSchema } from "@monkeytype/contracts/users";
+import { UserEmailSchema, UserNameSchema } from "@monkeytype/schemas/users";
 import { goToPage } from "../pages/leaderboards";
 import FileStorage from "../utils/file-storage";