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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -9,160 +9,146 @@ 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>;
 
 export const ChangePasswordSection = () => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
+  const { createNotification } = useNotificationContext();
-    const { user } = useUser();
+  const { user } = useUser();
-    const { data: commonPasswords } = useGetCommonPasswords();
+  const { data: commonPasswords } = useGetCommonPasswords();
-    const { reset, control, handleSubmit } = useForm({
+  const { reset, control, handleSubmit } = useForm({
-        defaultValues: {
+    defaultValues: {
-            oldPassword: "",
+      oldPassword: "",
-            newPassword: ""
+      newPassword: ""
-        },
+    },
-        resolver: yupResolver(schema)
+    resolver: yupResolver(schema)
-    });
+  });
-    const [errors, setErrors] = useState<Errors>({});
+  const [errors, setErrors] = useState<Errors>({});
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-    const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
+  const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
-        try {
+    try {
-            if (!user?.email) return;
+      if (!user?.email) return;
-            if (!commonPasswords) return;
+      if (!commonPasswords) return;
 
-            const errorCheck = await checkPassword({
+      const errorCheck = await checkPassword({
-                password: newPassword,
+        password: newPassword,
-                commonPasswords,
+        commonPasswords,
-                setErrors
+        setErrors
-            });
+      });
 
-            if (errorCheck) return;
+      if (errorCheck) return;
-            
-            setIsLoading(true);
-            await attemptChangePassword({
-                email: user.email,
-                currentPassword: oldPassword,
-                newPassword
-            });
-            
-            setIsLoading(false);
-            createNotification({
-                text: "Successfully changed password",
-                type: "success"
-            });
 
-            reset();
+      setIsLoading(true);
-            window.location.href = "/login";
+      await attemptChangePassword({
-        
+        email: user.email,
-        } catch (err) {
+        currentPassword: oldPassword,
-            console.error(err);
+        newPassword
-            setIsLoading(false);
+      });
-            createNotification({
+
-                text: "Failed to change password",
+      setIsLoading(false);
-                type: "error"
+      createNotification({
-            });
+        text: "Successfully changed password",
-        }
+        type: "success"
+      });
+
+      reset();
+      window.location.href = "/login";
+    } catch (err) {
+      console.error(err);
+      setIsLoading(false);
+      createNotification({
+        text: "Failed to change password",
+        type: "error"
+      });
     }
-    
+  };
-    return (
-        <form 
-            onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
-        >
-            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
-                Change password
-            </h2>
-            <div className="max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input 
-                                placeholder="Old password" 
-                                type="password"
-                                {...field} 
-                                className="bg-mineshaft-800" 
-                            />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="oldPassword"
-                />
-            </div>
-            <div className="max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input 
-                                placeholder="New password" 
-                                type="password"
-                                {...field} 
-                                className="bg-mineshaft-800" 
-                            />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="newPassword"
-                />
-            </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="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>
-                                        <FontAwesomeIcon 
-                                            icon={faXmark} 
-                                            className="text-md text-red ml-0.5 mr-2.5"
-                                        />
-                                    </div>
-                                    <p className="text-gray-400 text-sm">
-                                        {errors[key as keyof Errors]} 
-                                    </p>
-                                </div>
-                            );
-                        }
 
-                        return null;
+  return (
-                    })}
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Change password</h2>
+      <div className="max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                placeholder="Old password"
+                type="password"
+                {...field}
+                className="bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="oldPassword"
+        />
+      </div>
+      <div className="max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                placeholder="New password"
+                type="password"
+                {...field}
+                className="bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="newPassword"
+        />
+      </div>
+      {Object.keys(errors).length > 0 && (
+        <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="items-top ml-1 flex flex-row justify-start" key={key}>
+                  <div>
+                    <FontAwesomeIcon icon={faXmark} className="text-md ml-0.5 mr-2.5 text-red" />
+                  </div>
+                  <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
                 </div>
-            )}
+              );
-            <Button
+            }
-                type="submit"
+
-                colorSchema="secondary"
+            return null;
-                isLoading={isLoading}
+          })}
-                isDisabled={isLoading}
+        </div>
-            >
+      )}
-                Save
+      <Button type="submit" colorSchema="secondary" isLoading={isLoading} isDisabled={isLoading}>
-            </Button>
+        Save
-        </form>
+      </Button>
-    );
+    </form>
-}
+  );
+};