Streamlining Frontend Identity Flows in Ryuu-no-Mi

Refactoring Frontend Architecture

In our ongoing work on the Ryuu-no-Mi/visitALO_Front project, we recently focused on cleaning up our component structure and enhancing the robustness of our user authentication flows. As our application grows, maintaining a consistent interface and reliable form validation becomes critical to the developer experience and end-user trust.

The Problem: Component Bloat and Inconsistent Validation

Previously, our identity modules suffered from fragmented logic. We were seeing duplicated layout patterns across our authentication views, and form validation logic was tightly coupled with individual component templates. This led to:

1. Difficulty in maintaining a consistent design system across login and signup.
2. Fragile validation rules that were hard to test in isolation.
3. Routing logic that was becoming overly verbose in the main navigation files.

The Solution: Modularization and Centralized Validation

We decided to refactor by extracting the common UI elements into reusable components and separating validation concerns. By creating an AppBar and specific Logo components, we simplified our templates. We also centralized our validation logic using TypeScript interfaces.

Here is an example of how we structured our new validation approach for the signup form:

interface SignupRules {
  isValidEmail: (email: string) => boolean;
  isValidPassword: (password: string) => boolean;
}

export const useSignupValidation = (): SignupRules => ({
  isValidEmail: (email) => /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email),
  isValidPassword: (password) => password.length >= 8
});

This approach allows us to test the validation logic independently of the Vue component lifecycle, ensuring that our authentication flow remains predictable and easy to debug.

Results: Cleaner Logic and Better Routing

By moving towards a modular approach, we achieved three primary goals:

• Unified Design: The new AppBar ensures all authenticated views share a single source of truth for the header.
• Simplified Routing: We cleaned up the routing logic, making it easier to add new views without complex conditional wrappers.
• Testability: Separating validation from the template allowed us to write unit tests for our authentication requirements without mounting the entire component tree.

Getting Started with Component Refactoring

1. Identify Repetitive UI: Look for headers or logos that appear in more than two views.
2. Extract Logic: Move business rules into composables or standalone TypeScript files.
3. Decouple Views: Ensure your components focus on presentation while the logic resides in the controller or dedicated service layers.

Key Insight

Think of your component architecture like a building's electrical system: you shouldn't have to rewire the entire house just to change a light switch. By modularizing your UI and abstracting your validation logic, you create a system that is as adaptable as it is reliable.

Generated with Gitvlg.com