Code

/* =========================================
   Role Select Dropdown Styling
   ========================================= */
#role {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    background-color: var(--bg, #ffffff);
    color: var(--text, #1f2937);
    transition: all 0.3s ease;
    cursor: pointer;

    /* Custom Dropdown Arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    background-size: 0.65rem auto;
}

#role:focus {
    outline: none;
    border-color: var(--primary-blue, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* =========================================
   Officer PIN Box Container
   ========================================= */
#pinBox {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background-color: rgba(37, 99, 235, 0.03); /* Very subtle blue background */
    border: 1px dashed var(--primary-blue, #2563eb);
    border-radius: 8px;
    animation: slideDownFade 0.3s ease-out forwards;
}

#pinBox label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--primary-blue, #2563eb);
    font-size: 0.95rem;
}

/* =========================================
   Officer PIN Input Field
   ========================================= */
#officerPin {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--primary-blue, #2563eb);
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.75rem; /* Spaces out the 4 digits nicely */
    text-align: center;
    color: var(--text, #1f2937);
    transition: all 0.3s ease;
}

#officerPin::placeholder {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    color: #9ca3af;
}

#officerPin:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    transform: translateY(-1px);
}

/* =========================================
   Animations
   ========================================= */
@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/
/ Register
const regForm = document.getElementById('reg-form');
if (regForm) {
    const usernameInput = document.getElementById('reg-username');
    const usernameStatus = document.getElementById('username-status');
    const roleSelect = document.getElementById('role');
    const pinBox = document.getElementById('pinBox');
    const officerPinInput = document.getElementById('officerPin');
    const OFFICER_PIN = "1234";

    // Toggle PIN visibility based on role selection
    if (roleSelect) {
        roleSelect.addEventListener("change", function () {
            if (roleSelect.value === "officer") {
                pinBox.style.display = "block";
                officerPinInput.required = true;
            } else {
                pinBox.style.display = "none";
                officerPinInput.required = false;
                officerPinInput.value = "";
            }
        });
    }

    if (usernameInput) {
        usernameInput.addEventListener('blur', async (e) => {
            const val = e.target.value.trim();
            if (val.length < 5) {
                if (usernameStatus) usernameStatus.innerText = '';
                return;
            }
            try {
                const res = await fetch(`${API_URL}/check-username/${val}`);
                if (res.ok) {
                    const exists = await res.json();
                    if (exists && usernameStatus) {
                        usernameStatus.innerText = 'Username is already taken';
                        usernameStatus.style.color = 'var(--error-color)';
                        usernameInput.setCustomValidity('Username taken');
                    } else if (usernameStatus) {
                        usernameStatus.innerText = 'Username is available';
                        usernameStatus.style.color = 'var(--success-color)';
                        usernameInput.setCustomValidity('');
                    }
                }
            } catch (e) {}
        });
    }

    regForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        const pwd = document.getElementById('reg-pass').value;
        const confirmPwd = document.getElementById('reg-pass-confirm').value;
        const roleValue = roleSelect.value;
        const err = document.getElementById('reg-err');

        err.classList.add('hidden');

        const pwdRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/;
        if (!pwdRegex.test(pwd)) {
            err.innerText = "Password must contain at least 1 uppercase, 1 lowercase, 1 special character/number, and be at least 8 characters long.";
            err.classList.remove('hidden');
            return;
        }

        if (pwd !== confirmPwd) {
            err.innerText = "Passwords do not match.";
            err.classList.remove('hidden');
            return;
        }

        // Verify Officer PIN if Officer role is selected
        if (roleValue === "officer") {
            const enteredPin = officerPinInput.value.trim();
            if (!/^[0-9]{4}$/.test(enteredPin) || enteredPin !== OFFICER_PIN) {
                err.innerText = "Invalid Officer PIN.";
                err.classList.remove('hidden');
                return;
            }
        }

        showLoader();

        const username = document.getElementById('reg-username').value;
        const name = document.getElementById('reg-customer-name').value;
        const email = document.getElementById('reg-customer-email').value;

        // Construct the payload with the dynamically selected role
        const newUser = {
            userId: username,
            password: pwd,
            name: name,
            email: email,
            role: roleValue 
        };

        try {
            const response = await fetch(`${API_URL}/register`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(newUser)
            });

            if (response.ok) {
                const result = await response.json();
                if (result === 1) {
                    setTimeout(() => {
                        hideLoader();
                        triggerConfetti();
                        regForm.classList.add('hidden');

                        const successDiv = document.getElementById('reg-success');
                        successDiv.classList.remove('hidden');

                        // Dynamically update success message based on role
                        successDiv.querySelector('h3').innerText = roleValue === 'officer' 
                            ? 'Officer Registration successful' 
                            : 'Customer Registration successful';

                        document.getElementById('reg-user-id').innerText = username;
                        document.getElementById('reg-name').innerText = name;
                        document.getElementById('reg-email').innerText = email;
                    }, 2500); 
                } else {
                    hideLoader();
                    err.innerText = "Username already exists or registration failed.";
                    err.classList.remove('hidden');
                }
            }
        } catch (error) {
            hideLoader();
            err.innerText = "Error connecting to server.";
            err.classList.remove('hidden');
        }
    });