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/ScanQRCode.tsx

@@ -3,17 +3,17 @@ import { observer } from 'mobx-react-lite';
 
 import QRCode from 'qrcode.react';
 
-import { DecoratedInput } from '../../../components/DecoratedInput';
-import { IconButton } from '../../../components/IconButton';
+import { DecoratedInput } from '@/components/DecoratedInput';
+import { IconButton } from '@/components/IconButton';
 import { Button } from '@/components/Button';
 import { TwoFactorActivation } from './TwoFactorActivation';
-import {
-  TwoFactorDialog,
-  TwoFactorDialogLabel,
-  TwoFactorDialogDescription,
-  TwoFactorDialogButtons,
-} from './TwoFactorDialog';
 import { AuthAppInfoTooltip } from './AuthAppInfoPopup';
+import {
+  ModalDialog,
+  ModalDialogButtons,
+  ModalDialogDescription,
+  ModalDialogLabel
+} from '@/components/shared/ModalDialog';
 
 export const ScanQRCode: FunctionComponent<{
   activation: TwoFactorActivation;
@@ -27,15 +27,15 @@ export const ScanQRCode: FunctionComponent<{
     />
   );
   return (
-    <TwoFactorDialog>
-      <TwoFactorDialogLabel
+    <ModalDialog>
+      <ModalDialogLabel
         closeDialog={() => {
           act.cancelActivation();
         }}
       >
         Step 1 of 3 - Scan QR code
-      </TwoFactorDialogLabel>
-      <TwoFactorDialogDescription>
+      </ModalDialogLabel>
+      <ModalDialogDescription>
         <div className="flex flex-row gap-3 items-center">
           <div className="w-25 h-25 flex items-center justify-center bg-info">
             <QRCode value={act.qrCode} size={100} />
@@ -61,8 +61,8 @@ export const ScanQRCode: FunctionComponent<{
             </div>
           </div>
         </div>
-      </TwoFactorDialogDescription>
-      <TwoFactorDialogButtons>
+      </ModalDialogDescription>
+      <ModalDialogButtons>
         <Button
           className="min-w-20"
           type="normal"
@@ -75,7 +75,7 @@ export const ScanQRCode: FunctionComponent<{
           label="Next"
           onClick={() => act.openSaveSecretKey()}
         />
-      </TwoFactorDialogButtons>
-    </TwoFactorDialog>
+      </ModalDialogButtons>
+    </ModalDialog>
   );
 });