[bessmasarri]

Resolves #11

• Build responsive AuthLayout matching Figma (desktop, tablet, mobile)
• Create reusable FormField and PasswordInput components
• Integrate React Hook Form and Zod for inline validation
• Add SocialLoginButtons placeholders with official SVGs
• Implement a11y improvements (aria-labels) for E2E resilience

Linked Issue

Closes #11

GitHub Project

• Added this PR to the project board
• Issue is in the same project board

Description 📑

Implements the complete authentication UI for the parent web dashboard as specified in Issue #11.

All pages (/login, /register, /verify-email, /forgot-password, /add-child) are built with a shared responsive layout that splits 44/56 on desktop, 50/50 on tablet, and stacks vertically on mobile (hero section first for better UX).

Form validation is handled entirely client-side via Zod schemas + React Hook Form, with inline field-level errors. Social login buttons (Google/Apple) are present as visual placeholders only — logic is not implemented per spec.

All interactive elements have aria-label attributes, making them immediately usable in Playwright E2E tests.

Type of Change

• ✨ New feature (non-breaking change which adds functionality)
• 🛠️ Bug fix (non-breaking change which fixes an issue)
• ❌ Breaking change (fix or feature that would cause existing functionality to change)
• 🧹 Code refactor
• 🏗️ Build configuration change
• 📝 Documentation
• 🗑️ Chore

Changes

File	Type	Description
app/(auth)/layout.tsx	New	Shared responsive layout (44/56 → 50/50 → stacked)
app/(auth)/login/page.tsx	New	Email + password login form
app/(auth)/register/page.tsx	New	Full registration form with T&C checkbox
app/(auth)/verify-email/page.tsx	New	5-digit OTP with resend countdown
app/(auth)/forgot-password/page.tsx	New	Password reset request page
app/(auth)/add-child/page.tsx	New	Child profile form (multi-child support)
app/dashboard/page.tsx	New	Placeholder page for post-login redirect
components/ui/FormField.tsx	New	Reusable input with label, icon, and error
components/ui/PasswordInput.tsx	New	Password input with show/hide toggle
components/auth/AuthSideHero.tsx	New	Animated hero carousel (left panel)
components/auth/SocialLoginButtons.tsx	New	Google/Apple placeholder buttons
components/ui/ElFulkLogo.tsx	New	Logo component with size variants
lib/schemas/auth.ts	New	Zod schemas: loginSchema, registerSchema
package.json + pnpm-lock.yaml	Modified	Added zod, react-hook-form, @hookform/resolvers

Screenshots / Demos 📷

Login	Register	Verify Email	Add Child

|

|

|

|

|

How to test 🚦

1. pnpm install then pnpm dev
2. Visit /register → fill form → submit → redirects to /verify-email
3. Visit /login → fill email + password → submit → redirects to /dashboard
4. Visit /forgot-password → verify link back to /login exists
5. Test on mobile viewport (< 768px) → hero should appear above form
6. Submit empty forms → inline validation errors should appear under each field

[MohamedMouloudj]

@bessmasarri

• Use media from Figma and fix button direction on auth pages
• Use lucide icons (I installed it for you) instead of hardcoded svg icons
• Respect the backend endpoints, you can run docker containers for quick setup
• Check the pushed test to know how to pass and what is expected
• Read newly created DEVELOPMENT.md for more clarification
• In reset password page, the time must be tied to backend to avoid alteration from client side, just use mock data for now, but take in consideration that the mock should be easily replaced with real backend call

[MohamedMouloudj]

• Read DEVELOPMENT.md to see the correct structure of aria-label, and update it.
• Dont change the e2e tests
• For /lib/auth.ts you were expected to integrate betterauth not hardcoded functions. the integration of betterauth in frontend is simple and straightforward since backend uses it as well.
• you forgot images that is left side of steps
• ALWAYS use server components in page.tsx and separate client components in other files for ppr.