Changes

2026-01-27 23:05:30 +00:00
parent cba635b8f9
commit 2ea67737c3
4 changed files with 285 additions and 36 deletions
@@ -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>
@@ -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,54 +175,83 @@ const AuthDialog = ({ open, onOpenChange, mode, onModeChange }: AuthDialogProps)
            />
          </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>
+          {internalMode !== "forgot" && (
+            <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"}
+            {getSubmitText()}
          </Button>
        </form>

-        <div className="text-center mt-4">
-          {mode === "signup" ? (
+        <div className="text-center mt-4 space-y-2">
+          {internalMode === "forgot" ? (
            <p className="text-sm text-muted-foreground">
-              Har du redan ett konto?{" "}
              <button
                type="button"
-                onClick={() => onModeChange("login")}
+                onClick={() => setInternalMode("login")}
                className="text-primary hover:underline"
              >
-                Logga in
+                Tillbaka till inloggning
              </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>
+            <>
+              {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={() => {
+                      setInternalMode("login");
+                      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={() => {
+                      setInternalMode("signup");
+                      onModeChange("signup");
+                    }}
+                    className="text-primary hover:underline"
+                  >
+                    Skapa konto
+                  </button>
+                </p>
+              )}
+            </>
          )}
        </div>
      </DialogContent>
@@ -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,
  };
 }
@@ -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;