depot_django/templates/registration/register.html

{% extends 'client-base.html' %}
{% block content %}

    <form method="post">
        {% csrf_token %}
        {{ form }}
        <button type="submit">Register</button>
    </form>

    <script>
  document.addEventListener('DOMContentLoaded', function() {
        const userTypeSelect = document.getElementById('id_user_type');
        const companyPerms = document.getElementById('id_company_permissions');
        const employeePerms = document.getElementById('id_employee_permissions');
            
        function handleUserTypeChange(select) {
            console.log('User type changed to:', userTypeSelect.value);  // Add this line
            //            {#if (!userTypeSelect || !companyPerms || !employeePerms) return;#}

            const isSuperuser = {{ user.is_superuser|yesno:"true,false" }};
            const isCompanyAdmin = ('{{ user.user_type }}' === 'CA');
            
            // Remove disabled attribute first
            companyPerms.removeAttribute('disabled');
            employeePerms.removeAttribute('disabled');

            switch(userTypeSelect.value) {
                case 'CL':  // Client
                    companyPerms.disabled = false;
                    employeePerms.disabled = true;
                    break;
                case 'EM':  // Employee
                    companyPerms.disabled = true;
                    employeePerms.disabled = false;
                    break;
                default:
                    companyPerms.disabled = true;
                    employeePerms.disabled = true;
                    break;
            }
            companyPerms.parentElement.hidden = companyPerms.disabled;
            employeePerms.parentElement.hidden = employeePerms.disabled;
        }

        // Add change event listener
        if (userTypeSelect) {
            userTypeSelect.addEventListener('change', handleUserTypeChange);
            
            // Initial call to set up the form correctly
            handleUserTypeChange();
        }
    });
    </script>    
    
{% endblock content %}