TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-10-26 11:21:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show max password length in complexity components (#7810)

Browse Source 
# Which Problems Are Solved

There is confusing ambiguity in the error messages for setting too long
passwords in different places.

# How the Problems Are Solved

A check for maximum password length is added so it's clear that
passwords can't exceed a maximum length of 70 or 72 bytes.
Password validation now provides a live updating check mark or cross
mark to indicate if the maximum length requirement is met.

# Additional Changes

Clarified requirement descriptions on the registration page with
complete sentences.

# Additional Context

Closes #6301

---------

Co-authored-by: Elio Bischof <elio@zitadel.com>
This commit is contained in:
Sujoy B
2024-05-23 04:07:36 -04:00
committed by GitHub
parent f5e9d4f57f
commit cfa3d013a4
31 changed files with 223 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
internal/api/ui/login/static/resources/scripts/password_policy_check.js
View File

@@ -15,6 +15,14 @@ function ComplexityPolicyCheck(passwordElement, passwordConfirmationElement) {
invalid++;
}
const maxLengthElem = document.getElementById("maxlength");
if (passwordElement.value.length <= 70) {
ValidPolicyFlipped(maxLengthElem);
} else {
InvalidPolicyFlipped(maxLengthElem);
invalid++;
}
const upper = document.getElementById("uppercase");
if (upperRegex !== "") {
if (RegExp(upperRegex).test(passwordElement.value)) {
@@ -84,6 +92,14 @@ function ValidPolicy(element) {
element.getElementsByTagName("i")[0].classList.add("lgn-valid");
}
function ValidPolicyFlipped(element) {
element.classList.add("valid");
element.getElementsByTagName("i")[0].classList.remove("lgn-warn");
element.getElementsByTagName("i")[0].classList.remove("lgn-icon-times-solid");
element.getElementsByTagName("i")[0].classList.add("lgn-valid");
element.getElementsByTagName("i")[0].classList.add("lgn-icon-check-solid");
}
function InvalidPolicy(element) {
element.classList.add("invalid");
element.getElementsByTagName("i")[0].classList.remove("lgn-valid");
@@ -91,3 +107,11 @@ function InvalidPolicy(element) {
element.getElementsByTagName("i")[0].classList.add("lgn-warn");
element.getElementsByTagName("i")[0].classList.add("lgn-icon-times-solid");
}
function InvalidPolicyFlipped(element) {
element.classList.remove("valid");
element.getElementsByTagName("i")[0].classList.remove("lgn-icon-check-solid");
element.getElementsByTagName("i")[0].classList.remove("lgn-valid");
element.getElementsByTagName("i")[0].classList.add("lgn-icon-times-solid");
element.getElementsByTagName("i")[0].classList.add("lgn-warn");
}