feat: Refactor Login & Register pages

[DevonGifford]

PULL REQUEST: Refactor Login & Register pages

Overview

Objective:

This pull request encompasses extensive enhancements to the authentication system, focusing primarily on form handling, error management, and ensuring UI consistency across login and register pages.

Description

This comprehensive update targets several areas of improvement within the authentication system.

• Refactored Authentication Forms: Introduced modular AuthFormHeader and AuthFormFooter components, replacing the previous form structures across login and register pages.
• Enhanced Form Handling: Implemented react-hook-form and zod schema validation, enhancing form management and validation.
• Improved Error Handling: Centralized error management with specific Firebase error messages and optimized loading state handling during form submissions.
• UI Alignment: Adjusted UI elements to match the onboarding design, refining components for a more consistent and visually appealing interface.

Associated Ticket Closure:

This pull request resolves the following issues;

• CLOSES: Refactor Login & Register pages #19

Changes Made:

Step 1: Refactored Authentication Forms with Reusable Components

• Components Refactored:
  • AuthFormHeader and AuthFormFooter components introduced.
  • Replaced existing form structure in login and register pages with newly created reusable components.
• Benefits:
  • Enhanced modularity and maintainability through the introduction of modular authentication components.
  • Centralized header and footer content for consistent presentation across forms.

Step 2: Enhanced Auth Forms Handling Logic for Clarity

• Form Logic and Management:
  • Implemented react-hook-form for improved form management.
  • Incorporated zod schema validation for email and password fields.
  • Centralized form submission logic for consistent handling across pages.
  • Provided success icons and loading spinners for user feedback during form submission.
• Benefits:
  • Centralized logic ensures a streamlined and uniform form submission process.
  • Enhanced user experience with clearer validation and feedback mechanisms.

Step 3: Enhanced Error Handling

• Error Management:
  • Implemented specific error messages based on Firebase error codes.
  • Centralized error handling for authentication processes.
  • Optimized loading state management during form submissions.
• Benefits:
  • Improved user guidance with informative error messages during authentication interactions.
  • Streamlined submission flow with optimized loading state management.

Step 4: Updated UI Elements

• UI Modifications:
  • Aligned UI elements with new form structures and enhanced error handling.
  • Adjusted layout to match onboarding design via layout.tsx.
  • Refined AuthFormHeader and AuthFormFooter components for improved aesthetics.
  • Addressed styling inconsistencies and disparities across login and register pages.
• Benefits:
  • Achieved UI consistency and alignment with the overall onboarding experience.
  • Improved visual appeal and coherency across authentication components and pages.

---

Note: Deferred Framer Motion Integration (Additional Note)

• Deferred Framer Motion integration due to compatibility issues with Next.js 14.
• Highlighted compatibility concerns and potential bugs in an open Github thread (Github Thread Link)
• Noted the feasibility of using Framer Motion in specific instances within the project, maintaining stability until reported issues are resolved.

---

Note: Testing Considerations

Testing for this milestone will be completed toward the end. Reference the milestone ticket for specific testing-related details: Testing - User Profile Management and Onboarding

---

Conclusion:

This pull request consolidates significant improvements in form handling, error management, and UI enhancements across authentication components. The changes aim to elevate user experience, streamline form interactions, and ensure a consistent visual interface in line with the overall application design.

---

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ztm-ready-portfolio-project	✅ Ready (Inspect)	Visit Preview	Dec 10, 2023 10:59pm

[DevonGifford]

⚠Please note :

Expect the Playwright CI/CD checks to fail until the following ticket has been resolved.

• Integrate End-to-End Tests with CI/CD Pipeline #14