Auth ResetPassword.tsx

0% Statements 0/92

0% Branches 0/1

0% Functions 0/1

0% Lines 0/92

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110

import { FormEventHandler, useEffect } from 'react';
import { Head, useForm } from '@inertiajs/react';
import GuestLayout from '@/Components/GuestLayout';
import { Button } from '@/Components/ui/Button';
import { Input } from '@/Components/ui/Input';
import { Label } from '@/Components/ui/Label';
 
export default function ResetPassword({
    token,
    email,
}: {
    token: string;
    email: string;
}) {
    const { data, setData, post, processing, errors, reset } = useForm({
        token: token,
        email: email,
        password: '',
        password_confirmation: '',
    });
 
    useEffect(() => {
        return () => {
            reset('password', 'password_confirmation');
        };
    }, []);
 
    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('password.store'));
    };
 
    return (
        <GuestLayout header="Reset Password" subheader="Enter your new password below to complete the reset process.">
            <Head title="Reset Password" />
 
            <form onSubmit={submit} className="space-y-4">
                <div>
                    <Label htmlFor="email" className="">
                        Email Address
                    </Label>
                    <Input
                        id="email"
                        type="email"
                        name="email"
                        value={data.email}
                        className="mt-1 "
                        autoComplete="username"
                        error={!!errors.email}
                        onChange={(e) => setData('email', e.target.value)}
                    />
                    {errors.email && (
                        <p className="mt-1 text-sm text-destructive">
                            {errors.email}
                        </p>
                    )}
                </div>
 
                <div>
                    <Label htmlFor="password" className="">
                        New Password
                    </Label>
                    <Input
                        id="password"
                        type="password"
                        name="password"
                        value={data.password}
                        className="mt-1 "
                        autoComplete="new-password"
                        error={!!errors.password}
                        onChange={(e) => setData('password', e.target.value)}
                        placeholder="Enter new password"
                        autoFocus
                    />
                    {errors.password && (
                        <p className="mt-1 text-sm text-destructive">
                            {errors.password}
                        </p>
                    )}
                </div>
 
                <div>
                    <Label htmlFor="password_confirmation" className="">
                        Confirm Password
                    </Label>
                    <Input
                        id="password_confirmation"
                        type="password"
                        name="password_confirmation"
                        value={data.password_confirmation}
                        className="mt-1 "
                        autoComplete="new-password"
                        error={!!errors.password_confirmation}
                        onChange={(e) => setData('password_confirmation', e.target.value)}
                        placeholder="Confirm new password"
                    />
                    {errors.password_confirmation && (
                        <p className="mt-1 text-sm text-destructive">
                            {errors.password_confirmation}
                        </p>
                    )}
                </div>
 
                <Button type="submit" loading={processing} className="w-full">
                    Reset Password
                </Button>
            </form>
        </GuestLayout>
    );
}