EditablePasswordField

EditablePasswordField displays a masked password placeholder (*************) with an edit icon button. Clicking the pencil icon opens a FormDialog containing three password fields: current password, new password, and confirm new password. Unlike other editable fields, this component does not use the standard EditFieldControls inline save/cancel pattern — it uses a dedicated modal form for security reasons.

Note: This component is currently in an early implementation stage. The form submission logic (onSave) is a stub and should be wired to your password-update API endpoint.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field identifier (reserved for future API integration). | | value | string | Yes | — | Current password value (not displayed; kept for API symmetry). | | updatePath | string | Yes | — | API endpoint path for the password update (reserved for future use). | | label | string | No | — | Label shown above the masked field. | | description | string | No | — | Helper text shown below the label. | | formTitle | string | No | "Editar contraseña" | Title displayed in the change-password dialog. | | apiBaseUrl | string | No | — | Base URL for the update request (reserved for future use). | | useAuthToken | boolean | No | false | Whether to include the authorization token (reserved for future use). | | onEditStart | () => void | No | — | Called when the dialog opens. | | onEditSuccess | (updatedValue: any, newFormData: any) => void | No | — | Called after a successful password change. | | onEditError | (error: any) => void | No | — | Called when the password change fails. | | onEditCancel | () => void | No | — | Called when the dialog is closed without saving. | | containerStyle | React.CSSProperties | No | — | Style for the masked password container. | | labelStyle | React.CSSProperties | No | — | Style for the <label> element. |

Usage

Basic

import React from 'react';
import EditablePasswordField from '@/components/editable-fields/EditablePasswordField';

export default function Example() {
  return (
    <EditablePasswordField
      label="Password"
      name="password"
      value=""
      updatePath="/v1/users/42/password"
      apiBaseUrl="https://api.example.com"
      formTitle="Change Password"
      useAuthToken
    />
  );
}