Profile Edit Widget Web Component

Note: This example demonstrates the custom web component for the profile edit widget. Replace the placeholder token with a real authentication token for your user to enable profile editing functionality.

Basic Usage

Include the script and use the custom element:

<!-- Include the web component script --> <script src="/js/profile-edit-widget.js"></script> <!-- Use the custom element --> <profile-edit-widget api-url="https://your-domain.com" auth-token="your-jwt-token" width="600" height="800"> </profile-edit-widget>

Attributes

The profile edit widget supports the following attributes:

Attribute Description Default Required
api-url Base URL of your API server Current origin No
auth-token JWT authentication token None Yes
width Widget width in pixels 600 No
height Widget height in pixels 800 No
theme Widget theme (light/dark) light No

Different Sizes

Examples with different widget sizes:

<!-- Compact size --> <profile-edit-widget api-url="https://your-domain.com" auth-token="your-jwt-token" width="500" height="700"> </profile-edit-widget> <!-- Large size --> <profile-edit-widget api-url="https://your-domain.com" auth-token="your-jwt-token" width="800" height="900"> </profile-edit-widget>

Integration Examples

Common integration patterns:

<!-- React/JSX --> <profile-edit-widget api-url={process.env.REACT_APP_API_URL} auth-token={userToken} width="600" height="800" /> <!-- Vue.js --> <profile-edit-widget :api-url="apiUrl" :auth-token="authToken" width="600" height="800"> </profile-edit-widget> <!-- Angular --> <profile-edit-widget [attr.api-url]="apiUrl" [attr.auth-token]="authToken" width="600" height="800"> </profile-edit-widget>

Error Handling

The widget handles various error states:

  • Missing auth token: Shows authentication required message
  • Invalid token: Shows authentication error
  • Network errors: Shows connection error message
  • Server errors: Shows server error message
<!-- Widget without auth token (will show error) --> <profile-edit-widget api-url="https://your-domain.com" width="600" height="800"> </profile-edit-widget>

Features

The profile edit widget includes:

  • Profile Picture: URL input for profile image
  • Basic Info: Username, first name, last name, middle name
  • Contact Info: Email and phone number
  • About Section: Bio/description text area
  • Notification Preferences: Email, SMS, push notifications, location
  • Real-time Validation: Form validation and error handling
  • Success Feedback: Confirmation messages for updates
  • Responsive Design: Works on desktop and mobile