static/components/profile-component.js

// components/profile-component.js - Profile modal functionality

import { StateManager } from '../services/state-manager.js';

export const ProfileComponent = {
  elements: {
    profileModal: null,
    profileBtn: null,
    ageGroupInput: null,
    genderInput: null,
    roleInputs: null,
    participantInput: null,
    welcomePopup: null
  },

  /**
   * Initialize the profile component
   */
  init() {
    this.elements.profileModal = document.getElementById('profile-modal');
    this.elements.profileBtn = document.getElementById('profileBtn');
    this.elements.ageGroupInput = document.getElementById('age-group');
    this.elements.genderInput = document.getElementById('gender');
    this.elements.roleInputs = document.querySelectorAll('input[name="role"]');
    this.elements.participantInput = document.getElementById('participant-id');
    this.elements.welcomePopup = document.getElementById('welcomePopup');

    this.attachEventListeners();
  },

  /**
   * Attach event listeners
   */
  attachEventListeners() {
    // Add listeners to validate profile on input change
    this.elements.genderInput.addEventListener('click', () => this.checkProfileValidity());
    this.elements.ageGroupInput.addEventListener('click', () => this.checkProfileValidity());
    this.elements.roleInputs.forEach(input => 
      input.addEventListener('change', () => this.checkProfileValidity())
    );
    this.elements.participantInput.addEventListener('input', () => this.checkParticipantIdInput());
    this.elements.participantInput.addEventListener('input', () => this.checkProfileValidity());

    // Handle profile submission
    this.elements.profileBtn.addEventListener('click', () => this.submitProfile());
  },

  /**
   * Check if profile form is valid and enable/disable button accordingly
   */
  checkProfileValidity() {
    // 1. Check if any gender is selected
    const genderSelected = this.elements.genderInput.value !== '';

    // 2. Check if any age group is selected
    const ageSelected = this.elements.ageGroupInput.value !== '';

    // 3. Check if at least one role checkbox is selected
    const roleSelected = Array.from(this.elements.roleInputs).some(input => input.checked);

    // 4. Check if the participant id field has a value
    const participantIdEntered = this.elements.participantInput.value.trim().length > 0;

    // 5. Enable button only if all are true
    if (genderSelected && ageSelected && roleSelected && participantIdEntered) {
      this.elements.profileBtn.disabled = false;
      this.elements.profileBtn.classList.replace('disabled-button', 'ok-button');
    } else {
      this.elements.profileBtn.disabled = true;
      this.elements.profileBtn.classList.replace('ok-button', 'disabled-button');
    }
  },

  /**
   * Submit profile and close welcome popup
   */
  submitProfile() {
    const profileData = {
      ageGroup: this.elements.ageGroupInput.value,
      gender: this.elements.genderInput.value,
      roles: Array.from(document.querySelectorAll('input[name="role"]:checked')).map(input => input.value),
      participantId: this.elements.participantInput.value.trim()
    };

    StateManager.updateProfile(profileData);

    // Close welcome popup and re-enable scrolling
    this.elements.welcomePopup.style.display = 'none';
    document.body.classList.remove('no-scroll');
  },

  checkParticipantIdInput() {
    const input = this.elements.participantInput;
    // Save current cursor position
    const start = input.selectionStart;
    const end = input.selectionEnd;

    // Remove any character that is NOT a-z, A-Z, 0-9, _, or -
    const newValue = input.value.replace(/[^-a-zA-Z0-9_]/g, '');

    // Only update if something was actually removed
    if (input.value !== newValue) {
        input.value = newValue;
        // Restore cursor position so it doesn't jump to the end
        input.setSelectionRange(start - 1, end - 1);
    }
  }
};