# Mobile Testing Guide for Self-Registration

## Overview
To test self-registration on a mobile device, you need to:
1. Expose the frontend server to your local network
2. Get your computer's local IP address
3. Generate a registration token with the correct URL
4. Access the link on your mobile device

## Step-by-Step Instructions

### 1. Find Your Computer's IP Address

**Windows:**
```powershell
ipconfig | findstr /i "IPv4"
```
Look for something like: `192.168.1.100` or `10.0.0.5`

**Mac/Linux:**
```bash
ifconfig | grep "inet " | grep -v 127.0.0.1
```
or
```bash
ip addr show | grep "inet " | grep -v 127.0.0.1
```

### 2. Update Vite Config (Already Done)
The `vite.config.js` has been updated to include `host: true`, which exposes the server to your network.

### 3. Restart Frontend Server
If the frontend is already running, restart it:
```powershell
# Stop the current server (Ctrl+C)
# Then restart:
.\start_frontend.ps1
```

You should now see:
```
➜  Local:   http://localhost:3000/
➜  Network: http://192.168.1.100:3000/  ← Your IP will be shown here
```

### 4. Ensure Backend is Accessible
Make sure your backend is running and accessible:
- Backend should be on `http://localhost:5001`
- The backend CORS is already configured to allow `localhost:3000`

**Note:** For mobile testing, you may need to update the backend CORS to allow your mobile device's requests, OR use a proxy.

### 5. Generate Registration Token for Mobile

**Option A: Using Browser Console (Easiest)**

1. Open `http://localhost:3000` (or `http://YOUR_IP:3000`) on your computer
2. Open browser DevTools (F12) → Console
3. Replace `YOUR_IP` with your actual IP address (e.g., `192.168.1.100`)
4. Replace `YOUR_PID` with a valid user PID:

```javascript
const YOUR_IP = '192.168.1.100'; // Replace with your IP
const YOUR_PID = '332'; // Replace with actual PID

fetch(`http://${YOUR_IP}:5001/admin/generate-token`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-access-token': document.cookie.split('token=')[1]?.split(';')[0] || localStorage.getItem('token')
  }
})
.then(r => r.json())
.then(data => {
  // Update the link to use your IP instead of localhost
  const mobileLink = data.link.replace('localhost', YOUR_IP);
  console.log('Mobile Registration Link:', mobileLink);
  console.log('Copy this link and open it on your mobile device');
  
  // Optionally copy to clipboard (if supported)
  navigator.clipboard?.writeText(mobileLink).then(() => {
    console.log('Link copied to clipboard!');
  });
});
```

**Option B: Manual Link Construction**

1. Generate token using the method above (but keep localhost link)
2. Get the code from the response: `data.link` will be like `http://localhost:3000/self-register?code=XXXXX`
3. Extract the code: `XXXXX`
4. Construct mobile link: `http://YOUR_IP:3000/self-register?code=XXXXX`

**Option C: Update Backend FRONTEND_URL (Permanent Solution)**

If you want all generated links to use your IP:

1. Set environment variable before starting backend:
```powershell
$env:FRONTEND_URL="http://192.168.1.100:3000"
python server.py
```

Or create/update `.env` file:
```
FRONTEND_URL=http://192.168.1.100:3000
```

### 6. Access on Mobile Device

1. **Ensure mobile device is on the same Wi-Fi network** as your computer
2. Open the registration link on your mobile browser:
   - Example: `http://192.168.1.100:3000/self-register?code=XXXXX`
3. The self-registration page should load
4. Complete the registration process
5. **Validation modal will appear** showing all 4 requirements (same as desktop)

## Troubleshooting

### "This site can't be reached" on Mobile
- **Check IP address**: Make sure you're using the correct IP (the one shown in Vite's Network output)
- **Check firewall**: Windows Firewall might be blocking port 3000
  - Solution: Allow port 3000 through firewall or temporarily disable firewall for testing
- **Check network**: Ensure mobile device and computer are on the same Wi-Fi network

### "CORS error" or "Network error"
- The backend might not be accessible from mobile
- **Solution 1**: Update backend CORS to allow your mobile device's IP
- **Solution 2**: Use a reverse proxy or ngrok (see below)

### Backend Not Accessible from Mobile
The backend runs on `localhost:5001` which is only accessible from the same machine.

**Option 1: Use ngrok (Recommended for Testing)**
```powershell
# Install ngrok: https://ngrok.com/download
# Then run:
ngrok http 5001
```
This will give you a public URL like `https://abc123.ngrok.io`
Update your mobile link to use this URL for the API calls.

**Option 2: Expose Backend to Network**
Modify `server.py` to run on `0.0.0.0`:
```python
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5001, debug=True)
```
Then access backend via: `http://YOUR_IP:5001`

**Option 3: Update Frontend API Config**
Temporarily update `frontend/src/utils/config.js` to use your IP:
```javascript
const apiLocal = 'http://192.168.1.100:5001'; // Your IP
```

### Registration Link Expires
- Tokens expire after 5 minutes by default
- Generate a new token if it expires
- Or increase expiry time in `.env`: `REGISTRATION_TOKEN_EXPIRY_MINUTES=60`

### Validation Modal Not Appearing on Mobile
- Check browser console on mobile (if possible)
- Ensure both frontend and backend are accessible
- Check that `validation_results` is in the API response

## Quick Test Checklist

- [ ] Found computer's IP address
- [ ] Vite config updated with `host: true`
- [ ] Frontend server restarted and shows Network URL
- [ ] Backend server running on port 5001
- [ ] Mobile device on same Wi-Fi network
- [ ] Generated registration token with correct IP
- [ ] Opened registration link on mobile browser
- [ ] Registration page loads correctly
- [ ] Can capture photos
- [ ] Validation modal appears after submission
- [ ] All 4 validation requirements are visible

## Alternative: Using ngrok for Public Access

If you need to test from a different network or make it easier:

1. **Install ngrok**: https://ngrok.com/download

2. **Expose Frontend:**
```powershell
ngrok http 3000
```

3. **Expose Backend:**
```powershell
# In a new terminal
ngrok http 5001
```

4. **Update Frontend API Config** to use the ngrok backend URL

5. **Generate registration link** using the ngrok frontend URL

This allows testing from anywhere, not just your local network.

## Notes

- **Security**: Only use network exposure for local testing. Don't expose to the internet in production.
- **Performance**: Network access may be slower than localhost
- **HTTPS**: Some mobile browsers require HTTPS for camera access. Consider using ngrok (which provides HTTPS) if you encounter camera permission issues.

