TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-12 02:54:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: detect autofill in chrome to enable login buttons (#7056)

Browse Source 
* fix: detect autofill in chrome to enable login buttons

* fix: add -webkit-autofill to input scss

---------

Co-authored-by: Max Peintner <max@caos.ch>
This commit is contained in:
Miguel Cabrerizo 2024-01-22 10:24:36 +01:00 committed by GitHub
parent 8470649ecb
commit 89169b64ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 106 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
internal/api/ui/login/static/resources/scripts/form_submit.js
View File

@ -1,58 +1,87 @@
function disableSubmit(checks, button) { // if an autofilled input is deleted we remove the attribute
let form = document.getElementsByTagName('form')[0]; function detectDelete(event) {
let inputs = form.getElementsByTagName('input'); const key = event.key;
if (button) { if (key === "Backspace" || key === "Delete") {
button.disabled = true; event.target.isAutofilled = false;
} }
addRequiredEventListener(inputs, checks, form, button); }
disableDoubleSubmit(form, button);
// if the autofill associated animation is detected we add a property
// and check if submit button should be disabled or not
function autofill(target, checks, form, inputs, button) {
if (!target.isAutofilled) {
target.isAutofilled = true;
target.dispatchEvent(new CustomEvent("autofill", { bubbles: true }));
toggleButton(checks, form, inputs, button); toggleButton(checks, form, inputs, button);
}
}
function disableSubmit(checks, button) {
let form = document.getElementsByTagName("form")[0];
let inputs = form.getElementsByTagName("input");
if (button) {
button.disabled = true;
}
addRequiredEventListener(inputs, checks, form, button);
disableDoubleSubmit(form, button);
toggleButton(checks, form, inputs, button);
} }
function addRequiredEventListener(inputs, checks, form, button) { function addRequiredEventListener(inputs, checks, form, button) {
let eventType = 'input'; let eventType = "input";
for (i = 0; i < inputs.length; i++) { for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) { if (inputs[i].required) {
eventType = 'input'; eventType = "input";
if (inputs[i].type === 'checkbox') { if (inputs[i].type === "checkbox") {
eventType = 'click'; eventType = "click";
} }
inputs[i].addEventListener(eventType, function () {
toggleButton(checks, form, inputs, button); inputs[i].addEventListener(eventType, function () {
}); toggleButton(checks, form, inputs, button);
} });
if (inputs[i].type !== "checkbox") {
// hack for Chrome, add an animationstart event listener
// if input is autofilled: https://gist.github.com/jonathantneal/d462fc2bf761a10c9fca60eb634f6977?permalink_comment_id=2901919
inputs[i].addEventListener("animationstart", (event) =>
autofill(event.target, checks, form, inputs, button)
);
inputs[i].addEventListener("keydown", detectDelete);
}
} }
}
} }
function disableDoubleSubmit(form, button) { function disableDoubleSubmit(form, button) {
form.addEventListener('submit', function () { form.addEventListener("submit", function () {
document.body.classList.add('waiting'); document.body.classList.add("waiting");
button.disabled = true; button.disabled = true;
}); });
} }
function toggleButton(checks, form, inputs, button) { function toggleButton(checks, form, inputs, button) {
if (checks !== undefined) { if (checks !== undefined) {
if (checks() === false) { if (checks() === false) {
button.disabled = true; button.disabled = true;
return; return;
}
} }
const targetValue = !allRequiredDone(form, inputs); }
button.disabled = targetValue; const targetValue = !allRequiredDone(form, inputs);
button.disabled = targetValue;
} }
function allRequiredDone(form, inputs) { function allRequiredDone(form, inputs) {
for (i = 0; i < inputs.length; i++) { for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) { if (inputs[i].required) {
if (inputs[i].type === 'checkbox' && !inputs[i].checked) { if (inputs[i].type === "checkbox" && !inputs[i].checked) {
return false; return false;
} }
if (inputs[i].value === '') { if (inputs[i].value === "" && !inputs[i].isAutofilled) {
return false; return false;
} }
}
} }
return true; }
} return true;
}

57
internal/api/ui/login/static/resources/themes/scss/styles/input/input_base.scss
View File

@ -7,26 +7,41 @@ $lgn-input-border-width: 1px !default;
$lgn-input-placeholder-font-size: 14px !default; $lgn-input-placeholder-font-size: 14px !default;
@mixin lgn-input-base { @mixin lgn-input-base {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
padding-inline-start: $lgn-input-padding-start; padding-inline-start: $lgn-input-padding-start;
outline: none; outline: none;
display: inline-block; display: inline-block;
text-align: start; text-align: start;
cursor: text; cursor: text;
border-radius: $lgn-input-border-radius; border-radius: $lgn-input-border-radius;
transform: all .2 linear; transform: all 0.2 linear;
font-size: 1rem; font-size: 1rem;
border-style: solid; border-style: solid;
border-width: $lgn-input-border-width; border-width: $lgn-input-border-width;
height: $lgn-input-line-height; height: $lgn-input-line-height;
padding: $lgn-input-padding; padding: $lgn-input-padding;
transition: border-color .2s ease-in-out; transition: border-color 0.2s ease-in-out;
width: 100%; width: 100%;
margin: $lgn-input-margin; margin: $lgn-input-margin;
&::placeholder { &::placeholder {
font-size: $lgn-input-placeholder-font-size; font-size: $lgn-input-placeholder-font-size;
font-style: italic; font-style: italic;
} }
&:autofill {
animation-duration: 50000s;
animation-name: onautofillstart;
}
&:-webkit-autofill {
animation-duration: 50000s;
animation-name: onautofillstart;
}
}
@keyframes onautofillstart {
from {
}
} }