import React, { useEffect, useState } from 'react'; import GuestLayout from '../../Layouts/GuestLayout'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { Alert, Button, Card, Col, Container, Form, Row, InputGroup } from 'react-bootstrap'; import logoLight from '../../../images/logo-light.png'; import { Eye, EyeOff, Check, X } from 'lucide-react'; import Swal from 'sweetalert2'; export default function ResetPassword({ token, email }: any) { const { appName } = usePage().props; const { data, setData, post, processing, errors, reset } = useForm({ token: token, email: email, password: '', password_confirmation: '', }); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); useEffect(() => { return () => { reset('password', 'password_confirmation'); }; }, []); // 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 submit = (e: any) => { e.preventDefault(); if (data.password !== data.password_confirmation) { Swal.fire({ title: 'Error', text: 'Las contraseñas no coinciden.', icon: 'error' }); return; } if (!isStrengthValid) { Swal.fire({ title: 'Contraseña Débil', text: 'La contraseña debe cumplir con todos los requisitos de seguridad.', icon: 'warning' }); return; } post(route('password.store')); }; return (

Sistema de Gestión {appName}

Crear Nueva Contraseña

Tu nueva contraseña debe ser diferente a la anterior.

Correo Electrónico setData('email', e.target.value)} readOnly /> {errors.email}

Nueva Contraseña setData('password', e.target.value)} required /> {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 Contraseña setData('password_confirmation', e.target.value)} required /> {errors.password_confirmation}

Espera, recuerdo mi contraseña... Click aquí

); }