# Changelog - POC Updates

## Latest Changes (2026-01-22)

### 🎨 Design Updates
- **Color Scheme**: Updated to match Zeplin design specifications
  - Primary: Changed from blue (#4A90E2) to magenta (#AA5CA5)
  - Secondary: Changed from purple (#7B68EE) to dark purple (#392539)
  - Login screen background: Now solid dark purple (#392539) instead of gradient
  - Header/Footer: Dark purple (#392539) with shadow
  - Border colors: Updated to light gray (#DBDBDB)
  - Placeholder text: Updated to gray (#808080)
  - Bottom navigation: Dark purple background with white/semi-transparent icons

- **Logo**: Changed from SVG to PNG format ([logo.png](public/assets/images/logo.png))

### 🔐 Authentication Enhancements

#### Dual Authentication Method
Users can now authenticate using **either phone number OR email address**:
- Single input field accepts both formats
- Auto-detection of contact type (email vs phone)
- SMS sent for phone numbers (via Sinch)
- Email sent for email addresses (via PHP mail)

#### Files Modified:
1. **Database Schema**: [schema/additional_tables.sql](schema/additional_tables.sql)
   - Updated `verification_codes` table to support both `phone` and `email` columns
   - Added indexes for both phone and email lookups

2. **Backend Classes**:
   - [includes/Auth.php](includes/Auth.php)
     - Added `getOrCreateUser()` method supporting both phone and email
     - Updated `createVerificationCode()` to handle both contact types
     - Updated `verifyCode()` to verify both phone and email codes

   - [includes/Email.php](includes/Email.php) **(NEW)**
     - Email service for sending verification codes
     - HTML email template with Fellowship Housing branding
     - Uses PHP `mail()` function (production ready for SendGrid/Mailgun)

3. **API Endpoints**:
   - [api/v1/auth/request-code.php](api/v1/auth/request-code.php)
     - Changed parameter from `phone` to `contact`
     - Auto-detects email vs phone
     - Routes to appropriate service (Sinch SMS or Email)
     - Returns contact method used

   - [api/v1/auth/verify-code.php](api/v1/auth/verify-code.php)
     - Changed parameter from `phone` to `contact`
     - Verifies codes for both email and phone
     - Creates user with appropriate contact field populated

4. **Frontend**:
   - [public/index.html](public/index.html)
     - Changed "Phone Number" input to "Phone Number or Email"
     - Updated placeholder text and form hints
     - Changed `phone-display` to `contact-display`
     - Updated logo reference from SVG to PNG

   - [public/css/styles.css](public/css/styles.css)
     - Updated color variables to Zeplin specifications
     - Added logo image styles with white filter
     - Added form hint styles
     - Updated login screen to solid dark purple background
     - Updated header to dark purple
     - Updated bottom navigation to dark purple with white icons
     - Updated nav item active states

   - [public/js/api.js](public/js/api.js)
     - Changed `phone` parameters to `contact` in auth methods

   - [public/js/auth.js](public/js/auth.js)
     - Changed `phone` references to `contact` throughout
     - Updated localStorage keys from `temp_phone` to `temp_contact`
     - Updated element IDs from `phone` to `contact`
     - Updated alert messages

### 📊 Database Schema Updates

Run this SQL to update your database:

```sql
-- Update verification_codes table to support email
ALTER TABLE verification_codes
  MODIFY COLUMN phone varchar(20) DEFAULT NULL,
  ADD COLUMN email varchar(255) DEFAULT NULL AFTER phone,
  ADD INDEX idx_email_code (email, code);
```

Or simply run the updated schema file:
```bash
mysql -u pwistagi_fhcapp -p pwistagi_fhcapp < schema/additional_tables.sql
```

### 🎯 API Changes

#### Request Code Endpoint
**Before:**
```json
POST /api/v1/auth/request-code
{
  "phone": "+11234567890",
  "language": "en"
}
```

**After:**
```json
POST /api/v1/auth/request-code
{
  "contact": "+11234567890",  // OR "user@example.com"
  "language": "en"
}
```

**Response includes method:**
```json
{
  "success": true,
  "data": {
    "contact": "+11234567890",
    "method": "SMS",  // or "email"
    "message": "Verification code sent successfully",
    "expires_in": 600
  }
}
```

#### Verify Code Endpoint
**Before:**
```json
POST /api/v1/auth/verify-code
{
  "phone": "+11234567890",
  "code": "123456"
}
```

**After:**
```json
POST /api/v1/auth/verify-code
{
  "contact": "+11234567890",  // OR "user@example.com"
  "code": "123456"
}
```

### 🎨 Color Reference (From Zeplin)

```css
/* Primary Colors */
--color-primary: #AA5CA5        /* Magenta - buttons, links, accents */
--color-primary-dark: #8B4A86    /* Darker magenta - hover states */
--color-secondary: #392539       /* Dark purple - headers, footer, nav */

/* Neutrals */
--color-border: #DBDBDB          /* Light gray - input borders */
--color-text-light: #808080      /* Gray - placeholders, hints */
--color-surface: #FFFFFF         /* White - cards, modals */
--color-bg: #F5F7FA             /* Light gray - app background */

/* Status Colors (unchanged) */
--color-success: #5CB85C         /* Green - success, income */
--color-danger: #D9534F          /* Red - errors, expenses */
--color-warning: #F0AD4E         /* Orange - warnings */
```

### 📝 Testing Checklist

Before deployment, test:

- [ ] Phone number authentication (SMS via Sinch)
- [ ] Email authentication (email via PHP mail)
- [ ] Mixed format phone numbers (with/without country code)
- [ ] Invalid email format rejection
- [ ] Code expiration (10 minutes)
- [ ] Rate limiting (3 codes per hour per contact)
- [ ] Logo displays correctly (PNG version)
- [ ] Colors match Zeplin design
- [ ] Bottom navigation styling
- [ ] Login screen styling
- [ ] Responsive design on mobile

### ⚠️ Important Notes

1. **Email Configuration**: The Email service currently uses PHP's `mail()` function. For production:
   - Configure SendGrid, Mailgun, or AWS SES
   - Update [includes/Email.php](includes/Email.php) with SMTP credentials
   - Test email deliverability

2. **Database Migration**: Run the updated schema before deploying code changes

3. **Backwards Compatibility**: The `getOrCreateUserByPhone()` method is maintained for backwards compatibility but internally calls the new `getOrCreateUser()` method

4. **Logo Asset**: Ensure [logo.png](public/assets/images/logo.png) exists in the assets folder

### 🚀 Next Steps

See [DEVELOPMENT_NOTES.md](DEVELOPMENT_NOTES.md) for upcoming features and implementation priorities.