Login Page

File Information

• Path: pages/index.vue
• Route: /
• Middleware: guestCheck
• Layout: default

Purpose

The login page provides user authentication functionality for both regular users and support platform users. It supports email/password authentication and Google OAuth integration.

Key Features

1. Dual Login Modes

   • Regular user login (email/password)
   • Support platform login (email/PIN)

2. Google OAuth Integration

   • Sign in with Google button
   • Redirects to Google authentication

3. Form Validation

   • Email format validation
   • Password length validation (minimum 6 characters)
   • PIN validation (6 digits for support platform)

4. Mobile App Detection

   • Detects iOS/Android devices
   • Redirects to mobile app if available

5. Session Management

   • Checks for existing sessions
   • Prevents multiple simultaneous logins

Components Used

• LogoIcon - Application logo
• GoogleIcon - Google sign-in icon
• LoginElementLeft - Decorative left element
• LoginElementRight - Decorative right element
• SupportIcon - Support platform icon (if enabled)

Data Properties

{
  contentLoading: boolean,      // Initial content loading state
  loading: boolean,            // Form submission loading state
  form: {
    email: string,             // User email
    password: string            // User password or PIN
  },
  errors: {
    email: string,             // Email validation error
    password: string,          // Password validation error
    pin: string                // PIN validation error (support platform)
  }
}

Computed Properties

• IS_SUPPORT_PLATFORM - Checks if support platform mode is enabled
• userAgentAndLocationDetail - Browser and location info (support platform)
• disableSubmitBtn - Determines if submit button should be disabled

Methods

handleSubmit()

Handles form submission:

• Validates form data
• Calls authentication API
• Sets authentication token
• Sets current workspace
• Redirects to next step

googleSignIn()

Initiates Google OAuth flow:

• Checks for existing session
• Redirects to Google authentication URL

validateEmail()

Validates email format using utility function.

validatePass()

Validates password:

• Checks minimum length (6 characters)
• Sets error message if invalid

validatePin()

Validates PIN (support platform):

• Checks length (6 digits)
• Sets error message if invalid

getBrowserDetail()

Fetches browser and location information for analytics (support platform).

API Endpoints

• POST /login - Regular user login
• POST /support-login - Support platform login
• GET /api/browser-os - Browser and location detection

User Flow

1. User enters email and password
2. Form validation occurs
3. On submit, authentication request is sent
4. On success:
   • Authentication token is stored
   • Current workspace is set
   • User is redirected to dashboard
5. On error:
   • Error message is displayed
   • User can retry

Environment Variables

• IS_SUPPORT_PLATFORM - Enables support platform mode
• GOOGLE_AUTH_URL - Google OAuth redirect URL
• MOBILE_APP_DOMAIN - Mobile app deep link domain

Notes for Development

• The page uses skeleton loaders for better UX during initial load
• Session detection prevents multiple simultaneous logins
• Mobile app detection redirects users to native app when available
• Support platform mode changes the UI and validation logic
• Browser details are collected for analytics in support platform mode

Related Documentation

• Middleware Documentation - Complete middleware guide
• Common Functions Mixin - Common utilities
• Store Overview - All store modules