Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,244 @@
+# Task 18: User Profile Management with Avatar Upload and Password Change
+
+## Implementation Summary
+
+This document summarizes the implementation of user profile management features including avatar upload and password change functionality.
+
+## Completed Subtasks
+
+### 18.1: Add avatar field to user model and create upload endpoints ✅
+
+**Backend Changes:**
+- Added `avatar_url` field to User model (`backend/models/user.py`)
+- Created migration script (`backend/migrate_avatar_field.py`)
+- Added avatar upload endpoint: `POST /users/me/avatar`
+- Added avatar removal endpoint: `DELETE /users/me/avatar`
+- Added password change endpoint: `PUT /users/me/password`
+- Updated UserResponse schema to include `avatar_url` field
+- Added UserPasswordChange schema for password change requests
+
+**Features:**
+- Image validation (format: jpg, jpeg, png, gif, webp; max size: 5MB)
+- Automatic image processing (resize and crop to 200x200)
+- Unique filename generation to prevent conflicts
+- Storage in `backend/uploads/avatars` directory
+- Old avatar cleanup when uploading new one
+
+### 18.2: Create password change endpoint ✅
+
+**Backend Changes:**
+- Endpoint: `PUT /users/me/password`
+- Requires current password for authentication
+- Validates new password (minimum 8 characters)
+- Hashes password with bcrypt before storing
+- Returns success message after update
+
+### 18.3: Create avatar upload component ✅
+
+**Frontend Component:** `frontend/src/components/user/AvatarUpload.vue`
+
+**Features:**
+- Drag-and-drop file upload
+- Click-to-browse file selection
+- Real-time image preview
+- Client-side validation (format and size)
+- Upload progress indicator
+- Current avatar display with remove button
+- Initials-based placeholder when no avatar
+- Success/error toast notifications
+
+**UI Components Created:**
+- Progress component (`frontend/src/components/ui/progress/Progress.vue`)
+
+### 18.4: Create password change component ✅
+
+**Frontend Component:** `frontend/src/components/user/PasswordChangeForm.vue`
+
+**Features:**
+- Current password field with show/hide toggle
+- New password field with show/hide toggle
+- Confirm password field with real-time matching validation
+- Password requirements display with visual indicators:
+  - At least 8 characters
+  - One uppercase letter
+  - One lowercase letter
+  - One number
+  - One special character
+- Password strength indicator (weak, medium, strong)
+- Real-time validation for all fields
+- Submit button disabled until all validations pass
+- Success toast after password change
+- Clear error messages for validation failures
+
+### 18.5: Update profile page with avatar and password management ✅
+
+**Updated Component:** `frontend/src/views/ProfileView.vue`
+
+**Changes:**
+- Added avatar management section with AvatarUpload component
+- Added password management card with PasswordChangeForm component
+- Updated profile header to display user avatar
+- Added section separators for visual organization
+- Implemented avatar update and removal handlers
+- Implemented password change handler
+
+**Updated Component:** `frontend/src/components/layout/AppHeader.vue`
+
+**Changes:**
+- Updated user menu trigger to display avatar instead of icon
+- Added Avatar component with image display
+- Shows user initials as fallback
+- Displays avatar from backend URL
+
+### 18.6: Update user service and store for avatar and password ✅
+
+**Service Updates:** `frontend/src/services/user.ts`
+
+**New Methods:**
+- `uploadAvatar(file: File)`: Upload user avatar image
+- `removeAvatar()`: Remove user avatar
+- `changePassword(passwordData)`: Change user password
+
+**Type Updates:** `frontend/src/types/auth.ts`
+
+**Changes:**
+- Added `avatar_url?: string | null` to User interface
+
+**Model Updates:** `backend/models/__init__.py`
+
+**Changes:**
+- Added Notification and Activity model imports to fix database creation
+
+## API Endpoints
+
+### Avatar Management
+```
+POST   /users/me/avatar     - Upload avatar (multipart/form-data)
+DELETE /users/me/avatar     - Remove avatar
+```
+
+### Password Management
+```
+PUT    /users/me/password   - Change password
+```
+
+## Database Schema Changes
+
+### Users Table
+```sql
+ALTER TABLE users ADD COLUMN avatar_url TEXT;
+```
+
+## File Structure
+
+```
+backend/
+├── models/
+│   └── user.py                          # Added avatar_url field
+├── routers/
+│   └── users.py                         # Added avatar and password endpoints
+├── schemas/
+│   └── user.py                          # Added avatar_url to UserResponse
+├── uploads/
+│   └── avatars/                         # Avatar storage directory
+└── migrate_avatar_field.py              # Migration script
+
+frontend/
+├── src/
+│   ├── components/
+│   │   ├── user/
+│   │   │   ├── AvatarUpload.vue         # New component
+│   │   │   └── PasswordChangeForm.vue   # New component
+│   │   ├── layout/
+│   │   │   └── AppHeader.vue            # Updated with avatar display
+│   │   └── ui/
+│   │       └── progress/
+│   │           ├── Progress.vue         # New component
+│   │           └── index.ts
+│   ├── services/
+│   │   └── user.ts                      # Added avatar and password methods
+│   ├── types/
+│   │   └── auth.ts                      # Added avatar_url to User type
+│   └── views/
+│       └── ProfileView.vue              # Updated with avatar and password sections
+└── docs/
+    └── task-18-implementation-summary.md
+```
+
+## Testing Checklist
+
+### Backend Testing
+- [ ] Test avatar upload with valid image formats
+- [ ] Test avatar upload with invalid formats (should fail)
+- [ ] Test avatar upload with oversized files (should fail)
+- [ ] Test avatar removal
+- [ ] Test password change with correct current password
+- [ ] Test password change with incorrect current password (should fail)
+- [ ] Test password change with weak password (should fail)
+- [ ] Verify avatar URL is returned in user profile responses
+- [ ] Verify old avatar is deleted when uploading new one
+
+### Frontend Testing
+- [ ] Test avatar upload via drag-and-drop
+- [ ] Test avatar upload via file browser
+- [ ] Test avatar preview before upload
+- [ ] Test avatar upload progress indicator
+- [ ] Test avatar removal
+- [ ] Test avatar display in profile page
+- [ ] Test avatar display in app header
+- [ ] Test avatar display in user menu
+- [ ] Test password change with all validations
+- [ ] Test password strength indicator
+- [ ] Test password requirements display
+- [ ] Test password matching validation
+- [ ] Test show/hide password toggles
+- [ ] Test error handling for all operations
+- [ ] Test success notifications
+
+## Known Issues
+
+### TypeScript Type Caching
+- TypeScript may cache the old User type without avatar_url
+- Solution: Restart TypeScript server or reload VS Code window
+- The type definition has been updated correctly in `frontend/src/types/auth.ts`
+
+## Security Considerations
+
+- Avatar uploads are validated for file type and size
+- Images are processed server-side to prevent malicious content
+- Passwords are hashed with bcrypt before storage
+- Current password is required for password changes
+- Password strength requirements are enforced
+- File uploads use unique filenames to prevent conflicts
+- Old avatars are cleaned up to prevent storage bloat
+
+## Future Enhancements
+
+- [ ] Add image cropping interface for avatar upload
+- [ ] Add avatar image optimization (compression)
+- [ ] Add support for more image formats (SVG, AVIF)
+- [ ] Add password history to prevent reuse
+- [ ] Add two-factor authentication
+- [ ] Add email verification for password changes
+- [ ] Add avatar upload from URL
+- [ ] Add avatar templates/presets
+- [ ] Add password strength meter with more detailed feedback
+- [ ] Add "forgot password" functionality
+
+## Requirements Satisfied
+
+This implementation satisfies the following requirements from the spec:
+
+- **Requirement 1.2.1**: Profile page accessible to all registered users
+- **Requirement 1.2.2**: Allow users to upload profile avatar image
+- **Requirement 1.2.3**: Accept common image formats for avatars
+- **Requirement 1.2.4**: Resize and crop uploaded avatars to standard size
+- **Requirement 1.2.5**: Limit avatar file size to maximum of 5MB
+- **Requirement 1.2.6**: Display user's avatar in application header and profile page
+- **Requirement 1.2.7**: Provide password change form requiring current password
+- **Requirement 1.2.8**: Require current password for authentication
+- **Requirement 1.2.9**: Require new password to be entered twice for confirmation
+- **Requirement 1.2.10**: Validate new password meets minimum security requirements
+- **Requirement 1.2.11**: Display password strength indicators during password entry
+- **Requirement 1.2.12**: Display confirmation message when password is successfully changed
+- **Requirement 1.2.13**: Allow users to remove their avatar and revert to default placeholder