tabungin/PROFILE_FIXES_FINAL.md

✅ 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:

  {
    "hasGoogleAuth": boolean,
    "hasPassword": boolean
  }
  

Backend Endpoint Needed:

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

@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

@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

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! 🚀