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

fix(login): mfa prompt UI improvements, fix register field validation, email validation (#4672)

Browse Source 
* fix: mfa prompt styling

* register password field validation

* loginname overflow, mfa hover effect

* cleanup

* Update internal/api/ui/login/static/resources/scripts/password_policy_check.js

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* prettier if check

* cleanup

* Update internal/api/ui/login/static/resources/scripts/password_policy_check.js

Co-authored-by: Livio Spring <livio.a@gmail.com>

* fix confirmation validation, cleanup

* rm log

* email type validation

* add email validation

* change pattern

* pattern

* comment RFC 2822

* dont wrapp org name

* rm email validation

Co-authored-by: Silvan <silvan.reusser@gmail.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-11-17 13:25:09 +01:00
committed by GitHub
parent 7db87f4646
commit 2a8dfab192
17 changed files with 240 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
internal/api/ui/login/static/resources/scripts/change_password_check.js
View File

@@ -1,16 +1,14 @@
function CheckChangePwPolicy() {
let policyElement = document.getElementById("change-new-password");
let pwNew = policyElement.value;
let pwNewConfirmation = document.getElementById("change-password-confirmation").value;
const pwNew = document.getElementById("change-new-password");
const pwNewValue = pwNew.value;
const pwNewConfirmation = document.getElementById(
"change-password-confirmation"
);
const pwNewConfirmationValue = pwNewConfirmation.value;
if (ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) === false) {
policyElement.setAttribute("color", "warn");
return false;
} else {
policyElement.setAttribute("color", "primary");
}
ComplexityPolicyCheck(pwNew, pwNewConfirmation);
return pwNew === pwNewConfirmation;
return pwNewValue == pwNewConfirmationValue;
}
let button = document.getElementById("change-password-button");

15
internal/api/ui/login/static/resources/scripts/init_password_check.js
View File

@@ -1,14 +1,13 @@
function CheckInitPwPolicy() {
let policyElement = document.getElementById("password");
let pwNew = policyElement.value;
let pwNewConfirmation = document.getElementById("passwordconfirm").value;
const pwNew = document.getElementById("password");
const pwNewValue = pwNew.value;
const pwNewConfirmation = document.getElementById("passwordconfirm");
const pwNewConfirmationValue = pwNewConfirmation.value;
if (ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) === false) {
return false;
}
ComplexityPolicyCheck(pwNew, pwNewConfirmation);
return pwNew == pwNewConfirmation;
return pwNewValue == pwNewConfirmationValue;
}
let button = document.getElementById("init-button");
disableSubmit(CheckInitPwPolicy, button);
disableSubmit(CheckInitPwPolicy, button);

20
internal/api/ui/login/static/resources/scripts/mfa.js Normal file
View File

@@ -0,0 +1,20 @@
validate();
document.querySelectorAll('input[name="provider"]').forEach((input) => {
input.addEventListener("change", validate);
});
function validate() {
const checkedMfaMethod = document.querySelector(
'input[name="provider"]:checked'
);
const submitButton = document.querySelector(
'button.lgn-raised-button[type="submit"]'
);
if (checkedMfaMethod && submitButton) {
submitButton.disabled = false;
} else if (submitButton) {
submitButton.disabled = true;
}
}

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

@@ -1,77 +1,93 @@
function ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) {
let minLength = policyElement.dataset.minlength;
let upperRegex = policyElement.dataset.hasUppercase;
let lowerRegex = policyElement.dataset.hasLowercase;
let numberRegex = policyElement.dataset.hasNumber;
let symbolRegex = policyElement.dataset.hasSymbol;
function ComplexityPolicyCheck(passwordElement, passwordConfirmationElement) {
const minLength = passwordElement.dataset.minlength;
const upperRegex = passwordElement.dataset.hasUppercase;
const lowerRegex = passwordElement.dataset.hasLowercase;
const numberRegex = passwordElement.dataset.hasNumber;
const symbolRegex = passwordElement.dataset.hasSymbol;
let invalid = 0;
let invalid = 0;
let minlengthelem = document.getElementById('minlength');
if (pwNew.length >= minLength) {
ValidPolicy(minlengthelem);
const minLengthElem = document.getElementById("minlength");
if (passwordElement.value.length >= minLength) {
ValidPolicy(minLengthElem);
} else {
InvalidPolicy(minLengthElem);
invalid++;
}
const upper = document.getElementById("uppercase");
if (upperRegex !== "") {
if (RegExp(upperRegex).test(passwordElement.value)) {
ValidPolicy(upper);
} else {
InvalidPolicy(minlengthelem);
invalid++;
InvalidPolicy(upper);
invalid++;
}
let upper = document.getElementById('uppercase');
if (upperRegex !== "") {
if (RegExp(upperRegex).test(pwNew)) {
ValidPolicy(upper);
} else {
InvalidPolicy(upper);
invalid++;
}
}
let lower = document.getElementById('lowercase');
if (lowerRegex !== "") {
if (RegExp(lowerRegex).test(pwNew)) {
ValidPolicy(lower);
} else {
InvalidPolicy(lower);
invalid++;
}
}
let number = document.getElementById('number');
if (numberRegex !== "") {
if (RegExp(numberRegex).test(pwNew)) {
ValidPolicy(number);
} else {
InvalidPolicy(number);
invalid++;
}
}
let symbol = document.getElementById('symbol');
if (symbolRegex !== "") {
if (RegExp(symbolRegex).test(pwNew)) {
ValidPolicy(symbol);
} else {
InvalidPolicy(symbol);
invalid++;
}
}
let confirmation = document.getElementById('confirmation');
if (pwNew === pwNewConfirmation && pwNewConfirmation !== "" ) {
ValidPolicy(confirmation);
}
const lower = document.getElementById("lowercase");
if (lowerRegex !== "") {
if (RegExp(lowerRegex).test(passwordElement.value)) {
ValidPolicy(lower);
} else {
InvalidPolicy(confirmation);
invalid++;
InvalidPolicy(lower);
invalid++;
}
return invalid===0;
}
const number = document.getElementById("number");
if (numberRegex !== "") {
if (RegExp(numberRegex).test(passwordElement.value)) {
ValidPolicy(number);
} else {
InvalidPolicy(number);
invalid++;
}
}
const symbol = document.getElementById("symbol");
if (symbolRegex !== "") {
if (RegExp(symbolRegex).test(passwordElement.value)) {
ValidPolicy(symbol);
} else {
InvalidPolicy(symbol);
invalid++;
}
}
const confirmation = document.getElementById("confirmation");
if (
passwordElement.value === passwordConfirmationElement.value &&
passwordConfirmationElement.value !== ""
) {
ValidPolicy(confirmation);
passwordConfirmationElement.setAttribute("color", "primary");
} else {
InvalidPolicy(confirmation);
passwordConfirmationElement.setAttribute("color", "warn");
}
if (invalid > 0) {
passwordElement.setAttribute("color", "warn");
return false;
} else {
passwordElement.setAttribute("color", "primary");
return true;
}
}
function ValidPolicy(element) {
element.classList.remove('invalid');
element.getElementsByTagName('i')[0].classList.remove('lgn-icon-times-solid');
element.getElementsByTagName('i')[0].classList.remove('lgn-warn');
element.getElementsByTagName('i')[0].classList.add('lgn-icon-check-solid');
element.getElementsByTagName('i')[0].classList.add('lgn-valid');
element.classList.remove("invalid");
element.getElementsByTagName("i")[0].classList.remove("lgn-icon-times-solid");
element.getElementsByTagName("i")[0].classList.remove("lgn-warn");
element.getElementsByTagName("i")[0].classList.add("lgn-icon-check-solid");
element.getElementsByTagName("i")[0].classList.add("lgn-valid");
}
function InvalidPolicy(element) {
element.classList.add('invalid');
element.getElementsByTagName('i')[0].classList.remove('lgn-valid');
element.getElementsByTagName('i')[0].classList.remove('lgn-icon-check-solid');
element.getElementsByTagName('i')[0].classList.add('lgn-warn');
element.getElementsByTagName('i')[0].classList.add('lgn-icon-times-solid');
element.classList.add("invalid");
element.getElementsByTagName("i")[0].classList.remove("lgn-valid");
element.getElementsByTagName("i")[0].classList.remove("lgn-icon-check-solid");
element.getElementsByTagName("i")[0].classList.add("lgn-warn");
element.getElementsByTagName("i")[0].classList.add("lgn-icon-times-solid");
}

18
internal/api/ui/login/static/resources/scripts/register_check.js
View File

@@ -1,16 +1,14 @@
function CheckRegisterPwPolicy() {
let policyElement = document.getElementById("register-password");
let pwNew = policyElement.value;
let pwNewConfirmation = document.getElementById("register-password-confirmation").value;
const pwNew = document.getElementById("register-password");
const pwNewConfirmation = document.getElementById(
"register-password-confirmation"
);
const pwNewValue = pwNew.value;
const pwNewConfirmationValue = pwNewConfirmation.value;
if (ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) === false) {
policyElement.setAttribute("color", "warn");
return false;
} else {
policyElement.setAttribute("color", "primary");
}
ComplexityPolicyCheck(pwNew, pwNewConfirmation);
return pwNew == pwNewConfirmation;
return pwNewValue == pwNewConfirmationValue;
}
let button = document.getElementById("register-button");