feat: adding login/RegisterForm and new columns in PG

2025-08-25 14:02:07 +02:00
parent ee58eb82e5
commit caf396d964
9 changed files with 582 additions and 19 deletions
--- a/components/login/login-form.tsx
+++ b/components/login/login-form.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Code2 } from "lucide-react";
+
+interface LoginFormProps {
+  onSubmit: (email: string, password: string) => void;
+  onSwitchToRegister: () => void;
+  loading?: boolean;
+}
+
+export function LoginForm({
+  onSubmit,
+  onSwitchToRegister,
+  loading = false,
+}: LoginFormProps) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email && password) {
+      onSubmit(email, password);
+    }
+  };
+
+  const isValid = email.length > 0 && password.length > 0;
+
+  return (
+    <div className="text-center mb-12">
+      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm mb-6">
+        <Code2 className="h-4 w-4 text-blue-400" />
+        <span className="text-sm font-medium text-slate-200">PeakSkills</span>
+      </div>
+
+      <h1 className="text-4xl font-bold mb-4 text-white">Connexion</h1>
+      <p className="text-lg text-slate-400 mb-8">
+        Connectez-vous à votre compte PeakSkills
+      </p>
+
+      <div className="max-w-md mx-auto">
+        <Card className="bg-white/5 border-white/10 backdrop-blur-sm">
+          <CardHeader>
+            <CardTitle className="text-white">Se connecter</CardTitle>
+            <CardDescription className="text-slate-400">
+              Entrez vos identifiants pour accéder à votre compte
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email" className="text-slate-300">
+                  Email
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="votre@email.com"
+                  required
+                  className="bg-white/10 border-white/20 text-white placeholder:text-slate-400"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password" className="text-slate-300">
+                  Mot de passe
+                </Label>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Votre mot de passe"
+                  required
+                  className="bg-white/10 border-white/20 text-white placeholder:text-slate-400"
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full bg-blue-500 hover:bg-blue-600 text-white"
+                disabled={!isValid || loading}
+              >
+                {loading ? "Connexion..." : "Se connecter"}
+              </Button>
+            </form>
+
+            <div className="mt-6 pt-6 border-t border-white/10">
+              <p className="text-sm text-slate-400">
+                Pas encore de compte ?{" "}
+                <button
+                  type="button"
+                  onClick={onSwitchToRegister}
+                  className="text-blue-400 hover:text-blue-300 underline"
+                >
+                  Créer un compte
+                </button>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}