Polish login/logout

- Move "use client" down from the page to the form
- Add try/catch to login
- fix ts errors
- display individual field errors
- remove client form validation (we want to display the errors from the server)
- add `useFormStatus`

app/(public)/login/form.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { login } from '@/app/auth/auth';
+import Link from 'next/link';
+import { useFormState, useFormStatus } from 'react-dom';
+
+export function LoginForm() {
+  const [state, action] = useFormState(login, undefined);
+  return (
+    <form action={action}>
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            name="email"
+            placeholder="[email protected]"
+            type="email"
+          />
+          {state?.errors?.email && (
+            <p className="text-red-500">{state.errors.email}</p>
+          )}
+        </div>
+        <div className="space-y-2">
+          <div className="flex items-center">
+            <Label htmlFor="password">Password</Label>
+            <Link className="ml-auto inline-block text-sm underline" href="#">
+              Forgot your password?
+            </Link>
+          </div>
+          <Input id="password" type="password" name="password" />
+          {state?.errors?.password && (
+            <p className="text-red-500">{state.errors.password}</p>
+          )}
+        </div>
+        {state?.message && <p className="text-red-500">{state.message}</p>}
+        <LoginFormButton />
+        <Button className="w-full" variant="outline">
+          Login with Google
+        </Button>
+      </div>
+
+      <div className="mt-4 text-center text-sm">
+        Don&apos;t have an account?{' '}
+        <Link className="underline" href="/signup">
+          Sign up
+        </Link>
+      </div>
+    </form>
+  );
+}
+
+function LoginFormButton() {
+  // TODO: Style button pending state
+
+  const { pending } = useFormStatus();
+
+  return (
+    <Button className="w-full" type="submit">
+      Login
+    </Button>
+  );
+}

app/(public)/login/page.tsx

@@ -1,16 +1,6 @@
-'use client';
-
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { login } from '@/lib/auth';
-import { useFormState, useFormStatus } from 'react-dom';
-
-export default function Login() {
-  const [state, action] = useFormState(login, undefined);
+import { LoginForm } from './form';
 
+export default function Page() {
   return (
     <div className="flex w-1/4 items-center px-4 sm:px-6 lg:px-8">
       <div className="mx-auto w-full space-y-8">
@@ -20,50 +10,7 @@ export default function Login() {
             Enter your email below to login to your account
           </p>
         </div>
-        <form action={action}>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                name="email"
-                placeholder="[email protected]"
-                required
-                type="email"
-              />
-            </div>
-            <div className="space-y-2">
-              <div className="flex items-center">
-                <Label htmlFor="password">Password</Label>
-                <Link
-                  className="ml-auto inline-block text-sm underline"
-                  href="#"
-                >
-                  Forgot your password?
-                </Link>
-              </div>
-              <Input id="password" required type="password" name="password" />
-            </div>
-            <div className="flex items-center space-x-2">
-              <Checkbox id="remember" />
-              <Label className="text-sm" htmlFor="remember">
-                Remember me
-              </Label>
-            </div>
-            {state?.message && <p className="text-red-500">{state.message}</p>}
-            <Button className="w-full">Login</Button>
-            <Button className="w-full" variant="outline">
-              Login with Google
-            </Button>
-          </div>
-
-          <div className="mt-4 text-center text-sm">
-            Don&apos;t have an account?{' '}
-            <Link className="underline" href="/signup">
-              Sign up
-            </Link>
-          </div>
-        </form>
+        <LoginForm />
       </div>
     </div>
   );