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

@@ -1,11 +1,12 @@
 import { FunctionComponent } from 'preact';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 
 const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
   index,
   length,
 }) =>
   index < length - 1 ? (
-    <hr className="h-1px w-full bg-border no-border" />
+    <HorizontalSeparator />
   ) : null;
 
 export const PreferencesSegment: FunctionComponent = ({ children }) => (
@@ -30,7 +31,7 @@ export const PreferencesGroup: FunctionComponent = ({ children }) => (
 );
 
 export const PreferencesPane: FunctionComponent = ({ children }) => (
-  <div className="preferences-pane flex-grow flex flex-row overflow-y-auto min-h-0">
+  <div className="color-black flex-grow flex flex-row overflow-y-auto min-h-0">
     <div className="flex-grow flex flex-col py-6 items-center">
       <div className="w-125 max-w-125 flex flex-col gap-3">{children}</div>
     </div>