# Registration Flow Analysis

## Complete Flow from User Selection to Successful Registration

### 1. **User Selection Phase**
- User searches/selects staff member from dropdown
- `selectedUser.value` is set
- `userId.value` is set from `selectedUser.value.value` (PID)

### 2. **Photo Capture Phase**
- **No validation during capture** - images are just stored in `capturedImages.value[]`
- System captures 50 images total:
  - 10 images per angle × 5 angles
  - Angles: Front, Left, Right, Up, Down
- Images are base64 encoded strings stored in array
- `angleProgress` tracks how many images captured per angle
- `isComplete` becomes true when 50 images captured

### 3. **Submit/Train Phase** (When user clicks "Train Model & Register User")

#### Frontend (`trainModel()` function):
1. Checks `selectedUser` and `isComplete` exist
2. Sets `isTraining = true`
3. Calls `registerUser(userId, capturedImages, angleProgress, false)`
4. **Waits for response**

#### Backend (`/register` endpoint):
1. **Receives request** with:
   - `userId`: Staff PID
   - `images`: Array of 50 base64 images
   - `angleData`: Progress tracking
   - `self_register`: false

2. **Validates request**:
   - Checks userId and images exist (returns 400 if missing)
   - Fetches employee info from database (returns 404 if not found)

3. **For EACH image (50 images total)**:
   - Decodes base64 to image
   - **Requirement 1: Blur Detection**
     - Uses `detect_blur(img, face_bbox, BLUR_THRESHOLD=100)`
     - Returns 400 if blurry (score < 100)
   - **Requirement 2: Lighting Validation**
     - Uses `validate_lighting(img, face_bbox)`
     - Checks: face brightness (100-130), max brightness (≤220), bright pixels (<10%), etc.
     - Returns 400 if lighting issues (torch/flash detected, too dark, etc.)
   - **Requirement 3: Quality Score**
     - Uses `calculate_quality_score(img, face_bbox)`
     - Must be ≥0.6 average, ≥0.4 per image
     - Returns 400 if quality too low
   - **Requirement 4: Embedding Similarity** (after all images validated)
     - Generates InsightFace embeddings for all images
     - Calculates cosine similarity between all pairs
     - Must be ≥0.6 minimum similarity
     - Returns 400 if images don't match (different people)

4. **If ALL validations pass**:
   - Saves images to disk (`faces/{user_id}/0.jpg` to `49.jpg`)
   - Trains face recognition model (`train_face_recognizer()`)
   - Generates InsightFace embeddings (if available)
   - Saves to database (`RegisteredUser.add_or_update()`)
   - Saves to `user_data.json`
   - **Returns success response**:
     ```json
     {
       "message": "User {user_id} ({user_name}) registered successfully...",
       "validation_results": {
         "requirements": {
           "1_blur_detection": {...},
           "2_lighting_validation": {...},
           "3_quality_score": {...},
           "4_embedding_similarity": {...}
         },
         "all_passed": true,
         "summary": {...}
       },
       "success": true
     }
     ```

#### Frontend Response Handling:
1. Receives response from `registerUser()` API call
2. Checks `if (response && response.validation_results)`
3. Sets `validationResults.value = response.validation_results`
4. Sets `showValidationResults.value = true`
5. Shows toast: "Staff Registered Successfully"
6. **Modal should appear** with all 4 requirements

### 4. **Current Issue**

**Problem**: User only sees "Staff Registered Successfully" toast, but validation modal doesn't appear.

**Possible Causes**:
1. `validation_results` not in response (backend issue)
2. Modal not rendering (frontend issue)
3. Modal hidden behind other elements (z-index issue)
4. Modal condition `v-if="showValidationResults && validationResults"` not met

**Debugging Added**:
- Enhanced console logging to track response structure
- Increased modal z-index to 99999
- Added timeout check to verify modal state

**Next Steps**:
1. Check browser console for detailed logs
2. Verify `validation_results` exists in response
3. Check if `showValidationResults` and `validationResults` are set correctly
4. Verify modal HTML is rendering in DOM

