fix: password validation rules (@fehmer) (monkeytypegame#6967)

fixes monkeytypegame#6966 , monkeytypegame#6965

Author: fehmer

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

@@ -143,6 +143,9 @@ export type ValidationOptions<T> = (T extends string
   callback?: (result: ValidationResult) => void;
 };
 
+export type ValidatedHtmlInputElement = HTMLInputElement & {
+  isValid: () => boolean | undefined;
+};
 /**
  * adds an 'InputIndicator` to the given `inputElement` and updates its status depending on the given validation
  * @param inputElement
@@ -151,7 +154,7 @@ export type ValidationOptions<T> = (T extends string
 export function validateWithIndicator<T>(
   inputElement: HTMLInputElement,
   options: ValidationOptions<T>
-): void {
+): ValidatedHtmlInputElement {
   //use indicator
   const indicator = new InputIndicator(inputElement, {
     success: {
@@ -172,7 +175,10 @@ export function validateWithIndicator<T>(
       level: 0,
     },
   });
+
+  let isValid: boolean | undefined = undefined;
   const callback = (result: ValidationResult): void => {
+    isValid = result.status === "success" || result.status === "warning";
     if (result.status === "failed" || result.status === "warning") {
       indicator.show(result.status, result.errorMessage);
     } else {
@@ -188,6 +194,11 @@ export function validateWithIndicator<T>(
   );
 
   inputElement.addEventListener("input", handler);
+
+  const result = inputElement as ValidatedHtmlInputElement;
+  result.isValid = () => isValid;
+
+  return result;
 }
 
 export type ConfigInputOptions<K extends ConfigKey, T = ConfigType[K]> = {

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

@@ -23,7 +23,6 @@ import {
 import {
   createErrorMessage,
   isDevEnvironment,
-  isPasswordStrong,
   reloadAfter,
 } from "../utils/misc";
 import * as CustomTextState from "../states/custom-text-name";
@@ -38,9 +37,14 @@ import {
 } from "../utils/simple-modal";
 import { ShowOptions } from "../utils/animated-modal";
 import { GenerateDataRequest } from "@monkeytype/contracts/dev";
-import { UserEmailSchema, UserNameSchema } from "@monkeytype/schemas/users";
+import {
+  PasswordSchema,
+  UserEmailSchema,
+  UserNameSchema,
+} from "@monkeytype/schemas/users";
 import { goToPage } from "../pages/leaderboards";
 import FileStorage from "../utils/file-storage";
+import { z } from "zod";
 
 type PopupKey =
   | "updateEmail"
@@ -551,6 +555,9 @@ list.updatePassword = new SimpleModal({
       placeholder: "new password",
       type: "password",
       initVal: "",
+      validation: {
+        schema: isDevEnvironment() ? z.string().min(6) : PasswordSchema,
+      },
     },
     {
       placeholder: "confirm new password",
@@ -580,14 +587,6 @@ list.updatePassword = new SimpleModal({
       };
     }
 
-    if (!isDevEnvironment() && !isPasswordStrong(newPassword)) {
-      return {
-        status: 0,
-        message:
-          "New password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
-      };
-    }
-
     const reauth = await reauthenticate({ password: previousPass });
     if (reauth.status !== 1) {
       return {

frontend/src/ts/pages/login.ts

@@ -1,10 +1,14 @@
 import Ape from "../ape";
 import Page from "./page";
 import * as Skeleton from "../utils/skeleton";
-import * as Misc from "../utils/misc";
 import TypoList from "../utils/typo-list";
-import { UserEmailSchema, UserNameSchema } from "@monkeytype/schemas/users";
+import {
+  PasswordSchema,
+  UserEmailSchema,
+  UserNameSchema,
+} from "@monkeytype/schemas/users";
 import { validateWithIndicator } from "../elements/input-validation";
+import { isDevEnvironment } from "../utils/misc";
 import { z } from "zod";
 
 let registerForm: {
@@ -39,11 +43,19 @@ export function hidePreloader(): void {
   $(".pageLogin .preloader").addClass("hidden");
 }
 
+function isFormComplete(): boolean {
+  return (
+    registerForm.name !== undefined &&
+    registerForm.email !== undefined &&
+    registerForm.password !== undefined
+  );
+}
+
 export const updateSignupButton = (): void => {
-  if (Object.values(registerForm).some((it) => it === undefined)) {
-    disableSignUpButton();
-  } else {
+  if (isFormComplete()) {
     enableSignUpButton();
+  } else {
+    disableSignUpButton();
   }
 };
 
@@ -53,9 +65,7 @@ type SignupData = {
   password: string;
 };
 export function getSignupData(): SignupData | false {
-  return Object.values(registerForm).some((it) => it === undefined)
-    ? false
-    : (registerForm as SignupData);
+  return isFormComplete() ? (registerForm as SignupData) : false;
 }
 
 const nameInputEl = document.querySelector(
@@ -84,9 +94,58 @@ let disposableEmailModule: typeof import("disposable-email-domains-js") | null =
   null;
 let moduleLoadAttempted = false;
 
-const emailInputEl = document.querySelector(
-  ".page.pageLogin .register.side input.emailInput"
-) as HTMLInputElement;
+const emailInputEl = validateWithIndicator(
+  document.querySelector(
+    ".page.pageLogin .register.side input.emailInput"
+  ) as HTMLInputElement,
+  {
+    schema: UserEmailSchema,
+    isValid: async (email: string) => {
+      const educationRegex =
+        /@.*(student|education|school|\.edu$|\.edu\.|\.ac\.|\.sch\.)/i;
+      if (educationRegex.test(email)) {
+        return {
+          warning:
+            "Some education emails will fail to receive our messages, or disable the account as soon as you graduate. Consider using a personal email address.",
+        };
+      }
+
+      const emailHasTypo = TypoList.some((typo) => {
+        return email.endsWith(typo);
+      });
+      if (emailHasTypo) {
+        return {
+          warning: "Please check your email address, it may contain a typo.",
+        };
+      }
+
+      if (
+        disposableEmailModule &&
+        disposableEmailModule.isDisposableEmail !== undefined
+      ) {
+        try {
+          if (disposableEmailModule.isDisposableEmail(email)) {
+            return {
+              warning:
+                "Using a temporary email may cause issues with logging in, password resets and support. Consider using a permanent email address. Don't worry, we don't send spam.",
+            };
+          }
+        } catch (e) {
+          // Silent failure
+        }
+      }
+
+      return true;
+    },
+    debounceDelay: 0,
+    callback: (result) => {
+      if (result.status === "success") {
+        //re-validate the verify email
+        emailVerifyInputEl.dispatchEvent(new Event("input"));
+      }
+    },
+  }
+);
 
 emailInputEl.addEventListener("focus", async () => {
   if (!moduleLoadAttempted) {
@@ -99,54 +158,6 @@ emailInputEl.addEventListener("focus", async () => {
   }
 });
 
-validateWithIndicator(emailInputEl, {
-  schema: UserEmailSchema,
-  isValid: async (email: string) => {
-    const educationRegex =
-      /@.*(student|education|school|\.edu$|\.edu\.|\.ac\.|\.sch\.)/i;
-    if (educationRegex.test(email)) {
-      return {
-        warning:
-          "Some education emails will fail to receive our messages, or disable the account as soon as you graduate. Consider using a personal email address.",
-      };
-    }
-
-    const emailHasTypo = TypoList.some((typo) => {
-      return email.endsWith(typo);
-    });
-    if (emailHasTypo) {
-      return {
-        warning: "Please check your email address, it may contain a typo.",
-      };
-    }
-
-    if (
-      disposableEmailModule &&
-      disposableEmailModule.isDisposableEmail !== undefined
-    ) {
-      try {
-        if (disposableEmailModule.isDisposableEmail(email)) {
-          return {
-            warning:
-              "Using a temporary email may cause issues with logging in, password resets and support. Consider using a permanent email address. Don't worry, we don't send spam.",
-          };
-        }
-      } catch (e) {
-        // Silent failure
-      }
-    }
-
-    return true;
-  },
-  debounceDelay: 0,
-  callback: (result) => {
-    if (result.status === "success") {
-      //re-validate the verify email
-      emailVerifyInputEl.dispatchEvent(new Event("input"));
-    }
-  },
-});
-
 const emailVerifyInputEl = document.querySelector(
   ".page.pageLogin .register.side input.verifyEmailInput"
 ) as HTMLInputElement;
@@ -159,36 +170,27 @@ validateWithIndicator(emailVerifyInputEl, {
   debounceDelay: 0,
   callback: (result) => {
     registerForm.email =
-      result.status === "success" ? emailInputEl.value : undefined;
+      emailInputEl.isValid() && result.status === "success"
+        ? emailInputEl.value
+        : undefined;
     updateSignupButton();
   },
 });
 
-const passwordInputEl = document.querySelector(
-  ".page.pageLogin .register.side .passwordInput"
-) as HTMLInputElement;
-validateWithIndicator(passwordInputEl, {
-  schema: z.string().min(6), //firebase requires min 6 chars, we apply stricter rules on prod
-  isValid: async (password: string) => {
-    if (!Misc.isDevEnvironment() && !Misc.isPasswordStrong(password)) {
-      if (password.length < 8) {
-        return "Password must be at least 8 characters";
-      } else if (password.length > 64) {
-        return "Password must be at most 64 characters";
-      } else {
-        return "Password must contain at least one capital letter, number, and special character";
+const passwordInputEl = validateWithIndicator(
+  document.querySelector(
+    ".page.pageLogin .register.side .passwordInput"
+  ) as HTMLInputElement,
+  {
+    schema: isDevEnvironment() ? z.string().min(6) : PasswordSchema,
+    callback: (result) => {
+      if (result.status === "success") {
+        //re-validate the verify password
+        passwordVerifyInputEl.dispatchEvent(new Event("input"));
       }
-    }
-    return true;
-  },
-  debounceDelay: 0,
-  callback: (result) => {
-    if (result.status === "success") {
-      //re-validate the verify password
-      passwordVerifyInputEl.dispatchEvent(new Event("input"));
-    }
-  },
-});
+    },
+  }
+);
 
 const passwordVerifyInputEl = document.querySelector(
   ".page.pageLogin .register.side .verifyPasswordInput"
@@ -202,7 +204,9 @@ validateWithIndicator(passwordVerifyInputEl, {
   debounceDelay: 0,
   callback: (result) => {
     registerForm.password =
-      result.status === "success" ? passwordInputEl.value : undefined;
+      passwordInputEl.isValid() && result.status === "success"
+        ? passwordInputEl.value
+        : undefined;
     updateSignupButton();
   },
 });

packages/contracts/src/users.ts

@@ -439,7 +439,7 @@ export const usersContract = c.router(
     },
     updatePassword: {
       summary: "update password",
-      description: "Updates a user's email",
+      description: "Updates a user's password",
       method: "PATCH",
       path: "/password",
       body: UpdatePasswordRequestSchema.strict(),

packages/schemas/src/users.ts

@@ -371,3 +371,14 @@ export const ReportUserReasonSchema = z.enum([
   "Suspected cheating",
 ]);
 export type ReportUserReason = z.infer<typeof ReportUserReasonSchema>;
+
+export const PasswordSchema = z
+  .string()
+  .min(8, { message: "must be at least 8 characters" })
+  .max(64, { message: "must be at most 64 characters" })
+  .regex(/[A-Z]/, { message: "must contain at least one capital letter" })
+  .regex(/[\d]/, { message: "must contain at least one number" })
+  .regex(/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/, {
+    message: "must contain at least one special character",
+  });
+export type Password = z.infer<typeof PasswordSchema>;