Fix: Format entire frontend properly

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -21,25 +21,27 @@ import { useCreateAPIKey } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const expirations = [
-    { label: "1 day", value: "1d" },
-    { label: "7 days", value: "7d" },
-    { label: "1 month", value: "1mo" },
-    { label: "6 months", value: "6mo" },
-    { label: "12 months", value: "12mo" }
+  { label: "1 day", value: "1d" },
+  { label: "7 days", value: "7d" },
+  { label: "1 month", value: "1mo" },
+  { label: "6 months", value: "6mo" },
+  { label: "12 months", value: "12mo" }
 ];
 
 const expirationMapping: { [key: string]: number } = {
-    "1d": 86400,
-    "7d": 604800,
-    "1mo": 2592000,
-    "6mo": 15552000,
-    "12mo": 31104000
-}
+  "1d": 86400,
+  "7d": 604800,
+  "1mo": 2592000,
+  "6mo": 15552000,
+  "12mo": 31104000
+};
 
-const schema = yup.object({
+const schema = yup
+  .object({
     name: yup.string().required("API Key name is required"),
     expiresIn: yup.string().required("API Key expiration window is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
@@ -48,154 +50,136 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addAPIKey"]>, state?: boolean) => void;
 };
 
-export const AddAPIKeyModal = ({
-    popUp,
-    handlePopUpToggle
-}: Props) => {
-    const [newAPIKey, setNewAPIKey] = useState("");
-    const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync, isLoading } = useCreateAPIKey();
-    
-    const {
-        control,
-        handleSubmit,
-        reset
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [newAPIKey, setNewAPIKey] = useState("");
+  const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync, isLoading } = useCreateAPIKey();
 
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
+  const { control, handleSubmit, reset } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-        if (isAPIKeyCopied) {
-            timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
-        }
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
 
-        return () => clearTimeout(timer);
+    if (isAPIKeyCopied) {
+      timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
   }, [setIsAPIKeyCopied]);
 
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(newAPIKey);
-        setIsAPIKeyCopied.on();
-    };
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newAPIKey);
+    setIsAPIKeyCopied.on();
+  };
 
-    const onFormSubmit = async ({ name, expiresIn }: FormData) => {
-        try {
-            const { apiKey } = await mutateAsync({
-                name,
-                expiresIn: expirationMapping[expiresIn]
-            });
-            
-            setNewAPIKey(apiKey);
+  const onFormSubmit = async ({ name, expiresIn }: FormData) => {
+    try {
+      const { apiKey } = await mutateAsync({
+        name,
+        expiresIn: expirationMapping[expiresIn]
+      });
 
-            createNotification({
-                text: "Successfully created API key",
-                type: "success"
-            });
-            
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to create API key",
-                type: "error"
-            });
-        }
+      setNewAPIKey(apiKey);
+
+      createNotification({
+        text: "Successfully created API key",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create API key",
+        type: "error"
+      });
     }
-    
-    const hasAPIKey = Boolean(newAPIKey);
-    
-    return (
-        <Modal
-            isOpen={popUp?.addAPIKey?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addAPIKey", isOpen);
-                reset();
-                setNewAPIKey("");
-            }}
-        >
-            <ModalContent title="Create API Key">
-            {!hasAPIKey ? (
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="name"
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                                label="Name"
-                                isError={Boolean(error)}
-                                errorText={error?.message}
-                            >
-                            <Input 
-                                {...field} 
-                                placeholder="My API Key"
-                            />
-                            </FormControl>
-                        )}
-                    />
-                    <Controller
-                        control={control}
-                        name="expiresIn"
-                        defaultValue="6mo"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl
-                                label="Expiration"
-                                errorText={error?.message}
-                                isError={Boolean(error)}
-                            >
-                                <Select
-                                    defaultValue={field.value}
-                                    {...field}
-                                    onValueChange={(e) => onChange(e)}
-                                    className="w-full"
-                                >
-                                    {expirations.map(({ label, value }) => (
-                                        <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
-                                            {label}
-                                        </SelectItem>
-                                    ))}
-                                </Select>
-                            </FormControl>
-                        )}
-                    />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isLoading}
-                            isDisabled={isLoading}
-                        >
-                            Add
-                        </Button>
-                        <Button 
-                            colorSchema="secondary" 
-                            variant="plain" 
-                            onClick={() => handlePopUpToggle("addAPIKey", false)}
-                        >
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            ) : (
-                <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                  <p className="mr-4 break-all">{newAPIKey}</p>
-                  <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={copyTokenToClipboard}
+  };
+
+  const hasAPIKey = Boolean(newAPIKey);
+
+  return (
+    <Modal
+      isOpen={popUp?.addAPIKey?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addAPIKey", isOpen);
+        reset();
+        setNewAPIKey("");
+      }}
+    >
+      <ModalContent title="Create API Key">
+        {!hasAPIKey ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                  <Input {...field} placeholder="My API Key" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="expiresIn"
+              defaultValue="6mo"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
                   >
-                    <FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
-                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                        Click to copy
-                    </span>
-                  </IconButton>
-                </div>
-            )}
-            </ModalContent>
-        </Modal> 
-    );
-}
+                    {expirations.map(({ label, value }) => (
+                      <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+              >
+                Add
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("addAPIKey", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{newAPIKey}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyTokenToClipboard}
+            >
+              <FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
+              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                Click to copy
+              </span>
+            </IconButton>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -1,2 +1 @@
-
-export { APIKeySection } from "./APIKeySection";
+export { APIKeySection } from "./APIKeySection";

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

@@ -1 +1 @@
-export { AuthMethodSection } from "./AuthMethodSection";
+export { AuthMethodSection } from "./AuthMethodSection";

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

@@ -4,29 +4,29 @@ import { useRouter } from "next/router";
 import ListBox from "@app/components/basic/Listbox";
 
 export const ChangeLanguageSection = () => {
-    const { t, i18n } = useTranslation();
-    const router = useRouter();
-    const lang = router.locale ?? "en";
+  const { t, i18n } = useTranslation();
+  const router = useRouter();
+  const lang = router.locale ?? "en";
 
-    const setLanguage = async (to: string) => {
-        router.push(router.asPath, router.asPath, { locale: to });
-        localStorage.setItem("lang", to);
-        i18n.changeLanguage(to);
-    };
+  const setLanguage = async (to: string) => {
+    router.push(router.asPath, router.asPath, { locale: to });
+    localStorage.setItem("lang", to);
+    i18n.changeLanguage(to);
+  };
 
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-8">
-                {t("settings.personal.change-language")}
-            </p>
-            <div className="w-28">
-                <ListBox
-                    isSelected={lang}
-                    onChange={setLanguage}
-                    data={["en", "ko", "fr", "es"]}
-                    text={`${t("common.language")}: `}
-                />
-            </div>
-        </div>
-    );
-}
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-8 text-xl font-semibold text-mineshaft-100">
+        {t("settings.personal.change-language")}
+      </p>
+      <div className="w-28">
+        <ListBox
+          isSelected={lang}
+          onChange={setLanguage}
+          data={["en", "ko", "fr", "es"]}
+          text={`${t("common.language")}: `}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -1 +1 @@
-export { ChangeLanguageSection } from "./ChangeLanguageSection";
+export { ChangeLanguageSection } from "./ChangeLanguageSection";

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

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

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

@@ -1,64 +1,59 @@
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    DeleteActionModal
-} from "@app/components/v2";
+import { Button, DeleteActionModal } from "@app/components/v2";
 import { useDeleteUser } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const DeleteAccountSection = () => {
-    const router = useRouter();
-    const { createNotification } = useNotificationContext();
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-        "deleteAccount"
-    ] as const);
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteAccount"
+  ] as const);
 
-    const { mutateAsync: deleteUserMutateAsync, isLoading } = useDeleteUser();
+  const { mutateAsync: deleteUserMutateAsync, isLoading } = useDeleteUser();
 
-    const handleDeleteAccountSubmit = async () => {
-        try {
-            await deleteUserMutateAsync();
-            
-            createNotification({
-                text: "Successfully deleted account",
-                type: "success"
-            });
+  const handleDeleteAccountSubmit = async () => {
+    try {
+      await deleteUserMutateAsync();
 
-            router.push("/login");
-            handlePopUpClose("deleteAccount");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to delete account",
-                type: "error"
-            });
-        }
+      createNotification({
+        text: "Successfully deleted account",
+        type: "success"
+      });
+
+      router.push("/login");
+      handlePopUpClose("deleteAccount");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete account",
+        type: "error"
+      });
     }
-    
-    return (
-        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-                Danger Zone
-            </p>
-            <Button
-                isLoading={isLoading}
-                colorSchema="danger"
-                variant="outline_bg"
-                type="submit"
-                onClick={() => handlePopUpOpen("deleteAccount")}
-            >
-                Delete my account
-            </Button>
-            <DeleteActionModal
-                isOpen={popUp.deleteAccount.isOpen}
-                title="Are you sure want to delete your account?"
-                subTitle="Permanently remove this account and all of its data. This action is not reversible, so please be careful."
-                onChange={(isOpen) => handlePopUpToggle("deleteAccount", isOpen)}
-                deleteKey="confirm"
-                onDeleteApproved={handleDeleteAccountSubmit}
-            />
-        </div>
-    );
-}
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
+      <Button
+        isLoading={isLoading}
+        colorSchema="danger"
+        variant="outline_bg"
+        type="submit"
+        onClick={() => handlePopUpOpen("deleteAccount")}
+      >
+        Delete my account
+      </Button>
+      <DeleteActionModal
+        isOpen={popUp.deleteAccount.isOpen}
+        title="Are you sure want to delete your account?"
+        subTitle="Permanently remove this account and all of its data. This action is not reversible, so please be careful."
+        onChange={(isOpen) => handlePopUpToggle("deleteAccount", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleDeleteAccountSubmit}
+      />
+    </div>
+  );
+};

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

@@ -1 +1 @@
-export { DeleteAccountSection } from "./DeleteAccountSection";
+export { DeleteAccountSection } from "./DeleteAccountSection";

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

@@ -1,91 +1,81 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
-import { 
-    Button,
-    FormControl,
-    Input
-} from "@app/components/v2";
+import { Button, FormControl, Input } from "@app/components/v2";
 import { useUser } from "@app/context";
 
-const schema = yup.object({
+const schema = yup
+  .object({
     password: yup.string().required("Password is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
 export const EmergencyKitSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { user } = useUser();
-    const { reset, control, handleSubmit } = useForm({
-        defaultValues: {
-            password: "",
-        },
-        resolver: yupResolver(schema)
-    });
-    
-    const onFormSubmit = ({
-        password
-    }: FormData) => {
-        try {
-            if (!user?.email) return;
+  const { createNotification } = useNotificationContext();
+  const { user } = useUser();
+  const { reset, control, handleSubmit } = useForm({
+    defaultValues: {
+      password: ""
+    },
+    resolver: yupResolver(schema)
+  });
 
-            issueBackupKey({
-                email: user.email,
-                password,
-                personalName: `${user.firstName} ${user.lastName}`,
-                setBackupKeyError: () => {},
-                setBackupKeyIssued: () => {}
-            });
-            
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to download emergency kit",
-                type: "error"
-            });
-        }
+  const onFormSubmit = ({ password }: FormData) => {
+    try {
+      if (!user?.email) return;
+
+      issueBackupKey({
+        email: user.email,
+        password,
+        personalName: `${user.firstName} ${user.lastName}`,
+        setBackupKeyError: () => {},
+        setBackupKeyIssued: () => {}
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to download emergency kit",
+        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">
-                Emergency Kit
-            </h2>
-            <p className="text-gray-400 mb-8">
-                The kit contains information you can use to recover your account.
-            </p>
-            <div className="max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input 
-                                placeholder="Password" 
-                                type="password"
-                                {...field} 
-                                className="bg-mineshaft-800" 
-                            />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="password"
-                />
-            </div>
-            <Button
-                type="submit"
-                colorSchema="secondary"
-                isLoading={false}
-            >
-                Save
-            </Button>
-        </form>
-    );
-}
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Emergency Kit</h2>
+      <p className="mb-8 text-gray-400">
+        The kit contains information you can use to recover your account.
+      </p>
+      <div className="max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                placeholder="Password"
+                type="password"
+                {...field}
+                className="bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="password"
+        />
+      </div>
+      <Button type="submit" colorSchema="secondary" isLoading={false}>
+        Save
+      </Button>
+    </form>
+  );
+};

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

@@ -1 +1 @@
-export { EmergencyKitSection } from "./EmergencyKitSection";
+export { EmergencyKitSection } from "./EmergencyKitSection";

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

@@ -1 +1 @@
-export { PersonalAPIKeyTab } from "./PersonalAPIKeyTab";
+export { PersonalAPIKeyTab } from "./PersonalAPIKeyTab";

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

@@ -1,6 +1,4 @@
-import {
-    useGetUser
-} from "@app/hooks/api";
+import { useGetUser } from "@app/hooks/api";
 import { AuthMethod } from "@app/hooks/api/users/types";
 
 import { AuthMethodSection } from "../AuthMethodSection";
@@ -8,16 +6,16 @@ import { ChangePasswordSection } from "../ChangePasswordSection";
 import { MFASection } from "../SecuritySection";
 
 export const PersonalAuthTab = () => {
-    const { data: user } = useGetUser();
-    return (
-        <div>
-            {user && !user.authMethods.includes(AuthMethod.LDAP) && (
-                <>
-                    <MFASection />
-                    <AuthMethodSection />
-                </>
-            )}
-            <ChangePasswordSection />
-        </div>
-    );
-}
+  const { data: user } = useGetUser();
+  return (
+    <div>
+      {user && !user.authMethods.includes(AuthMethod.LDAP) && (
+        <>
+          <MFASection />
+          <AuthMethodSection />
+        </>
+      )}
+      <ChangePasswordSection />
+    </div>
+  );
+};

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

@@ -1 +1 @@
-export { PersonalAuthTab } from "./PersonalAuthTab";
+export { PersonalAuthTab } from "./PersonalAuthTab";

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

@@ -4,12 +4,12 @@ import { SessionsSection } from "../SessionsSection";
 import { UserNameSection } from "../UserNameSection";
 
 export const PersonalGeneralTab = () => {
-    return (
-        <div>
-            <UserNameSection />
-            <SessionsSection />
-            <EmergencyKitSection />
-            <DeleteAccountSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <UserNameSection />
+      <SessionsSection />
+      <EmergencyKitSection />
+      <DeleteAccountSection />
+    </div>
+  );
+};

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

@@ -1 +1 @@
-export { PersonalGeneralTab } from "./PersonalGeneralTab";
+export { PersonalGeneralTab } from "./PersonalGeneralTab";

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

@@ -3,17 +3,15 @@ import { useTranslation } from "react-i18next";
 import { PersonalTabGroup } from "./PersonalTabGroup";
 
 export const PersonalSettingsPage = () => {
-    const { t } = useTranslation();
-    return (
-        <div className="flex justify-center bg-bunker-800 text-white w-full px-6">
-            <div className="max-w-6xl w-full">
-                <div className="mt-6 mb-6">
-                    <p className="text-3xl font-semibold text-gray-200">
-                        {t("settings.personal.title")}
-                    </p>
-                </div>
-                <PersonalTabGroup />
-            </div>
+  const { t } = useTranslation();
+  return (
+    <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
+      <div className="w-full max-w-6xl">
+        <div className="mt-6 mb-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.personal.title")}</p>
         </div>
-    );
-}
+        <PersonalTabGroup />
+      </div>
+    </div>
+  );
+};

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

@@ -1 +1 @@
-export { PersonalTabGroup } from "./PersonalTabGroup";
+export { PersonalTabGroup } from "./PersonalTabGroup";

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx

@@ -1,8 +1,6 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Checkbox, EmailServiceSetupModal } from "@app/components/v2";
-import {
-  useGetUser,
-  useUpdateMfaEnabled} from "@app/hooks/api";
+import { useGetUser, useUpdateMfaEnabled } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { AuthMethod } from "@app/hooks/api/users/types";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -11,12 +9,10 @@ export const MFASection = () => {
   const { data: user } = useGetUser();
   const { mutateAsync } = useUpdateMfaEnabled();
   const { createNotification } = useNotificationContext();
-  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
-    "setUpEmail"
-  ] as const);
-  
-  const {data: serverDetails } = useFetchServerStatus()
-  
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const);
+
+  const { data: serverDetails } = useFetchServerStatus();
+
   const toggleMfa = async (state: boolean) => {
     try {
       if (!user) return;
@@ -27,13 +23,17 @@ export const MFASection = () => {
         });
         return;
       }
-      
+
       const newUser = await mutateAsync({
         isMfaEnabled: state
       });
 
       createNotification({
-        text: `${newUser.isMfaEnabled ? "Successfully turned on two-factor authentication." : "Successfully turned off two-factor authentication."}`,
+        text: `${
+          newUser.isMfaEnabled
+            ? "Successfully turned on two-factor authentication."
+            : "Successfully turned off two-factor authentication."
+        }`,
         type: "success"
       });
     } catch (err) {
@@ -43,34 +43,32 @@ export const MFASection = () => {
       });
       console.error(err);
     }
-  }
-  
+  };
+
   return (
     <>
-    <form>
-      <div className="p-4 mb-6 bg-mineshaft-900 max-w-6xl rounded-lg border border-mineshaft-600">
-        <p className="text-xl font-semibold text-mineshaft-100 mb-8">
-          Two-factor Authentication
-        </p>
-        {user && (
-          <Checkbox
-            className="data-[state=checked]:bg-primary"
-            id="isTwoFAEnabled"
-            isChecked={user?.isMfaEnabled}
-            onCheckedChange={(state) => {
-              if (serverDetails?.emailConfigured){
-                toggleMfa(state as boolean);
-              } else {
-                handlePopUpOpen("setUpEmail");
-              }
-            }}
-          >
-            Enable 2-factor authentication via your personal email.
-          </Checkbox>
-        )}
-      </div>
-    </form>
-    <EmailServiceSetupModal
+      <form>
+        <div className="mb-6 max-w-6xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <p className="mb-8 text-xl font-semibold text-mineshaft-100">Two-factor Authentication</p>
+          {user && (
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="isTwoFAEnabled"
+              isChecked={user?.isMfaEnabled}
+              onCheckedChange={(state) => {
+                if (serverDetails?.emailConfigured) {
+                  toggleMfa(state as boolean);
+                } else {
+                  handlePopUpOpen("setUpEmail");
+                }
+              }}
+            >
+              Enable 2-factor authentication via your personal email.
+            </Checkbox>
+          )}
+        </div>
+      </form>
+      <EmailServiceSetupModal
         isOpen={popUp.setUpEmail?.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
       />

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

@@ -1 +1 @@
-export { MFASection } from "./MFASection";
+export { MFASection } from "./MFASection";

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

@@ -1,44 +1,41 @@
 import { faBan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import {
-    Button
-} from "@app/components/v2";
+import { Button } from "@app/components/v2";
 import { useRevokeMySessions } from "@app/hooks/api";
 
 import { SessionsTable } from "./SessionsTable";
 
 export const SessionsSection = () => {
-    const { mutateAsync } = useRevokeMySessions();
-    
-    const onRevokeAllSessionsClick = async () => {
-        try {
-            await mutateAsync();
-            window.location.href = "/login";
-        } catch (err) {
-            console.error(err);
-        }
+  const { mutateAsync } = useRevokeMySessions();
+
+  const onRevokeAllSessionsClick = async () => {
+    try {
+      await mutateAsync();
+      window.location.href = "/login";
+    } catch (err) {
+      console.error(err);
     }
-    
-    return (
-        <div className="p-4 mb-6 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
-                <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
-                    Sessions
-                </h2>
-               <Button
-                    colorSchema="secondary"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faBan} />}
-                    onClick={onRevokeAllSessionsClick}
-                >
-                    Revoke all
-                </Button> 
-            </div>
-            <p className="text-gray-400 mb-8">
-                Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your account out all active sessions across all browsers and CLIs.
-            </p>
-            <SessionsTable />
-        </div>
-    );
-}
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
+        <h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Sessions</h2>
+        <Button
+          colorSchema="secondary"
+          type="submit"
+          leftIcon={<FontAwesomeIcon icon={faBan} />}
+          onClick={onRevokeAllSessionsClick}
+        >
+          Revoke all
+        </Button>
+      </div>
+      <p className="mb-8 text-gray-400">
+        Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your
+        account out all active sessions across all browsers and CLIs.
+      </p>
+      <SessionsTable />
+    </div>
+  );
+};

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

@@ -1 +1 @@
-export { SessionsSection } from "./SessionsSection";
+export { SessionsSection } from "./SessionsSection";

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

@@ -1 +1 @@
-export { UserNameSection } from "./UserNameSection";
+export { UserNameSection } from "./UserNameSection";

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

@@ -1 +1 @@
-export { PersonalSettingsPage } from "./PersonalSettingsPage";
+export { PersonalSettingsPage } from "./PersonalSettingsPage";