mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-21 02:51:14 +01:00
format code + change env
This commit is contained in:
Thomas Camlong
@@ -1,39 +1,30 @@
|
||||
"use client";
|
||||
"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";
|
||||
import { Github, LayoutDashboard, LogOut, User } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import type React from "react"
|
||||
import { useState } from "react"
|
||||
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;
|
||||
username: string
|
||||
email: string
|
||||
avatar?: string
|
||||
}
|
||||
|
||||
interface UserButtonProps {
|
||||
asChild?: boolean;
|
||||
isLoggedIn?: boolean;
|
||||
userData?: UserData;
|
||||
asChild?: boolean
|
||||
isLoggedIn?: boolean
|
||||
userData?: UserData
|
||||
}
|
||||
|
||||
export function UserButton({
|
||||
asChild,
|
||||
isLoggedIn = false,
|
||||
userData,
|
||||
}: UserButtonProps) {
|
||||
export function UserButton({ asChild, isLoggedIn = false, userData }: UserButtonProps) {
|
||||
return (
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
@@ -43,13 +34,8 @@ export function UserButton({
|
||||
>
|
||||
{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>
|
||||
<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" />
|
||||
@@ -57,12 +43,12 @@ export function UserButton({
|
||||
<span className="sr-only">{isLoggedIn ? "User menu" : "Sign in"}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
interface UserMenuProps {
|
||||
userData: UserData;
|
||||
onSignOut: () => void;
|
||||
userData: UserData
|
||||
onSignOut: () => void
|
||||
}
|
||||
|
||||
export function UserMenu({ userData, onSignOut }: UserMenuProps) {
|
||||
@@ -70,29 +56,18 @@ export function UserMenu({ userData, onSignOut }: UserMenuProps) {
|
||||
<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>
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<Button asChild variant="ghost" className="w-full justify-start gap-2 hover:bg-muted">
|
||||
<Link href="/dashboard">
|
||||
<LayoutDashboard className="h-4 w-4" />
|
||||
Dashboard
|
||||
@@ -106,104 +81,98 @@ export function UserMenu({ userData, onSignOut }: UserMenuProps) {
|
||||
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
|
||||
|
||||
<LogOut className="h-4 w-4" />
|
||||
Sign out
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
interface LoginPopupProps {
|
||||
trigger?: React.ReactNode;
|
||||
isLoggedIn?: boolean;
|
||||
userData?: UserData;
|
||||
onSignOut?: () => void;
|
||||
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);
|
||||
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);
|
||||
e.preventDefault()
|
||||
setError("")
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
if (isRegister) {
|
||||
if (password !== confirmPassword) {
|
||||
setError("Passwords do not match");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
setError("Passwords do not match")
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (!username.trim()) {
|
||||
setError("Username is required");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
setError("Username is required")
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (!email.trim()) {
|
||||
setError("Email is required");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
setError("Email is required")
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
await pb.collection('users').create({
|
||||
await pb.collection("users").create({
|
||||
username: username.trim(),
|
||||
email: email.trim(),
|
||||
password,
|
||||
passwordConfirm: confirmPassword,
|
||||
});
|
||||
})
|
||||
|
||||
await pb.collection('users').authWithPassword(email, password);
|
||||
await pb.collection("users").authWithPassword(email, password)
|
||||
} else {
|
||||
// For login, use email as the identifier
|
||||
await pb.collection('users').authWithPassword(email, password);
|
||||
await pb.collection("users").authWithPassword(email, password)
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
setEmail("");
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
setConfirmPassword("");
|
||||
setOpen(false)
|
||||
setEmail("")
|
||||
setUsername("")
|
||||
setPassword("")
|
||||
setConfirmPassword("")
|
||||
} catch (err: any) {
|
||||
console.error('Auth error:', err);
|
||||
setError(err?.message || "Authentication failed. Please try again.");
|
||||
console.error("Auth error:", err)
|
||||
setError(err?.message || "Authentication failed. Please try again.")
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsLoading(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const toggleMode = () => {
|
||||
setIsRegister(!isRegister);
|
||||
setEmail("");
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
setConfirmPassword("");
|
||||
setError("");
|
||||
};
|
||||
setIsRegister(!isRegister)
|
||||
setEmail("")
|
||||
setUsername("")
|
||||
setPassword("")
|
||||
setConfirmPassword("")
|
||||
setError("")
|
||||
}
|
||||
|
||||
const handleSignOut = () => {
|
||||
setOpen(false);
|
||||
setOpen(false)
|
||||
// Wait for dropdown close animation before updating parent state
|
||||
setTimeout(() => {
|
||||
onSignOut?.();
|
||||
}, 150);
|
||||
};
|
||||
onSignOut?.()
|
||||
}, 150)
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
|
||||
@@ -214,19 +183,11 @@ export function LoginPopup({
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold text-lg">
|
||||
{isRegister ? "Create account" : "Sign in"}
|
||||
</h3>
|
||||
<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"}
|
||||
{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>
|
||||
)}
|
||||
{error && <div className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">{error}</div>}
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -260,11 +221,7 @@ export function LoginPopup({
|
||||
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>
|
||||
)}
|
||||
{isRegister && <p className="text-xs text-muted-foreground">Used only to send you updates about your submissions</p>}
|
||||
</div>
|
||||
|
||||
{isRegister && (
|
||||
@@ -281,9 +238,7 @@ export function LoginPopup({
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This will be displayed publicly with your submissions
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">This will be displayed publicly with your submissions</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -322,7 +277,7 @@ export function LoginPopup({
|
||||
|
||||
<footer className="space-y-3">
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? "Please wait..." : (isRegister ? "Register" : "Login")}
|
||||
{isLoading ? "Please wait..." : isRegister ? "Register" : "Login"}
|
||||
</Button>
|
||||
|
||||
<div className="text-center text-sm">
|
||||
@@ -339,5 +294,5 @@ export function LoginPopup({
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user