EditablePasswordField

EditablePasswordField muestra un placeholder enmascarado (*************) con un botón de edición en forma de lápiz. Al hacer clic en el lápiz se abre un FormDialog con tres campos de contraseña: contraseña actual, nueva contraseña y confirmar nueva contraseña. A diferencia de los demás campos editables, este componente no usa el patrón estándar de controles inline de guardar/cancelar — usa un formulario modal dedicado por razones de seguridad.

Nota: Este componente se encuentra en una etapa de implementación temprana. La lógica de envío del formulario (onSave) es un stub y debe conectarse a tu endpoint de actualización de contraseña.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | name | string | Sí | — | Identificador del campo (reservado para integración futura con API). | | value | string | Sí | — | Valor de la contraseña actual (no se muestra; se mantiene por simetría con la API). | | updatePath | string | Sí | — | Ruta del endpoint API para la actualización de contraseña (reservado para uso futuro). | | label | string | No | — | Etiqueta mostrada sobre el campo enmascarado. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | formTitle | string | No | "Editar contraseña" | Título mostrado en el diálogo de cambio de contraseña. | | apiBaseUrl | string | No | — | URL base para el request de actualización (reservado para uso futuro). | | useAuthToken | boolean | No | false | Si incluir el token de autorización (reservado para uso futuro). | | onEditStart | () => void | No | — | Llamado cuando se abre el diálogo. | | onEditSuccess | (updatedValue: any, newFormData: any) => void | No | — | Llamado tras un cambio de contraseña exitoso. | | onEditError | (error: any) => void | No | — | Llamado cuando el cambio de contraseña falla. | | onEditCancel | () => void | No | — | Llamado cuando el diálogo se cierra sin guardar. | | containerStyle | React.CSSProperties | No | — | Estilo del contenedor del campo enmascarado. | | labelStyle | React.CSSProperties | No | — | Estilo del elemento <label>. |

Uso

Básico

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