Changes
This commit is contained in:
gpt-engineer-app[bot]
@@ -0,0 +1,92 @@
|
||||
import { useState } from "react";
|
||||
import { User, LogIn, LogOut, ChevronDown } from "lucide-react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import AuthDialog from "./AuthDialog";
|
||||
|
||||
const AccountMenu = () => {
|
||||
const { user, loading, signOut } = useAuth();
|
||||
const [authDialogOpen, setAuthDialogOpen] = useState(false);
|
||||
const [authMode, setAuthMode] = useState<"login" | "signup">("login");
|
||||
|
||||
const handleOpenAuth = (mode: "login" | "signup") => {
|
||||
setAuthMode(mode);
|
||||
setAuthDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSignOut = async () => {
|
||||
await signOut();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-primary hover:text-primary/80 font-serif text-base flex items-center gap-1"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
Mitt konto
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="bg-background border border-border shadow-lg z-50 min-w-[160px]"
|
||||
>
|
||||
{user ? (
|
||||
<>
|
||||
<DropdownMenuItem className="text-muted-foreground text-sm cursor-default">
|
||||
{user.email}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={handleSignOut}
|
||||
className="cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Logga ut
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleOpenAuth("signup")}
|
||||
className="cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
Skapa konto
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleOpenAuth("login")}
|
||||
className="cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<LogIn className="h-4 w-4" />
|
||||
Logga in
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<AuthDialog
|
||||
open={authDialogOpen}
|
||||
onOpenChange={setAuthDialogOpen}
|
||||
mode={authMode}
|
||||
onModeChange={setAuthMode}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountMenu;
|
||||
@@ -0,0 +1,170 @@
|
||||
import { useState } from "react";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
const authSchema = z.object({
|
||||
email: z.string().trim().email({ message: "Ogiltig e-postadress" }).max(255),
|
||||
password: z.string().min(6, { message: "Lösenordet måste vara minst 6 tecken" }).max(100),
|
||||
});
|
||||
|
||||
interface AuthDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
mode: "login" | "signup";
|
||||
onModeChange: (mode: "login" | "signup") => void;
|
||||
}
|
||||
|
||||
const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps) => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { signIn, signUp } = useAuth();
|
||||
const { toast } = useToast();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const validation = authSchema.safeParse({ email, password });
|
||||
if (!validation.success) {
|
||||
toast({
|
||||
title: "Fel",
|
||||
description: validation.error.errors[0].message,
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
if (mode === "signup") {
|
||||
const { error } = await signUp(email, password);
|
||||
if (error) {
|
||||
toast({
|
||||
title: "Kunde inte skapa konto",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Konto skapat!",
|
||||
description: "Du är nu inloggad.",
|
||||
});
|
||||
onOpenChange(false);
|
||||
resetForm();
|
||||
}
|
||||
} else {
|
||||
const { error } = await signIn(email, password);
|
||||
if (error) {
|
||||
toast({
|
||||
title: "Kunde inte logga in",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Inloggad!",
|
||||
description: "Välkommen tillbaka.",
|
||||
});
|
||||
onOpenChange(false);
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="bg-background border border-border max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="font-serif text-xl text-foreground">
|
||||
{mode === "signup" ? "Skapa konto" : "Logga in"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 mt-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-post</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="din@email.se"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Lösenord</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting
|
||||
? "Laddar..."
|
||||
: mode === "signup"
|
||||
? "Skapa konto"
|
||||
: "Logga in"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="text-center mt-4">
|
||||
{mode === "signup" ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Har du redan ett konto?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onModeChange("login")}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Logga in
|
||||
</button>
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Har du inget konto?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onModeChange("signup")}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Skapa konto
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthDialog;
|
||||
@@ -1,12 +1,20 @@
|
||||
import logoImage from "@/assets/logo.png";
|
||||
import AccountMenu from "./AccountMenu";
|
||||
|
||||
const Header = () => {
|
||||
return <header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
<div className="px-6 py-3 flex items-center justify-between">
|
||||
<a href="#" className="flex items-center">
|
||||
<img alt="Lennart Svensson Konditorivaror" className="h-16 w-auto" src="/lovable-uploads/bc36fcd7-0c6f-48d2-9921-4323413739c7.png" />
|
||||
<img
|
||||
alt="Lennart Svensson Konditorivaror"
|
||||
className="h-16 w-auto"
|
||||
src="/lovable-uploads/bc36fcd7-0c6f-48d2-9921-4323413739c7.png"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<AccountMenu />
|
||||
</div>
|
||||
</header>;
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user