Add hidden/masked field type definition (#1404)

apps/browser-extension/src/entrypoints/popup/components/Credentials/Details/FieldBlock.tsx

@@ -54,6 +54,7 @@ const FieldBlock: React.FC<FieldBlockProps> = ({ field }) => {
   // Render based on field type
   switch (field.FieldType) {
     case 'Password':
+    case 'Hidden':
       return (
         <FormInputCopyToClipboard
           id={field.FieldKey}

apps/browser-extension/src/entrypoints/popup/components/Forms/HiddenField.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface IHiddenFieldProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  error?: string;
+  showValue?: boolean;
+  onShowValueChange?: (show: boolean) => void;
+}
+
+/**
+ * Hidden field component with show/hide toggle (like password field but without generation).
+ * Used for sensitive data that doesn't need password generation features.
+ */
+const HiddenField: React.FC<IHiddenFieldProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  error,
+  showValue: controlledShowValue,
+  onShowValueChange
+}) => {
+  const { t } = useTranslation();
+  const [internalShowValue, setInternalShowValue] = useState(false);
+
+  // Use controlled or uncontrolled showValue state
+  const showValue = controlledShowValue !== undefined ? controlledShowValue : internalShowValue;
+
+  /**
+   * Set the showValue state.
+   */
+  const setShowValue = useCallback((show: boolean): void => {
+    if (controlledShowValue !== undefined) {
+      onShowValueChange?.(show);
+    } else {
+      setInternalShowValue(show);
+    }
+  }, [controlledShowValue, onShowValueChange]);
+
+  const toggleValueVisibility = useCallback(() => {
+    setShowValue(!showValue);
+  }, [showValue, setShowValue]);
+
+  return (
+    <div className="space-y-2">
+      {/* Label */}
+      <label htmlFor={id} className="block text-sm font-medium text-gray-900 dark:text-white">
+        {label}
+      </label>
+
+      {/* Hidden Input with Show/Hide Button */}
+      <div className="flex">
+        <div className="relative flex-grow">
+          <input
+            type={showValue ? 'text' : 'password'}
+            id={id}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            className="outline-0 text-sm shadow-sm border border-gray-300 bg-gray-50 text-gray-900 sm:text-sm rounded-l-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+          />
+        </div>
+        <div className="flex">
+          {/* Show/Hide Value Button */}
+          <button
+            type="button"
+            onClick={toggleValueVisibility}
+            className="px-3 text-gray-500 dark:text-white bg-gray-200 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-r-lg text-sm dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+            title={showValue ? t('common.hidePassword') : t('common.showPassword')}
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {showValue ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+              ) : (
+                <>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </>
+              )}
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+};
+
+export default HiddenField;

apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx

@@ -7,6 +7,7 @@ import { sendMessage } from 'webext-bridge/popup';
 import Modal from '@/entrypoints/popup/components/Dialogs/Modal';
 import EditableFieldLabel from '@/entrypoints/popup/components/Forms/EditableFieldLabel';
 import { FormInput } from '@/entrypoints/popup/components/Forms/FormInput';
+import HiddenField from '@/entrypoints/popup/components/Forms/HiddenField';
 import PasswordField from '@/entrypoints/popup/components/Forms/PasswordField';
 import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
 import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
@@ -384,6 +385,16 @@ const ItemAddEdit: React.FC = () => {
           />
         );
 
+      case 'Hidden':
+        return (
+          <HiddenField
+            id={fieldKey}
+            label={label}
+            value={stringValue}
+            onChange={(val) => handleFieldChange(fieldKey, val)}
+          />
+        );
+
       case 'TextArea':
         return (
           <div>
@@ -556,7 +567,7 @@ const ItemAddEdit: React.FC = () => {
                   className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white"
                 >
                   <option value="Text">Text</option>
-                  <option value="Password">Hidden (masked text)</option>
+                  <option value="Hidden">Hidden (masked text)</option>
                   <option value="Email">Email</option>
                   <option value="URL">URL</option>
                   <option value="Phone">Phone</option>

apps/browser-extension/src/utils/dist/shared/models/vault/index.d.ts

@@ -358,7 +358,7 @@ type ItemField = {
 /**
  * Field types for rendering and validation
  */
-type FieldType = 'Text' | 'Password' | 'Email' | 'URL' | 'Date' | 'Number' | 'Phone' | 'TextArea';
+type FieldType = 'Text' | 'Password' | 'Hidden' | 'Email' | 'URL' | 'Date' | 'Number' | 'Phone' | 'TextArea';
 /**
  * Tag reference for display within an item
  */

apps/mobile-app/utils/dist/shared/models/vault/index.d.ts

@@ -358,7 +358,7 @@ type ItemField = {
 /**
  * Field types for rendering and validation
  */
-type FieldType = 'Text' | 'Password' | 'Email' | 'URL' | 'Date' | 'Number' | 'Phone' | 'TextArea';
+type FieldType = 'Text' | 'Password' | 'Hidden' | 'Email' | 'URL' | 'Date' | 'Number' | 'Phone' | 'TextArea';
 /**
  * Tag reference for display within an item
  */

shared/models/src/vault/Item.ts

@@ -45,6 +45,7 @@ export type ItemField = {
 export type FieldType =
     | 'Text'
     | 'Password'
+    | 'Hidden'
     | 'Email'
     | 'URL'
     | 'Date'