feat: implement reset password page (Task 5.5) (#33)

* feat: implement reset password page (Task 5.5)

* docs: update Task 5.5 status to PR

* fix: resolve CI test failures and enhance pre-push hooks

* fix: align React versions in ui-kit package to resolve CI test failures

* fix: align CI environment with devcontainer (pnpm 10, node 20)

* ci: add debugging information to identify test failures

* fix: build packages before running tests in CI

Author: christoph2806

.github/workflows/a11y-test.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 20

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -28,7 +28,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -45,15 +45,25 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
+      - name: Debug environment
+        run: |
+          echo "Node version: $(node --version)"
+          echo "pnpm version: $(pnpm --version)"
+          echo "React version: $(pnpm list react --depth=0)"
+          echo "Working directory: $(pwd)"
+          echo "Available packages:"
+          ls -la packages/
+      - name: Build packages
+        run: pnpm build
       - name: Test
-        run: pnpm test || true # Replace with your test command
+        run: pnpm test --reporter=verbose
 
   build:
     runs-on: ubuntu-latest
@@ -62,7 +72,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -79,7 +89,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 20

.github/workflows/deploy-pages.yml

@@ -43,7 +43,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/tokens-check.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
           run_install: false
 
       - name: Setup Node.js

.husky/pre-push

@@ -10,6 +10,56 @@ if echo "$PUSH_COMMAND" | grep -qE -- "--delete|-d"; then
   exit 0
 fi
 
-# Run full test and build suite before pushing
-echo "Running full test and build suite before pushing..."
-pnpm lint && pnpm test && pnpm build && pnpm test:a11y  
+# Function to run a command and report its status
+run_check() {
+  local check_name="$1"
+  local command="$2"
+  echo "🔍 Running $check_name..."
+  
+  if eval "$command"; then
+    echo "✅ $check_name passed"
+    return 0
+  else
+    echo "❌ $check_name failed"
+    echo "⚠️  Push blocked due to failing $check_name"
+    echo "💡 Fix the issues above, don't use --no-verify to bypass!!"
+    return 1
+  fi
+}
+
+# Run comprehensive checks before pushing
+echo "🚀 Running pre-push checks..."
+echo "=================================================="
+
+# 1. Lint check
+run_check "Linting" "pnpm lint" || exit 1
+
+# 2. Test check with better error reporting
+echo "🧪 Running tests..."
+if ! pnpm test; then
+  echo "❌ Tests failed"
+  echo "📋 Common issues to check:"
+  echo "   • Missing dependencies (run: pnpm install)"
+  echo "   • Test logic errors (check test output above)"
+  echo "   • Async timing issues (check waitFor timeouts)"
+  echo "   • Mock configuration problems"
+  echo "⚠️  Push blocked due to failing tests"
+  echo "💡 Fix the issues above; don't use --no-verify to bypass!!"
+  exit 1
+else
+  echo "✅ Tests passed"
+fi
+
+# 3. Build check
+run_check "Build" "pnpm build" || exit 1
+
+# 4. Accessibility tests (if available)
+if pnpm run test:a11y --if-present >/dev/null 2>&1; then
+  run_check "Accessibility tests" "pnpm run test:a11y" || exit 1
+else
+  echo "⏭️  Accessibility tests not available, skipping"
+fi
+
+echo "=================================================="
+echo "✅ All pre-push checks passed! 🎉"
+echo "🚀 Proceeding with push..."  

docs/project_plan.md

@@ -83,8 +83,8 @@ A pragmatic breakdown into **four one‑week sprints** plus a preparatory **Spri
 | 5.1 | **Form inputs batch 2** – DatePicker, DateRangePicker, SliderInput, SpinnerInput, ComboBox, TextArea    | Unit + a11y tests (≥90 % cov) & Storybook stories demonstrate disabled/error variants.                                                                                    | ✓      |
 | 5.2 | **Editor widgets** – MarkdownEditor (already complete) & CodeEditor (CodeMirror 6)                      | MarkdownEditor verified complete with security & a11y. CodeEditor implemented with syntax highlighting, themes, mobile support; bundle size increase ≤ 500 KB gzip total. | ✓      |
 | 5.3 | **Remaining layouts** – ErrorShell, MainFixedLayout, DataDenseLayout, Footer slot in MainLayout         | Storybook snapshots approved in light/dark; axe-core passes.                                                                                                              | ✓      |
-| 5.4 | **Showcase routes extension** – `/settings` (MainFixedLayout), `/components` gallery, wildcard 404 page | Playwright E2E navigates: login → settings → gallery → invalid URL → 404; no console errors.                                                                              |        |
-| 5.5 | Add **Reset‑Password page** (AuthShell variant)                                                         | Route `/reset-password` renders form; Vitest form validation passes.                                                                                                      |        |
+| 5.4 | **Showcase routes extension** – `/settings` (MainFixedLayout), `/components` gallery, wildcard 404 page | Playwright E2E navigates: login → settings → gallery → invalid URL → 404; no console errors.                                                                              | ✓      |
+| 5.5 | Add **Reset‑Password page** (AuthShell variant)                                                         | Route `/reset-password` renders form; Vitest form validation passes.                                                                                                      | PR     |
 | 5.6 | Update documentation index & Storybook sidebar grouping                                                 | `npm run build-storybook` completes; new components appear under correct groups.                                                                                          |        |
 
 ---

docs/task-planning/task-5.5-reset-password-page.md

@@ -0,0 +1,44 @@
+# Task 5.5 Planning: Reset Password Page (AuthShell variant)
+
+## Overview
+
+This task involves implementing a reset password page using the AuthShell layout component. The page should include a form with email input field, validation using React Hook Form and Zod, and proper routing integration in the showcase application.
+
+## Task Breakdown
+
+| Task Description                                    | Definition of Done (DoD)                                                        | Status   |
+| --------------------------------------------------- | ------------------------------------------------------------------------------- | -------- |
+| Create ResetPasswordPage component using AuthShell  | Component created with proper AuthShell integration and styling                 | complete |
+| Implement reset password form with email validation | Form uses React Hook Form + Zod for email validation with proper error handling | complete |
+| Add route `/reset-password` to showcase router      | Route properly configured in main.tsx and renders the component                 | complete |
+| Create unit tests for form validation               | Vitest tests verify email validation and form submission behavior               | complete |
+| Add navigation link from login page                 | Login page includes "Forgot Password?" link to reset password page              | complete |
+| Create E2E test for reset password flow             | Playwright test verifies navigation and form interaction                        | complete |
+| Update component exports and documentation          | Component properly exported and accessible from ui-kit                          | complete |
+
+## Implementation Notes
+
+- **AuthShell Integration**: Use existing AuthShell component with appropriate width and styling
+- **Form Validation**: Use Zod schema for email validation (required field + valid email format)
+- **UI/UX**: Follow existing login page patterns for consistency
+- **Navigation**: Add link from login page, include back to login link on reset password page
+- **Accessibility**: Ensure proper form labeling and error message association
+
+## Technical Requirements
+
+- Form should validate email format and required field
+- Submit handler should show success/error toast messages
+- Component should be responsive and follow existing design patterns
+- Tests should cover both successful submission and validation errors
+- E2E test should verify complete user flow from login → reset password → back to login
+
+## Completion Summary
+
+✅ **All tasks completed successfully!**
+
+- **ResetPasswordPage component**: Created using AuthShell with proper styling and responsive design
+- **Form validation**: Implemented with React Hook Form + Zod for email validation
+- **Routing**: Added `/reset-password` route to showcase application
+- **Navigation**: Added "Forgot Password?" link from login page with back navigation
+- **Testing**: Created unit tests for form validation and E2E tests for user flow
+- **No exports needed**: This is a showcase page, not a UI kit component, so no exports to ui-kit required

packages/showcase/database.sqlite

@@ -5,6 +5,7 @@ import { ToastProvider } from "@etherisc/ui-kit";
 import "./index.css";
 
 import { LoginPage } from "./pages/LoginPage";
+import { ResetPasswordPage } from "./pages/ResetPasswordPage";
 import { DashboardPage } from "./pages/DashboardPage";
 import { CustomersPage } from "./pages/CustomersPage";
 import { SettingsPage } from "./pages/SettingsPage";
@@ -24,6 +25,10 @@ const router = createBrowserRouter([
     path: "/login",
     element: <LoginPage />,
   },
+  {
+    path: "/reset-password",
+    element: <ResetPasswordPage />,
+  },
   {
     path: "/dashboard",
     element: (