Base login setup

frontend/src/components/register-form.tsx

@@ -0,0 +1,86 @@
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Link, useForm } from "@inertiajs/react";
+import { NewUser } from "@/types/NewUser";
+
+export function RegisterForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { data, setData, post, reset } = useForm<NewUser>();
+
+  function register() {
+    post(`/register`);
+    reset();
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid p-0 md:grid-cols-2">
+          <form
+            className="p-6 md:p-8"
+            onSubmit={(e) => {
+              e.preventDefault();
+              register();
+            }}
+          >
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col items-center text-center">
+                <h1 className="text-2xl font-bold">Register</h1>
+                <p className="text-muted-foreground text-balance">
+                  Create your new account
+                </p>
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="username">Username</Label>
+                <Input
+                  id="username"
+                  type="username"
+                  placeholder="m@example.com"
+                  required
+                  value={data.username}
+                  onChange={(e) => setData("username", e.currentTarget.value)}
+                />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  required
+                  value={data.password}
+                  onChange={(e) => setData("password", e.currentTarget.value)}
+                />
+              </div>
+              <Button type="submit" className="w-full">
+                Register
+              </Button>
+              <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"></div>
+              <div className="text-center text-sm">
+                You have an account?{" "}
+                <Link href="/login" className="underline underline-offset-4">
+                  Login
+                </Link>
+              </div>
+            </div>
+          </form>
+          <div className="bg-muted relative hidden md:block">
+            <img
+              src="/placeholder.svg"
+              alt="Image"
+              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+          </div>
+        </CardContent>
+      </Card>
+      <div className="text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  );
+}