refactor: DecoratedInput and add DecoratedPasswordInput (#953)

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);
               }}

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'}
                   />

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>
       </>
     );

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" />

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>

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" />