import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import Head from "next/head"; import { useRouter } from "next/router"; import { faBan,faCheck, faPlus, faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Button from "@app/components/basic/buttons/Button"; import InputField from "@app/components/basic/InputField"; import ListBox from "@app/components/basic/Listbox"; import ApiKeyTable from "@app/components/basic/table/ApiKeyTable"; import NavHeader from "@app/components/navigation/NavHeader"; import checkPassword from "@app/components/utilities/checks/checkPassword"; import changePassword from "@app/components/utilities/cryptography/changePassword"; import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey"; import { useGetCommonPasswords, useRevokeAllSessions} from "@app/hooks/api"; import { SecuritySection } from "@app/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection"; import AddApiKeyDialog from "../../../components/basic/dialog/AddApiKeyDialog"; import getAPIKeys from "../../api/apiKey/getAPIKeys"; import getUser from "../../api/user/getUser"; type Errors = { length?: string, upperCase?: string, lowerCase?: string, number?: string, specialChar?: string, repeatedChar?: string, }; export default function PersonalSettings() { const { data: commonPasswords } = useGetCommonPasswords(); const [personalEmail, setPersonalEmail] = useState(""); const [personalName, setPersonalName] = useState(""); const [currentPasswordError, setCurrentPasswordError] = useState(false); const [currentPassword, setCurrentPassword] = useState(""); const [newPassword, setNewPassword] = useState(""); const [backupPassword, setBackupPassword] = useState(""); const [passwordChanged, setPasswordChanged] = useState(false); const [backupKeyIssued, setBackupKeyIssued] = useState(false); const [backupKeyError, setBackupKeyError] = useState(false); const [isAddApiKeyDialogOpen, setIsAddApiKeyDialogOpen] = useState(false); const [apiKeys, setApiKeys] = useState([]); const [errors, setErrors] = useState({}); const revokeAllSessions = useRevokeAllSessions(); 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); }; useEffect(() => { const load = async () => { try { const user = await getUser(); setApiKeys(await getAPIKeys()); setPersonalEmail(user.email); setPersonalName(`${user.firstName} ${user.lastName}`); } catch (err) { console.error(err); } }; load(); }, []); const closeAddApiKeyModal = () => { setIsAddApiKeyDialogOpen(false); }; return (
{t("common.head-title", { title: t("settings.personal.title") })}

{t("settings.personal.title")}

{t("settings.personal.description")}

{t("settings.personal.change-language")}

{t("settings.personal.api-keys.title")}

{t("settings.personal.api-keys.description")}

{t("section.password.change")}

{ setCurrentPassword(password); }} type="password" value={currentPassword} isRequired error={currentPasswordError} errorText={t("section.password.current-wrong") as string} autoComplete="current-password" id="current-password" />
{ setNewPassword(password); checkPassword({ password, commonPasswords, setErrors }); }} type="password" value={newPassword} isRequired error={Object.keys(errors).length > 0} autoComplete="new-password" id="new-password" />
{Object.keys(errors).length > 0 && (
{t("section.password.validate-base")}
{Object.keys(errors).map((key) => { if (errors[key as keyof Errors]) { return (

{errors[key as keyof Errors]}

); } return null; })}
)}

Sessions

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.

{t("settings.personal.emergency.name")}

{t("settings.personal.emergency.text1")}

{t("settings.personal.emergency.text2")}

); } PersonalSettings.requireAuth = true;