Changes

2026-01-27 23:05:30 +00:00
parent cba635b8f9
commit 2ea67737c3
4 changed files with 285 additions and 36 deletions
@@ -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;