You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

51 lines
1.7 KiB

  1. import GuestLayout from '@/Layouts/GuestLayout';
  2. import InputError from '@/Components/InputError';
  3. import PrimaryButton from '@/Components/PrimaryButton';
  4. import TextInput from '@/Components/TextInput';
  5. import { Head, useForm } from '@inertiajs/react';
  6. import { FormEventHandler } from 'react';
  7. export default function ForgotPassword({ status }: { status?: string }) {
  8. const { data, setData, post, processing, errors } = useForm({
  9. email: '',
  10. });
  11. const submit: FormEventHandler = (e) => {
  12. e.preventDefault();
  13. post(route('password.email'));
  14. };
  15. return (
  16. <GuestLayout>
  17. <Head title="Forgot Password" />
  18. <div className="mb-4 text-sm text-gray-600">
  19. Forgot your password? No problem. Just let us know your email address and we will email you a password
  20. reset link that will allow you to choose a new one.
  21. </div>
  22. {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
  23. <form onSubmit={submit}>
  24. <TextInput
  25. id="email"
  26. type="email"
  27. name="email"
  28. value={data.email}
  29. className="mt-1 block w-full"
  30. isFocused={true}
  31. onChange={(e) => setData('email', e.target.value)}
  32. />
  33. <InputError message={errors.email} className="mt-2" />
  34. <div className="flex items-center justify-end mt-4">
  35. <PrimaryButton className="ms-4" disabled={processing}>
  36. Email Password Reset Link
  37. </PrimaryButton>
  38. </div>
  39. </form>
  40. </GuestLayout>
  41. );
  42. }