From dc3dcfba2b6c3ee4b61dd174f6023d0d80ef2b60 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 26 Mar 2022 15:26:36 +0530
Subject: [PATCH] refactor: DecoratedInput and add DecoratedPasswordInput
 (#953)

---
 .../AccountMenu/AdvancedOptions.tsx           |  42 +++---
 .../AccountMenu/ConfirmPassword.tsx           |  29 ++--
 .../components/AccountMenu/CreateAccount.tsx  |  44 ++----
 .../components/AccountMenu/SignIn.tsx         |  40 ++---
 .../javascripts/components/DecoratedInput.tsx | 140 +++++++++++-------
 .../components/DecoratedPasswordInput.tsx     |  42 ++++++
 .../javascripts/components/InputWithIcon.tsx  |  91 ------------
 .../Preferences/panes/Extensions.tsx          |   2 +-
 .../panes/account/offlineSubscription.tsx     |   2 +-
 .../panes/security-segments/Encryption.tsx    |  47 +++---
 .../panes/two-factor-auth/SaveSecretKey.tsx   |   2 +-
 .../panes/two-factor-auth/ScanQRCode.tsx      |   2 +-
 .../panes/two-factor-auth/Verification.tsx    |   3 +-
 app/assets/stylesheets/_sn.scss               |   4 +
 14 files changed, 210 insertions(+), 280 deletions(-)
 create mode 100644 app/assets/javascripts/components/DecoratedPasswordInput.tsx
 delete mode 100644 app/assets/javascripts/components/InputWithIcon.tsx

diff --git a/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx b/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
index a09335b36..ec67e0ed3 100644
--- 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}
diff --git a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
index 0a5575cb6..2aad0c0b1 100644
--- 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
diff --git a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
index 46d2f0621..002e28e51 100644
--- 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"
diff --git a/app/assets/javascripts/components/AccountMenu/SignIn.tsx b/app/assets/javascripts/components/AccountMenu/SignIn.tsx
index 74578be4f..6e3365684 100644
--- 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
diff --git a/app/assets/javascripts/components/DecoratedInput.tsx b/app/assets/javascripts/components/DecoratedInput.tsx
index 4008f60d5..5307106c7 100644
--- 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>
+      );
+    }
   );
-};
diff --git a/app/assets/javascripts/components/DecoratedPasswordInput.tsx b/app/assets/javascripts/components/DecoratedPasswordInput.tsx
new file mode 100644
index 000000000..32e21a56a
--- /dev/null
+++ 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} />,
+      ]}
+    />
+  );
+});
diff --git a/app/assets/javascripts/components/InputWithIcon.tsx b/app/assets/javascripts/components/InputWithIcon.tsx
deleted file mode 100644
index 1f517c69f..000000000
--- a/app/assets/javascripts/components/InputWithIcon.tsx
+++ /dev/null
@@ -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>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
index 391fcb359..09f90fc9a 100644
--- 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);
               }}
diff --git a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
index 2856be4e5..7b6ec8fb5 100644
--- 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'}
                   />
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
index aff3e5c8c..20604bb1c 100644
--- 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>
       </>
     );
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
index decf179b4..68fc98c1b 100644
--- 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" />
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
index e9e953da9..bf248d418 100644
--- 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>
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
index 0c48d12dc..199358090 100644
--- 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" />
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 6d7d92666..4a1cbf0c8 100644
--- 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;
 }