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.

59 lines
1.9 KiB

  1. import { useEffect, FormEventHandler } from 'react';
  2. import GuestLayout from '@/Layouts/GuestLayout';
  3. import InputError from '@/Components/InputError';
  4. import InputLabel from '@/Components/InputLabel';
  5. import PrimaryButton from '@/Components/PrimaryButton';
  6. import TextInput from '@/Components/TextInput';
  7. import { Head, useForm } from '@inertiajs/react';
  8. export default function ConfirmPassword() {
  9. const { data, setData, post, processing, errors, reset } = useForm({
  10. password: '',
  11. });
  12. useEffect(() => {
  13. return () => {
  14. reset('password');
  15. };
  16. }, []);
  17. const submit: FormEventHandler = (e) => {
  18. e.preventDefault();
  19. post(route('password.confirm'));
  20. };
  21. return (
  22. <GuestLayout>
  23. <Head title="Confirm Password" />
  24. <div className="mb-4 text-sm text-gray-600">
  25. This is a secure area of the application. Please confirm your password before continuing.
  26. </div>
  27. <form onSubmit={submit}>
  28. <div className="mt-4">
  29. <InputLabel htmlFor="password" value="Password" />
  30. <TextInput
  31. id="password"
  32. type="password"
  33. name="password"
  34. value={data.password}
  35. className="mt-1 block w-full"
  36. isFocused={true}
  37. onChange={(e) => setData('password', e.target.value)}
  38. />
  39. <InputError message={errors.password} className="mt-2" />
  40. </div>
  41. <div className="flex items-center justify-end mt-4">
  42. <PrimaryButton className="ms-4" disabled={processing}>
  43. Confirm
  44. </PrimaryButton>
  45. </div>
  46. </form>
  47. </GuestLayout>
  48. );
  49. }