# โœ… Profile Fixes - FINAL ## ๐Ÿ”ง **Fixes Applied:** ### **1. Google Auth Detection Fixed** โœ… **Problem**: Still showing "Change Password" for Google users **Root Cause**: - Was checking `/api/auth/accounts` endpoint (doesn't exist yet) - Fallback logic wasn't working **Solution**: - Changed to use `/api/users/auth-info` endpoint - Backend needs to return: ```json { "hasGoogleAuth": boolean, "hasPassword": boolean } ``` **Backend Endpoint Needed**: ```typescript GET /api/users/auth-info Response: { hasGoogleAuth: boolean, // User has Google OAuth linked hasPassword: boolean // User has password hash (not null) } Logic: - hasGoogleAuth: Check if user has Google OAuth account linked - hasPassword: Check if user.passwordHash !== null ``` --- ### **2. Removed Duplicate Phone Field** โœ… **Problem**: Phone field appears in both: - Edit Profile tab - Security tab (2FA section) **Solution**: - โœ… Removed phone field from 2FA section - โœ… Kept phone field in Edit Profile tab only - โœ… Added phone display in WhatsApp OTP section - โœ… Updated alert message to reference Edit Profile tab **Changes**: - WhatsApp OTP section now shows: "Phone: +1234567890" - Alert: "Please add your phone number in the Edit Profile tab first" - No duplicate input fields --- ## ๐Ÿ“Š **Current Structure:** ### **Edit Profile Tab**: ``` โ”œโ”€โ”€ Avatar (with upload for non-Google) โ”œโ”€โ”€ Name (editable for non-Google) โ”œโ”€โ”€ Email (readonly) โ””โ”€โ”€ Phone Number (editable) โ† ONLY PLACE TO EDIT PHONE ``` ### **Security Tab**: ``` โ”œโ”€โ”€ Change Password / Set Password โ”‚ โ””โ”€โ”€ (conditional based on hasPassword) โ”‚ โ”œโ”€โ”€ Two-Factor Authentication โ”‚ โ”œโ”€โ”€ WhatsApp OTP โ”‚ โ”‚ โ”œโ”€โ”€ Phone: +1234567890 (display only) โ”‚ โ”‚ โ”œโ”€โ”€ Enable/Disable button โ”‚ โ”‚ โ””โ”€โ”€ Alert if no phone โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ Email OTP โ”‚ โ”‚ โ””โ”€โ”€ Enable/Disable button โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ TOTP (Authenticator App) โ”‚ โ””โ”€โ”€ Setup/Disable โ”‚ โ””โ”€โ”€ Danger Zone โ””โ”€โ”€ Delete Account ``` --- ## ๐Ÿ”ง **Backend Requirements:** ### **New Endpoint: GET /api/users/auth-info** ```typescript @Get('auth-info') async getAuthInfo(@CurrentUser() user: User) { // Check if user has Google OAuth const googleAccount = await this.prisma.account.findFirst({ where: { userId: user.id, provider: 'google' } }) return { hasGoogleAuth: !!googleAccount, hasPassword: user.passwordHash !== null } } ``` ### **Existing Endpoint: POST /api/auth/set-password** ```typescript @Post('set-password') async setPassword( @CurrentUser() user: User, @Body() body: { newPassword: string } ) { // Check user doesn't have password if (user.passwordHash !== null) { throw new BadRequestException('User already has a password') } // Hash and set password const hashedPassword = await bcrypt.hash(body.newPassword, 10) await this.prisma.user.update({ where: { id: user.id }, data: { passwordHash: hashedPassword } }) return { success: true } } ``` --- ## โœ… **UI Flow:** ### **Google User Without Password**: 1. Go to Security tab 2. See "Set Password" card 3. See alert: "Your account uses Google Sign-In..." 4. No "Current Password" field 5. Enter New Password + Confirm 6. Click "Set Password" 7. Success! Can now delete account ### **Google User With Password**: 1. Go to Security tab 2. See "Change Password" card 3. See "Current Password" field 4. Enter Current + New + Confirm 5. Click "Update Password" 6. Success! ### **WhatsApp OTP Setup**: 1. Go to Edit Profile tab 2. Add phone number 3. Click "Update" 4. Go to Security tab 5. See WhatsApp OTP section 6. See "Phone: +1234567890" 7. Click "Enable WhatsApp OTP" 8. Enter code 9. Success! --- ## ๐Ÿงช **Testing:** ### **Test 1: Google User Detection** - [ ] Login with Google - [ ] Go to Security tab - [ ] Should see "Set Password" (not "Change Password") - [ ] Should see alert about Google Sign-In - [ ] Should NOT see "Current Password" field ### **Test 2: Set Password** - [ ] Enter new password + confirm - [ ] Click "Set Password" - [ ] Success message appears - [ ] Page reloads - [ ] Now shows "Change Password" - [ ] Now shows "Current Password" field ### **Test 3: Phone Field** - [ ] Go to Edit Profile tab - [ ] See phone field โœ… - [ ] Go to Security tab - [ ] Do NOT see phone input field โœ… - [ ] See phone display in WhatsApp section โœ… ### **Test 4: WhatsApp OTP** - [ ] No phone โ†’ See alert "add phone in Edit Profile tab" - [ ] Add phone in Edit Profile - [ ] Go back to Security - [ ] See "Phone: +1234567890" - [ ] Can enable WhatsApp OTP --- ## โœ… **ESLint**: Clean ```bash npm run lint # โœ“ 0 errors, 0 warnings ``` --- ## ๐Ÿ“ **Summary:** **Fixed**: 1. โœ… Google auth detection (changed endpoint) 2. โœ… Removed duplicate phone field 3. โœ… Added phone display in WhatsApp section 4. โœ… Updated alert messages **Backend Needed**: 1. `GET /api/users/auth-info` - Return hasGoogleAuth and hasPassword 2. `POST /api/auth/set-password` - Create password for Google user **Result**: - โœ… Clean UI (no duplicates) - โœ… Proper Google user detection - โœ… Phone managed in one place - โœ… Clear user guidance **Ready for backend implementation!** ๐Ÿš€