Appearance

Profile Management ​

File Information ​

  • Path: app/pages/[brand_name]/profile.vue, app/composables/core/pages/useProfile.ts
  • Purpose: User profile management system

Overview ​

The Profile Management system allows users to view and manage their profile information. It provides comprehensive profile management features including profile image upload, name editing, notification preferences, and password change functionality.

Architecture ​

System Components ​

  1. Profile Page: Display and edit user profile
  2. Profile Image Upload: Upload and manage profile images
  3. Profile Editing: Edit profile information
  4. Notification Settings: Manage notification preferences
  5. Password Change: Change user password

Key Features ​

1. Profile Display ​

  • User profile image (with avatar fallback)
  • User name and email display
  • Profile image upload
  • Image preview
  • Profile information display

2. Profile Editing ​

  • Full name editing
  • Real-time validation
  • Form state management
  • Cancel functionality
  • Save changes

3. Profile Image Upload ​

  • Image file selection
  • Image preview before upload
  • File type validation (images only)
  • File size validation (4MB max)
  • Image upload with progress
  • Cache-busting for updated images

4. Notification Settings ​

  • Digital Asset Management email notification toggle
  • Tooltip with explanation
  • Preference persistence
  • Real-time preference updates

5. Password Change ​

  • Old password input
  • New password input
  • Confirm password input
  • Password validation (minimum 6 characters)
  • Password match validation
  • Form validation

File Structure ​

Core Files ​

Vue Page Files (.vue) ​

  • app/pages/[brand_name]/profile.vue - Profile page
    • Profile display
    • Profile editing
    • Image upload
    • Notification settings
    • Password change

Route: /{brand_name}/profile

Composables ​

  • app/composables/core/pages/useProfile.ts - Profile composable
    • Profile data management
    • Profile updates
    • Image upload handling
    • Password change
    • Form validation

API ​

  • app/composables/api/useProfileApi.ts - Profile API operations
    • Get profile
    • Update profile
    • Change password

Data Flow ​

Profile Loading ​

  1. Page mounts
  2. User profile data fetched from auth store
  3. Form fields populated
  4. Avatar character set (if no image)
  5. Initial data stored for comparison

Profile Update ​

  1. User edits profile information
  2. Form validates in real-time
  3. User clicks save
  4. FormData built with profile data
  5. API called to update profile
  6. Success message displayed
  7. Profile image updated with cache-busting
  8. Events emitted for header updates

Password Change ​

  1. User enters old and new passwords
  2. Form validates in real-time
  3. User clicks change password
  4. API called to change password
  5. Success message displayed
  6. Form reset

User Interactions ​

  1. Profile Image

    • Click to upload new image
    • Image preview before upload
    • Validation (image type, 4MB max)

  2. Profile Editing

    • Edit full name
    • Real-time validation
    • Save changes
    • Cancel changes (resets form)

  3. Notification Settings

    • Toggle notification preference
    • Tooltip with explanation
    • Preference saved with profile

  4. Password Change

    • Enter old password
    • Enter new password
    • Confirm new password
    • Real-time validation
    • Submit password change

Form Validation ​

Name Validation ​

  • Required field
  • Format validation using validateFullName helper
  • Real-time error display

Password Validation ​

  • All fields required
  • Password minimum 6 characters
  • Confirm password must match password
  • Real-time validation

Image Validation ​

  • File must be an image
  • File size must be ≤ 4MB
  • Creates data URL preview

API Endpoints ​

Update User Profile ​

  • Endpoint: PUT /user/profile (via updateUserProfile())
  • Request: FormData with id, instance_id, profile_image, name, phone, enable_notification
  • Response: Updated user data with profile_image

Change User Password ​

  • Endpoint: POST /user/change-password (via changeUserPasswordApi())
  • Request: old_password, password
  • Response: Success message

Performance Optimizations ​

  1. Image Preview: Uses FileReader for client-side preview
  2. Cache Busting: Adds timestamp to image URL to force refresh
  3. Form State: Tracks initial state to detect changes
  4. Validation: Real-time validation prevents unnecessary API calls