further fixes to password check logic

frontend/src/components/utilities/checks/checkIsPasswordBreached.ts

@@ -15,21 +15,26 @@ export const checkIsPasswordBreached = async (password: string) => {
     const textEncoder = new TextEncoder();
     const encodedPwd = textEncoder.encode(password);
     const hash = crypto.createHash("sha1").update(encodedPwd).digest();
-    let hashedPwd = Array.from(new Uint8Array(hash))
+
+    const hashedPwd = Array.from(new Uint8Array(hash))
       .map((byte) => byte.toString(16).padStart(2, "0"))
       .join("")
       .toUpperCase();
-    hashedPwd = hashedPwd.slice(0, 5); // ONLY the first five SHA-1 hash chars are sent over HTTPS (the whole string can be sent but that's not very secure due to SHA-1 flaws)
 
-    const response = await axios.get(`${dataBreachCheckAPIBaseURL}${hashedPwd}`);
+    const hashedPwdToSend = hashedPwd.slice(0, 5); // ONLY the first five SHA-1 hash chars are sent over HTTPS (the whole string can be sent but that's not very secure due to SHA-1 flaws)
+
+    const response = await axios.get(`${dataBreachCheckAPIBaseURL}${hashedPwdToSend}`);
     const responseData = response.data.toUpperCase();
+
     const isBreachedPassword = responseData.includes(hashedPwd.slice(5, 40)); // compare against the API's ranged db's hash table
 
+    console.log("isBreachedPassword:", isBreachedPassword); // remove log later
     // Clear the hashed password from memory
+
     const zeroBuffer = new Uint8Array(encodedPwd.length);
     encodedPwd.set(zeroBuffer);
 
-    return isBreachedPassword; // boolean: true === "password has been involved in a data breach"
+    return isBreachedPassword; // boolean: true indicates the password has been involved in a data breach
   } catch (err: any) {
     if (axios.isAxiosError(err) && err.response && err.response.status === 429) {
       console.error("Received a 429 response from the Pwnd Passwords API");

frontend/src/components/utilities/checks/checkPassword.ts

@@ -70,15 +70,15 @@ const checkPassword = async ({
     errors.repeatedChar = "No 3 repeat, consecutive characters";
   }
 
-  if (commonPasswords.includes(password)) {
-    errors.commonPassword = "No common passwords";
-  }
-
   if (await checkIsPasswordBreached(password)) {
     errors.breachedPassword =
       "The password you provided is in a list of passwords commonly used on other websites. Please try again with a stronger password.";
   }
 
+  if (commonPasswords.includes(password)) {
+    errors.commonPassword = "No common passwords";
+  }
+
   setErrors(errors);
   return Object.keys(errors).length > 0;
 };

frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/ChangePasswordSection.tsx

@@ -9,29 +9,28 @@ import * as yup from "yup";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import attemptChangePassword from "@app/components/utilities/attemptChangePassword";
 import checkPassword from "@app/components/utilities/checks/checkPassword";
-import { 
+import { Button, FormControl, Input } from "@app/components/v2";
-    Button,
-    FormControl,
-    Input
-} from "@app/components/v2";
 import { useUser } from "@app/context";
 import { useGetCommonPasswords } from "@app/hooks/api";
 
 type Errors = {
-  tooShort?: string,
+  tooShort?: string;
-  tooLong?: string,
+  tooLong?: string;
-  upperCase?: string,
+  upperCase?: string;
-  lowerCase?: string,
+  lowerCase?: string;
-  number?: string,
+  number?: string;
-  specialChar?: string,
+  specialChar?: string;
-  repeatedChar?: string,
+  repeatedChar?: string;
-  breachedPassword?: string
+  commonPassword?: string;
+  breachedPassword?: string;
 };
 
-const schema = yup.object({
+const schema = yup
+  .object({
     oldPassword: yup.string().required("Old password is required"),
     newPassword: yup.string().required("New password is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
@@ -78,7 +77,6 @@ export const ChangePasswordSection = () => {
 
       reset();
       window.location.href = "/login";
-        
     } catch (err) {
       console.error(err);
       setIsLoading(false);
@@ -87,16 +85,14 @@ export const ChangePasswordSection = () => {
         type: "error"
       });
     }
-    }
+  };
 
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Change password</h2>
-                Change password
-            </h2>
       <div className="max-w-md">
         <Controller
           defaultValue=""
@@ -132,21 +128,16 @@ export const ChangePasswordSection = () => {
         />
       </div>
       {Object.keys(errors).length > 0 && (
-                <div className="my-4 max-w-md flex flex-col items-start rounded-md bg-white/5 px-2 py-2">
+        <div className="my-4 flex max-w-md flex-col items-start rounded-md bg-white/5 px-2 py-2">
           <div className="mb-2 text-sm text-gray-400">{t("section.password.validate-base")}</div>
           {Object.keys(errors).map((key) => {
             if (errors[key as keyof Errors]) {
               return (
-                                <div className="ml-1 flex flex-row items-top justify-start" key={key}>
+                <div className="items-top ml-1 flex flex-row justify-start" key={key}>
                   <div>
-                                        <FontAwesomeIcon 
+                    <FontAwesomeIcon icon={faXmark} className="text-md ml-0.5 mr-2.5 text-red" />
-                                            icon={faXmark} 
-                                            className="text-md text-red ml-0.5 mr-2.5"
-                                        />
                   </div>
-                                    <p className="text-gray-400 text-sm">
+                  <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
-                                        {errors[key as keyof Errors]} 
-                                    </p>
                 </div>
               );
             }
@@ -155,14 +146,9 @@ export const ChangePasswordSection = () => {
           })}
         </div>
       )}
-            <Button
+      <Button type="submit" colorSchema="secondary" isLoading={isLoading} isDisabled={isLoading}>
-                type="submit"
-                colorSchema="secondary"
-                isLoading={isLoading}
-                isDisabled={isLoading}
-            >
         Save
       </Button>
     </form>
   );
-}
+};