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/two-factor-auth/SaveSecretKey.tsx

@@ -6,11 +6,11 @@ import { FunctionComponent } from 'preact';
 import { downloadSecretKey } from './download-secret-key';
 import { TwoFactorActivation } from './TwoFactorActivation';
 import {
-  TwoFactorDialog,
-  TwoFactorDialogLabel,
-  TwoFactorDialogDescription,
-  TwoFactorDialogButtons,
-} from './TwoFactorDialog';
+  ModalDialog,
+  ModalDialogButtons,
+  ModalDialogDescription,
+  ModalDialogLabel
+} from '@/components/shared/ModalDialog';
 
 export const SaveSecretKey: FunctionComponent<{
   activation: TwoFactorActivation;
@@ -32,15 +32,15 @@ export const SaveSecretKey: FunctionComponent<{
     />
   );
   return (
-    <TwoFactorDialog>
-      <TwoFactorDialogLabel
+    <ModalDialog>
+      <ModalDialogLabel
         closeDialog={() => {
           act.cancelActivation();
         }}
       >
         Step 2 of 3 - Save secret key
-      </TwoFactorDialogLabel>
-      <TwoFactorDialogDescription>
+      </ModalDialogLabel>
+      <ModalDialogDescription>
         <div className="flex-grow flex flex-col gap-2">
           <div className="flex flex-row items-center gap-1">
             <div className="text-sm">
@@ -70,8 +70,8 @@ export const SaveSecretKey: FunctionComponent<{
             </a>
           </div>
         </div>
-      </TwoFactorDialogDescription>
-      <TwoFactorDialogButtons>
+      </ModalDialogDescription>
+      <ModalDialogButtons>
         <Button
           className="min-w-20"
           type="normal"
@@ -84,7 +84,7 @@ export const SaveSecretKey: FunctionComponent<{
           label="Next"
           onClick={() => act.openVerification()}
         />
-      </TwoFactorDialogButtons>
-    </TwoFactorDialog>
+      </ModalDialogButtons>
+    </ModalDialog>
   );
 });