Appearance

Profile ​

File Information ​

  • Path: pages/profile.vue
  • Route: /profile
  • Purpose: User profile management and account settings

Overview ​

The Profile page allows authenticated users to view and manage their personal profile information, including name, email, password, preferences, and account settings.

Key Features ​

  1. Profile Information

    • Display user name and email
    • Profile picture upload
    • Personal information editing
    • Account details

  2. Password Management

    • Change password
    • Password strength validation
    • Password confirmation
    • Security settings

  3. Preferences

    • Notification preferences
    • Email preferences
    • Display preferences
    • Language settings

  4. Account Settings

    • Account status
    • Email verification status
    • Two-factor authentication
    • Account deletion

Components Used ​

  • Profile form components
  • Password change components
  • Preference settings components
  • Avatar upload components

Data Properties ​

javascript
{
  user: null,           // Current user object
  loading: false,      // Loading state
  saving: false,      // Saving state
  profileForm: {      // Profile form data
    name: '',
    email: '',
    phone: '',
    avatar: null
  },
  passwordForm: {     // Password form data
    current_password: '',
    new_password: '',
    confirm_password: ''
  }
}

Computed Properties ​

currentUser ​

Returns current authenticated user

isEmailVerified ​

Checks if email is verified

canChangePassword ​

Checks if user can change password

Methods ​

loadProfile() ​

Loads user profile:

  • Fetches user data from API
  • Updates form data
  • Handles errors

saveProfile() ​

Saves profile changes:

  • Validates form data
  • Updates profile via API
  • Refreshes user data
  • Shows success message

changePassword() ​

Changes password:

  • Validates password form
  • Validates password strength
  • Updates password via API
  • Shows success message
  • Clears form

uploadAvatar(file) ​

Uploads profile picture:

  • Uploads avatar file
  • Updates profile picture URL
  • Handles upload errors

API Endpoints ​

Get User Profile ​

  • Endpoint: GET /user/profile
  • Response: User profile object

Update Profile ​

  • Endpoint: PUT /user/profile/update
  • Request Body: Profile update data
  • Response: Updated profile object

Change Password ​

  • Endpoint: POST /user/change-password
  • Request Body: Password change data
  • Response: Success confirmation

Upload Avatar ​

  • Endpoint: POST /user/upload-avatar
  • Request: FormData with avatar file
  • Response: Avatar URL

User Flow ​

  1. User navigates to profile page
  2. Page loads user profile data
  3. User views profile information
  4. User edits profile details
  5. User changes password (if needed)
  6. User uploads avatar (if needed)
  7. Changes are saved
  8. Success message displayed

Notes for Development ​

  • Page requires authentication
  • Profile changes update immediately
  • Password change requires current password
  • Avatar upload uses FormData
  • Email verification status displayed