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

@@ -0,0 +1,79 @@
+import {
+  ModalDialog,
+  ModalDialogButtons,
+  ModalDialogDescription,
+  ModalDialogLabel
+} from '@/components/shared/ModalDialog';
+import { FunctionalComponent } from 'preact';
+import { DecoratedInput } from '@/components/DecoratedInput';
+import { Button } from '@/components/Button';
+import { useState } from 'preact/hooks';
+import { SNAlertService } from '@node_modules/@standardnotes/snjs';
+import { HtmlInputTypes } from '@/enums';
+import { isEmailValid } from '@/utils';
+
+type Props = {
+  onCloseDialog: () => void;
+  snAlert: SNAlertService['alert']
+};
+
+export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, snAlert }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = () => {
+    let errorMessage = '';
+    if (email.trim() === '' || password.trim() === '') {
+      errorMessage = 'Some fields have not been filled out. Please fill out all fields and try again.';
+    } else if (!isEmailValid(email)) {
+      errorMessage = 'The email you entered has an invalid format. Please review your input and try again.';
+    }
+
+    if (errorMessage) {
+      snAlert(errorMessage);
+      return;
+    }
+  };
+
+  return (
+    <div>
+      <ModalDialog>
+        <ModalDialogLabel closeDialog={onCloseDialog}>
+          Change Email
+        </ModalDialogLabel>
+        <ModalDialogDescription>
+          <div className={'mt-2 mb-3'}>
+            <DecoratedInput
+              onChange={(newEmail) => {
+                setEmail(newEmail);
+              }}
+              text={email}
+              placeholder={'New Email'}
+            />
+          </div>
+          <div className={'mt-2 mb-3'}>
+            <DecoratedInput
+              type={HtmlInputTypes.Password}
+              placeholder={'Password'}
+              onChange={password => setPassword(password)}
+            />
+          </div>
+        </ModalDialogDescription>
+        <ModalDialogButtons>
+          <Button
+            className="min-w-20"
+            type="normal"
+            label="Cancel"
+            onClick={onCloseDialog}
+          />
+          <Button
+            className="min-w-20"
+            type="primary"
+            label="Submit"
+            onClick={handleSubmit}
+          />
+        </ModalDialogButtons>
+      </ModalDialog>
+    </div>
+  );
+};