refactor: DecoratedInput and add DecoratedPasswordInput (#953)

app/assets/javascripts/components/AccountMenu/CreateAccount.tsx

@@ -5,8 +5,10 @@ import { FunctionComponent } from 'preact';
 import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { Button } from '../Button';
+import { DecoratedInput } from '../DecoratedInput';
+import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
+import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
-import { InputWithIcon } from '../InputWithIcon';
 import { AdvancedOptions } from './AdvancedOptions';
 
 type Props = {
@@ -29,8 +31,6 @@ export const CreateAccount: FunctionComponent<Props> = observer(
     password,
     setPassword,
   }) => {
-    const [showPassword, setShowPassword] = useState(false);
-
     const emailInputRef = useRef<HTMLInputElement>(null);
     const passwordInputRef = useRef<HTMLInputElement>(null);
     const [isVault, setIsVault] = useState(false);
@@ -41,16 +41,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
       }
     }, []);
 
-    const handleEmailChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setEmail(e.target.value);
-      }
+    const handleEmailChange = (text: string) => {
+      setEmail(text);
     };
 
-    const handlePasswordChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setPassword(e.target.value);
-      }
+    const handlePasswordChange = (text: string) => {
+      setPassword(text);
     };
 
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -103,33 +99,25 @@ export const CreateAccount: FunctionComponent<Props> = observer(
           <div className="sn-account-menu-headline">Create account</div>
         </div>
         <form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
-          <InputWithIcon
+          <DecoratedInput
             className="mb-2"
-            icon="email"
-            inputType="email"
-            placeholder="Email"
-            value={email}
             disabled={isVault}
+            left={[<Icon type="email" className="color-neutral" />]}
             onChange={handleEmailChange}
             onKeyDown={handleKeyDown}
+            placeholder="Email"
             ref={emailInputRef}
+            type="email"
+            value={email}
           />
-          <InputWithIcon
+          <DecoratedPasswordInput
             className="mb-2"
-            icon="password"
-            inputType={showPassword ? 'text' : 'password'}
-            placeholder="Password"
-            value={password}
+            left={[<Icon type="password" className="color-neutral" />]}
             onChange={handlePasswordChange}
             onKeyDown={handleKeyDown}
-            toggle={{
-              toggleOnIcon: 'eye-off',
-              toggleOffIcon: 'eye',
-              title: 'Show password',
-              toggled: showPassword,
-              onClick: setShowPassword,
-            }}
+            placeholder="Password"
             ref={passwordInputRef}
+            value={password}
           />
           <Button
             className="btn-w-full mt-1"