Login

1
// app/login/login-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 LoginContent() {
11
  return (
12
    <div className="flex min-h-screen items-center justify-center">
13
      {/* Top bar — theme toggle only */}
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>Welcome back</CardTitle>
22
          <CardDescription>Sign in to your account to continue</CardDescription>
23
        </CardHeader>
24
        <CardContent>
25
          {/* Wire handleSubmit to your auth backend — NextAuth signIn() or a POST to /api/auth/login. */}
26
          <form onSubmit={handleSubmit} className="space-y-4">
27
            <div className="space-y-2">
28
              <Label htmlFor="email">Email</Label>
29
              <Input id="email" type="email" placeholder="you@example.com" />
30
            </div>
31
            <div className="space-y-2">
32
              <div className="flex items-center justify-between">
33
                <Label htmlFor="password">Password</Label>
34
                <button type="button" className="text-primary text-sm hover:underline">Forgot password?</button>
35
              </div>
36
              <Input id="password" type="password" placeholder="Enter your password" />
37
            </div>
38
            <Button type="submit" className="w-full">Sign In</Button>
39
          </form>
40
41
          {/* Divider */}
42
          <div className="relative my-6">
43
            <span className="w-full border-t" />
44
            <span className="bg-card text-muted-foreground px-2">OR</span>
45
          </div>
46
47
          {/* Social login */}
48
          <Button variant="outline" className="w-full">
49
            <GoogleIcon className="mr-2 h-4 w-4" />
50
            Sign in with Google
51
          </Button>
52
53
          <p className="text-muted-foreground mt-6 text-center text-sm">
54
            Don't have an account?{" "}
55
            <button type="button" className="text-primary hover:underline">Contact me</button>
56
          </p>
57
        </CardContent>
58
      </Card>
59
    </div>
60
  );
61
}
62
63
// Environment variables needed:
64
// GOOGLE_CLIENT_ID=your-google-client-id
65
// GOOGLE_CLIENT_SECRET=your-google-client-secret