Register

1
// app/register/register-content.tsx
2
"use client";
3
4
import { Button } from "@/shared/ui/button";
5
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/ui/card";
6
import { Input } from "@/shared/ui/input";
7
import { Label } from "@/shared/ui/label";
8
import { ThemeToggle } from "@/shared/ui/theme-toggle";
9
10
export default function RegisterContent() {
11
  return (
12
    <div className="flex min-h-screen items-center justify-center">
13
      {/* Top bar — theme toggle */}
14
      <div className="fixed top-4 right-4">
15
        <ThemeToggle variant="icon" />
16
      </div>
17
18
      <Card className="w-full max-w-md">
19
        <CardHeader className="text-center">
20
          <Logo />
21
          <CardTitle>Create an account</CardTitle>
22
          <CardDescription>Enter your details to get started</CardDescription>
23
        </CardHeader>
24
        <CardContent>
25
          <form onSubmit={handleSubmit} className="space-y-4">
26
            <div className="grid gap-4 sm:grid-cols-2">
27
              <div className="space-y-2">
28
                <Label htmlFor="first">First name</Label>
29
                <Input id="first" type="text" placeholder="John" />
30
              </div>
31
              <div className="space-y-2">
32
                <Label htmlFor="last">Last name</Label>
33
                <Input id="last" type="text" placeholder="Doe" />
34
              </div>
35
            </div>
36
            <div className="space-y-2">
37
              <Label htmlFor="email">Email</Label>
38
              <Input id="email" type="email" placeholder="you@example.com" />
39
            </div>
40
            <div className="space-y-2">
41
              <Label htmlFor="password">Password</Label>
42
              <Input id="password" type="password" placeholder="Create a password" />
43
            </div>
44
            <div className="space-y-2">
45
              <Label htmlFor="confirm">Confirm password</Label>
46
              <Input id="confirm" type="password" placeholder="Confirm your password" />
47
            </div>
48
            <Button type="submit" className="w-full">Create Account</Button>
49
          </form>
50
51
          {/* Divider */}
52
          <div className="relative my-6">
53
            <span className="w-full border-t" />
54
            <span className="bg-card text-muted-foreground px-2">OR</span>
55
          </div>
56
57
          {/* Social signup */}
58
          <Button variant="outline" className="w-full">
59
            <GoogleIcon className="mr-2 h-4 w-4" />
60
            Sign up with Google
61
          </Button>
62
63
          <p className="text-muted-foreground mt-6 text-center text-sm">
64
            Already have an account?{" "}
65
            <button type="button" className="text-primary hover:underline">Sign in</button>
66
          </p>
67
        </CardContent>
68
      </Card>
69
    </div>
70
  );
71
}
72
73
// Backend: POST /api/auth/register with { firstName, lastName, email, password }
74
// Validate password strength + match before submitting