# Changes Made to FRAN Face Recognition System

## Date: 2025-11-13

### Summary
This document outlines all changes made to enable local development and fix configuration issues.

---

## 1. Database Configuration

### Created `.env` File
- **File**: `.env` (root directory)
- **Purpose**: Store production database credentials
- **Configuration**:
  ```
  DB_HOST=35.197.149.170
  DB_PORT=3306
  DB_USER=153b8e856510
  DB_PASSWORD=5696c8e988d9eab5
  DB_NAME=fran
  ```
- **Note**: Database name was initially set to `attendance` but changed to `fran` after discovering the correct production database name.

---

## 2. Virtual Environment Setup

### Created Virtual Environment
- **Command**: `python -m venv venv`
- **Purpose**: Isolate Python dependencies for the project
- **Location**: `venv/` directory

### Installed Python Dependencies
The following packages were installed in the virtual environment:
- Flask, Flask-CORS
- mysql-connector-python
- bcrypt, PyJWT
- pytz, python-dateutil
- opencv-python, opencv-contrib-python
- numpy, scikit-image, scipy
- torch, torchvision (CPU version)
- schedule, requests, Pillow
- python-dotenv

---

## 3. Frontend Configuration Changes

### Port Configuration
- **File**: `frontend/vite.config.js`
- **Change**: Changed default port from 5173 to 3000
- **Reason**: Port 5173 was already in use by other applications
- **Configuration Added**:
  ```javascript
  server: {
     port: 3000,
     strictPort: false, // If 3000 is taken, try next available
  }
  ```

### Development Mode Authentication
- **File**: `frontend/src/router/index.js`
- **Changes**:
  1. Added automatic development mode detection (localhost/127.0.0.1)
  2. Created mock admin token for local development
  3. Bypassed authentication redirects in development mode
  4. Commented out redirect to eportal.scrubbed.net in catch block (for local dev)
  
- **Development Mode Features**:
  - Automatically logs in as "Local Admin" (Super Admin role)
  - No authentication required on localhost
  - Full access to all routes
  - Mock user data stored in cookies and localStorage

### User Store Updates
- **File**: `frontend/src/stores/user.js`
- **Changes**: Updated `initializeUser()` function to handle development mode tokens
- **Purpose**: Properly initialize user data when using mock admin token in dev mode

---

## 4. Startup Scripts Created

### `start_backend.ps1`
- **Purpose**: Start backend server with virtual environment
- **Features**:
  - Activates venv automatically
  - Checks for .env file
  - Starts Flask server on port 5001

### `start_frontend.ps1`
- **Purpose**: Start frontend development server
- **Features**:
  - Checks and installs dependencies if needed
  - Starts Vite dev server on port 3000

### `start_servers.ps1`
- **Purpose**: Start both servers in separate windows
- **Features**:
  - Opens backend in new PowerShell window
  - Opens frontend in new PowerShell window
  - Displays server URLs

---

## 5. Code Modifications

### Router Authentication Logic
**File**: `frontend/src/router/index.js`

**Key Changes**:
1. Added development mode detection:
   ```javascript
   const isDevelopment = import.meta.env.VITE_DEVELOPMENT === 'true' || 
                         import.meta.env.DEV === true ||
                         window.location.hostname === 'localhost' || 
                         window.location.hostname === '127.0.0.1';
   ```

2. Auto-create mock admin token in dev mode:
   - Sets `dev_mode` cookie
   - Creates `dev-admin-token`
   - Stores mock user data in localStorage

3. Modified token validation:
   - Checks for dev mode token
   - Falls back to JWT decode for production tokens
   - **Commented out redirect** in catch block (line ~145):
     ```javascript
     // Commented out for local development - uncomment for production
     // window.location.href = import.meta.env.VITE_COMMUNITY_PORTAL_URL;
     // return;
     ```

4. Updated route protection:
   - Allows access in dev mode even without proper role
   - Super admin in dev mode can access all routes
   - Production mode still enforces strict authentication

---

## 6. Environment Variables

### Frontend Environment
- **VITE_DEVELOPMENT**: Can be set to 'true' to force development mode
- **VITE_API_LOCAL**: Defaults to `http://localhost:5001`
- **VITE_API_PRODUCTION**: Defaults to `https://api-frandev.scrubbed.net`
- **VITE_COMMUNITY_PORTAL_URL**: Defaults to `https://eportal.scrubbed.net`

### Backend Environment
- Database credentials loaded from `.env` file
- JWT_SECRET_KEY: Should be set in `.env` for production

---

## 7. Known Issues & Notes

### Backend Server
- PyTorch (torch) installed for spoof detection service
- Unicode encoding issues in Windows console (emoji characters)
- Server may need additional dependencies for full functionality

### Frontend
- Old Node processes may still be running on ports 5173/5174
- Can be stopped with: `Stop-Process -Id 16308,30404 -Force`

### Development vs Production
- **Development Mode**: Automatic admin login, no redirects, relaxed authentication
- **Production Mode**: Full authentication required, redirects to eportal.scrubbed.net on auth failure
- **Important**: The commented-out redirect code should be uncommented before deploying to production

---

## 8. How to Use

### Start Development Servers

**Option 1: Use startup scripts**
```powershell
.\start_servers.ps1
```

**Option 2: Manual start**
```powershell
# Terminal 1 - Backend
.\venv\Scripts\Activate.ps1
python server.py

# Terminal 2 - Frontend
cd frontend
npm run dev
```

### Access the Application
- **Frontend**: http://localhost:3000
- **Backend API**: http://localhost:5001
- **Auto-login**: Automatically logged in as "Local Admin" (Super Admin) when accessing on localhost

---

## 9. Files Modified

1. `.env` (created)
2. `frontend/vite.config.js`
3. `frontend/src/router/index.js`
4. `frontend/src/stores/user.js`
5. `start_backend.ps1` (created)
6. `start_frontend.ps1` (created)
7. `start_servers.ps1` (created)
8. `CHANGES.md` (this file)

---

## 10. Next Steps for Production Deployment

1. **Uncomment redirect code** in `frontend/src/router/index.js` (line ~145)
2. **Set VITE_DEVELOPMENT=false** or remove development mode checks
3. **Configure proper JWT_SECRET_KEY** in `.env`
4. **Test authentication flow** with real user tokens
5. **Remove or secure** development mode bypasses
6. **Update CORS settings** if needed for production domain
7. **Ensure all dependencies** are installed in production environment

---

## End of Changes Document

