password: Add debounce to password validation.

Added debouncing to the password input field to reduce lag when
the password size is large.

Fixes: #29429.
This commit is contained in:
Maneesh Shukla 2024-10-25 23:04:28 +05:30
parent e0bd3713cc
commit a20a2bce3b
1 changed files with 12 additions and 3 deletions

View File

@ -1,4 +1,5 @@
import $ from "jquery"; import $ from "jquery";
import _ from "lodash";
import assert from "minimalistic-assert"; import assert from "minimalistic-assert";
import {z} from "zod"; import {z} from "zod";
@ -24,10 +25,18 @@ $(() => {
// was just reloaded due to a validation failure on the backend. // was just reloaded due to a validation failure on the backend.
password_quality($password_field.val()!, $("#pw_strength .bar"), $password_field); password_quality($password_field.val()!, $("#pw_strength .bar"), $password_field);
const debounced_password_quality = _.debounce((password_value: string, $field: JQuery) => {
password_quality(password_value, $("#pw_strength .bar"), $field);
}, 300);
$password_field.on("input", function () { $password_field.on("input", function () {
// Update the password strength bar even if we aren't validating const password_value = $(this).val()!;
// the field yet.
password_quality($(this).val()!, $("#pw_strength .bar"), $(this)); if (password_value.length > 30) {
debounced_password_quality(password_value, $(this));
} else {
password_quality(password_value, $("#pw_strength .bar"), $(this));
}
}); });
} }