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:
  ```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!** 🚀