feat: implement credentials information on Prefs -> Account pane (#632)

* 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.

app/assets/javascripts/preferences/panes/account/Credentials.tsx

@@ -0,0 +1,73 @@
+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>
+  );
+});