add login portal and traefik middleware auth for testing redirect login

2025-07-13 07:25:05 +02:00 · 2024-10-06 18:08:26 -04:00 · 2024-10-06 18:08:26 -04:00 · 87c4fc798f
commit 87c4fc798f
parent 0838679120
14 changed files with 285 additions and 130 deletions
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { LoginResponse } from "@server/routers/auth";
+import { api } from "@app/api";
+import { useParams, useRouter } from "next/navigation";
+
+type LoginFormProps = {
+    redirect?: string;
+};
+
+const formSchema = z.object({
+    email: z.string().email({ message: "Invalid email address" }),
+    password: z
+        .string()
+        .min(8, { message: "Password must be at least 8 characters" }),
+});
+
+export default function LoginForm({ redirect }: LoginFormProps) {
+    const router = useRouter();
+
+    const [error, setError] = useState<string | null>(null);
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: "",
+            password: "",
+        },
+    });
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const { email, password } = values;
+        const res = await api
+            .post<LoginResponse>("/auth/login", {
+                email,
+                password,
+            })
+            .catch((e) => {
+                console.error(e);
+                setError(
+                    e.response?.data?.message ||
+                        "An error occurred while logging in",
+                );
+            });
+
+        if (res && res.status === 200) {
+            setError(null);
+            if (redirect && typeof redirect === "string") {
+                window.location.href = redirect;
+            } else {
+                router.push("/");
+            }
+        }
+    }
+
+    return (
+        <Card className="w-full max-w-md mx-auto">
+            <CardHeader>
+                <CardTitle>Secure Login</CardTitle>
+                <CardDescription>
+                    Enter your credentials to access your dashboard
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(onSubmit)}
+                        className="space-y-4"
+                    >
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Email</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder="Enter your email"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Password</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            type="password"
+                                            placeholder="Enter your password"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        {error && (
+                            <Alert variant="destructive">
+                                <ExclamationTriangleIcon className="h-4 w-4" />
+                                <AlertDescription>{error}</AlertDescription>
+                            </Alert>
+                        )}
+                        <Button type="submit" className="w-full">
+                            Login
+                        </Button>
+                    </form>
+                </Form>
+            </CardContent>
+        </Card>
+    );
+}