Finish preliminary making user settings, org settings styling similar to usage and billing page

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

@@ -0,0 +1,166 @@
+import { useState } from "react";
+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";
+import { yupResolver } from "@hookform/resolvers/yup";
+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 { 
+    Button,
+    FormControl,
+    Input
+} from "@app/components/v2";
+import { useUser } from "@app/context";
+import { useGetCommonPasswords } from "@app/hooks/api";
+
+type Errors = {
+  length?: string,
+  upperCase?: string,
+  lowerCase?: string,
+  number?: string,
+  specialChar?: string,
+  repeatedChar?: string,
+};
+
+const schema = yup.object({
+    oldPassword: yup.string().required("Old password is required"),
+    newPassword: yup.string().required("New password is required")
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+export const ChangePasswordSection = () => {
+    const { t } = useTranslation();
+    const { createNotification } = useNotificationContext();
+    const { user } = useUser();
+    const { data: commonPasswords } = useGetCommonPasswords();
+    const { reset, control, handleSubmit } = useForm({
+        defaultValues: {
+            oldPassword: "",
+            newPassword: ""
+        },
+        resolver: yupResolver(schema)
+    });
+    const [errors, setErrors] = useState<Errors>({});
+    const [isLoading, setIsLoading] = useState(false);
+
+    const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
+        try {
+            if (!user?.email) return;
+            if (!commonPasswords) return;
+            
+            const errorCheck = checkPassword({
+                password: newPassword,
+                commonPasswords,
+                setErrors
+            });
+
+            if (errorCheck) return;
+            
+            setIsLoading(true);
+            await attemptChangePassword({
+                email: user.email,
+                currentPassword: oldPassword,
+                newPassword
+            });
+            
+            setIsLoading(false);
+            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 max-w-screen-lg 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;
+                    })}
+                </div>
+            )}
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+            >
+                Save
+            </Button>
+        </form>
+    );
+}

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

@@ -0,0 +1 @@
+export { ChangePasswordSection } from "./ChangePasswordSection";