From 3b03a87c41dcd4f3300b5ec72a25687d03948a16 Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Fri, 20 Feb 2026 13:28:17 +0100
Subject: [PATCH] Task 10.3: Add "Forgot password?" link with toast and "Sign
 up" link to login page

- Install sonner for toast notifications
- Add handleForgotPassword function that shows "Not yet available" toast
- Add "Forgot password?" link next to password label
- Verify "Sign up" link to /register exists
- Add Toaster component to public layout
- Mark task 10.3 as [x] in tasks.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 openspec/changes/user-accounts/tasks.md |  2 +-
 package-lock.json                       | 11 +++++++++++
 package.json                            |  1 +
 src/app/(public)/layout.tsx             |  2 ++
 src/app/(public)/login/page.tsx         | 22 +++++++++++++++++++---
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/openspec/changes/user-accounts/tasks.md b/openspec/changes/user-accounts/tasks.md
index 11c5811..8d5cf1a 100644
--- a/openspec/changes/user-accounts/tasks.md
+++ b/openspec/changes/user-accounts/tasks.md
@@ -58,7 +58,7 @@
 
 - [x] 10.1 `[sonnet]` Create `src/app/(public)/login/page.tsx` — login form matching Lovable design: email/password inputs, "Sign In" button calling `signIn("credentials")`, "Continue with Google" button calling `signIn("google")`
 - [x] 10.2 `[haiku]` Add error state display for invalid credentials
-- [ ] 10.3 `[haiku]` Add "Forgot password?" link (shows toast: "Not yet available"), "Sign up" link to `/register`
+- [x] 10.3 `[haiku]` Add "Forgot password?" link (shows toast: "Not yet available"), "Sign up" link to `/register`
 
 ## 11. Register Page
 
diff --git a/package-lock.json b/package-lock.json
index 29a6b14..84c4d87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "pg": "^8.13.1",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "zod": "^4.3.6"
       },
@@ -7282,6 +7283,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "dev": true,
diff --git a/package.json b/package.json
index 7e94c97..421c736 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "pg": "^8.13.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.3.6"
   },
diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx
index 9bdb63f..f911136 100644
--- a/src/app/(public)/layout.tsx
+++ b/src/app/(public)/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { SessionProviderClient } from "./session-provider";
+import { Toaster } from "sonner";
 
 export const metadata: Metadata = {
   title: "Candle Annotator",
@@ -14,6 +15,7 @@ export default function PublicLayout({
   return (
     <SessionProviderClient>
       {children}
+      <Toaster />
     </SessionProviderClient>
   );
 }
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
index f0c86cf..0b7670f 100644
--- a/src/app/(public)/login/page.tsx
+++ b/src/app/(public)/login/page.tsx
@@ -10,6 +10,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { AlertCircle } from "lucide-react";
+import { toast } from "sonner";
 
 export default function LoginPage() {
   const [email, setEmail] = useState("");
@@ -55,6 +56,12 @@ export default function LoginPage() {
     await signIn("google", { redirectTo: "/app" });
   }
 
+  function handleForgotPassword() {
+    toast.info("Not yet available", {
+      description: "Password reset functionality will be available soon.",
+    });
+  }
+
   return (
     <div className="min-h-screen bg-background flex flex-col">
       {/* Navbar */}
@@ -102,9 +109,18 @@ export default function LoginPage() {
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="password" className="text-xs font-mono">
-                  Password
-                </Label>
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="password" className="text-xs font-mono">
+                    Password
+                  </Label>
+                  <button
+                    type="button"
+                    onClick={handleForgotPassword}
+                    className="text-xs text-primary hover:underline font-medium"
+                  >
+                    Forgot password?
+                  </button>
+                </div>
                 <Input
                   id="password"
                   type="password"