b0ed19d6a3
* feat: implement prefs -> credentials section UI (w/o backend integration) * feat: implement credentials information on Prefs -> Account pane - implement email changing UI (w/o backend integration) - implement password changing UI and reuse existing change password logic - replace 2FA dialog with shared one - implement React hook for preventing window refresh * fix: provide correct types * refactor: reuse styles from stylekit, rename components and create enum for input types * refactor: update default exports to named ones, correct texts * chore: remove unnecessary depenedency * chore: yarn.lock without unnecessary packages * Revert "chore: yarn.lock without unnecessary packages" This reverts commit 64aa75e8408b06884d6e7383180292a4a9a3e8ad.
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/preferences/components';
|
|
import { Button } from '@/components/Button';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { observer } from '@node_modules/mobx-react-lite';
|
|
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
|
|
import { dateToLocalizedString } from '@/utils';
|
|
import { useState } from 'preact/hooks';
|
|
import { ChangeEmail } from '@/preferences/panes/account/ChangeEmail';
|
|
import { ChangePassword } from '@/preferences/panes/account/changePassword';
|
|
|
|
type Props = {
|
|
application: WebApplication;
|
|
};
|
|
|
|
export const Credentials = observer(({ application }: Props) => {
|
|
const [isChangePasswordDialogOpen, setIsChangePasswordDialogOpen] = useState(false);
|
|
const [isChangeEmailDialogOpen, setIsChangeEmailDialogOpen] = useState(false);
|
|
|
|
const user = application.getUser();
|
|
|
|
const passwordCreatedAtTimestamp = application.getUserPasswordCreationDate() as Date;
|
|
const passwordCreatedOn = dateToLocalizedString(passwordCreatedAtTimestamp);
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<Title>Credentials</Title>
|
|
<div className={'text-input mt-2'}>
|
|
Email
|
|
</div>
|
|
<Text>
|
|
You're signed in as <span className='font-bold'>{user?.email}</span>
|
|
</Text>
|
|
<Button
|
|
className='min-w-20 mt-3'
|
|
type='normal'
|
|
label='Change email'
|
|
onClick={() => {
|
|
setIsChangeEmailDialogOpen(true);
|
|
}}
|
|
/>
|
|
<HorizontalSeparator classes='mt-5 mb-3' />
|
|
<div className={'text-input mt-2'}>
|
|
Password
|
|
</div>
|
|
<Text>
|
|
Current password was set on <span className='font-bold'>{passwordCreatedOn}</span>
|
|
</Text>
|
|
<Button
|
|
className='min-w-20 mt-3'
|
|
type='normal'
|
|
label='Change password'
|
|
onClick={() => {
|
|
setIsChangePasswordDialogOpen(true);
|
|
}}
|
|
/>
|
|
{isChangeEmailDialogOpen && (
|
|
<ChangeEmail
|
|
onCloseDialog={() => setIsChangeEmailDialogOpen(false)}
|
|
snAlert={application.alertService.alert}
|
|
/>
|
|
)}
|
|
{
|
|
isChangePasswordDialogOpen && (
|
|
<ChangePassword
|
|
onCloseDialog={() => setIsChangePasswordDialogOpen(false)}
|
|
application={application}
|
|
/>
|
|
)}
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
);
|
|
});
|