feat: renamed old frontend and fixed some minor bugs

2026-10-16 08:14:06 +00:00 · 2025-01-06 14:56:49 +05:30
parent 8c902d7699
commit 54377a44d3
2577 changed files with 35240 additions and 35116 deletions
@@ -0,0 +1,25 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PersonalTabGroup } from "./components/PersonalTabGroup";
+
+export const PersonalSettingsPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: t("settings.personal.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
+        <div className="w-full max-w-6xl">
+          <div className="mb-6 mt-6">
+            <p className="text-3xl font-semibold text-gray-200">{t("settings.personal.title")}</p>
+          </div>
+          <PersonalTabGroup />
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, Tooltip } from "@app/components/v2";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddAPIKeyModal } from "./AddAPIKeyModal";
+import { APIKeyTable } from "./APIKeyTable";
+
+export const APIKeySection = () => {
+  const { t } = useTranslation();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addAPIKey"] as const);
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">
+          {t("settings.personal.api-keys.title")}
+        </p>
+        <Tooltip content="API Keys are deprecated and will be removed in the future.">
+          <Button
+            isDisabled
+            colorSchema="secondary"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={() => handlePopUpOpen("addAPIKey")}
+          >
+            Add API Key
+          </Button>
+        </Tooltip>
+      </div>
+      <APIKeyTable />
+      <AddAPIKeyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+    </div>
+  );
+};
@@ -0,0 +1,91 @@
+import { faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useDeleteAPIKey, useGetMyAPIKeys } from "@app/hooks/api";
+
+export const APIKeyTable = () => {
+  const { data, isPending } = useGetMyAPIKeys();
+  const { mutateAsync } = useDeleteAPIKey();
+
+  const handleDeleteAPIKeyDataClick = async (apiKeyDataId: string) => {
+    try {
+      await mutateAsync(apiKeyDataId);
+      createNotification({
+        text: "Successfully deleted API key",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete API key",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th className="flex-1">Name</Th>
+            <Th className="flex-1">Last active</Th>
+            <Th className="flex-1">Created</Th>
+            <Th className="flex-1">Expiration</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="api-keys" />}
+          {!isPending &&
+            data &&
+            data.length > 0 &&
+            data.map(({ id, name, createdAt, expiresAt, lastUsed }) => {
+              return (
+                <Tr className="h-10" key={`api-key-${id}`}>
+                  <Td>{name}</Td>
+                  <Td>{format(new Date(lastUsed), "yyyy-MM-dd")}</Td>
+                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                  <Td>{format(new Date(expiresAt), "yyyy-MM-dd")}</Td>
+                  <Td>
+                    <IconButton
+                      onClick={async () => {
+                        await handleDeleteAPIKeyDataClick(id);
+                      }}
+                      size="lg"
+                      colorSchema="danger"
+                      variant="plain"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faXmark} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              );
+            })}
+          {!isPending && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={5}>
+                <EmptyState title="No API Keys on file" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};
@@ -0,0 +1,185 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+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" }
+];
+
+const expirationMapping: { [key: string]: number } = {
+  "1d": 86400,
+  "7d": 604800,
+  "1mo": 2592000,
+  "6mo": 15552000,
+  "12mo": 31104000
+};
+
+const schema = z
+  .object({
+    name: z.string(),
+    expiresIn: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["addAPIKey"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addAPIKey"]>, state?: boolean) => void;
+};
+
+export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [newAPIKey, setNewAPIKey] = useState("");
+  const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+
+  const { mutateAsync, isPending } = useCreateAPIKey();
+
+  const { control, handleSubmit, reset } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (isAPIKeyCopied) {
+      timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [setIsAPIKeyCopied]);
+
+  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);
+
+      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={isPending}
+                isDisabled={isPending}
+              >
+                Add
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("addAPIKey", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="mb-3 mr-2 mt-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>
+  );
+};
@@ -0,0 +1 @@
+export { APIKeySection } from "./APIKeySection";
@@ -0,0 +1,132 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { faGithub, faGitlab, faGoogle, IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Switch } from "@app/components/v2";
+import { useServerConfig, useUser } from "@app/context";
+import { useUpdateUserAuthMethods } from "@app/hooks/api";
+import { LoginMethod } from "@app/hooks/api/admin/types";
+import { AuthMethod } from "@app/hooks/api/users/types";
+
+interface AuthMethodOption {
+  label: string;
+  value: AuthMethod;
+  icon: IconDefinition;
+  loginMethod: LoginMethod;
+}
+
+const authMethodOpts: AuthMethodOption[] = [
+  { label: "Email", value: AuthMethod.EMAIL, icon: faEnvelope, loginMethod: LoginMethod.EMAIL },
+  { label: "Google", value: AuthMethod.GOOGLE, icon: faGoogle, loginMethod: LoginMethod.GOOGLE },
+  { label: "GitHub", value: AuthMethod.GITHUB, icon: faGithub, loginMethod: LoginMethod.GITHUB },
+  { label: "GitLab", value: AuthMethod.GITLAB, icon: faGitlab, loginMethod: LoginMethod.GITLAB }
+];
+const schema = z.object({
+  authMethods: z.nativeEnum(AuthMethod).array()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+export const AuthMethodSection = () => {
+  const { user } = useUser();
+  const { config } = useServerConfig();
+  const { mutateAsync } = useUpdateUserAuthMethods();
+
+  const { reset, setValue, watch } = useForm<FormData>({
+    defaultValues: {
+      authMethods: user.authMethods
+    },
+    resolver: zodResolver(schema)
+  });
+
+  const authMethods = watch("authMethods");
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        authMethods: user.authMethods
+      });
+    }
+  }, [user]);
+
+  const onAuthMethodToggle = async (value: boolean, authMethodOpt: AuthMethodOption) => {
+    const newAuthMethods = value
+      ? [...authMethods, authMethodOpt.value]
+      : authMethods.filter((auth) => auth !== authMethodOpt.value);
+
+    if (value) {
+      const newUser = await mutateAsync({
+        authMethods: newAuthMethods
+      });
+
+      setValue("authMethods", newUser.authMethods);
+      createNotification({
+        text: "Successfully enabled authentication method",
+        type: "success"
+      });
+      return;
+    }
+
+    if (newAuthMethods.length === 0) {
+      createNotification({
+        text: "You must keep at least 1 authentication method enabled",
+        type: "error"
+      });
+      return;
+    }
+
+    const newUser = await mutateAsync({
+      authMethods: newAuthMethods
+    });
+
+    setValue("authMethods", newUser.authMethods);
+    createNotification({
+      text: "Successfully disabled authentication method",
+      type: "success"
+    });
+  };
+
+  return (
+    <div 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">
+        Authentication methods
+      </h2>
+      <p className="mb-4 text-gray-400">
+        By enabling a SSO provider, you are allowing an account with that provider which uses the
+        same email address as your existing Infisical account to be able to log in to Infisical.
+      </p>
+      <div className="mb-4">
+        {user &&
+          authMethodOpts.map((authMethodOpt) => {
+            // only filter when enabledLoginMethods is explicitly configured by admin
+            if (
+              config.enabledLoginMethods &&
+              !config.enabledLoginMethods.includes(authMethodOpt.loginMethod)
+            ) {
+              return null;
+            }
+
+            return (
+              <div className="flex items-center p-4" key={`auth-method-${authMethodOpt.value}`}>
+                <div className="flex items-center">
+                  <FontAwesomeIcon icon={authMethodOpt.icon} className="mr-4" />
+                </div>
+                <Switch
+                  id={`enable-${authMethodOpt.value}-auth`}
+                  onCheckedChange={(value) => onAuthMethodToggle(value, authMethodOpt)}
+                  isChecked={authMethods?.includes(authMethodOpt.value) ?? false}
+                >
+                  <p className="mr-4 w-12">{authMethodOpt.label}</p>
+                </Switch>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { AuthMethodSection } from "./AuthMethodSection";
@@ -0,0 +1,147 @@
+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 { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import attemptChangePassword from "@app/components/utilities/attemptChangePassword";
+import checkPassword from "@app/components/utilities/checks/password/checkPassword";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useUser } from "@app/context";
+
+type Errors = {
+  tooShort?: string;
+  tooLong?: string;
+  noLetterChar?: string;
+  noNumOrSpecialChar?: string;
+  repeatedChar?: string;
+  escapeChar?: string;
+  lowEntropy?: string;
+  breached?: string;
+};
+
+const schema = z
+  .object({
+    oldPassword: z.string(),
+    newPassword: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+export const ChangePasswordSection = () => {
+  const { t } = useTranslation();
+
+  const { user } = useUser();
+  const { reset, control, handleSubmit } = useForm({
+    defaultValues: {
+      oldPassword: "",
+      newPassword: ""
+    },
+    resolver: zodResolver(schema)
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
+    try {
+      const errorCheck = await checkPassword({
+        password: newPassword,
+        setErrors
+      });
+
+      if (errorCheck) return;
+
+      setIsLoading(true);
+      await attemptChangePassword({
+        email: user.username,
+        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="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>
+              );
+            }
+
+            return null;
+          })}
+        </div>
+      )}
+      <Button type="submit" colorSchema="secondary" isLoading={isLoading} isDisabled={isLoading}>
+        Save
+      </Button>
+    </form>
+  );
+};
@@ -0,0 +1 @@
+export { ChangePasswordSection } from "./ChangePasswordSection";
@@ -0,0 +1,59 @@
+import { useNavigate } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { useDeleteMe } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+export const DeleteAccountSection = () => {
+  const navigate = useNavigate();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteAccount"
+  ] as const);
+
+  const { mutateAsync: deleteUserMutateAsync, isPending } = useDeleteMe();
+
+  const handleDeleteAccountSubmit = async () => {
+    try {
+      await deleteUserMutateAsync();
+
+      createNotification({
+        text: "Successfully deleted account",
+        type: "success"
+      });
+
+      navigate({ to: "/login" });
+      handlePopUpClose("deleteAccount");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete account",
+        type: "error"
+      });
+    }
+  };
+
+  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={isPending}
+        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>
+  );
+};
@@ -0,0 +1 @@
+export { DeleteAccountSection } from "./DeleteAccountSection";
@@ -0,0 +1,80 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useUser } from "@app/context";
+
+const schema = z
+  .object({
+    password: z.string().describe("Password is required")
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+export const EmergencyKitSection = () => {
+  const { user } = useUser();
+  const { reset, control, handleSubmit } = useForm({
+    defaultValues: {
+      password: ""
+    },
+    resolver: zodResolver(schema)
+  });
+
+  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="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>
+  );
+};
@@ -0,0 +1 @@
+export { EmergencyKitSection } from "./EmergencyKitSection";
@@ -0,0 +1,5 @@
+import { APIKeySection } from "../APIKeySection";
+
+export const PersonalAPIKeyTab = () => {
+  return <APIKeySection />;
+};
@@ -0,0 +1 @@
+export { PersonalAPIKeyTab } from "./PersonalAPIKeyTab";
@@ -0,0 +1,21 @@
+import { useGetUser } from "@app/hooks/api";
+import { AuthMethod } from "@app/hooks/api/users/types";
+
+import { AuthMethodSection } from "../AuthMethodSection";
+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>
+  );
+};
@@ -0,0 +1 @@
+export { PersonalAuthTab } from "./PersonalAuthTab";
@@ -0,0 +1,15 @@
+import { DeleteAccountSection } from "../DeleteAccountSection";
+import { EmergencyKitSection } from "../EmergencyKitSection";
+import { SessionsSection } from "../SessionsSection";
+import { UserNameSection } from "../UserNameSection";
+
+export const PersonalGeneralTab = () => {
+  return (
+    <div>
+      <UserNameSection />
+      <SessionsSection />
+      <EmergencyKitSection />
+      <DeleteAccountSection />
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { PersonalGeneralTab } from "./PersonalGeneralTab";
@@ -0,0 +1,67 @@
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+
+import { PersonalAPIKeyTab } from "../PersonalAPIKeyTab";
+import { PersonalAuthTab } from "../PersonalAuthTab";
+import { PersonalGeneralTab } from "../PersonalGeneralTab";
+
+const tabs = [
+  { name: "General", key: "tab-account-general" },
+  { name: "Authentication", key: "tab-account-auth" },
+  { name: "API Keys", key: "tab-account-api-keys" }
+];
+
+export const PersonalTabGroup = () => {
+  return (
+    <Tabs defaultValue={tabs[0].key}>
+      <TabList>
+        {tabs.map((tab) => (
+          <Tab value={tab.key}>{tab.name}</Tab>
+        ))}
+      </TabList>
+      <TabPanel value={tabs[0].key}>
+        <PersonalGeneralTab />
+      </TabPanel>
+      <TabPanel value={tabs[1].key}>
+        <PersonalAuthTab />
+      </TabPanel>
+      <TabPanel value={tabs[2].key}>
+        <div className="space-y-3">
+          <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
+            <FontAwesomeIcon icon={faWarning} className="pr-6 text-4xl text-white/80" />
+            <div className="flex w-full flex-col text-sm">
+              <span className="mb-4 text-lg font-semibold">Deprecation Notice</span>
+              <p>
+                API Keys are being deprecated in favor of Machine Identities.
+                <br />
+                They will be removed in the future in accordance with the deprecation notice and
+                timeline stated{" "}
+                <a
+                  href="https://infisical.com/blog/deprecating-api-keys"
+                  target="_blank"
+                  className="font-semibold text-primary-400"
+                  rel="noreferrer"
+                >
+                  here
+                </a>
+                .
+                <br />
+                <a
+                  href="https://infisical.com/docs/documentation/platform/identities/overview"
+                  target="_blank"
+                  className="font-semibold text-primary-400"
+                  rel="noreferrer"
+                >
+                  Learn more about Machine Identities
+                </a>
+              </p>
+            </div>
+          </div>
+          <PersonalAPIKeyTab />
+        </div>
+      </TabPanel>
+    </Tabs>
+  );
+};
@@ -0,0 +1 @@
+export { PersonalTabGroup } from "./PersonalTabGroup";
@@ -0,0 +1,232 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import TotpRegistration from "@app/components/mfa/TotpRegistration";
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  ContentLoader,
+  DeleteActionModal,
+  EmailServiceSetupModal,
+  FormControl,
+  Select,
+  SelectItem,
+  Switch
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useGetUser, userKeys, useUpdateUserMfa } from "@app/hooks/api";
+import { MfaMethod } from "@app/hooks/api/auth/types";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import {
+  useCreateNewTotpRecoveryCodes,
+  useDeleteUserTotpConfiguration
+} from "@app/hooks/api/users/mutation";
+import { useGetUserTotpConfiguration } from "@app/hooks/api/users/queries";
+import { AuthMethod } from "@app/hooks/api/users/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+export const MFASection = () => {
+  const { data: user } = useGetUser();
+  const { mutateAsync } = useUpdateUserMfa();
+
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "setUpEmail",
+    "deleteTotpConfig"
+  ] as const);
+  const [shouldShowRecoveryCodes, setShouldShowRecoveryCodes] = useToggle();
+  const { data: totpConfiguration, isPending: isTotpConfigurationLoading } =
+    useGetUserTotpConfiguration();
+  const { mutateAsync: deleteTotpConfiguration } = useDeleteUserTotpConfiguration();
+  const { mutateAsync: createTotpRecoveryCodes } = useCreateNewTotpRecoveryCodes();
+  const queryClient = useQueryClient();
+  const { data: serverDetails } = useFetchServerStatus();
+
+  const handleTotpDeletion = async () => {
+    try {
+      await deleteTotpConfiguration();
+
+      createNotification({
+        text: "Successfully deleted mobile authenticator",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteTotpConfig");
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to delete mobile authenticator";
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  const handleGenerateMoreRecoveryCodes = async () => {
+    try {
+      await createTotpRecoveryCodes();
+
+      createNotification({
+        text: "Successfully generated new recovery codes",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to generate new recovery codes";
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  const updateSelectedMfa = async (mfaMethod: MfaMethod) => {
+    try {
+      if (!user) return;
+
+      await mutateAsync({
+        selectedMfaMethod: mfaMethod
+      });
+
+      createNotification({
+        text: "Successfully updated selected 2FA method",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Something went wrong while updating selected 2FA method.",
+        type: "error"
+      });
+      console.error(err);
+    }
+  };
+
+  const toggleMfa = async (state: boolean) => {
+    try {
+      if (!user) return;
+      if (user.authMethods.includes(AuthMethod.LDAP)) {
+        createNotification({
+          text: "Two-factor authentication is not available for LDAP users.",
+          type: "error"
+        });
+        return;
+      }
+
+      const newUser = await mutateAsync({
+        isMfaEnabled: state
+      });
+
+      createNotification({
+        text: `${
+          newUser.isMfaEnabled
+            ? "Successfully turned on two-factor authentication."
+            : "Successfully turned off two-factor authentication."
+        }`,
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Something went wrong while toggling the two-factor authentication.",
+        type: "error"
+      });
+      console.error(err);
+    }
+  };
+
+  return (
+    <>
+      <div className="mb-6 max-w-6xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <p className="mb-4 text-xl font-semibold text-mineshaft-100">Two-factor Authentication</p>
+        {user && (
+          <Switch
+            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
+          </Switch>
+        )}
+        {user?.isMfaEnabled && (
+          <FormControl label="Selected 2FA method" className="mt-3">
+            <Select
+              className="min-w-[20rem] border border-mineshaft-500"
+              onValueChange={updateSelectedMfa}
+              defaultValue={user.selectedMfaMethod ?? MfaMethod.EMAIL}
+            >
+              <SelectItem value={MfaMethod.EMAIL} key="mfa-method-email">
+                Email
+              </SelectItem>
+              <SelectItem value={MfaMethod.TOTP} key="mfa-method-totp">
+                Mobile Authenticator
+              </SelectItem>
+            </Select>
+          </FormControl>
+        )}
+        <div className="mt-8 text-lg font-semibold text-mineshaft-100">Mobile Authenticator</div>
+        {isTotpConfigurationLoading ? (
+          <ContentLoader />
+        ) : (
+          <div>
+            {totpConfiguration?.isVerified ? (
+              <div className="mt-2">
+                <div className="flex flex-row gap-2">
+                  <Button colorSchema="secondary" onClick={setShouldShowRecoveryCodes.toggle}>
+                    {shouldShowRecoveryCodes ? "Hide recovery codes" : "Show recovery codes"}
+                  </Button>
+                  <Button colorSchema="secondary" onClick={handleGenerateMoreRecoveryCodes}>
+                    Generate more codes
+                  </Button>
+                  <Button colorSchema="danger" onClick={() => handlePopUpOpen("deleteTotpConfig")}>
+                    Delete
+                  </Button>
+                </div>
+                {shouldShowRecoveryCodes && totpConfiguration.recoveryCodes && (
+                  <div className="mt-4 bg-mineshaft-600 p-4">
+                    {totpConfiguration.recoveryCodes.map((code) => (
+                      <div key={code}>{code}</div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <>
+                <div className="text-sm text-gray-400">
+                  For added security, you can configure a mobile authenticator and set it as your
+                  selected 2FA method.
+                </div>
+                <div className="ml-6 mt-6 flex min-w-full">
+                  <TotpRegistration
+                    onComplete={async () => {
+                      await queryClient.invalidateQueries({ queryKey: userKeys.totpConfiguration });
+                    }}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteTotpConfig.isOpen}
+        title="Are you sure want to delete the configured authenticator?"
+        subTitle="This action is irreversible. You’ll have to go through the setup process to enable it again."
+        onChange={(isOpen) => handlePopUpToggle("deleteTotpConfig", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleTotpDeletion}
+      />
+    </>
+  );
+};
@@ -0,0 +1 @@
+export { MFASection } from "./MFASection";
@@ -0,0 +1,41 @@
+import { faBan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+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);
+    }
+  };
+
+  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>
+  );
+};
@@ -0,0 +1,67 @@
+import { faServer } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useGetMySessions } from "@app/hooks/api";
+
+export const SessionsTable = () => {
+  const { data, isPending } = useGetMySessions();
+
+  const formatDate = (dateToFormat: string) => {
+    const date = new Date(dateToFormat);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+
+    const formattedDate = `${day}/${month}/${year}`;
+
+    return formattedDate;
+  };
+
+  return (
+    <TableContainer className="mt-4">
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Created</Th>
+            <Th>Last active</Th>
+            <Th>IP address</Th>
+            <Th>Device</Th>
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="sesssions" />}
+          {!isPending &&
+            data &&
+            data.length > 0 &&
+            data.map(({ id, createdAt, lastUsed, ip, userAgent }) => {
+              return (
+                <Tr className="h-10" key={`session-${id}`}>
+                  <Td>{formatDate(createdAt)}</Td>
+                  <Td>{formatDate(lastUsed)}</Td>
+                  <Td>{ip}</Td>
+                  <Td>{userAgent}</Td>
+                </Tr>
+              );
+            })}
+          {!isPending && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={4}>
+                <EmptyState title="No sessions on file" icon={faServer} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};
@@ -0,0 +1 @@
+export { SessionsSection } from "./SessionsSection";
@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useUser } from "@app/context";
+import { useRenameUser } from "@app/hooks/api/users/queries";
+
+const formSchema = z.object({
+  name: z.string().describe("User Name")
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const UserNameSection = (): JSX.Element => {
+  const { user } = useUser();
+
+  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: zodResolver(formSchema) });
+  const { mutateAsync, isPending } = useRenameUser();
+
+  useEffect(() => {
+    if (user) {
+      reset({ name: `${user?.firstName}${user?.lastName && " "}${user?.lastName}` });
+    }
+  }, [user]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      if (!user?.id) return;
+      if (name === "") return;
+
+      await mutateAsync({ newName: name });
+      createNotification({
+        text: "Successfully renamed user",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to rename user",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      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">Name</p>
+      <div className="mb-2 max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input placeholder={`${user?.firstName} ${user?.lastName}`} {...field} />
+            </FormControl>
+          )}
+          control={control}
+          name="name"
+        />
+      </div>
+      <Button isLoading={isPending} colorSchema="primary" variant="outline_bg" type="submit">
+        Save
+      </Button>
+    </form>
+  );
+};
@@ -0,0 +1 @@
+export { UserNameSection } from "./UserNameSection";
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { PersonalSettingsPage } from "./PersonalSettingsPage";
+
+export const Route = createFileRoute("/_authenticate/personal-settings/_layout/")({
+  component: PersonalSettingsPage
+});
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { PersonalSettingsLayout } from "@app/layouts/PersonalSettingsLayout";
+
+export const Route = createFileRoute("/_authenticate/personal-settings/_layout")({
+  component: PersonalSettingsLayout
+});
				`@@ -0,0 +1 @@`
				`export { APIKeySection } from "./APIKeySection";`
				`@@ -0,0 +1 @@`
				`export { AuthMethodSection } from "./AuthMethodSection";`
				`@@ -0,0 +1 @@`
				`export { ChangePasswordSection } from "./ChangePasswordSection";`
				`@@ -0,0 +1 @@`
				`export { DeleteAccountSection } from "./DeleteAccountSection";`
				`@@ -0,0 +1 @@`
				`export { EmergencyKitSection } from "./EmergencyKitSection";`
				`@@ -0,0 +1 @@`
				`export { PersonalAPIKeyTab } from "./PersonalAPIKeyTab";`
				`@@ -0,0 +1 @@`
				`export { PersonalAuthTab } from "./PersonalAuthTab";`
				`@@ -0,0 +1 @@`
				`export { PersonalGeneralTab } from "./PersonalGeneralTab";`
				`@@ -0,0 +1 @@`
				`export { PersonalTabGroup } from "./PersonalTabGroup";`
				`@@ -0,0 +1 @@`
				`export { SessionsSection } from "./SessionsSection";`