import React, { useCallback, useEffect, useState } from "react"; import Head from "next/head"; import setLanguage from "next-translate/setLanguage"; import useTranslation from "next-translate/useTranslation"; import { faCheck, faX } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Button from "~/components/basic/buttons/Button"; import InputField from "~/components/basic/InputField"; import ListBox from "~/components/basic/Listbox"; import NavHeader from "~/components/navigation/NavHeader"; import changePassword from "~/components/utilities/cryptography/changePassword"; import issueBackupKey from "~/components/utilities/cryptography/issueBackupKey"; import passwordCheck from "~/utilities/checks/PasswordCheck"; import getUser from "../../api/user/getUser"; export default function PersonalSettings() { const [personalEmail, setPersonalEmail] = useState(""); const [personalName, setPersonalName] = useState(""); const [passwordErrorLength, setPasswordErrorLength] = useState(false); const [passwordErrorNumber, setPasswordErrorNumber] = useState(false); const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false); 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 { t, lang } = useTranslation(); useEffect(async () => { let user = await getUser(); setPersonalEmail(user.email); setPersonalName(user.firstName + " " + user.lastName); }, []); return (
{t("common:head-title", { title: t("settings-personal:title") })}

{t("settings-personal:title")}

{t("settings-personal:description")}

{/*

Display Name

{buttonReady ? ( ) : (

Saved

)}
*/}

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

{t("form-password:change")}

{ setCurrentPassword(password); }} type="password" value={currentPassword} isRequired error={currentPasswordError} errorText={t("form-password:current-wrong")} />
{ setNewPassword(password); passwordCheck( password, setPasswordErrorLength, setPasswordErrorNumber, setPasswordErrorLowerCase, false ); }} type="password" value={newPassword} isRequired error={ passwordErrorLength && passwordErrorLowerCase && passwordErrorNumber } />
{passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? (
{t("form-password:validate-base")}
{passwordErrorLength ? ( ) : ( )}
{t("form-password:validate-length")}
{passwordErrorLowerCase ? ( ) : ( )}
{t("form-password:validate-case")}
{passwordErrorNumber ? ( ) : ( )}
{t("form-password:validate-number")}
) : (
)}

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

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

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

); } PersonalSettings.requireAuth = true;