var pin = '';
var dots = document.querySelectorAll('#pin-dots .pin-dot');

function addDigit(d) {
    if (pin.length >= 6) return;
    pin += d;
    updateDots();
}

function clearPin() {
    pin = '';
    updateDots();
}

function submitPin() {
    if (pin.length !== 6) return;
    document.getElementById('pin-value').value = pin;
    document.getElementById('pin-form').submit();
}

function updateDots() {
    for (var i = 0; i < dots.length; i++) {
        dots[i].classList.toggle('filled', i < pin.length);
    }
}