✨ login page

src/routes/login.tsx

@@ -0,0 +1,84 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { useAuth } from "@/hooks/useAuth"
+
+const formSchema = z.object({
+    username: z.string().min(2, {
+        message: "Username must be at least 2 characters.",
+    }),
+    password: z.string().min(8, {
+        message: "Password must be at least 8 characters.",
+    }),
+})
+
+export default () => {
+    const { login } = useAuth()
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            username: "",
+            password: "",
+        },
+    })
+
+    function onSubmit(values: z.infer<typeof formSchema>) {
+        console.log(values)
+        login(values)
+    }
+
+    return (
+        <div className="my-8 max-w-xl m-auto">
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                    <FormField
+                        control={form.control}
+                        name="username"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Username</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="shadcn" {...field} />
+                                </FormControl>
+                                <FormDescription>
+                                    This is your public display name.
+                                </FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="password"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Password</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="shadcn" {...field} />
+                                </FormControl>
+                                <FormDescription>
+                                    This is your public display name.
+                                </FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <Button type="submit">Submit</Button>
+                </form>
+            </Form>
+        </div>
+    )
+}

src/routes/protect.tsx

@@ -0,0 +1,16 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "@/hooks/useAuth";
+
+export const ProtectedRoute = ({ children }: {
+    children: React.ReactNode;
+}) => {
+    const { profile } = useAuth();
+
+    if (!profile && window.location.pathname !== "/dashboard/login") {
+        return <Navigate to="/dashboard/login" />;
+    }
+
+    return children;
+};
+
+export default ProtectedRoute;

src/routes/root.tsx

@@ -0,0 +1,21 @@
+import { Outlet } from "react-router-dom";
+
+import { Card } from "@/components/ui/card";
+import { ThemeProvider } from "@/components/theme-provider";
+import Header from "@/components/header";
+
+export default function Root() {
+    return (
+        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+            <Card className="text-sm max-w-6xl mx-auto mt-5 min-h-[90%] flex flex-col justify-between">
+                <div>
+                    <Header />
+                    <Outlet />
+                </div>
+                <footer className="mx-5 pb-5 text-foreground/60 font-thin text-center">
+                    &copy; 2019-2024 哪吒监控
+                </footer>
+            </Card>
+        </ThemeProvider>
+    );
+}