Asyncronos обработчик отправки

Question

Я пытаюсь преобразовать пароль в сумму sha1 перед отправкой.Я использую crypto.subtle.digest, чтобы сделать преобразование.Так как это возвращает обещание, я жду этого.Проблема в том, что пароль передается без преобразования.

function buf2hex(buffer) { // buffer is an ArrayBuffer
    return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
}

async function onPwSubmit(event) {
    /* Handle password-form-submit-events
     *
     * Replace the entered password with the SHA1-hash of it.
     * Return 'false' to abort form-submission if anything goes wrong.
     * Return 'true' otherwise.
     */
    event.preventDefault();

    let input_password = document.getElementById('{{ form.password.auto_id }}');
    if (!input_password) { // Just in case something goes wrong, add a message.
        alert("Could not hash entered password with SHA1. Please call help.");
        console.log("Is there a form-field with id 'id_password'?");
        // Abort the form-submit by returning false.
        // Must not submit with password not hashed.
        return false;
    }

    let digest = await crypto.subtle.digest("SHA-1", new TextEncoder().encode(input_password.value));

    input_password.value = buf2hex(digest).toUpperCase();

    event.submit()

    return true; // allow form-submit to continue with return true
}

document.querySelector("#passwordform").addEventListener("onsubmit", onPwSubmit)

Я ожидаю, что пароль будет преобразован перед отправкой, но это не так.

Answer 1

Ваш обработчик вообще не работает, потому что слушатель не подключен должным образом:

document.querySelector("#passwordform").addEventListener("onsubmit", onPwSubmit)

Прислушивается к событию с именем onsubmit и, когда это происходит, вызывает обратный вызов. Но такого события нет. Вы хотите прослушать событие submit, полная остановка:

document.querySelector("#passwordform").addEventListener("submit", onPwSubmit)

Префикс on используется только при назначении обработчика с =, например:

document.querySelector("#passwordform").onsubmit = onPwSubmit

Такая же схема (когда использовать on, а когда нет) применима и ко всем другим событиям.

Вы также не можете submit из события:

event.submit()

Вместо этого выберите форму и назовите submit вместо нее:

document.querySelector("#passwordform").submit();

(это не рекурсивно вызовет обработчик submit, который вы подключили, не беспокойтесь)