import { Head } from "@inertiajs/react"; import { Key, Lock, Eye, EyeOff, ArrowRight } from "lucide-react"; import { motion, AnimatePresence, Variants } from "framer-motion"; import { ReactNode, useState, useEffect } from "react" import AuthLayout from "@/layouts/auth-layout"; import { useForm } from "@inertiajs/react"; interface props { token: string; email: string; } export default function ResetPassword({ token, email }: props) { const { data, setData, post, errors, processing } = useForm({ password: '', password_confirmation: '', email: email, token: token, }) const [showPassword, setShowPassword] = useState(false) const [confirmError, setConfirmError] = useState('') useEffect(() => { if (data.password && data.password_confirmation) { setConfirmError(data.password !== data.password_confirmation ? 'Password tidak cocok!' : ''); } else { setConfirmError(''); } }, [data.password, data.password_confirmation]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/reset-password'); } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.07, delayChildren: 0.2 } } } const itemVariants: Variants = { hidden: { opacity: 0, y: 15 }, visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.23, 1, 0.32, 1] } } } return ( <>
{/* Heading */}

{Array.from("Buat Password Baru.").map((char, index) => ( {char} ))}

Masukkan password baru kamu.

{/* Form */} {/* Password */}
setData('password', e.target.value)} placeholder="••••••••" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/20 text-sm font-medium" required />
{errors.password &&

{errors.password}

} {/* Confirm Password */}
setData('password_confirmation', e.target.value)} placeholder="••••••••" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/20 text-sm font-medium" required />
{confirmError && ( {confirmError} )} {processing ? (
) : ( <> Buat Password )}
) } ResetPassword.layout = (page: ReactNode) => ( );