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

@@ -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
 

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,

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"
   },

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>
   );
 }

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">
+                <div className="flex items-center justify-between">
-                  Password
+                  <Label htmlFor="password" className="text-xs font-mono">
-                </Label>
+                    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"