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
--- a/app/assets/javascripts/components/DecoratedInput.tsx
+++ b/app/assets/javascripts/components/DecoratedInput.tsx
@@ -1,70 +1,98 @@
-import { FunctionalComponent, ComponentChild } from 'preact';
-import { HtmlInputTypes } from '@/enums';
+import { FunctionalComponent, ComponentChild, Ref } from 'preact';
+import { forwardRef } from 'preact/compat';

-interface Props {
-  type?: HtmlInputTypes;
+export type DecoratedInputProps = {
+  type?: 'text' | 'email' | 'password';
  className?: string;
  disabled?: boolean;
  left?: ComponentChild[];
  right?: ComponentChild[];
-  text?: string;
+  value?: string;
  placeholder?: string;
  onChange?: (text: string) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onKeyDown?: (event: KeyboardEvent) => void;
  autocomplete?: boolean;
-}
+};
+
+const getClassNames = (
+  hasLeftDecorations: boolean,
+  hasRightDecorations: boolean
+) => {
+  return {
+    container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
+      !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
+    }`,
+    input: `w-full border-0 focus:shadow-none ${
+      !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
+    } ${hasRightDecorations ? 'pr-2' : ''}`,
+    disabled: 'bg-grey-5 cursor-not-allowed',
+  };
+};

 /**
 * 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,
-  autocomplete = false,
-}) => {
-  const baseClasses =
-    'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast';
-  const stateClasses = disabled
-    ? 'no-border'
-    : 'border-solid border-1 border-main';
-  const classes = `${baseClasses} ${stateClasses} ${className}`;
+export const DecoratedInput: FunctionalComponent<DecoratedInputProps> =
+  forwardRef(
+    (
+      {
+        type = 'text',
+        className = '',
+        disabled = false,
+        left,
+        right,
+        value,
+        placeholder = '',
+        onChange,
+        onFocus,
+        onKeyDown,
+        autocomplete = false,
+      }: DecoratedInputProps,
+      ref: Ref<HTMLInputElement>
+    ) => {
+      const hasLeftDecorations = Boolean(left?.length);
+      const hasRightDecorations = Boolean(right?.length);
+      const classNames = getClassNames(hasLeftDecorations, hasRightDecorations);

-  const inputBaseClasses =
-    'w-full no-border color-text focus:shadow-none bg-contrast';
-  const inputStateClasses = disabled ? 'overflow-ellipsis' : '';
-  return (
-    <div className={`${classes} focus-within:ring-info`}>
-      {left?.map((leftChild) => (
-        <>
-          {leftChild}
-          <div className="min-w-2 min-h-1" />
-        </>
-      ))}
-      <div className="flex-grow">
-        <input
-          type={type}
-          className={`${inputBaseClasses} ${inputStateClasses}`}
-          disabled={disabled}
-          value={text}
-          placeholder={placeholder}
-          onChange={(e) =>
-            onChange && onChange((e.target as HTMLInputElement).value)
-          }
-          data-lpignore={type !== 'password' ? true : false}
-          autocomplete={autocomplete ? 'on' : 'off'}
-        />
-      </div>
-      {right?.map((rightChild) => (
-        <>
-          <div className="min-w-3 min-h-1" />
-          {rightChild}
-        </>
-      ))}
-    </div>
+      return (
+        <div
+          className={`${classNames.container} ${
+            disabled ? classNames.disabled : ''
+          } ${className}`}
+        >
+          {left && (
+            <div className="flex items-center px-2 py-1.5">
+              {left.map((leftChild) => (
+                <>{leftChild}</>
+              ))}
+            </div>
+          )}
+          <input
+            type={type}
+            className={`${classNames.input} ${
+              disabled ? classNames.disabled : ''
+            }`}
+            disabled={disabled}
+            value={value}
+            placeholder={placeholder}
+            onChange={(e) =>
+              onChange && onChange((e.target as HTMLInputElement).value)
+            }
+            onFocus={onFocus}
+            onKeyDown={onKeyDown}
+            data-lpignore={type !== 'password' ? true : false}
+            autocomplete={autocomplete ? 'on' : 'off'}
+            ref={ref}
+          />
+          {right && (
+            <div className="flex items-center px-2 py-1.5">
+              {right.map((rightChild, index) => (
+                <div className={index > 0 ? 'ml-3' : ''}>{rightChild}</div>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    }
  );
-};
--- a/app/assets/javascripts/components/DecoratedPasswordInput.tsx
+++ b/app/assets/javascripts/components/DecoratedPasswordInput.tsx
@@ -0,0 +1,42 @@
+import { FunctionComponent, Ref } from 'preact';
+import { forwardRef } from 'preact/compat';
+import { StateUpdater, useState } from 'preact/hooks';
+import { DecoratedInput, DecoratedInputProps } from './DecoratedInput';
+import { IconButton } from './IconButton';
+
+const Toggle: FunctionComponent<{
+  isToggled: boolean;
+  setIsToggled: StateUpdater<boolean>;
+}> = ({ isToggled, setIsToggled }) => (
+  <IconButton
+    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4"
+    icon={isToggled ? 'eye-off' : 'eye'}
+    iconClassName="sn-icon--small"
+    title="Show/hide password"
+    onClick={() => setIsToggled((isToggled) => !isToggled)}
+    focusable={true}
+  />
+);
+
+/**
+ * Password input that has a toggle to show/hide password and can be decorated on the left and right side
+ */
+export const DecoratedPasswordInput: FunctionComponent<
+  Omit<DecoratedInputProps, 'type'>
+> = forwardRef((props, ref: Ref<HTMLInputElement>) => {
+  const [isToggled, setIsToggled] = useState(false);
+
+  const rightSideDecorations = props.right ? [...props.right] : [];
+
+  return (
+    <DecoratedInput
+      {...props}
+      ref={ref}
+      type={isToggled ? 'text' : 'password'}
+      right={[
+        ...rightSideDecorations,
+        <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />,
+      ]}
+    />
+  );
+});
--- a/app/assets/javascripts/components/InputWithIcon.tsx
+++ b/app/assets/javascripts/components/InputWithIcon.tsx
@@ -1,91 +0,0 @@
-import { FunctionComponent, Ref } from 'preact';
-import { JSXInternal } from 'preact/src/jsx';
-import { forwardRef } from 'preact/compat';
-import { Icon } from './Icon';
-import { IconButton } from './IconButton';
-import { IconType } from '@standardnotes/snjs';
-
-type ToggleProps = {
-  toggleOnIcon: IconType;
-  toggleOffIcon: IconType;
-  title: string;
-  toggled: boolean;
-  onClick: (toggled: boolean) => void;
-};
-
-type Props = {
-  icon: IconType;
-  inputType: 'text' | 'email' | 'password';
-  className?: string;
-  iconClassName?: string;
-  value: string | undefined;
-  onChange: JSXInternal.GenericEventHandler<HTMLInputElement>;
-  onFocus?: JSXInternal.GenericEventHandler<HTMLInputElement>;
-  onKeyDown?: JSXInternal.KeyboardEventHandler<HTMLInputElement>;
-  disabled?: boolean;
-  placeholder: string;
-  toggle?: ToggleProps;
-};
-
-const DISABLED_CLASSNAME = 'bg-grey-5 cursor-not-allowed';
-
-export const InputWithIcon: FunctionComponent<Props> = forwardRef(
-  (
-    {
-      icon,
-      inputType,
-      className,
-      iconClassName,
-      value,
-      onChange,
-      onFocus,
-      onKeyDown,
-      disabled,
-      toggle,
-      placeholder,
-    }: Props,
-    ref: Ref<HTMLInputElement>
-  ) => {
-    const handleToggle = () => {
-      if (toggle) toggle.onClick(!toggle?.toggled);
-    };
-
-    return (
-      <div
-        className={`flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
-          disabled ? DISABLED_CLASSNAME : ''
-        } ${className}`}
-      >
-        <div className="flex px-2 py-1.5">
-          <Icon type={icon} className={`color-grey-1 ${iconClassName}`} />
-        </div>
-        <input
-          type={inputType}
-          onFocus={onFocus}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          value={value}
-          className={`pr-2 w-full border-0 focus:shadow-none ${
-            disabled ? DISABLED_CLASSNAME : ''
-          }`}
-          spellcheck={false}
-          disabled={disabled}
-          placeholder={placeholder}
-          ref={ref}
-        />
-        {toggle ? (
-          <div className="flex items-center justify-center px-2">
-            <IconButton
-              className="w-5 h-5 justify-center sk-circle hover:bg-grey-4"
-              icon={toggle.toggled ? toggle.toggleOnIcon : toggle.toggleOffIcon}
-              iconClassName="sn-icon--small"
-              title={toggle.title}
-              onClick={handleToggle}
-              focusable={true}
-            />
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-);
--- a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
@@ -112,7 +112,7 @@ export const Extensions: FunctionComponent<{
            <Title>Install Custom Extension</Title>
            <DecoratedInput
              placeholder={'Enter Extension URL'}
-              text={customUrl}
+              value={customUrl}
              onChange={(value) => {
                setCustomUrl(value);
              }}
--- a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
@@ -103,7 +103,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
                  <DecoratedInput
                    onChange={(code) => setActivationCode(code)}
                    placeholder={'Offline Subscription Code'}
-                    text={activationCode}
+                    value={activationCode}
                    disabled={isSuccessfullyActivated}
                    className={'mb-3'}
                  />
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
@@ -1,4 +1,3 @@
-import { DecoratedInput } from '@/components/DecoratedInput';
 import { Icon } from '@/components/Icon';
 import {
  STRING_E2E_ENABLED,
@@ -7,7 +6,7 @@ import {
 } from '@/strings';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
+import { ComponentChild, FunctionComponent } from 'preact';
 import {
  PreferencesGroup,
  PreferencesSegment,
@@ -18,6 +17,19 @@ import {
 const formatCount = (count: number, itemType: string) =>
  `${count} / ${count} ${itemType}`;

+const EncryptionStatusItem: FunctionComponent<{
+  icon: ComponentChild;
+  status: string;
+}> = ({ icon, status }) => (
+  <div className="w-full rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
+    {icon}
+    <div className="min-w-3 min-h-1" />
+    <div className="flex-grow color-text text-sm">{status}</div>
+    <div className="min-w-3 min-h-1" />
+    <Icon className="success min-w-4 min-h-4" type="check-bold" />
+  </div>
+);
+
 const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
  ({ appState }) => {
    const count = appState.accountMenu.structuredNotesAndTagsCount;
@@ -26,9 +38,6 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
    const archived = formatCount(count.archived, 'archived notes');
    const deleted = formatCount(count.deleted, 'trashed notes');

-    const checkIcon = (
-      <Icon className="success min-w-4 min-h-4" type="check-bold" />
-    );
    const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
    const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
    const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
@@ -36,34 +45,14 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
    return (
      <>
        <div className="flex flex-row pb-1 pt-1.5">
-          <DecoratedInput
-            disabled={true}
-            text={notes}
-            right={[checkIcon]}
-            left={[noteIcon]}
-          />
+          <EncryptionStatusItem status={notes} icon={[noteIcon]} />
          <div className="min-w-3" />
-          <DecoratedInput
-            disabled={true}
-            text={tags}
-            right={[checkIcon]}
-            left={[tagIcon]}
-          />
+          <EncryptionStatusItem status={tags} icon={[tagIcon]} />
        </div>
        <div className="flex flex-row">
-          <DecoratedInput
-            disabled={true}
-            text={archived}
-            right={[checkIcon]}
-            left={[archiveIcon]}
-          />
+          <EncryptionStatusItem status={archived} icon={[archiveIcon]} />
          <div className="min-w-3" />
-          <DecoratedInput
-            disabled={true}
-            text={deleted}
-            right={[checkIcon]}
-            left={[trashIcon]}
-          />
+          <EncryptionStatusItem status={deleted} icon={[trashIcon]} />
        </div>
      </>
    );
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
@@ -55,7 +55,7 @@ export const SaveSecretKey: FunctionComponent<{
            <DecoratedInput
              disabled={true}
              right={[<CopyButton copyValue={act.secretKey} />, download]}
-              text={act.secretKey}
+              value={act.secretKey}
            />
          </div>
          <div className="h-2" />
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
@@ -55,7 +55,7 @@ export const ScanQRCode: FunctionComponent<{
          <DecoratedInput
            className="ml-4 w-92"
            disabled={true}
-            text={act.secretKey}
+            value={act.secretKey}
            right={[<CopyButton copyValue={act.secretKey} />]}
          />
        </div>
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
@@ -25,7 +25,7 @@ export const Verification: FunctionComponent<{
      </ModalDialogLabel>
      <ModalDialogDescription className="h-33">
        <div className="flex-grow flex flex-col">
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center mb-4">
            <Bullet />
            <div className="min-w-1" />
            <div className="text-sm">
@@ -37,7 +37,6 @@ export const Verification: FunctionComponent<{
              onChange={act.setInputSecretKey}
            />
          </div>
-          <div className="min-h-1" />
          <div className="flex flex-row items-center">
            <Bullet />
            <div className="min-w-1" />
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -602,6 +602,10 @@
  padding-bottom: 2.25rem;
 }

+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .placeholder-dark-red::placeholder {
  @extend .color-dark-red;
 }