jorgemike
e275b33131
- Simplified layout component by removing unnecessary navigation links. - Enhanced the main page with a button to create events and adjusted card layout. - Introduced a new banner uploader component for image uploads. - Created a password input component with visibility toggle. - Developed a create event container to manage event creation. - Implemented a comprehensive form editor for creating and editing forms. - Updated plantillas data structure for better event registration forms. - Added global styles and integrated them into Bootstrap SCSS. - Removed deprecated create-formulario type definitions and replaced them with updated types.
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
export interface PasswordInputProps
|
|
extends Omit<
|
|
React.InputHTMLAttributes<HTMLInputElement>,
|
|
'type' | 'className'
|
|
> {
|
|
/**
|
|
* Texto de la etiqueta asociada al input (opcional).
|
|
*/
|
|
label?: string;
|
|
/**
|
|
* Clases CSS personalizables para distintos elementos.
|
|
*/
|
|
className?: {
|
|
/** Clases para el contenedor del componente */
|
|
container?: string;
|
|
/** Clases para la etiqueta */
|
|
label?: string;
|
|
/** Clases para el campo input */
|
|
input?: string;
|
|
/** Clases para el botón de toggle */
|
|
button?: string;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Componente especializado para inputs de contraseña con botón de mostrar/ocultar.
|
|
*/
|
|
export default function PasswordInput(props: PasswordInputProps) {
|
|
const { label, name, id, className, ...rest } = props;
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
// Determina el tipo de input según el estado de visibilidad
|
|
const inputType = visible ? 'text' : 'password';
|
|
const inputId =
|
|
id ||
|
|
name ||
|
|
(label ? `password-${label.replace(/\s+/g, '-')}` : undefined);
|
|
|
|
const toggleVisibility = () => setVisible((v) => !v);
|
|
|
|
return (
|
|
<div className={className?.container || 'mb-3'}>
|
|
{label && inputId && (
|
|
<label htmlFor={inputId} className={className?.label || 'form-label'}>
|
|
{label}
|
|
</label>
|
|
)}
|
|
<div className="input-group">
|
|
<input
|
|
id={inputId}
|
|
name={name}
|
|
type={inputType}
|
|
className={className?.input || 'form-control'}
|
|
{...rest}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className={className?.button || 'btn btn-light border'}
|
|
onClick={toggleVisibility}
|
|
aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
|
title={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
|
>
|
|
<i className={`bi ${visible ? 'bi-eye-slash' : 'bi-eye'}`} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|