From 1feb6502843971ebd2beac9de626a83b94027982 Mon Sep 17 00:00:00 2001 From: Maneesh Shukla Date: Fri, 25 Oct 2024 23:04:28 +0530 Subject: [PATCH] password: Add debounce to password validation. Added debouncing to the password input field to reduce lag when the password size is large. Fixes: #29429. --- web/src/portico/signup.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/web/src/portico/signup.ts b/web/src/portico/signup.ts index 71dae97726..f70f0bbb3b 100644 --- a/web/src/portico/signup.ts +++ b/web/src/portico/signup.ts @@ -1,4 +1,5 @@ import $ from "jquery"; +import _ from "lodash"; import assert from "minimalistic-assert"; import {z} from "zod"; @@ -24,10 +25,18 @@ $(() => { // was just reloaded due to a validation failure on the backend. 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 () { - // Update the password strength bar even if we aren't validating - // the field yet. - password_quality($(this).val()!, $("#pw_strength .bar"), $(this)); + const password_value = $(this).val()!; + + if (password_value.length > 30) { + debounced_password_quality(password_value, $(this)); + } else { + password_quality(password_value, $("#pw_strength .bar"), $(this)); + } }); }