improve password length check (monkeytypegame#3973) lgutter

integratie check for too long passwords into isPasswordStrong, and
consistently check for it wherever passwords can be created / changed.

Co-authored-by: Liewe Gutter <[email protected]>

Author: lgutter

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

@@ -614,14 +614,6 @@ async function signUp(): Promise<void> {
     return;
   }
 
-  if (password.length > 25) {
-    LoginPage.hidePreloader();
-    LoginPage.enableInputs();
-    LoginPage.updateSignupButton();
-    Notifications.add("Password is too long", 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,}))$/
@@ -650,10 +642,10 @@ async function signUp(): Promise<void> {
     return;
   }
 
-  // Force user to use a capital letter, number, special character when setting up an account and changing password
+  // Force user to use a capital letter, number, special character and reasonable length when setting up an account and changing password
   if (!Misc.isLocalhost() && !Misc.isPasswordStrong(password)) {
     Notifications.add(
-      "Password must contain at least one capital letter, number, a special character and at least 8 characters long",
+      "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
       0,
       4
     );

frontend/src/ts/pages/login.ts

@@ -4,6 +4,7 @@ import Page from "./page";
 import * as Notifications from "../elements/notifications";
 import { InputIndicator } from "../elements/input-indicator";
 import * as Skeleton from "../popups/skeleton";
+import * as Misc from "../utils/misc";
 
 export function enableSignUpButton(): void {
   $(".page.pageLogin .register.side .button").removeClass("disabled");
@@ -112,22 +113,20 @@ const checkPassword = (): void => {
     ".page.pageLogin .register.side .passwordInput"
   ).val() as string;
 
-  // Force user to use a capital letter, number, special character when setting up an account and changing password
-  if (password.length < 8) {
-    passwordIndicator.show("short", "Password must be at least 8 characters");
-    return;
-  } else {
-    const hasCapital = password.match(/[A-Z]/);
-    const hasNumber = password.match(/[\d]/);
-    const hasSpecial = password.match(/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/);
-    if (!hasCapital || !hasNumber || !hasSpecial) {
+  // Force user to use a capital letter, number, special character and reasonable length when setting up an account and changing password
+  if (!Misc.isLocalhost() && !Misc.isPasswordStrong(password)) {
+    if (password.length < 8) {
+      passwordIndicator.show("short", "Password must be at least 8 characters");
+    } else if (password.length > 64) {
+      passwordIndicator.show("long", "Password must be at most 64 characters");
+    } else {
       passwordIndicator.show(
         "weak",
         "Password must contain at least one capital letter, number, and special character"
       );
-    } else {
-      passwordIndicator.show("good", "Password is good");
     }
+  } else {
+    passwordIndicator.show("good", "Password is good");
   }
   updateSignupButton();
 };
@@ -208,6 +207,10 @@ const passwordIndicator = new InputIndicator(
       icon: "fa-times",
       level: -1,
     },
+    long: {
+      icon: "fa-times",
+      level: -1,
+    },
     weak: {
       icon: "fa-times",
       level: -1,

frontend/src/ts/popups/simple-popups.ts

@@ -537,7 +537,7 @@ list["updatePassword"] = new SimplePopup(
       }
       if (!isLocalhost() && !isPasswordStrong(newPass)) {
         Notifications.add(
-          "New password must contain at least one capital letter, number, a special character and at least 8 characters long",
+          "New password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
           0,
           4
         );

frontend/src/ts/utils/misc.ts

@@ -1330,7 +1330,8 @@ export function isPasswordStrong(password: string): boolean {
   const hasNumber = !!password.match(/[\d]/);
   const hasSpecial = !!password.match(/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/);
   const isLong = password.length >= 8;
-  return hasCapital && hasNumber && hasSpecial && isLong;
+  const isShort = password.length <= 64;
+  return hasCapital && hasNumber && hasSpecial && isLong && isShort;
 }
 
 export function areUnsortedArraysEqual(a: unknown[], b: unknown[]): boolean {

frontend/static/email-handler.html

@@ -182,7 +182,8 @@
         /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/
       );
       const isLong = password.length >= 8;
-      return hasCapital && hasNumber && hasSpecial && isLong;
+      const isShort = password.length <= 64;
+      return hasCapital && hasNumber && hasSpecial && isLong && isShort;
     }
 
     function handleVerifyEmail(actionCode, continueUrl) {
@@ -244,7 +245,7 @@
 
           if (!isPasswordStrong(newPassword)) {
             alert(
-              "Password must be at least 8 characters long and contain at least one capital letter, one number and one special character."
+              "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long"
             );
             showResetPassword();
             return;