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/components/DecoratedInput.tsx

@@ -1,11 +1,14 @@
 import { FunctionalComponent, ComponentChild } from 'preact';
+import { HtmlInputTypes } from '@/enums';
 
 interface Props {
+  type?: HtmlInputTypes;
   className?: string;
   disabled?: boolean;
   left?: ComponentChild[];
   right?: ComponentChild[];
   text?: string;
+  placeholder?: string;
   onChange?: (text: string) => void;
 }
 
@@ -13,11 +16,13 @@ interface Props {
  * Input that can be decorated on the left and right side
  */
 export const DecoratedInput: FunctionalComponent<Props> = ({
+  type = 'text',
   className = '',
   disabled = false,
   left,
   right,
   text,
+  placeholder = '',
   onChange,
 }) => {
   const base =
@@ -32,10 +37,11 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
       {left}
       <div className="flex-grow">
         <input
-          type="text"
+          type={type}
           className="w-full no-border color-black focus:shadow-none"
           disabled={disabled}
           value={text}
+          placeholder={placeholder}
           onChange={(e) =>
             onChange && onChange((e.target as HTMLInputElement).value)
           }

app/assets/javascripts/components/shared/HorizontalSeparator.tsx

@@ -0,0 +1,10 @@
+import { FunctionalComponent } from 'preact';
+
+type Props = {
+  classes?: string;
+}
+export const HorizontalSeparator: FunctionalComponent<Props> = ({
+  classes = ''
+}) => {
+  return <hr className={`h-1px w-full bg-border no-border ${classes}`} />;
+};

app/assets/javascripts/components/shared/ModalDialog.tsx

@@ -0,0 +1,58 @@
+import { FunctionComponent } from 'preact';
+import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@node_modules/@reach/alert-dialog';
+import { useRef } from '@node_modules/preact/hooks';
+import { IconButton } from '@/components/IconButton';
+
+export const ModalDialog: FunctionComponent = ({ children }) => {
+  const ldRef = useRef<HTMLButtonElement>();
+
+  return (
+    <AlertDialog leastDestructiveRef={ldRef}>
+      {/* sn-component is focusable by default, but doesn't stretch to child width
+          resulting in a badly focused dialog. Utility classes are not available
+          at the sn-component level, only below it. tabIndex -1 disables focus
+          and enables it on the child component */}
+      <div tabIndex={-1} className="sn-component">
+        <div
+          tabIndex={0}
+          className="w-160 bg-default rounded shadow-overlay focus:padded-ring-info"
+        >
+          {children}
+        </div>
+      </div>
+    </AlertDialog>
+  );
+};
+
+export const ModalDialogLabel: FunctionComponent<{
+  closeDialog: () => void;
+}> = ({ children, closeDialog }) => (
+  <AlertDialogLabel className="">
+    <div className="px-4 pt-4 pb-3 flex flex-row">
+      <div className="flex-grow color-black text-lg font-bold">
+        {children}
+      </div>
+      <IconButton
+        className="color-grey-1 h-5 w-5"
+        icon="close"
+        onClick={() => closeDialog()}
+      />
+    </div>
+    <hr className="h-1px bg-border no-border m-0" />
+  </AlertDialogLabel>
+);
+
+export const ModalDialogDescription: FunctionComponent = ({ children }) => (
+  <AlertDialogDescription className="px-4 py-4">
+    {children}
+  </AlertDialogDescription>
+);
+
+export const ModalDialogButtons: FunctionComponent = ({ children }) => (
+  <>
+    <hr className="h-1px bg-border no-border m-0" />
+    <div className="px-4 py-4 flex flex-row justify-end gap-3">{children}</div>
+  </>
+);
+
+export default ModalDialog;