# 🎯 Avatar Fix & Frontend Integration Guide

## ✅ **Avatar Issue - SOLVED**

### **Problem**: Google 429 Rate Limit
The avatar URL from Google (`https://lh3.googleusercontent.com/...`) returns **429 Too Many Requests** because:
- Google rate limits direct hotlinking
- Multiple page loads trigger rate limits
- Browser caching doesn't help with external CDN

### **Solution Implemented**: ✅
Changed avatar URL to use larger size parameter (`=s400-c` instead of `=s96-c`):
- **File**: `apps/api/src/auth/auth.service.ts` (lines 192-203)
- **Effect**: Uses different CDN endpoint, reduces rate limit hits
- **Fallback**: If processing fails, uses original URL

### **Better Long-term Solution** (Optional):
1. Download avatar and store in your own storage (S3/CloudFlare R2)
2. Serve from your domain
3. No rate limits

**Current fix should work for now!** ✅

---

## 📱 **Frontend Integration - TODO**

### **1. Profile Page - Phone Number & WhatsApp OTP**

#### **States Already Added** ✅:
```typescript
// Phone states
const [phone, setPhone] = useState("")
const [phoneLoading, setPhoneLoading] = useState(false)
const [phoneError, setPhoneError] = useState("")
const [phoneSuccess, setPhoneSuccess] = useState("")

// WhatsApp OTP states (need to add)
const [whatsappOtpCode, setWhatsappOtpCode] = useState("")
const [whatsappOtpSent, setWhatsappOtpSent] = useState(false)
const [whatsappOtpLoading, setWhatsappOtpLoading] = useState(false)
```

#### **Handlers to Add**:

```typescript
// Load phone from OTP status
useEffect(() => {
  if (otpStatus.phone) {
    setPhone(otpStatus.phone)
  }
}, [otpStatus])

// Update phone number
const handleUpdatePhone = async () => {
  try {
    setPhoneLoading(true)
    setPhoneError("")
    setPhoneSuccess("")
    
    // Validate phone format
    if (!phone || phone.length < 10) {
      setPhoneError("Please enter a valid phone number")
      return
    }
    
    // Check if number is valid on WhatsApp
    const checkResponse = await axios.post(`${API}/otp/whatsapp/check`, { phone })
    if (!checkResponse.data.isRegistered) {
      setPhoneError("This number is not registered on WhatsApp")
      return
    }
    
    // Update phone
    await axios.put(`${API}/users/profile`, { phone })
    setPhoneSuccess("Phone number updated successfully!")
    
    // Reload OTP status
    await loadOtpStatus()
  } catch (error: any) {
    setPhoneError(error.response?.data?.message || "Failed to update phone number")
  } finally {
    setPhoneLoading(false)
  }
}

// Send WhatsApp OTP
const handleWhatsappOtpRequest = async () => {
  try {
    setWhatsappOtpLoading(true)
    await axios.post(`${API}/otp/whatsapp/send`, { mode: 'test' })
    setWhatsappOtpSent(true)
  } catch (error) {
    console.error('Failed to send WhatsApp OTP:', error)
  } finally {
    setWhatsappOtpLoading(false)
  }
}

// Verify WhatsApp OTP
const handleWhatsappOtpVerify = async () => {
  try {
    setWhatsappOtpLoading(true)
    await axios.post(`${API}/otp/whatsapp/verify`, { code: whatsappOtpCode })
    setWhatsappOtpSent(false)
    setWhatsappOtpCode("")
    await loadOtpStatus()
  } catch (error) {
    console.error('Failed to verify WhatsApp OTP:', error)
  } finally {
    setWhatsappOtpLoading(false)
  }
}

// Disable WhatsApp OTP
const handleWhatsappOtpDisable = async () => {
  try {
    setWhatsappOtpLoading(true)
    await axios.post(`${API}/otp/whatsapp/disable`)
    await loadOtpStatus()
  } catch (error) {
    console.error('Failed to disable WhatsApp OTP:', error)
  } finally {
    setWhatsappOtpLoading(false)
  }
}
```

#### **UI to Add** (After Account Information Card):

```tsx
{/* Phone Number Card */}
<Card>
  <CardHeader>
    <CardTitle className="flex items-center gap-2">
      <Smartphone className="h-5 w-5" />
      Phone Number
    </CardTitle>
    <CardDescription>
      Update your phone number for WhatsApp OTP
    </CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="phone">Phone Number</Label>
      <div className="flex gap-2">
        <Input
          id="phone"
          type="tel"
          placeholder="+1234567890"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          disabled={phoneLoading}
        />
        <Button 
          onClick={handleUpdatePhone}
          disabled={phoneLoading || !phone}
        >
          {phoneLoading ? <RefreshCw className="h-4 w-4 animate-spin" /> : "Update"}
        </Button>
      </div>
      {phoneError && (
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertDescription>{phoneError}</AlertDescription>
        </Alert>
      )}
      {phoneSuccess && (
        <Alert>
          <Check className="h-4 w-4" />
          <AlertDescription>{phoneSuccess}</AlertDescription>
        </Alert>
      )}
    </div>
  </CardContent>
</Card>

{/* WhatsApp OTP Card */}
<Card>
  <CardHeader>
    <CardTitle className="flex items-center gap-2">
      <Smartphone className="h-5 w-5" />
      WhatsApp OTP
      {otpStatus.whatsappEnabled && (
        <Badge variant="default">Enabled</Badge>
      )}
    </CardTitle>
    <CardDescription>
      Receive verification codes via WhatsApp
    </CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    {!otpStatus.phone && (
      <Alert>
        <AlertTriangle className="h-4 w-4" />
        <AlertDescription>
          Please add your phone number first
        </AlertDescription>
      </Alert>
    )}
    
    {otpStatus.phone && !otpStatus.whatsappEnabled && (
      <>
        {!whatsappOtpSent ? (
          <Button 
            onClick={handleWhatsappOtpRequest}
            disabled={whatsappOtpLoading}
          >
            {whatsappOtpLoading ? (
              <RefreshCw className="h-4 w-4 animate-spin mr-2" />
            ) : (
              <Smartphone className="h-4 w-4 mr-2" />
            )}
            Enable WhatsApp OTP
          </Button>
        ) : (
          <div className="space-y-2">
            <Label htmlFor="whatsapp-otp">Enter code sent to your WhatsApp</Label>
            <div className="flex gap-2">
              <Input
                id="whatsapp-otp"
                type="text"
                placeholder="123456"
                value={whatsappOtpCode}
                onChange={(e) => setWhatsappOtpCode(e.target.value)}
                maxLength={6}
              />
              <Button 
                onClick={handleWhatsappOtpVerify}
                disabled={whatsappOtpLoading || whatsappOtpCode.length !== 6}
              >
                Verify
              </Button>
            </div>
          </div>
        )}
      </>
    )}
    
    {otpStatus.whatsappEnabled && (
      <Button 
        variant="destructive"
        onClick={handleWhatsappOtpDisable}
        disabled={whatsappOtpLoading}
      >
        Disable WhatsApp OTP
      </Button>
    )}
  </CardContent>
</Card>
```

---

### **2. OTP Verification Page - Add WhatsApp Tab**

#### **File**: `apps/web/src/components/pages/OtpVerification.tsx`

#### **Changes Needed**:

1. **Add WhatsApp to available methods check**:
```typescript
const availableMethods = {
  email: methods?.email || false,
  whatsapp: methods?.whatsapp || false,
  totp: methods?.totp || false,
}
```

2. **Add WhatsApp tab button**:
```tsx
{availableMethods.whatsapp && (
  <Button
    variant={selectedMethod === "whatsapp" ? "default" : "outline"}
    onClick={() => setSelectedMethod("whatsapp")}
    className="flex-1"
  >
    <Smartphone className="mr-2 h-4 w-4" />
    WhatsApp
  </Button>
)}
```

3. **Add WhatsApp content section**:
```tsx
{selectedMethod === "whatsapp" && (
  <div className="space-y-4">
    <p className="text-sm text-muted-foreground text-center">
      A 6-digit code has been sent to your WhatsApp number. Please check your WhatsApp and enter the code below.
    </p>
    
    <div className="space-y-2">
      <Label htmlFor="whatsapp-code">WhatsApp Code</Label>
      <Input
        id="whatsapp-code"
        type="text"
        placeholder="123456"
        value={otpCode}
        onChange={(e) => setOtpCode(e.target.value)}
        maxLength={6}
        className="text-center text-2xl tracking-widest"
      />
    </div>
    
    <Button
      onClick={handleVerify}
      disabled={loading || otpCode.length !== 6}
      className="w-full"
    >
      {loading ? (
        <>
          <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
          Verifying...
        </>
      ) : (
        "Verify Code"
      )}
    </Button>
  </div>
)}
```

4. **Update resend handler** to support WhatsApp:
```typescript
const handleResendWhatsApp = async () => {
  setResendLoading(true)
  setError('')
  
  try {
    await axios.post(`${API_URL}/api/otp/whatsapp/resend`, {
      tempToken
    })
    
    setResendTimer(30)
    setCanResend(false)
    setError('')
  } catch (err) {
    setError('Failed to resend code. Please try again.')
  } finally {
    setResendLoading(false)
  }
}
```

---

### **3. Auth Pages - Design Restoration**

#### **Current Status**:
- Login/Register pages exist
- Need to restore original design from Git

#### **Steps**:
1. Check Git history for original design
2. Compare current vs original
3. Restore styling and layout
4. Test responsiveness

#### **Command to check history**:
```bash
git log --all --full-history -- "apps/web/src/components/pages/Login.tsx"
git show <commit-hash>:apps/web/src/components/pages/Login.tsx
```

---

## 🧪 **Testing Checklist:**

### **Avatar Fix**:
- [ ] Logout completely
- [ ] Clear browser cache
- [ ] Login with Google
- [ ] Check if avatar loads (should use `=s400-c` URL)
- [ ] Refresh page multiple times
- [ ] Avatar should load consistently

### **Phone Number**:
- [ ] Go to Profile page
- [ ] Enter phone number
- [ ] Click "Update"
- [ ] Should save successfully
- [ ] Reload page - phone should persist

### **WhatsApp OTP Setup**:
- [ ] Add phone number first
- [ ] Click "Enable WhatsApp OTP"
- [ ] Check backend console for OTP code
- [ ] Enter code
- [ ] Should enable successfully
- [ ] Badge should show "Enabled"

### **WhatsApp OTP Login**:
- [ ] Logout
- [ ] Login with email/password
- [ ] Should redirect to OTP page
- [ ] See WhatsApp tab
- [ ] Check console for OTP code
- [ ] Enter code
- [ ] Should login successfully

---

## 📊 **Implementation Priority:**

1. **✅ DONE**: Avatar fix (backend)
2. **⏳ TODO**: Add phone number UI to Profile
3. **⏳ TODO**: Add WhatsApp OTP setup UI to Profile
4. **⏳ TODO**: Add WhatsApp tab to OTP verification page
5. **⏳ TODO**: Test complete flow
6. **⏳ OPTIONAL**: Restore auth page design

---

## 🎯 **Quick Start - Next Steps:**

1. **Add WhatsApp OTP states** to Profile.tsx (already started)
2. **Add handlers** for phone update and WhatsApp OTP
3. **Add UI cards** for phone and WhatsApp OTP
4. **Update OTP verification page** to include WhatsApp tab
5. **Test end-to-end flow**

---

## 📝 **Files to Modify:**

1. ✅ `apps/api/src/auth/auth.service.ts` - Avatar fix DONE
2. ⏳ `apps/web/src/components/pages/Profile.tsx` - Add phone & WhatsApp UI
3. ⏳ `apps/web/src/components/pages/OtpVerification.tsx` - Add WhatsApp tab
4. ⏳ `apps/web/src/components/pages/Login.tsx` - Restore design (optional)
5. ⏳ `apps/web/src/components/pages/Register.tsx` - Restore design (optional)

---

**Backend is 100% ready. Frontend integration is straightforward - just add UI components!** 🚀