Appearance

Forgot Password Page ​

File Information ​

  • Path: app/pages/[brand_name]/forgot-password.vue
  • Route: /{brand_name}/forgot-password
  • Purpose: Password recovery page for users who forgot their password
  • Layout: login-layout
  • Middleware: check-url, redirect-if-logged-in

Overview ​

The Forgot Password page allows users to request a password reset link via email. Users enter their email address, and if the email exists in the system, they receive a password reset link.

Key Features ​

  1. Email Input

    • Email address input field
    • Real-time email validation
    • Required field validation
    • Error message display

  2. Form Validation

    • Email format validation (regex pattern)
    • Required field validation
    • Submit button state management
    • Loading state during submission

  3. Error Handling

    • Email validation errors
    • API error handling
    • User-friendly error messages
    • Network error handling

  4. Navigation

    • Back to login link
    • Automatic redirect after success
    • Brand name preserved in navigation

Components Used ​

  • v-text-field - Vuetify text input component
  • v-btn - Vuetify button component
  • v-progress-circular - Loading spinner
  • v-skeleton-loader - Skeleton loader for initial state
  • NuxtLink - Nuxt link component
  • AsyncIcon - Async icon component

Composables Used ​

  • useAuthApi() - Authentication API (app/composables/api/useAuthApi.ts)
  • useSnackbar() - Snackbar notifications
  • useHelpers() - Helper functions

Data Properties ​

Reactive Data ​

typescript
{
  form: {
    email: string        // User email address
  },
  contentLoading: boolean,  // Initial content loading state
  loading: boolean,          // Form submission loading state
  emailError: string | null  // Email validation error
}

Computed Properties ​

brandName ​

Returns brand name from route parameters.

typescript
computed(() => 
  (route.params.brand_name as string) || (route.query.brand_name as string)
)

disableSubmitBtn ​

Determines if submit button should be disabled.

typescript
computed(() => {
  const hasError = !!emailError.value
  const emptyEmail = !form.value.email.trim()
  return hasError || emptyEmail || loading.value
})

Returns: boolean - True if form is invalid or loading

Methods ​

validateEmail() ​

Validates email format and required field.

typescript
function validateEmail() {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  
  if (!form.value.email.trim()) {
    emailError.value = "Email address is required"
    return
  }
  
  if (!emailRegex.test(form.value.email)) {
    emailError.value = "Please enter valid email address."
    return
  }
  
  emailError.value = null
}

Validation Rules:

  • Email is required
  • Must match email regex pattern
  • Sets emailError on validation failure

handleSubmit() ​

Handles forgot password form submission.

typescript
async function handleSubmit() {
  validateEmail()
  
  if (disableSubmitBtn.value) return
  
  loading.value = true
  
  try {
    await authApi.forgotPassword(form.value.email, brandName.value)
    snackbar.showSuccess(
      "You will receive a link to reset your password to your email!"
    )
    await navigateTo(`/${brandName.value}/login`)
  } catch (err: any) {
    const message = err.data?.message || err.message || "Something went wrong"
    snackbar.showError(message)
  } finally {
    loading.value = false
  }
}

Flow:

  1. Validates email
  2. Checks if form is valid
  3. Calls forgot password API
  4. Shows success message
  5. Redirects to login page
  6. Handles errors with user feedback

Error Handling:

  • Displays error in snackbar notification
  • Handles network and API errors
  • User-friendly error messages

User Interactions ​

  1. Form Input

    • Enter email address
    • Real-time validation on input
    • Error display on validation failure

  2. Form Submission

    • Click "Send Password Reset Link" button
    • Form validates before submission
    • Loading state during API call

  3. Navigation

    • Click "Back to Login" link to navigate to login page
    • Automatic redirect to login after success

Styling ​

  • Uses scoped styles from @/assets/scss/login.scss
  • Form layout styles
  • Input field styles with validation states
  • Button styles with loading states
  • Error message styles
  • Skeleton loader styles

Watchers ​

None - uses event handlers (@input) for validation.

Lifecycle Hooks ​

onMounted ​

Initializes content loading state.

typescript
onMounted(() => {
  nextTick(() => (contentLoading.value = false))
})

Purpose: Hides skeleton loader after component mounts.

API Endpoints ​

Forgot Password ​

  • Endpoint: POST /forgot-password (via authApi.forgotPassword())
  • Request Body:
    typescript
    {
  email: string
}
  • Parameters:
    typescript
    {
  brand_name: string  // Brand name from route
}
  • Response: Success message

User Flow ​

  1. User navigates to /{brand_name}/forgot-password
  2. Middleware checks if user is already authenticated
  3. If authenticated, redirects to dashboard
  4. If not authenticated, displays forgot password form
  5. User enters email address
  6. Form validates on input
  7. User clicks "Send Password Reset Link" button
  8. System sends password reset email
  9. On success:
    • Success message displayed
    • Redirect to login page
  10. On failure:
    • Error message displayed
    • User can retry

Security Considerations ​

  • Email validation prevents invalid submissions
  • No indication if email exists (prevents email enumeration)
  • Password reset link sent to registered email only
  • Link expires after a certain time period

Notes for Development ​

  • Page requires check-url middleware to validate brand name
  • Uses redirect-if-logged-in middleware to prevent authenticated access
  • Email validation uses regex pattern
  • Success message indicates email will be sent (even if email doesn't exist for security)
  • Form submission uses @submit.prevent to prevent default
  • Loading state prevents multiple submissions