import React, { useState } from 'react'; import { Head, useForm, Link } from '@inertiajs/react'; import { Card, Col, Container, Form, Row, Button, Spinner, InputGroup } from 'react-bootstrap'; import Layout from '../../../Layouts'; import Swal from 'sweetalert2'; import { useLoading } from '../../../LoadingContext'; import { Eye, EyeOff, Check, X } from 'lucide-react'; interface Props { usuario: any; } const Editar = ({ usuario }: Props) => { const { data, setData, put, processing, errors } = useForm({ name: usuario.name || '', email: usuario.email || '', password: '', password_confirmation: '', role: usuario.role || 'user', is_active: usuario.is_active === 1 || usuario.is_active === true, }); const { showLoading, hideLoading } = useLoading(); // Estados para visibilidad de contraseña const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); // Función para validar fuerza de contraseña const checkStrength = (pass: string) => { return { length: pass.length >= 8, uppercase: /[A-Z]/.test(pass), number: /[0-9]/.test(pass), special: /[!@#$%^&*(),.?":{}|<>]/.test(pass), }; }; const strength = checkStrength(data.password); const isStrengthValid = Object.values(strength).every(Boolean); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // Validación condicional: Si confirma contraseña, debe ingresar la nueva if (data.password_confirmation && !data.password) { Swal.fire({ title: 'Error', text: 'Debes ingresar la nueva contraseña si has llenado la confirmación.', icon: 'error' }); return; } // Validación de fuerza si se ingresó contraseña if (data.password && !isStrengthValid) { Swal.fire({ title: 'Contraseña Débil', text: 'La contraseña debe cumplir con todos los requisitos de seguridad.', icon: 'warning' }); return; } showLoading(); // Usamos post con _method: 'PUT' si hay problemas, pero Inertia put suele funcionar put(route('users.update', usuario.id), { onSuccess: () => { hideLoading(); Swal.fire({ title: 'Éxito', text: 'Usuario actualizado correctamente', icon: 'success', timer: 1500, showConfirmButton: false }); }, onError: () => { hideLoading(); Swal.fire({ title: 'Error', text: 'Por favor corrige los errores en el formulario', icon: 'error' }); }, onFinish: () => hideLoading() }); }; return (

Editar Usuario: {usuario.name}

Volver
Nombre * setData('name', e.target.value)} isInvalid={!!errors.name} placeholder="Nombre completo" /> {errors.name} Email * setData('email', e.target.value)} isInvalid={!!errors.email} placeholder="nombre@ejemplo.com" /> {errors.email}
Dejar los campos de contraseña vacíos para mantener la actual.
Nueva Contraseña setData('password', e.target.value)} isInvalid={!!errors.password} placeholder="Mínimo 8 caracteres (Opcional)" /> {errors.password} {/* Medidor de Fuerza de Contraseña */} {data.password && (
Requisitos de seguridad:
  • {strength.length ? : } Mínimo 8 caracteres
  • {strength.uppercase ? : } Al menos 1 mayúscula
  • {strength.number ? : } Al menos 1 número
  • {strength.special ? : } Al menos 1 carácter especial
)} Confirmar Nueva Contraseña setData('password_confirmation', e.target.value)} placeholder="Repite la nueva contraseña" /> Rol * setData('role', e.target.value)} isInvalid={!!errors.role} > {errors.role} setData('is_active', e.target.checked)} />
Cancelar
); }; Editar.layout = (page: any) => ; export default Editar;