feat: implement authentication layout and pages, including login and registration forms, with validation and API integration

2025-09-06 19:19:20 +02:00
parent e7cf76a0d8
commit c7cb3f537d
11 changed files with 572 additions and 157 deletions
--- a/thoughts-frontend/app/(auth)/login/page.tsx
+++ b/thoughts-frontend/app/(auth)/login/page.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { LoginSchema, loginUser } from "@/lib/api";
+import { useAuth } from "@/hooks/use-auth";
+import { useState } from "react";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { setToken } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm<z.infer<typeof LoginSchema>>({
+    resolver: zodResolver(LoginSchema),
+    defaultValues: { username: "", password: "" },
+  });
+
+  async function onSubmit(values: z.infer<typeof LoginSchema>) {
+    try {
+      setError(null);
+      const { token } = await loginUser(values);
+      setToken(token);
+      router.push("/"); // Redirect to homepage on successful login
+    } catch (err) {
+      setError("Invalid username or password.");
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Login</CardTitle>
+        <CardDescription>
+          Enter your credentials to access your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* ... Form fields for username and password ... */}
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Username</FormLabel>
+                  <FormControl>
+                    <Input placeholder="frutiger" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder="••••••••" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {error && (
+              <p className="text-sm font-medium text-destructive">{error}</p>
+            )}
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? "Logging in..." : "Login"}
+            </Button>
+          </form>
+        </Form>
+        <p className="mt-4 text-center text-sm text-gray-600">
+          Don&apos;t have an account?{" "}
+          <Link
+            href="/register"
+            className="font-medium text-blue-600 hover:underline"
+          >
+            Register
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}