Feat/fe/homepage

[UGing265]

PR Type

Enhancement, Documentation

---

Description

• Frontend Homepage Redesign: Complete redesign of the homepage with multiple feature sections including hero section with navbar, value propositions, use cases, workflow visualization with 4-step UI mockups, testimonials, and CTA footer

• Authentication UI Implementation: New login and register forms with comprehensive validation, error handling, and loading states using react-hook-form and Zod schemas

• Design System Establishment: Comprehensive design system with oklch color palette (cream, yellow, black, gray, blue, red), typography (Patrick Hand, Quicksand), animations (fade-in, slide-up), and Tailwind CSS configuration

• Backend Validation Pipeline: Integrated MediatR validation behavior for automatic request validation, moved validation from data annotations to FluentValidation

• Frontend-Backend Integration: Added CORS support for frontend integration, error response parser utility for handling API errors, and authentication API service layer

• UI Components Library: Added Shadcn/UI form and card components, button component with multiple variants, contact form, and workflow UI mockup components

• Documentation: Created comprehensive frontend design system documentation and detailed authentication enhancement plan

• Code Quality: Normalized line endings (CRLF to LF) across backend and documentation files

---

Diagram Walkthrough

flowchart LR
  A["Backend API<br/>CORS + Validation"] -->|"JSON responses"| B["Frontend Services<br/>Auth API + Error Parser"]
  B -->|"Zod validation"| C["Auth Forms<br/>Login + Register"]
  D["Design System<br/>Colors + Typography"] -->|"Tailwind config"| E["UI Components<br/>Form + Card + Button"]
  E -->|"styled with"| C
  E -->|"styled with"| F["Homepage Sections<br/>Hero + Workflow + CTA"]
  C -->|"integrated in"| G["Auth Pages<br/>Login + Register"]
  F -->|"composed in"| H["Homepage<br/>page.tsx"]

Loading

File Walkthrough

	Relevant files
Enhancement	28 files Program.cs Add CORS support for frontend integration                                backend/src/API/Program.cs Added CORS configuration to allow requests from React frontend with configurable origins Added comment about DotNetEnv.Env.Load() for non-Docker environments Integrated UseCors("AllowReactApp") middleware into the HTTP request pipeline +130/-116 DependencyInjection.cs Integrate validation behavior into MediatR pipeline            backend/src/Application/DependencyInjection.cs Added import for Application.Common.Behaviors namespace Registered ValidationBehavior<,> as an open behavior in MediatR pipeline Enables automatic validation of requests before handler execution +27/-23  ValidationBehavior.cs Create MediatR validation pipeline behavior                            backend/src/Application/Common/Behaviors/ValidationBehavior.cs New file implementing IPipelineBehavior for MediatR Validates incoming requests using registered IValidator instances Throws ValidationException if validation fails, otherwise proceeds to handler +36/-0    errorParser.ts Add error response parser utility for frontend                      frontend/src/features/auth/utils/errorParser.ts New utility file for parsing backend API error responses Extracts general error messages and field-level validation errors Maps API field names to user-friendly display names Handles both structured error objects and plain error strings +89/-0    index.ts Create workflow mocks component barrel export                        frontend/src/features/home/components/workflow-mocks/index.ts New barrel export file for workflow mock components Exports SetupUI, TransactionUI, ProcessingUI, and ReviewUI components Provides centralized import path for workflow-related UI components +4/-0      auth.ts Add authentication type definitions and Zod validation schemas frontend/src/features/auth/types/auth.ts Created new TypeScript file with Zod schemas for login and registration validation Defined LoginSchema with username (min 3 chars) and password (min 6 chars) validation Defined RegisterSchema with username, name, email (optional), and password (with uppercase, lowercase, digit requirements) Exported TypeScript types LoginInput and RegisterInput inferred from schemas Created AuthResponse interface for API responses with token and user data +33/-0    auth.ts Implement authentication API service layer                              frontend/src/features/auth/api/auth.ts Created authentication API service with login() and register() functions Implemented error handling with try-catch for JSON parsing and HTTP status checks login() function sends POST request to /api/auth/login and returns AuthResponse register() function sends POST request to /api/auth/register with no return value Uses NEXT_PUBLIC_API_URL environment variable with fallback to localhost +40/-0    utils.ts Add class name merging utility function                                    frontend/src/lib/utils.ts Created utility function cn() for merging Tailwind CSS classes Combines clsx for conditional classes with tailwind-merge for smart class merging Prevents Tailwind class conflicts when combining multiple class strings +6/-0      globals.css Establish comprehensive design system with colors and animations frontend/src/app/globals.css Replaced basic color scheme with comprehensive design system using oklch color space Added custom theme colors: paper cream, note yellow, ink black, pencil gray Implemented brand color tokens (yellow, blue, red) with foreground color pairs for WCAG compliance Added neutral gray scale (50-900) for consistent grayscale usage Created light and dark mode CSS variable sets with oklch color definitions Added Tailwind theme configuration with color, radius, and sidebar variables Implemented smooth animations: fade-in (300ms opacity), slide-up (300ms transform) Added component layer utilities: .btn-yellow and .input-field with focus states Enhanced focus-visible states with yellow outline for keyboard accessibility +259/-19 WorkflowSection.tsx Add workflow section component with step-by-step UI mockups frontend/src/features/home/components/WorkflowSection.tsx Created new workflow section component showcasing 4-step process with visual UI mockups Implemented feature cards with icons (Wallet, ArrowRightLeft, RefreshCw, Lock) and descriptions Built mock UI components: ExpenseTrackerUI, BudgetPlannerUI, DebtManagerUI, ReportsUI Added alternating left-right layout with vertical timeline connector on desktop Implemented hover effects, animations, and responsive design for mobile/tablet/desktop Used brand colors (#FF7A00 yellow, #4A2C2A brown) with gradient accents +236/-0  RegisterForm.tsx Register form component with password validation and error handling frontend/src/features/auth/components/RegisterForm.tsx New register form component with full validation and error handling Implements PasswordRequirements sub-component showing real-time password strength Integrates react-hook-form with Zod schema validation Handles field-specific and general errors from backend API Includes loading state with spinner during submission +199/-0  CTAFooterSection.tsx CTA footer section with contact form and social links        frontend/src/features/home/components/CTAFooterSection.tsx New footer section with CTA and contact information Includes custom SVG illustration of notebook/document Implements contact form and social media links Features "Try Now" CTA button linking to register page Displays phone, email, and footer navigation links +108/-0  HeroSection.tsx Hero section with navbar and transaction mockup display    frontend/src/features/home/components/HeroSection.tsx New hero section component with responsive navbar Includes logo, navigation links, and dual CTA buttons (Log In, Sign Up) Features two-column layout with text content and interactive transaction mockup Displays sample transaction list with positive/negative amounts Includes decorative dollar sign badge and gradient blur backgrounds +120/-0  SetupUI.tsx Wallet setup UI mockup component with sub-wallets display frontend/src/features/home/components/workflow-mocks/SetupUI.tsx New wallet setup UI mockup component Displays main account with balance and sub-wallets (Savings, Daily) Shows debt partners section with avatar stack Uses orange accent color (#FF7A00) for active states Includes hover effects and responsive layout +83/-0    ReviewUI.tsx Review period UI mockup with calendar and month selection frontend/src/features/home/components/workflow-mocks/ReviewUI.tsx New review period UI mockup with calendar interface Implements month selector with locked/unlocked states Displays calendar grid with day highlighting and past transaction indicators Features search and history action buttons Uses orange highlight for current day selection +97/-0    LoginForm.tsx Login form implementation with validation and error handling frontend/src/features/auth/components/LoginForm.tsx Complete rewrite from Vietnamese placeholder to production form Implements react-hook-form with Zod validation Integrates error parsing and field-level error display Adds loading state with spinner during submission Applies custom styling with orange accent color (#FF7A00) Includes fade-in animation on form load +126/-20 form.tsx Shadcn/UI form components for form handling and validation frontend/src/components/ui/form.tsx New Shadcn/UI form component library Provides Form, FormField, FormItem, FormLabel, FormControl, FormMessage components Integrates with react-hook-form and Zod validation Includes context-based field state management Supports error display and accessibility attributes +167/-0  TransactionUI.tsx Transaction entry UI mockup with amount and note inputs    frontend/src/features/home/components/workflow-mocks/TransactionUI.tsx New transaction entry UI mockup component Includes amount input with increment/decrement controls Features debt tagging toggle for bill splitting Implements note input field with icon Displays save transaction button with icon +59/-0    page.tsx Homepage redesign with feature-based section composition  frontend/src/app/page.tsx Complete homepage redesign replacing Next.js template Imports and composes multiple home feature sections Includes HeroSection, ValuePropsSection, UseCaseCardsSection, WorkflowSection, Testimonials, CTAFooterSection Sets background color to cream (#F5EFE6) +14/-60  ProcessingUI.tsx Transaction processing UI mockup with wallet sync animation frontend/src/features/home/components/workflow-mocks/ProcessingUI.tsx New transaction processing UI mockup component Shows sub-wallet sending amount with syncing indicator Displays parent wallet receiving amount with animation Includes gradient top border and bounce animation Uses dark background for parent wallet contrast +62/-0    TrustAndTestimonials.tsx Testimonials section with user quotes and star ratings      frontend/src/features/home/components/TrustAndTestimonials.tsx New testimonials section component with three user quotes Displays testimonial cards with user avatars and star ratings Includes custom shadow colors per testimonial for visual variety Features hover effect with upward translation Shows date and user handle for each testimonial +74/-0    ContactForm.tsx Contact form component with email and message inputs          frontend/src/features/home/components/ContactForm.tsx New contact form component with name, email, message fields Implements form submission handler with console logging Styled with custom colors matching design system Includes focus states with orange accent (#FF7A00) Features submit button with send icon +62/-0    button.tsx Shadcn/UI button component with multiple variants and sizes frontend/src/components/ui/button.tsx New Shadcn/UI button component with CVA variants Supports multiple variants (default, destructive, outline, secondary, ghost, link) Provides size options (xs, sm, default, lg, icon variants) Includes accessibility features and focus states Supports asChild prop for composition +64/-0    ValuePropsSection.tsx Value propositions section with feature cards and icons    frontend/src/features/home/components/ValuePropsSection.tsx New value propositions section with three feature cards Displays features: "See all your money", "Quick logging", "Clear history" Includes icons and descriptions for each feature Features hover effects with shadow and border color changes Uses consistent design system colors +65/-0    card.tsx Shadcn/UI card components for content container layouts    frontend/src/components/ui/card.tsx New Shadcn/UI card component library Provides Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction components Includes container queries and responsive grid layout Supports data slots for semantic HTML structure Includes proper spacing and border styling +92/-0    UseCaseCardsSection.tsx Use cases section with wallet type cards and descriptions frontend/src/features/home/components/UseCaseCardsSection.tsx New use cases section with three wallet type cards Displays: Main Wallet, Sub-wallets, Debt Tracking Includes icons and descriptions for each use case Features hover effects with shadow and border changes Uses responsive grid layout +57/-0    layout.tsx Root layout font and metadata updates for design system    frontend/src/app/layout.tsx Replaced default Geist fonts with Patrick Hand and Quicksand from Google Fonts Updated metadata title and description to MA6 Debt Vietnamese text Added CSS variables for font families (--font-patrick, --font-quicksand) Maintains root layout structure and children rendering +33/-32  WorkflowSection.tsx Workflow section displaying transaction processing stages frontend/src/features/home/components/WorkflowSection.tsx New workflow section component showcasing transaction flow Displays four workflow stages: Setup, Transaction, Processing, Review Integrates UI mockup components (SetupUI, TransactionUI, ProcessingUI, ReviewUI) Features descriptive text and visual workflow progression Uses responsive grid layout with proper spacing +236/-0
Refactoring	1 files RegisterRequest.cs Move validation from attributes to FluentValidation            backend/src/Application/Features/Auth/Register/RegisterRequest.cs Removed [Required] and [MinLength(3)] data annotations from properties Removed [EmailAddress] annotation from Email property Validation logic now handled by RegisterValidator and ValidationBehavior +14/-19
Formatting	41 files 20260208102938_InitialCreate.Designer.cs Normalize line endings in migration designer                          backend/src/Persistence/Migrations/20260208102938_InitialCreate.Designer.cs Line ending normalization from CRLF to LF throughout the file No functional changes to migration designer code +280/-280 20260208103321_initDB.Designer.cs Normalize line endings in migration designer                          backend/src/Persistence/Migrations/20260208103321_initDB.Designer.cs Line ending normalization from CRLF to LF throughout the file No functional changes to migration designer code +280/-280 ApplicationDbContextModelSnapshot.cs Normalize line endings in model snapshot                                  backend/src/Persistence/Migrations/ApplicationDbContextModelSnapshot.cs Line ending normalization from CRLF to LF throughout the file No functional changes to model snapshot code +277/-277 20260208102938_InitialCreate.cs Normalize line endings in migration file                                  backend/src/Persistence/Migrations/20260208102938_InitialCreate.cs Line ending normalization from CRLF to LF throughout the file No functional changes to migration code +195/-195 20260208103321_initDB.cs Normalize line endings in migration file                                  backend/src/Persistence/Migrations/20260208103321_initDB.cs Line ending normalization from CRLF to LF throughout the file No functional changes to empty migration code +22/-22  GlobalExceptionHandler.cs Normalize line endings in exception handler                            backend/src/API/Middleware/GlobalExceptionHandler.cs Line ending normalization from CRLF to LF throughout the file No functional changes to exception handler logic +106/-106 ApplicationDbContext.cs Normalize line endings in DbContext                                            backend/src/Persistence/Data/ApplicationDbContext.cs Line ending normalization from CRLF to LF throughout the file No functional changes to DbContext configuration +69/-69  TokenGenerator.cs Normalize line endings in token generator                                backend/src/Application/Common/Security/TokenGenerator.cs Line ending normalization from CRLF to LF throughout the file No functional changes to token generation logic +78/-78  RegisterCommandHandler.cs Normalize line endings in register handler                              backend/src/Application/Features/Auth/Register/RegisterCommandHandler.cs Line ending normalization from CRLF to LF throughout the file No functional changes to command handler logic +71/-71  AuthController.cs Normalize line endings in auth controller                                backend/src/API/Controllers/AuthController.cs Line ending normalization from CRLF to LF throughout the file No functional changes to controller endpoints +51/-51  LoginCommandHandler.cs Normalize line endings in login handler                                    backend/src/Application/Features/Auth/Login/LoginCommandHandler.cs Line ending normalization from CRLF to LF throughout the file No functional changes to login handler logic +42/-42  IApplicationDbContext.cs Normalize line endings in DbContext interface                        backend/src/Application/Common/Interfaces/IApplicationDbContext.cs Line ending normalization from CRLF to LF throughout the file No functional changes to interface definition +42/-42  PasswordHasher.cs Normalize line endings in password hasher                                backend/src/Application/Common/Security/PasswordHasher.cs Line ending normalization from CRLF to LF throughout the file No functional changes to password hashing logic +44/-44  RegisterValidator.cs Normalize line endings in register validator                          backend/src/Application/Features/Auth/Register/RegisterValidator.cs Line ending normalization from CRLF to LF throughout the file No functional changes to validation rules +25/-25  Wallet.cs Normalize line endings in wallet entity                                    backend/src/Domain/Entities/Wallet.cs Line ending normalization from CRLF to LF throughout the file No functional changes to entity definition +25/-25  User.cs Normalize line endings in user entity                                        backend/src/Domain/Entities/User.cs Line ending normalization from CRLF to LF throughout the file No functional changes to entity definition +29/-29  IPasswordHasher.cs Normalize line endings in password hasher interface            backend/src/Application/Common/Interfaces/IPasswordHasher.cs Line ending normalization from CRLF to LF throughout the file No functional changes to interface definition +22/-22  DebtPartner.cs Normalize line endings in debt partner entity                        backend/src/Domain/Entities/DebtPartner.cs Line ending normalization from CRLF to LF throughout the file No functional changes to entity definition +23/-23  Transaction.cs Normalize line endings in transaction entity                          backend/src/Domain/Entities/Transaction.cs Line ending normalization from CRLF to LF throughout the file No functional changes to entity definition +21/-21  DependencyInjection.cs Normalize line endings in persistence DI                                  backend/src/Persistence/DependencyInjection.cs Line ending normalization from CRLF to LF throughout the file No functional changes to dependency injection setup +20/-20  LoginValidator.cs Normalize line endings in login validator                                backend/src/Application/Features/Auth/Login/LoginValidator.cs Line ending normalization from CRLF to LF throughout the file No functional changes to validation rules +17/-17  ITokenGenerator.cs Normalize line endings in token generator interface            backend/src/Application/Common/Interfaces/ITokenGenerator.cs Line ending normalization from CRLF to LF throughout the file No functional changes to interface definition +16/-16  RegisterCommand.cs Normalize line endings in register command                              backend/src/Application/Features/Auth/Register/RegisterCommand.cs Line ending normalization from CRLF to LF throughout the file No functional changes to command definition +11/-11  LoginCommand.cs Normalize line endings in login command                                    backend/src/Application/Features/Auth/Login/LoginCommand.cs Line ending normalization from CRLF to LF throughout the file No functional changes to command definition +13/-13  LoginRequest.cs Normalize line endings in login request                                    backend/src/Application/Features/Auth/Login/LoginRequest.cs Line ending normalization from CRLF to LF throughout the file No functional changes to request definition +7/-7      LoginResponse.cs Normalize line endings in login response                                  backend/src/Application/Features/Auth/Login/LoginResponse.cs Line ending normalization from CRLF to LF throughout the file No functional changes to response definition +7/-7      RegisterResponse.cs Normalize line endings in register response                            backend/src/Application/Features/Auth/Register/RegisterResponse.cs Line ending normalization from CRLF to LF throughout the file No functional changes to response definition +7/-7      Transfer.cs Normalize line endings in transfer entity                                backend/src/Domain/Entities/Transfer.cs Line ending normalization from CRLF to LF throughout the file No functional changes to entity definition +19/-19  US00_Register_Backend.md Normalize line endings in backend registration documentation docs/done/US00_Register_Backend.md File reformatted with consistent line endings (CRLF to LF conversion) No functional changes to content; documentation remains complete and accurate +352/-352 MA6_Debt.sln Normalize line endings in Visual Studio solution file        backend/MA6_Debt.sln File reformatted with consistent line endings (CRLF to LF conversion) No functional changes to solution structure or project references +55/-55  US00_Scalar.md Normalize line endings in API documentation plan                  docs/plan/US00_Scalar.md File reformatted with consistent line endings (CRLF to LF conversion) No functional changes to Scalar UI configuration plan +85/-85  US00_Register.md Line ending normalization in registration plan document    docs/plan/US00_Register.md Line ending normalization (CRLF to LF) across entire file No functional content changes to registration feature plan Maintains all existing requirements and acceptance criteria +124/-124 US00_Login_Backend.md Line ending normalization in login backend completion document docs/done/US00_Login_Backend.md Line ending normalization (CRLF to LF) throughout document No functional changes to completed login backend implementation summary Preserves all documentation about User entity, JWT, and BCrypt +102/-102 mint.json Line ending normalization in documentation configuration file docs/mint.json Line ending normalization (CRLF to LF) in JSON configuration No functional changes to documentation site configuration Preserves all Mintlify settings and navigation structure +63/-63  US00_Login.md Line ending normalization in login system plan document    docs/plan/US00_Login.md Line ending normalization (CRLF to LF) throughout document No content changes to login system implementation plan Maintains all technical requirements and testing steps +33/-33  US00_Scalar_Backend.md Line ending normalization in Scalar UI backend documentation docs/done/US00_Scalar_Backend.md Line ending normalization (CRLF to LF) in completion document No functional changes to Scalar UI configuration summary Preserves all setup instructions and feature documentation +50/-50  README.md Line ending normalization in feature architecture documentation frontend/src/features/README.md Line ending normalization (CRLF to LF) throughout document No content changes to feature-based architecture documentation Preserves all directory structure and rules +31/-31  WalletList.tsx Line ending normalization in wallet list component              frontend/src/features/wallet/components/WalletList.tsx Line ending normalization (CRLF to LF) throughout component No functional changes to wallet list component Preserves mock data and component structure +21/-21  development.md Line ending normalization in development setup documentation docs/development.md Line ending normalization (CRLF to LF) throughout document No content changes to development setup instructions Preserves all backend and frontend setup steps +36/-36  introduction.md Line ending normalization in introduction documentation    docs/introduction.md Line ending normalization (CRLF to LF) throughout document No content changes to introduction documentation Preserves all overview and tech stack information +25/-25  Domain.csproj Line ending normalization in domain project file                  backend/src/Domain/Domain.csproj Line ending normalization (CRLF to LF) in project file No functional changes to domain project configuration Preserves all property settings +9/-9
Documentation	4 files US00_Auth_Frontend.md Create detailed frontend authentication enhancement plan  docs/plan/US00_Auth_Frontend.md Created comprehensive 727-line planning document for frontend authentication UI enhancement Defined objectives: improved error handling, deeper yellow color (#F5D066), animations, and visual hierarchy Specified 5 concrete deliverables including error parser utility, enhanced forms, and global styling Detailed verification strategy with 9 QA scenarios covering login, registration, error display, and animations Broke down implementation into 5 phases with detailed TODOs for error parsing, form enhancements, and styling Included acceptance criteria, parallelization strategy, and agent-executed test scenarios +727/-0  Frontend_Design.md Document complete frontend design system and architecture docs/done/Frontend_Design.md Created comprehensive 518-line frontend design system documentation Documented color palette with 6 colors (cream, yellow, black, gray, blue, red) and CSS variables Specified typography system using Patrick Hand (headings) and Quicksand (body) Detailed feature-based architecture with directory structure and file organization Documented authentication feature implementation with API service, components, and types Listed tech stack including Next.js 15, React 19, Tailwind CSS 4, shadcn/ui, and form libraries Included access URLs, features overview, getting started guide, and security considerations Added section on homepage redesign with color palette and implementation details +518/-0  Frontend_Design.md Frontend design system and implementation plan documentation docs/plan/Frontend_Design.md New comprehensive frontend design system documentation Defines color palette (Paper Cream, Note Yellow, Ink Black, Highlighter Amber) Specifies typography (Patrick Hand, Quicksand fonts) Outlines implementation tasks for Tailwind, Shadcn/UI, Auth pages Includes homepage redesign plan with warm cream backgrounds and pill buttons +148/-0  US00_Auth_Frontend.md Frontend auth implementation completion and summary documentation docs/done/US00_Auth_Frontend.md New completion document for frontend error handling and UI enhancement Documents error parser utility implementation Summarizes login and register form enhancements with loading states Details global styling updates with new color (#F5D066) and animations Lists all modified files and technical decisions made +176/-0
Dependencies	1 files API.csproj Backend project dependency addition for environment configuration backend/src/API/API.csproj Added DotNetEnv NuGet package (version 3.1.1) Enables environment variable loading from .env files Maintains existing dependencies (JWT, OpenApi, Scalar, EF Core) +25/-24
Additional files	18 files var-branch.yml +15/-0    API.http +6/-6      launchSettings.json +23/-23  appsettings.json +21/-21  Persistence.csproj +21/-21  openapi.json +7/-7      components.json +23/-0    package.json +14/-1    pnpm-lock.yaml +5228/-1472 pnpm-workspace.yaml +3/-3      postcss.config.mjs +3/-4      layout.tsx +26/-0    page.tsx +25/-3    page.tsx +27/-0    page.tsx +5/-5      input.tsx +21/-0    label.tsx +24/-0    sonner.tsx +40/-0

---

Summary by CodeRabbit

Release Notes

• New Features

  • Added complete authentication system with login and registration pages featuring real-time password validation
  • Implemented global design system with multiple color themes and animations
  • Added home page sections: Hero section, value propositions, use cases, workflow steps, testimonials, and CTA footer
  • Introduced reusable UI components for buttons, cards, forms, inputs, and notifications
  • Added validation for all registration fields (username, name, email, password)
  • Configured CORS support for cross-origin API requests

• Documentation

  • Added comprehensive frontend design system documentation
  • Added frontend authentication flow documentation
  • Updated development guide with project structure updates

[qodo-code-review]

CI Feedback 🧐

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: check-branch

Failed stage: Verify source branch [❌]

Failed test name: ""

Failure summary: The action failed because a workflow step in the check-branch job intentionally exited with a non-zero status: - The step ran echo "Error: Don't merge to main!" and then executed exit 1, which caused the job to fail (exit code 1). - This indicates the workflow is enforcing a rule preventing merges to the main branch, and the current run triggered that rule.

Relevant error logs: 1: ##[group]Runner Image Provisioner 2: Hosted Compute Agent ... 13: ##[group]Runner Image 14: Image: ubuntu-24.04 15: Version: 20260209.23.1 16: Included Software: https://github.com/actions/runner-images/blob/ubuntu24/20260209.23/images/ubuntu/Ubuntu2404-Readme.md 17: Image Release: https://github.com/actions/runner-images/releases/tag/ubuntu24%2F20260209.23 18: ##[endgroup] 19: ##[group]GITHUB_TOKEN Permissions 20: Contents: read 21: Metadata: read 22: Packages: read 23: ##[endgroup] 24: Secret source: Actions 25: Prepare workflow directory 26: Prepare all required actions 27: Complete job name: check-branch 28: ##[group]Run echo "Error: Don't merge to main!" 29: �[36;1mecho "Error: Don't merge to main!"�[0m 30: �[36;1mexit 1�[0m 31: shell: /usr/bin/bash -e {0} 32: ##[endgroup] 33: Error: Don't merge to main! 34: ##[error]Process completed with exit code 1. 35: Cleaning up orphan processes

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This PR introduces authentication features (login/register with validation), CORS configuration, frontend UI components with form handling and styling, a MediatR validation pipeline behavior, and numerous formatting adjustments across backend and frontend codebases.

Changes

Cohort / File(s)	Summary
GitHub Workflows .github/workflows/var-branch.yml	Adds workflow that enforces pull requests to main branch must originate from dev branch, blocking other sources.
Dependency & Configuration backend/src/API/API.csproj, backend/src/API/appsettings.json, backend/src/API/Program.cs	Adds DotNetEnv NuGet package for environment configuration loading; configures CORS policy from settings (defaults to http://localhost:3000) and applies it to the request pipeline; adds CORS origins configuration section.
Validation Pipeline backend/src/Application/Common/Behaviors/ValidationBehavior.cs, backend/src/Application/DependencyInjection.cs	Introduces new ValidationBehavior<TRequest, TResponse> MediatR pipeline behavior that validates requests using FluentValidation validators and throws aggregated ValidationException on failures; registers behavior globally via AddOpenBehavior.
Auth Registration Enhancement backend/src/Application/Features/Auth/Register/RegisterRequest.cs, backend/src/Application/Features/Auth/Register/RegisterValidator.cs	Removes DataAnnotations attributes from RegisterRequest model; extends RegisterValidator with email (when present) and name field validations.
Frontend Auth API & Types frontend/src/features/auth/api/auth.ts, frontend/src/features/auth/types/auth.ts, frontend/src/features/auth/utils/errorParser.ts	Adds login/register API functions with error handling; defines Zod schemas and TypeScript types for LoginInput/RegisterInput/AuthResponse; implements parseErrorResponse utility to map backend errors to form fields.
Frontend Auth Components frontend/src/features/auth/components/LoginForm.tsx, frontend/src/features/auth/components/RegisterForm.tsx	Implements LoginForm and RegisterForm components using React Hook Form with Zod validation, loading states, field-level error display, API integration, and toast notifications; RegisterForm includes PasswordRequirements sub-component for real-time validation feedback.
Frontend Layout & Pages frontend/src/app/(auth)/layout.tsx, frontend/src/app/(auth)/login/page.tsx, frontend/src/app/(auth)/register/page.tsx	Adds AuthLayout with centered styling and Toaster; creates Login and Register pages with metadata exports, centered headers, form integration, and navigation links.
Frontend UI Primitives frontend/src/components/ui/button.tsx, frontend/src/components/ui/card.tsx, frontend/src/components/ui/form.tsx, frontend/src/components/ui/input.tsx, frontend/src/components/ui/label.tsx, frontend/src/components/ui/sonner.tsx	Adds reusable UI component library: polymorphic Button with variants, Card structural components, accessible Form system with FormField/FormItem/FormControl/FormMessage, Input wrapper, Label primitive, and theme-aware Toaster for notifications.
Frontend Styling & Configuration frontend/src/app/globals.css, frontend/src/app/layout.tsx, frontend/components.json, frontend/package.json, frontend/postcss.config.mjs	Introduces comprehensive CSS token system with light/dark theme support, animations (fade-in, slide-up), utility classes, and component styles; updates fonts to Patrick_Hand and Quicksand; adds shadcn/ui, React Hook Form, Zod, Sonner, and Tailwind utilities to dependencies; configures shadcn component paths and styling mode.
Frontend Home Page Components frontend/src/features/home/components/HeroSection.tsx, frontend/src/features/home/components/ValuePropsSection.tsx, frontend/src/features/home/components/UseCaseCardsSection.tsx, frontend/src/features/home/components/WorkflowSection.tsx, frontend/src/features/home/components/TrustAndTestimonials.tsx, frontend/src/features/home/components/CTAFooterSection.tsx, frontend/src/features/home/components/ContactForm.tsx	Implements home page section components: Hero with Navbar, Value Propositions grid, Use Cases cards, four-step Workflow with mock UIs, Testimonials carousel, and CTA footer with ContactForm.
Frontend Workflow Mock UIs frontend/src/features/home/components/workflow-mocks/*.tsx, frontend/src/features/home/components/workflow-mocks/index.ts	Adds SetupUI, TransactionUI, ProcessingUI, and ReviewUI mock components visualizing wallet setup, transaction editing, asset syncing, and calendar review; provides barrel export for easy importing.
Frontend Utilities & Home Page frontend/src/lib/utils.ts, frontend/src/app/page.tsx, frontend/src/features/home/components/	Adds cn utility for composing Tailwind classes; refactors home page to render composed sections (HeroSection through CTAFooterSection) instead of inline markup.
Documentation docs/done/*.md, docs/plan/*.md, docs/development.md, docs/introduction.md, docs/mint.json, docs/openapi.json	Adds frontend design system documentation, auth implementation guides, updates plan docs, adjusts front matter formatting, and maintains OpenAPI spec.
Formatting & Configuration Changes backend/src/API/Controllers/AuthController.cs, backend/src/API/Middleware/GlobalExceptionHandler.cs, backend/src/API/Properties/launchSettings.json, backend/src/Application/Features/Auth/Login/*.cs, backend/src/Application/Features/Auth/Register/*.cs, backend/src/Application/Common/Interfaces/*.cs, backend/src/Application/Common/Security/*.cs, backend/src/Domain/Entities/*.cs, backend/src/Persistence/..., backend/MA6_Debt.sln, backend/src/Domain/Domain.csproj, backend/src/Persistence/Persistence.csproj, .gitignore, frontend/src/features/README.md, frontend/src/app/(dashboard)/wallet/page.tsx, frontend/pnpm-workspace.yaml, frontend/src/features/wallet/components/WalletList.tsx	Extensive whitespace, indentation, and formatting adjustments with no semantic changes to logic or public API signatures; includes BOM/encoding normalization in migration files.

Sequence Diagram

sequenceDiagram
    participant User as User/Client
    participant Form as React Form
    participant API as Frontend API
    participant Backend as ASP.NET API
    participant Validator as ValidationBehavior
    participant DB as Database

    User->>Form: Enter credentials & submit
    Form->>Form: Validate with Zod schema
    alt Zod validation fails
        Form->>User: Show field errors
    else Zod validation passes
        Form->>API: Call login/register function
        API->>Backend: POST /api/auth/login or /register
        Backend->>Validator: Route request through MediatR
        Validator->>Validator: Run FluentValidation validators
        alt Validators fail
            Validator->>Backend: Throw ValidationException
            Backend->>API: 400 response with field errors
            API->>Form: parseErrorResponse() extracts errors
            Form->>User: Display field-specific & general errors
        else Validators pass
            Validator->>Backend: Proceed to handler
            Backend->>DB: Query/create user
            DB->>Backend: User data
            Backend->>API: 200 + token + user info
            API->>Form: AuthResponse received
            Form->>Form: Store token, show toast
            Form->>User: Navigate to dashboard/login
        end
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Dev #3: Modifies the same .github/workflows/var-branch.yml file adding identical branch protection check for the main branch.
• Feat/fe/auth page #4: Includes overlapping backend changes (DotNetEnv, CORS, ValidationBehavior, RegisterValidator) and identical frontend auth components, UI primitives, and styling infrastructure.
• Feat/be/auth #1: Modifies shared backend authentication surface including Program.cs, DependencyInjection, validators, and Register feature files.

Suggested labels

Review effort 3/5

Poem

🐰 Hops excitedly

Forms now validate with hoppy grace,
CORS lets browsers from safe place,
Auth flows sparkle, styled so bright,
With toast and spinner—pure delight!
From dev to main, no branch shall roam,
A UI garden, now a home! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/fe/homepage

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	CORS misconfiguration Description: The CORS policy AllowReactApp allows any method/header and enables AllowCredentials(), so if Cors:Origins is misconfigured (e.g., includes unintended domains or is overly broad), authenticated cross-origin requests from untrusted origins could be permitted. Program.cs [23-32] Referred Code builder.Services.AddCors(options => { var allowedOrigins = builder.Configuration["Cors:Origins"]; options.AddPolicy("AllowReactApp", builder => builder .WithOrigins(allowedOrigins?.Split(',', StringSplitOptions.RemoveEmptyEntries) ?? new[] { "http://localhost:3000" }) .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials()); });
	Brute force login Description: The login handler performs credential checks without any rate limiting, throttling, or account lockout, which can enable online brute-force/password-spraying attacks against the login endpoint. LoginCommandHandler.cs [23-32] Referred Code public async Task<LoginResponse> Handle(LoginCommand request, CancellationToken cancellationToken) { var user = await _dbContext.Users .FirstOrDefaultAsync(u => u.Username == request.Username, cancellationToken) ?? throw new UnauthorizedAccessException("Invalid username or password"); if (!_passwordHasher.VerifyPassword(request.Password, user.PasswordHash)) { throw new UnauthorizedAccessException("Invalid username or password"); }
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Missing auth audit logs: The PR adds login/registration flows but does not add audit logging for critical actions like successful/failed login or user registration, preventing reconstruction of authentication events. Referred Code public async Task<LoginResponse> Handle(LoginCommand request, CancellationToken cancellationToken) { var user = await _dbContext.Users .FirstOrDefaultAsync(u => u.Username == request.Username, cancellationToken) ?? throw new UnauthorizedAccessException("Invalid username or password"); if (!_passwordHasher.VerifyPassword(request.Password, user.PasswordHash)) { throw new UnauthorizedAccessException("Invalid username or password"); } var token = _tokenGenerator.GenerateToken(user); return new LoginResponse { Token = token, Expiration = DateTime.UtcNow.AddHours(24) }; } Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Account enumeration: Registration returns distinct validation errors (Username already exists / Email already exists) which can expose whether a username/email is registered, enabling account enumeration. Referred Code // Check if username already exists var usernameExists = await _dbContext.Users .AnyAsync(u => u.Username == request.Username, cancellationToken); if (usernameExists) { throw new ValidationException(new[] { new ValidationFailure("Username", "Username already exists") }); } // Check if email already exists (if provided) if (!string.IsNullOrEmpty(request.Email)) { var emailExists = await _dbContext.Users .AnyAsync(u => u.Email == request.Email, cancellationToken); if (emailExists) { throw new ValidationException(new[] { new ValidationFailure("Email", "Email already exists") }); } } Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Status mismatch risk: The controller documents a 409 conflict for registration but the global handler maps FluentValidation ValidationException to HTTP 400, so conflict scenarios may not be handled with the intended status code without additional (not-shown) exception mapping. Referred Code if (exception is ValidationException validationException) { _logger.LogWarning("Validation error occurred: {Message}", validationException.Message); var errors = new Dictionary<string, string[]>(); foreach (var failure in validationException.Errors) { if (!errors.ContainsKey(failure.PropertyName)) { errors[failure.PropertyName] = new string[] { }; } errors[failure.PropertyName] = errors[failure.PropertyName] .Append(failure.ErrorMessage) .ToArray(); } var response = new ValidationErrorResponse { Type = "https://tools.ietf.org/html/rfc7231#section-6.5.1", Title = "Validation Error", Status = 400, ... (clipped 29 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Logs contain messages: The exception handler logs raw exception messages for validation and unauthorized errors, which may include user-provided content depending on validators and upstream exceptions not shown in this diff. Referred Code if (exception is ValidationException validationException) { _logger.LogWarning("Validation error occurred: {Message}", validationException.Message); var errors = new Dictionary<string, string[]>(); foreach (var failure in validationException.Errors) { if (!errors.ContainsKey(failure.PropertyName)) { errors[failure.PropertyName] = new string[] { }; } errors[failure.PropertyName] = errors[failure.PropertyName] .Append(failure.ErrorMessage) .ToArray(); } var response = new ValidationErrorResponse { Type = "https://tools.ietf.org/html/rfc7231#section-6.5.1", Title = "Validation Error", Status = 400, ... (clipped 13 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: CORS origin validation: CORS origins are read from configuration and split by comma, and it requires verification that the configured values are tightly controlled (no wildcards/untrusted origins) to prevent unintended cross-origin credentialed requests. Referred Code builder.Services.AddCors(options => { var allowedOrigins = builder.Configuration["Cors:Origins"]; options.AddPolicy("AllowReactApp", builder => builder .WithOrigins(allowedOrigins?.Split(',', StringSplitOptions.RemoveEmptyEntries) ?? new[] { "http://localhost:3000" }) .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials()); }); Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Security	Remove suspicious shadcn dependency Remove the suspicious shadcn dependency as it is likely a malicious, typosquatted package and use the official shadcn-ui CLI instead. frontend/pnpm-lock.yaml [75-77] -shadcn: - specifier: ^3.8.4 - version: 3.8.4(@types/node@20.19.33)(typescript@5.9.3) +# This dependency should be removed from package.json and the lockfile regenerated. +# Use the official shadcn-ui CLI instead: `npx shadcn-ui@latest ...` Apply / Chat Suggestion importance[1-10]: 10 __ Why: The suggestion correctly identifies a critical security risk by flagging the shadcn dependency as a likely typosquatting attempt, which could introduce malicious code.	High
	Remove suspicious radix-ui dependency Remove the suspicious radix-ui dependency as it is likely a malicious, typosquatted package and install the official scoped @radix-ui/* packages instead. frontend/pnpm-lock.yaml [29-31] -radix-ui: - specifier: ^1.4.3 - version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) +# This dependency should be removed from package.json and the lockfile regenerated. +# Install specific, scoped Radix UI packages instead, e.g., `pnpm add @radix-ui/react-slot`. Apply / Chat Suggestion importance[1-10]: 10 __ Why: The suggestion correctly identifies a critical security risk by flagging the radix-ui dependency as a likely typosquatting attempt, which could introduce malicious code.	High
Possible issue	Fix inconsistent API field name Fix an inconsistent API field name in FIELD_NAME_MAP. Change userName to username to match the Zod schemas and ensure correct error message display. frontend/src/features/auth/utils/errorParser.ts [14-21] const FIELD_NAME_MAP: Record<string, string> = { - userName: 'Username', + username: 'Username', email: 'Email', password: 'Password', passwordConfirm: 'Confirm Password', confirmPassword: 'Confirm Password', name: 'Name', }; [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: This suggestion correctly identifies and fixes a bug where the username field's error messages would not be properly formatted for the user due to a casing mismatch in the field name map.	Medium
	Fix CORS fallback for empty configuration Improve the CORS configuration to correctly handle cases where Cors:Origins is an empty string, ensuring the fallback to the default origin works as expected. backend/src/API/Program.cs [25-31] -var allowedOrigins = builder.Configuration["Cors:Origins"]; +var allowedOrigins = builder.Configuration["Cors:Origins"]? + .Split(',', StringSplitOptions.RemoveEmptyEntries) + .Where(o => !string.IsNullOrWhiteSpace(o)) + .ToArray(); + +if (allowedOrigins is null || allowedOrigins.Length == 0) +{ + allowedOrigins = new[] { "http://localhost:3000" }; +} + options.AddPolicy("AllowReactApp", builder => builder - .WithOrigins(allowedOrigins?.Split(',', StringSplitOptions.RemoveEmptyEntries) ?? new[] { "http://localhost:3000" }) + .WithOrigins(allowedOrigins) .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials()); Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a potential issue where an empty Cors:Origins configuration string would lead to an empty origins list, bypassing the intended fallback. The proposed fix improves the configuration's robustness.	Low
General	Add fallback for non‐JSON register errors Add robust error handling to the register function for non-JSON responses. Implement a try-catch block around response.json() to prevent unhandled promise rejections, similar to the login function. frontend/src/features/auth/api/auth.ts [27-40] export const register = async (data: RegisterInput): Promise<void> => { const response = await fetch(`${API_URL}/api/auth/register`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }); if (!response.ok) { - const errorData = await response.json(); + let errorData; + try { + errorData = await response.json(); + } catch { + throw { message: `Request failed with status ${response.status}` }; + } throw errorData; } }; [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: This suggestion correctly identifies a potential unhandled rejection in the register function and proposes adding robust error handling for non-JSON responses, mirroring the safer implementation in the login function.	Medium
	Simplify the optional email validation Simplify the optional email validation in the Zod schema. Replace the complex .refine() logic with a more direct .email().optional() chain for better readability. frontend/src/features/auth/types/auth.ts [13-15] -email: z.string().optional().refine(val => !val || z.string().email().safeParse(val).success, { - message: "Invalid email address" -}), +email: z.string().email("Invalid email address").optional(), [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies that the .refine() call is redundant and simplifies the Zod schema, improving code readability and maintainability by using a more idiomatic approach.	Low
	Promote unauthorized exclusively as general error Refactor the error parser to handle "Unauthorized" errors separately. This prevents "Unauthorized" from being added to the list of field-specific errors and promotes it to a general error message instead. frontend/src/features/auth/utils/errorParser.ts [67-77] if (Array.isArray(errorMessages) && errorMessages.length > 0) { - const displayName = getDisplayFieldName(fieldName); - result.fields[displayName] = errorMessages.filter( - (msg): msg is string => typeof msg === 'string' && msg.length > 0 - ); - - // Special case: If field is "Unauthorized" (often from 401), promote to general error if general is generic - if (fieldName === "Unauthorized" && errorMessages.length > 0) { - result.general = errorMessages[0]; + if (fieldName === "Unauthorized") { + result.general = errorMessages[0]; + } else { + const displayName = getDisplayFieldName(fieldName); + result.fields[displayName] = errorMessages.filter( + (msg): msg is string => typeof msg === 'string' && msg.length > 0 + ); } } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 5 __ Why: The suggestion correctly refactors the logic to prevent "Unauthorized" from being added as a field-specific error, improving the clarity of error reporting by treating it exclusively as a general error.	Low
More