Appearance

Forgot Password Page ​

File Information ​

  • Path: pages/forgot-password.vue
  • Route: /forgot-password
  • Middleware: guestCheck
  • Layout: outerLayout or default

Purpose ​

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, a password reset link is sent to their email address.

Key Features ​

  1. Email Validation

    • Validates email format using Vuelidate
    • Shows error messages for invalid email
    • Required field validation

  2. Skeleton Loading

    • Shows skeleton loaders during initial page load
    • Improves perceived performance

  3. Form Submission

    • Sends password reset request to backend
    • Shows loading state during submission
    • Displays success/error messages

  4. User Feedback

    • Clear error messages
    • Success confirmation
    • Link to return to login page

Components Used ​

  • v-skeleton-loader - Loading skeleton components
  • v-form - Form wrapper with validation
  • v-text-field - Email input field
  • v-btn - Submit button
  • Custom form styling components

Data Properties ​

javascript
{
  contentLoading: boolean,      // Initial content loading state
  loading: boolean,            // Form submission loading state
  form: {
    email: string              // User email address
  },
  errors: {
    email: string              // Email validation error
  }
}

Validation Rules ​

Email Validation ​

  • Required field
  • Must be valid email format
  • Uses Vuelidate for validation
javascript
validations: {
  form: {
    email: {
      required,
      email
    }
  }
}

Computed Properties ​

  • emailErrorMessages - Returns email validation error messages
  • disableSubmitBtn - Determines if submit button should be disabled based on validation state

Methods ​

handleSubmit() ​

Handles form submission:

  • Validates form data using Vuelidate
  • Checks if email is valid
  • Calls password reset API endpoint
  • Shows success message on success
  • Shows error message on failure
  • Handles loading state

validateEmail() ​

Validates email format:

  • Uses utility function to validate email
  • Sets error message if invalid
  • Returns validation result

API Endpoints ​

  • POST /forgot-password - Request password reset link
    • Request Body:
      json
      {
  "email": "[email protected]"
}
    • Response:
      json
      {
  "message": "Password reset link sent to your email",
  "status": "success"
}

User Flow ​

  1. User navigates to /forgot-password
  2. User enters email address
  3. Form validation occurs on blur/submit
  4. On submit:
    • Loading state is shown
    • API request is sent
    • On success: Success message is displayed
    • On error: Error message is displayed
  5. User receives email with reset link (if email exists)
  6. User can return to login page

Error Handling ​

  • Invalid Email Format: Shows validation error message
  • Email Not Found: Shows generic message (for security, doesn't reveal if email exists)
  • Network Error: Shows error message with retry option
  • Server Error: Shows error message

Styling ​

  • Uses custom CSS classes:
    • signin-screen-body - Main container
    • form-group - Form field container
    • form-label - Label styling
    • form-controls - Input field styling
    • btn-primary - Primary button styling
    • forgotLink - Link styling

Security Considerations ​

  • Does not reveal if email exists in system (prevents email enumeration)
  • Rate limiting on backend to prevent abuse
  • CSRF protection via Nuxt.js
  • Password reset links expire after a set time

Environment Variables ​

  • API_BASE_URL - Backend API base URL
  • PASSWORD_RESET_EXPIRY - Password reset link expiration time

Notes for Development ​

  • The page uses skeleton loaders for better UX during initial load
  • Email validation uses Vuelidate for consistent validation
  • Error messages are user-friendly and don't reveal system details
  • The page redirects to login after successful submission
  • Password reset links are time-limited for security