import { useEffect, useState } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useTranslation } from 'next-i18next'; 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 { getTranslatedServerSideProps } from '~/utilities/withTranslateProps'; 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 } = 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); }; useEffect(() => { getUser().then((user) => { 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('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); passwordCheck({ password, setPasswordErrorLength, setPasswordErrorNumber, setPasswordErrorLowerCase, errorCheck: false, }); }} type='password' value={newPassword} isRequired error={ passwordErrorLength && passwordErrorLowerCase && passwordErrorNumber } autoComplete='new-password' id='new-password' />
{passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? (
{t('section-password:validate-base')}
{passwordErrorLength ? ( ) : ( )}
{t('section-password:validate-length')}
{passwordErrorLowerCase ? ( ) : ( )}
{t('section-password:validate-case')}
{passwordErrorNumber ? ( ) : ( )}
{t('section-password:validate-number')}
) : (
)}

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

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

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

); } PersonalSettings.requireAuth = true; export const getServerSideProps = getTranslatedServerSideProps([ 'settings', 'settings-personal', 'section-password', ]);