Setup Inertia (#593)

2025-07-04 15:32:35 +00:00 · 2025-05-10 10:10:11 +02:00
parent 6eb88c7c6e
commit 38bafd7654
305 changed files with 13378 additions and 15435 deletions
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@ -0,0 +1,63 @@
+// Components
+import { Head, useForm } from '@inertiajs/react';
+import { LoaderCircle } from 'lucide-react';
+import { FormEventHandler } from 'react';
+
+import InputError from '@/components/input-error';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import AuthLayout from '@/layouts/auth-layout';
+
+export default function ForgotPassword({ status }: { status?: string }) {
+  const { data, setData, post, processing, errors } = useForm<Required<{ email: string }>>({
+    email: '',
+  });
+
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault();
+
+    post(route('password.email'));
+  };
+
+  return (
+    <AuthLayout title="Forgot password" description="Enter your email to receive a password reset link">
+      <Head title="Forgot password" />
+
+      {status && <div className="mb-4 text-center text-sm font-medium text-green-600">{status}</div>}
+
+      <div className="space-y-6">
+        <form onSubmit={submit}>
+          <div className="grid gap-2">
+            <Label htmlFor="email">Email address</Label>
+            <Input
+              id="email"
+              type="email"
+              name="email"
+              autoComplete="off"
+              value={data.email}
+              autoFocus
+              onChange={(e) => setData('email', e.target.value)}
+              placeholder="email@example.com"
+            />
+
+            <InputError message={errors.email} />
+          </div>
+
+          <div className="my-6 flex items-center justify-start">
+            <Button className="w-full" disabled={processing}>
+              {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
+              Email password reset link
+            </Button>
+          </div>
+        </form>
+
+        <div className="text-muted-foreground space-x-1 text-center text-sm">
+          <span>Or, return to</span>
+          <TextLink href={route('login')}>log in</TextLink>
+        </div>
+      </div>
+    </AuthLayout>
+  );
+}