Add password()/passwordWithToggle() DynamicFields

Support for password() and passwordWithToggle() DynamicFields styled and sized like text() with password inputs

Author: 0aveRyan

app/DTOs/DynamicField.php

@@ -36,6 +36,20 @@ public function text(): self
         return $this;
     }
 
+    public function password(): self
+    {
+        $this->type = 'password';
+
+        return $this;
+    }
+
+    public function passwordWithToggle(): self
+    {
+        $this->type = 'password-with-toggle';
+
+        return $this;
+    }
+
     public function textarea(): self
     {
         $this->type = 'textarea';

resources/js/components/ui/dynamic-field.tsx

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes, useEffect, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
+import { PasswordInput } from '@/components/ui/password-input';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -121,6 +122,51 @@ export default function DynamicField({ value, onChange, config, error }: Dynamic
     );
   }
 
+  // Handle password
+  if (config?.type === 'password') {
+    return (
+      <FormField>
+        <Label htmlFor={`field-${config.name}`} className="capitalize">
+          {label}
+        </Label>
+        <Input
+          type="password"
+          name={config.name}
+          id={`field-${config.name}`}
+          defaultValue={(value as string) || ''}
+          placeholder={config.placeholder}
+          onChange={(e) => onChange(e.target.value)}
+          autoComplete="off"
+          spellCheck={false}
+        />
+        {config.description && <p className="text-muted-foreground text-xs">{config.description}</p>}
+        <InputError message={error} />
+      </FormField>
+    );
+  }
+
+  // Handle password with visibility toggle
+  if (config?.type === 'password-with-toggle') {
+    return (
+      <FormField>
+        <Label htmlFor={`field-${config.name}`} className="capitalize">
+          {label}
+        </Label>
+        <PasswordInput
+          name={config.name}
+          id={`field-${config.name}`}
+          defaultValue={(value as string) || ''}
+          placeholder={config.placeholder}
+          onChange={(e) => onChange(e.target.value)}
+          autoComplete="off"
+          spellCheck={false}
+        />
+        {config.description && <p className="text-muted-foreground text-xs">{config.description}</p>}
+        <InputError message={error} />
+      </FormField>
+    );
+  }
+
   // Handle server provider select
   if (config?.type === 'component' && config?.name === 'server_provider') {
     return (

resources/js/components/ui/password-input.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { useInputFocus } from '@/stores/useInputFocus';
+
+type PasswordInputProps = Omit<React.ComponentProps<'input'>, 'type'>;
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(({ className, ...props }, ref) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const setFocused = useInputFocus((state) => state.setFocused);
+
+  return (
+    <div className="relative">
+      <input
+        type={showPassword ? 'text' : 'password'}
+        data-slot="input"
+        className={cn(
+          'file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          'pr-10',
+          className,
+        )}
+        ref={ref}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        {...props}
+      />
+      <button
+        type="button"
+        className="absolute right-0 top-0 flex h-9 w-9 items-center justify-center text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        onClick={() => setShowPassword((prev) => !prev)}
+        disabled={props.disabled}
+        aria-label={showPassword ? 'Hide password' : 'Show password'}
+        aria-pressed={showPassword}
+      >
+        {showPassword ? <EyeOffIcon className="size-4" aria-hidden="true" /> : <EyeIcon className="size-4" aria-hidden="true" />}
+      </button>
+    </div>
+  );
+});
+
+PasswordInput.displayName = 'PasswordInput';
+
+export { PasswordInput };

resources/js/types/dynamic-field-config.d.ts

@@ -1,5 +1,5 @@
 export interface DynamicFieldConfig {
-  type: 'text' | 'textarea' | 'select' | 'checkbox' | 'component' | 'alert';
+  type: 'text' | 'password' | 'password-with-toggle' | 'textarea' | 'select' | 'checkbox' | 'component' | 'alert';
   name: string;
   options?: string[] | { [key: string]: string };
   component?: string;