From 36d4128e964922702110f2b58204b08a65e884e8 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Wed, 1 Oct 2025 15:47:21 +0200
Subject: [PATCH] feat(web): add user authentication button with login and
 profile popover

---
 web/src/components/user-button.tsx | 343 +++++++++++++++++++++++++++++
 1 file changed, 343 insertions(+)
 create mode 100644 web/src/components/user-button.tsx

diff --git a/web/src/components/user-button.tsx b/web/src/components/user-button.tsx
new file mode 100644
index 00000000..a6259441
--- /dev/null
+++ b/web/src/components/user-button.tsx
@@ -0,0 +1,343 @@
+"use client";
+
+import { Github, LogOut, User, LayoutDashboard } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { pb } from "@/lib/pb";
+
+interface UserData {
+	username: string;
+	email: string;
+	avatar?: string;
+}
+
+interface UserButtonProps {
+	asChild?: boolean;
+	isLoggedIn?: boolean;
+	userData?: UserData;
+}
+
+export function UserButton({
+	asChild,
+	isLoggedIn = false,
+	userData,
+}: UserButtonProps) {
+	return (
+		<DropdownMenuTrigger asChild>
+			<Button
+				className="transition-colors duration-200 group hover:ring-2 rounded-lg cursor-pointer border border-border/50"
+				variant="ghost"
+				size="icon"
+			>
+				{isLoggedIn && userData ? (
+					<Avatar className="h-8 w-8">
+						<AvatarImage
+							src={userData.avatar || "/placeholder.svg"}
+							alt={userData.username}
+						/>
+						<AvatarFallback className="text-xs">
+							{userData.username.slice(0, 2).toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+				) : (
+					<User className="h-[1.2rem] w-[1.2rem] transition-all group-hover:scale-110" />
+				)}
+				<span className="sr-only">{isLoggedIn ? "User menu" : "Sign in"}</span>
+			</Button>
+		</DropdownMenuTrigger>
+	);
+}
+
+interface UserMenuProps {
+	userData: UserData;
+	onSignOut: () => void;
+}
+
+export function UserMenu({ userData, onSignOut }: UserMenuProps) {
+	return (
+		<div className="space-y-3">
+			<div className="flex items-center gap-3 px-1">
+				<Avatar className="h-10 w-10">
+					<AvatarImage
+						src={userData.avatar || "/placeholder.svg"}
+						alt={userData.username}
+					/>
+					<AvatarFallback className="text-sm font-semibold">
+						{userData.username.slice(0, 2).toUpperCase()}
+					</AvatarFallback>
+				</Avatar>
+				<div className="flex flex-col gap-0.5 flex-1 min-w-0">
+					<p className="text-sm font-semibold truncate">{userData.username}</p>
+					<p className="text-xs text-muted-foreground truncate">
+						{userData.email}
+					</p>
+				</div>
+			</div>
+
+			<DropdownMenuSeparator />
+
+			<Button
+				asChild
+				variant="ghost"
+				className="w-full justify-start gap-2 hover:bg-muted"
+			>
+				<Link href="/dashboard">
+					<LayoutDashboard className="h-4 w-4" />
+					Dashboard
+				</Link>
+			</Button>
+
+			<Button
+				onClick={onSignOut}
+				asChild
+				variant="ghost"
+				className="w-full justify-start gap-2 text-destructive hover:text-destructive hover:bg-destructive/10"
+			>
+				<div>
+				<LogOut className="h-4 w-4" />
+				Sign out
+
+				</div>
+			</Button>
+		</div>
+	);
+}
+
+interface LoginPopupProps {
+	trigger?: React.ReactNode;
+	isLoggedIn?: boolean;
+	userData?: UserData;
+	onSignOut?: () => void;
+}
+
+export function LoginPopup({
+	trigger,
+	isLoggedIn = false,
+	userData,
+	onSignOut,
+}: LoginPopupProps) {
+	const [open, setOpen] = useState(false);
+	const [isRegister, setIsRegister] = useState(false);
+	const [email, setEmail] = useState("");
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [error, setError] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setError("");
+		setIsLoading(true);
+
+		try {
+			if (isRegister) {
+				if (password !== confirmPassword) {
+					setError("Passwords do not match");
+					setIsLoading(false);
+					return;
+				}
+
+				if (!username.trim()) {
+					setError("Username is required");
+					setIsLoading(false);
+					return;
+				}
+
+				if (!email.trim()) {
+					setError("Email is required");
+					setIsLoading(false);
+					return;
+				}
+
+				await pb.collection('users').create({
+					username: username.trim(),
+					email: email.trim(),
+					password,
+					passwordConfirm: confirmPassword,
+				});
+
+				await pb.collection('users').authWithPassword(email, password);
+			} else {
+				// For login, use email as the identifier
+				await pb.collection('users').authWithPassword(email, password);
+			}
+
+			setOpen(false);
+			setEmail("");
+			setUsername("");
+			setPassword("");
+			setConfirmPassword("");
+		} catch (err: any) {
+			console.error('Auth error:', err);
+			setError(err?.message || "Authentication failed. Please try again.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const toggleMode = () => {
+		setIsRegister(!isRegister);
+		setEmail("");
+		setUsername("");
+		setPassword("");
+		setConfirmPassword("");
+		setError("");
+	};
+
+	const handleSignOut = () => {
+		setOpen(false);
+		// Wait for dropdown close animation before updating parent state
+		setTimeout(() => {
+			onSignOut?.();
+		}, 150);
+	};
+
+	return (
+		<DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+			{trigger || <UserButton isLoggedIn={isLoggedIn} userData={userData} />}
+			<DropdownMenuContent align="end" className="w-80 p-4">
+				{isLoggedIn && userData ? (
+					<UserMenu userData={userData} onSignOut={handleSignOut} />
+				) : (
+					<form onSubmit={handleSubmit} className="space-y-4">
+						<div className="space-y-2">
+							<h3 className="font-semibold text-lg">
+								{isRegister ? "Create account" : "Sign in"}
+							</h3>
+							<p className="text-sm text-muted-foreground">
+								{isRegister
+									? "Enter your details to create an account"
+									: "Enter your credentials to continue"}
+							</p>
+							{error && (
+								<div className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">
+									{error}
+								</div>
+							)}
+						</div>
+
+						<div
+							role="presentation"
+							aria-hidden="true"
+							className="flex h-10 w-full items-center justify-center gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm cursor-not-allowed opacity-50 pointer-events-none"
+						>
+							<Github className="h-4 w-4 opacity-40" />
+							<span className="opacity-40">Sign in with GitHub</span>
+						</div>
+
+						<div role="separator" aria-label="or" className="relative">
+							<Separator />
+							<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-popover px-2 text-xs text-muted-foreground uppercase">
+								or
+							</span>
+						</div>
+
+						<fieldset className="space-y-4 border-0 p-0">
+							<div className="space-y-2">
+								<Label htmlFor="email">Email</Label>
+								<Input
+									id="email"
+									autoFocus
+									tabIndex={1}
+									name="email"
+									type="email"
+									autoComplete="email"
+									placeholder="Enter your email"
+									value={email}
+									onChange={(e) => setEmail(e.target.value)}
+									required
+								/>
+								{isRegister && (
+									<p className="text-xs text-muted-foreground">
+										Used only to send you updates about your submissions
+									</p>
+								)}
+							</div>
+
+							{isRegister && (
+								<div className="space-y-2">
+									<Label htmlFor="username">Username</Label>
+									<Input
+										id="username"
+										tabIndex={2}
+										name="username"
+										type="text"
+										autoComplete="username"
+										placeholder="Choose a username"
+										value={username}
+										onChange={(e) => setUsername(e.target.value)}
+										required
+									/>
+									<p className="text-xs text-muted-foreground">
+										This will be displayed publicly with your submissions
+									</p>
+								</div>
+							)}
+
+							<div className="space-y-2">
+								<Label htmlFor="password">Password</Label>
+								<Input
+									id="password"
+									tabIndex={isRegister ? 3 : 2}
+									name="password"
+									type="password"
+									autoComplete={isRegister ? "new-password" : "current-password"}
+									placeholder="Enter your password"
+									value={password}
+									onChange={(e) => setPassword(e.target.value)}
+									required
+								/>
+							</div>
+
+							{isRegister && (
+								<div className="space-y-2">
+									<Label htmlFor="confirmPassword">Confirm Password</Label>
+									<Input
+										id="confirmPassword"
+										tabIndex={4}
+										name="confirmPassword"
+										type="password"
+										autoComplete="new-password"
+										placeholder="Confirm your password"
+										value={confirmPassword}
+										onChange={(e) => setConfirmPassword(e.target.value)}
+										required
+									/>
+								</div>
+							)}
+						</fieldset>
+
+						<footer className="space-y-3">
+							<Button type="submit" className="w-full" disabled={isLoading}>
+								{isLoading ? "Please wait..." : (isRegister ? "Register" : "Login")}
+							</Button>
+
+							<div className="text-center text-sm">
+								<button
+									type="button"
+									onClick={toggleMode}
+									className="text-muted-foreground hover:text-foreground transition-all duration-200 underline underline-offset-4 decoration-muted-foreground/50 cursor-pointer font-medium"
+								>
+									{isRegister ? "login" : "register"}
+								</button>
+							</div>
+						</footer>
+					</form>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}