Appearance

Reset Password Page ​

File Information ​

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

Purpose ​

The Reset Password page allows users to set a new password after clicking the password reset link sent to their email. Users must provide a valid reset token and set a new password that meets the system requirements.

Key Features ​

  1. Password Validation

    • Validates password strength
    • Confirms password match
    • Shows password requirements
    • Uses Vuelidate for validation

  2. Token Validation

    • Validates reset token from URL query parameter
    • Checks token expiration
    • Redirects if token is invalid

  3. Skeleton Loading

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

  4. Form Submission

    • Sends new password to backend
    • Shows loading state during submission
    • Redirects to login on success

  5. User Information Display

    • Shows email address of user resetting password
    • Provides context for the user

Components Used ​

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

Data Properties ​

javascript
{
  contentLoading: boolean,      // Initial content loading state
  loading: boolean,            // Form submission loading state
  user: {
    email: string,              // User email (from token)
    password: string,           // New password
    password_confirmation: string // Password confirmation
  },
  token: string,               // Reset token from URL
  errors: {
    password: string,           // Password validation error
    password_confirmation: string // Confirmation validation error
  }
}

Validation Rules ​

Password Validation ​

  • Required field
  • Minimum length (typically 6-8 characters)
  • Must match confirmation
  • May include strength requirements
javascript
validations: {
  user: {
    password: {
      required,
      minLength: minLength(6)
    },
    password_confirmation: {
      required,
      sameAsPassword: sameAs('password')
    }
  }
}

Computed Properties ​

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

Methods ​

onSubmit() ​

Handles form submission:

  • Validates form data using Vuelidate
  • Checks if passwords match
  • Validates password strength
  • Calls password reset API endpoint with token
  • Redirects to login on success
  • Shows error message on failure
  • Handles loading state

validatePassword() ​

Validates password:

  • Checks minimum length
  • Validates password strength
  • Sets error message if invalid
  • Returns validation result

validatePasswordConfirmation() ​

Validates password confirmation:

  • Checks if passwords match
  • Sets error message if mismatch
  • Returns validation result

validateToken() ​

Validates reset token:

  • Extracts token from URL query parameter
  • Validates token format
  • Checks token expiration
  • Fetches user information if token is valid
  • Redirects if token is invalid

API Endpoints ​

  • POST /reset-password - Reset password with token

    • Request Body:
      json
      {
  "token": "reset_token_from_email",
  "email": "[email protected]",
  "password": "new_password",
  "password_confirmation": "new_password"
}
    • Response:
      json
      {
  "message": "Password reset successfully",
  "status": "success"
}

  • GET /verify-reset-token?token=xxx - Verify reset token (optional)

    • Validates token before showing form
    • Returns user email if token is valid

User Flow ​

  1. User clicks password reset link from email
  2. User is redirected to /reset-password?token=xxx
  3. Page validates token and loads user email
  4. User enters new password and confirmation
  5. Form validation occurs on blur/submit
  6. On submit:
    • Loading state is shown
    • API request is sent with token and new password
    • On success: User is redirected to login page
    • On error: Error message is displayed
  7. User can log in with new password

Error Handling ​

  • Invalid Token: Redirects to forgot password page
  • Expired Token: Shows error message with link to request new reset link
  • Password Mismatch: Shows validation error
  • Weak Password: Shows password strength requirements
  • 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

Security Considerations ​

  • Reset tokens are single-use and expire after a set time
  • Tokens are validated server-side
  • Password is hashed before storage
  • Rate limiting on backend to prevent brute force
  • CSRF protection via Nuxt.js
  • Password requirements enforced

Environment Variables ​

  • API_BASE_URL - Backend API base URL
  • PASSWORD_RESET_EXPIRY - Password reset link expiration time (typically 1-24 hours)
  • MIN_PASSWORD_LENGTH - Minimum password length requirement

Notes for Development ​

  • The page uses skeleton loaders for better UX during initial load
  • Password validation uses Vuelidate for consistent validation
  • Token validation happens on page load
  • Error messages are user-friendly
  • The page redirects to login after successful password reset
  • Password fields use type="password" for security