Account Management
Overview
Section titled “Overview”The account module provides comprehensive account management including personal info, security, sessions, work hours, and subscription management.
Module path: src/lib/modules/account/
Route: /account
Account Settings Sections
Section titled “Account Settings Sections”Avatar & Cover Photo
Section titled “Avatar & Cover Photo”- Drag-and-drop upload
- Interactive crop and position adjustment (drag to reposition, scroll to zoom)
- Supported formats: JPEG, PNG, GIF (max 5MB)
- Scale and position saved to user document
- Firebase Storage integration with progress tracking
Personal Information
Section titled “Personal Information”- Display Name (required)
- Username with rate limiting (3 changes per 30 days)
- Language selector
- Timezone selector
- Country/Location selector
- Username change confirmation dialog with remaining changes counter
Password Management
Section titled “Password Management”- Current password verification
- New password with 5-level strength indicator
- Password confirmation matching
- Forgot password option (sends email reset)
- Auto logout after 5 seconds post-change
Email Management
Section titled “Email Management”- Email update with validation
- Uniqueness check
- Not available for Google/OAuth-only accounts
- Auto logout after change for security
Session Management
Section titled “Session Management”- View active sessions across devices
- Session status: online / away / offline
- Device information: browser, OS, timezone
- Last seen timestamps
- “Log out all sessions” button
- Session details modal
- Cloud function:
revokeAllUserSessionsCallable
Work Hours
Section titled “Work Hours”- Default schedule: Mon-Fri, 9am-4pm
- Custom schedule option
- Multiple time slots per day
- Add/remove time slots per day
- Day-based configuration (mon-sun)
Current Subscription
Section titled “Current Subscription”- Plan name and status badge
- Storage limit display
- Monthly price
- Billing period dates
- Upgrade link for free users
- Stripe customer portal integration
Account Deletion
Section titled “Account Deletion”- Danger zone with warning
- Password confirmation (except OAuth users)
- Permanent and irreversible
- Uses
firekitAuth.deleteAccount() - Auto redirect to sign-in
Validation Schema
Section titled “Validation Schema”File: src/lib/modules/account/schemas/personal-info.ts
personalInfoSchema = { displayName: string // required, non-empty userName: string // required, non-empty location: string // required timeZone: string // required language: string // required}Components
Section titled “Components”Account Settings
Section titled “Account Settings”| Component | Purpose |
|---|---|
avatar.svelte | Avatar upload and adjustment |
cover-photo.svelte | Cover photo management |
personal-info.svelte | Personal details form |
password-change.svelte | Password update with strength meter |
email-user.svelte | Email change |
sessions.svelte | Session management |
work-hours.svelte | Work schedule setup |
current-subscription.svelte | Plan display |
delete-account.svelte | Account deletion |
two-step-verification.svelte | 2FA settings |
disable-ads.svelte | Ad preferences |
log-out-sessions.svelte | Bulk session logout |
Billing Components
Section titled “Billing Components”| Component | Purpose |
|---|---|
current-plan.svelte | Active plan details |
billing-header.svelte | Billing page header |
billing-history.svelte | Invoice history |
payment-methods.svelte | Saved cards |
manage-cards-dialog.svelte | Card management |
card-form-dialog.svelte | Add new card |
gift-dialog.svelte | Gift subscription |
view-method.svelte | Payment method details |