refactor: DecoratedInput and add DecoratedPasswordInput (#953)

2022-03-26 15:26:36 +05:30
parent 03f707ee63
commit dc3dcfba2b
14 changed files with 210 additions and 280 deletions
--- a/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import { Checkbox } from '../Checkbox';
+import { DecoratedInput } from '../DecoratedInput';
 import { Icon } from '../Icon';
-import { InputWithIcon } from '../InputWithIcon';

 type Props = {
  application: WebApplication;
@@ -63,16 +63,12 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
      setIsVault(!isVault);
    };

-    const handleVaultNameChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setVaultName(e.target.value);
-      }
+    const handleVaultNameChange = (name: string) => {
+      setVaultName(name);
    };

-    const handleVaultUserphraseChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setVaultUserphrase(e.target.value);
-      }
+    const handleVaultUserphraseChange = (userphrase: string) => {
+      setVaultUserphrase(userphrase);
    };

    const handleServerOptionChange = (e: Event) => {
@@ -81,11 +77,9 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
      }
    };

-    const handleSyncServerChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setServer(e.target.value);
-        application.setCustomHost(e.target.value);
-      }
+    const handleSyncServerChange = (server: string) => {
+      setServer(server);
+      application.setCustomHost(server);
    };

    const handleStrictSigninChange = () => {
@@ -135,19 +129,19 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(

            {appState.enableUnfinishedFeatures && isVault && (
              <>
-                <InputWithIcon
+                <DecoratedInput
                  className={`mb-2`}
-                  icon="folder"
-                  inputType="text"
+                  left={[<Icon type="folder" className="color-neutral" />]}
+                  type="text"
                  placeholder="Vault name"
                  value={vaultName}
                  onChange={handleVaultNameChange}
                  disabled={disabled}
                />
-                <InputWithIcon
-                  className={`mb-2 `}
-                  icon="server"
-                  inputType={'text'}
+                <DecoratedInput
+                  className={`mb-2`}
+                  left={[<Icon type="server" className="color-neutral" />]}
+                  type="text"
                  placeholder="Vault userphrase"
                  value={vaultUserphrase}
                  onChange={handleVaultUserphraseChange}
@@ -183,9 +177,9 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
              onChange={handleServerOptionChange}
              disabled={disabled}
            />
-            <InputWithIcon
-              inputType="text"
-              icon="server"
+            <DecoratedInput
+              type="text"
+              left={[<Icon type="server" className="color-neutral" />]}
              placeholder="https://api.standardnotes.com"
              value={server}
              onChange={handleSyncServerChange}
--- a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
@@ -7,9 +7,9 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
+import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
+import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
-import { InputWithIcon } from '../InputWithIcon';
-import { AdvancedOptions } from './AdvancedOptions';

 type Props = {
  appState: AppState;
@@ -23,7 +23,6 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
  ({ application, appState, setMenuPane, email, password }) => {
    const { notesAndTagsCount } = appState.accountMenu;
    const [confirmPassword, setConfirmPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
    const [isRegistering, setIsRegistering] = useState(false);
    const [isEphemeral, setIsEphemeral] = useState(false);
    const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
@@ -35,10 +34,8 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
      passwordInputRef.current?.focus();
    }, []);

-    const handlePasswordChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setConfirmPassword(e.target.value);
-      }
+    const handlePasswordChange = (text: string) => {
+      setConfirmPassword(text);
    };

    const handleEphemeralChange = () => {
@@ -117,23 +114,15 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
          your data.
        </div>
        <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
-          <InputWithIcon
+          <DecoratedPasswordInput
            className="mb-2"
-            icon="password"
-            inputType={showPassword ? 'text' : 'password'}
-            placeholder="Confirm password"
-            value={confirmPassword}
+            disabled={isRegistering}
+            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="Confirm password"
            ref={passwordInputRef}
-            disabled={isRegistering}
+            value={confirmPassword}
          />
          {error ? <div className="color-dark-red my-2">{error}</div> : null}
          <Button
--- a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
+++ b/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"
--- a/app/assets/javascripts/components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/components/AccountMenu/SignIn.tsx
@@ -7,9 +7,10 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
+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 = {
@@ -28,7 +29,6 @@ export const SignInPane: FunctionComponent<Props> = observer(

    const [isStrictSignin, setIsStrictSignin] = useState(false);
    const [isSigningIn, setIsSigningIn] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
    const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
    const [isVault, setIsVault] = useState(false);

@@ -51,19 +51,15 @@ export const SignInPane: 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) => {
+    const handlePasswordChange = (text: string) => {
      if (error.length) {
        setError('');
      }
-      if (e.target instanceof HTMLInputElement) {
-        setPassword(e.target.value);
-      }
+      setPassword(text);
    };

    const handleEphemeralChange = () => {
@@ -148,10 +144,10 @@ export const SignInPane: FunctionComponent<Props> = observer(
          <div className="sn-account-menu-headline">Sign in</div>
        </div>
        <div className="px-3 mb-1">
-          <InputWithIcon
+          <DecoratedInput
            className={`mb-2 ${error ? 'border-dark-red' : null}`}
-            icon="email"
-            inputType="email"
+            left={[<Icon type="email" className="color-neutral" />]}
+            type="email"
            placeholder="Email"
            value={email}
            onChange={handleEmailChange}
@@ -160,24 +156,16 @@ export const SignInPane: FunctionComponent<Props> = observer(
            disabled={isSigningIn || isVault}
            ref={emailInputRef}
          />
-          <InputWithIcon
+          <DecoratedPasswordInput
            className={`mb-2 ${error ? 'border-dark-red' : null}`}
-            icon="password"
-            inputType={showPassword ? 'text' : 'password'}
-            placeholder="Password"
-            value={password}
+            disabled={isSigningIn}
+            left={[<Icon type="password" className="color-neutral" />]}
            onChange={handlePasswordChange}
            onFocus={resetInvalid}
            onKeyDown={handleKeyDown}
-            disabled={isSigningIn}
-            toggle={{
-              toggleOnIcon: 'eye-off',
-              toggleOffIcon: 'eye',
-              title: 'Show password',
-              toggled: showPassword,
-              onClick: setShowPassword,
-            }}
+            placeholder="Password"
            ref={passwordInputRef}
+            value={password}
          />
          {error ? <div className="color-dark-red my-2">{error}</div> : null}
          <Button