Add forgot password flow

Implements forgot-password functionality:
- UI flow in AuthDialog for forgot mode
- Backend support via Supabase resetPasswordForEmail
- New ResetPassword page to set new password
- Routing updated to include /reset-password
- Extend useAuth with resetPassword and updatePassword methods

X-Lovable-Edit-ID: edt-d0fb934c-ec67-43f4-93e8-83e18d9a258a

src/App.tsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
+import ResetPassword from "./pages/ResetPassword";
 import { useCartSync } from "./hooks/useCartSync";
 
 const queryClient = new QueryClient();
@@ -16,6 +17,7 @@ function AppContent() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Index />} />
+        <Route path="/reset-password" element={<ResetPassword />} />
         {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
         <Route path="*" element={<NotFound />} />
       </Routes>

src/components/AuthDialog.tsx

@@ -17,6 +17,12 @@ const authSchema = z.object({
   password: z.string().min(6, { message: "Lösenordet måste vara minst 6 tecken" }).max(100),
 });
 
+const emailSchema = z.object({
+  email: z.string().trim().email({ message: "Ogiltig e-postadress" }).max(255),
+});
+
+type AuthMode = "login" | "signup" | "forgot";
+
 interface AuthDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -24,16 +30,54 @@ interface AuthDialogProps {
   onModeChange: (mode: "login" | "signup") => void;
 }
 
-const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps) => {
+const AuthDialog = ({ open, onOpenChange, mode: initialMode, onModeChange }: AuthDialogProps) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { signIn, signUp } = useAuth();
+  const [internalMode, setInternalMode] = useState<AuthMode>(initialMode);
+  const { signIn, signUp, resetPassword } = useAuth();
   const { toast } = useToast();
 
+  // Sync internal mode with external mode prop
+  const mode = internalMode === "forgot" ? "forgot" : initialMode;
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     
+    if (internalMode === "forgot") {
+      const validation = emailSchema.safeParse({ email });
+      if (!validation.success) {
+        toast({
+          title: "Fel",
+          description: validation.error.errors[0].message,
+          variant: "destructive",
+        });
+        return;
+      }
+
+      setIsSubmitting(true);
+      try {
+        const { error } = await resetPassword(email);
+        if (error) {
+          toast({
+            title: "Kunde inte skicka återställningslänk",
+            description: error.message,
+            variant: "destructive",
+          });
+        } else {
+          toast({
+            title: "E-post skickad!",
+            description: "Kolla din inkorg för att återställa ditt lösenord.",
+          });
+          onOpenChange(false);
+          resetForm();
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+      return;
+    }
+
     const validation = authSchema.safeParse({ email, password });
     if (!validation.success) {
       toast({
@@ -47,7 +91,7 @@ const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps)
     setIsSubmitting(true);
 
     try {
-      if (mode === "signup") {
+      if (initialMode === "signup") {
         const { error } = await signUp(email, password);
         if (error) {
           toast({
@@ -88,14 +132,33 @@ const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps)
   const resetForm = () => {
     setEmail("");
     setPassword("");
+    setInternalMode(initialMode);
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      resetForm();
+    }
+    onOpenChange(newOpen);
+  };
+
+  const getTitle = () => {
+    if (internalMode === "forgot") return "Glömt lösenord";
+    return initialMode === "signup" ? "Skapa konto" : "Logga in";
+  };
+
+  const getSubmitText = () => {
+    if (isSubmitting) return "Laddar...";
+    if (internalMode === "forgot") return "Skicka återställningslänk";
+    return initialMode === "signup" ? "Skapa konto" : "Logga in";
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <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"}
+            {getTitle()}
           </DialogTitle>
         </DialogHeader>
         
@@ -112,6 +175,7 @@ const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps)
             />
           </div>
           
+          {internalMode !== "forgot" && (
             <div className="space-y-2">
               <Label htmlFor="password">Lösenord</Label>
               <Input
@@ -123,27 +187,50 @@ const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps)
                 required
               />
             </div>
+          )}
 
           <Button
             type="submit"
             className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
             disabled={isSubmitting}
           >
-            {isSubmitting
+            {getSubmitText()}
-              ? "Laddar..."
-              : mode === "signup"
-              ? "Skapa konto"
-              : "Logga in"}
           </Button>
         </form>
 
-        <div className="text-center mt-4">
+        <div className="text-center mt-4 space-y-2">
-          {mode === "signup" ? (
+          {internalMode === "forgot" ? (
+            <p className="text-sm text-muted-foreground">
+              <button
+                type="button"
+                onClick={() => setInternalMode("login")}
+                className="text-primary hover:underline"
+              >
+                Tillbaka till inloggning
+              </button>
+            </p>
+          ) : (
+            <>
+              {initialMode === "login" && (
+                <p className="text-sm text-muted-foreground">
+                  <button
+                    type="button"
+                    onClick={() => setInternalMode("forgot")}
+                    className="text-primary hover:underline"
+                  >
+                    Glömt lösenord?
+                  </button>
+                </p>
+              )}
+              {initialMode === "signup" ? (
                 <p className="text-sm text-muted-foreground">
                   Har du redan ett konto?{" "}
                   <button
                     type="button"
-                onClick={() => onModeChange("login")}
+                    onClick={() => {
+                      setInternalMode("login");
+                      onModeChange("login");
+                    }}
                     className="text-primary hover:underline"
                   >
                     Logga in
@@ -154,13 +241,18 @@ const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps)
                   Har du inget konto?{" "}
                   <button
                     type="button"
-                onClick={() => onModeChange("signup")}
+                    onClick={() => {
+                      setInternalMode("signup");
+                      onModeChange("signup");
+                    }}
                     className="text-primary hover:underline"
                   >
                     Skapa konto
                   </button>
                 </p>
               )}
+            </>
+          )}
         </div>
       </DialogContent>
     </Dialog>

src/hooks/useAuth.ts

@@ -51,6 +51,20 @@ export function useAuth() {
     return { error };
   };
 
+  const resetPassword = async (email: string) => {
+    const { error } = await supabase.auth.resetPasswordForEmail(email, {
+      redirectTo: `${window.location.origin}/reset-password`,
+    });
+    return { error };
+  };
+
+  const updatePassword = async (newPassword: string) => {
+    const { error } = await supabase.auth.updateUser({
+      password: newPassword,
+    });
+    return { error };
+  };
+
   return {
     user,
     session,
@@ -58,5 +72,7 @@ export function useAuth() {
     signUp,
     signIn,
     signOut,
+    resetPassword,
+    updatePassword,
   };
 }

src/pages/ResetPassword.tsx

@@ -0,0 +1,139 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { z } from "zod";
+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 passwordSchema = z.object({
+  password: z.string().min(6, { message: "Lösenordet måste vara minst 6 tecken" }).max(100),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Lösenorden matchar inte",
+  path: ["confirmPassword"],
+});
+
+const ResetPassword = () => {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const { updatePassword, session } = useAuth();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Wait for session to be available (user clicked email link)
+    if (session) {
+      setIsReady(true);
+    }
+  }, [session]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const validation = passwordSchema.safeParse({ password, confirmPassword });
+    if (!validation.success) {
+      toast({
+        title: "Fel",
+        description: validation.error.errors[0].message,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const { error } = await updatePassword(password);
+      if (error) {
+        toast({
+          title: "Kunde inte uppdatera lösenord",
+          description: error.message,
+          variant: "destructive",
+        });
+      } else {
+        toast({
+          title: "Lösenord uppdaterat!",
+          description: "Du kan nu logga in med ditt nya lösenord.",
+        });
+        navigate("/");
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (!isReady) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background px-4">
+        <div className="max-w-md w-full text-center">
+          <h1 className="font-serif text-2xl mb-4">Laddar...</h1>
+          <p className="text-muted-foreground">
+            Väntar på verifiering av din återställningslänk.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="max-w-md w-full">
+        <div className="bg-card border border-border rounded-lg p-8 shadow-sm">
+          <h1 className="font-serif text-2xl text-center mb-6">
+            Välj nytt lösenord
+          </h1>
+          
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="password">Nytt lösenord</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                required
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Bekräfta lösenord</Label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="••••••••"
+                required
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Uppdaterar..." : "Uppdatera lösenord"}
+            </Button>
+          </form>
+
+          <div className="text-center mt-4">
+            <button
+              type="button"
+              onClick={() => navigate("/")}
+              className="text-sm text-primary hover:underline"
+            >
+              Tillbaka till startsidan
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;