website refactor

apps/website/ui/PasswordField.tsx

@@ -4,10 +4,29 @@ import { Box } from './Box';
 import { IconButton } from './IconButton';
 import { Input, InputProps } from './Input';
 
-export interface PasswordFieldProps extends InputProps {}
+export interface PasswordFieldProps extends InputProps {
+  showPassword?: boolean;
+  onTogglePassword?: () => void;
+}
 
-export const PasswordField = (props: PasswordFieldProps) => {
-  const [showPassword, setShowPassword] = useState(false);
+export const PasswordField = ({ 
+  showPassword: controlledShowPassword, 
+  onTogglePassword,
+  ...props 
+}: PasswordFieldProps) => {
+  const [internalShowPassword, setInternalShowPassword] = useState(false);
+  
+  const isControlled = controlledShowPassword !== undefined;
+  const showPassword = isControlled ? controlledShowPassword : internalShowPassword;
+
+  const handleToggle = () => {
+    if (onTogglePassword) {
+      onTogglePassword();
+    }
+    if (!isControlled) {
+      setInternalShowPassword(!internalShowPassword);
+    }
+  };
 
   return (
     <Box position="relative">
@@ -24,7 +43,7 @@ export const PasswordField = (props: PasswordFieldProps) => {
       >
         <IconButton
           icon={showPassword ? EyeOff : Eye}
-          onClick={() => setShowPassword(!showPassword)}
+          onClick={handleToggle}
           variant="ghost"
           size="sm"
           title={showPassword ? 'Hide password' : 'Show password'}