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)
           }