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

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

@ -1,6 +1,24 @@
// if an autofilled input is deleted we remove the attribute
function detectDelete(event) {
const key = event.key;
if (key === "Backspace" || key === "Delete") {
event.target.isAutofilled = false;
}
}
// 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);
}
}
function disableSubmit(checks, button) {
let form = document.getElementsByTagName('form')[0];
let inputs = form.getElementsByTagName('input');
let form = document.getElementsByTagName("form")[0];
let inputs = form.getElementsByTagName("input");
if (button) {
button.disabled = true;
}
@ -11,23 +29,34 @@ function disableSubmit(checks, button) {
}
function addRequiredEventListener(inputs, checks, form, button) {
let eventType = 'input';
let eventType = "input";
for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) {
eventType = 'input';
if (inputs[i].type === 'checkbox') {
eventType = 'click';
eventType = "input";
if (inputs[i].type === "checkbox") {
eventType = "click";
}
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) {
form.addEventListener('submit', function () {
document.body.classList.add('waiting');
form.addEventListener("submit", function () {
document.body.classList.add("waiting");
button.disabled = true;
});
}
@ -46,10 +75,10 @@ function toggleButton(checks, form, inputs, button) {
function allRequiredDone(form, inputs) {
for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) {
if (inputs[i].type === 'checkbox' && !inputs[i].checked) {
if (inputs[i].type === "checkbox" && !inputs[i].checked) {
return false;
}
if (inputs[i].value === '') {
if (inputs[i].value === "" && !inputs[i].isAutofilled) {
return false;
}
}

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

@ -15,13 +15,13 @@ $lgn-input-placeholder-font-size: 14px !default;
text-align: start;
cursor: text;
border-radius: $lgn-input-border-radius;
transform: all .2 linear;
transform: all 0.2 linear;
font-size: 1rem;
border-style: solid;
border-width: $lgn-input-border-width;
height: $lgn-input-line-height;
padding: $lgn-input-padding;
transition: border-color .2s ease-in-out;
transition: border-color 0.2s ease-in-out;
width: 100%;
margin: $lgn-input-margin;
@ -29,4 +29,19 @@ $lgn-input-placeholder-font-size: 14px !default;
font-size: $lgn-input-placeholder-font-size;
font-style: italic;
}
&:autofill {
animation-duration: 50000s;
animation-name: onautofillstart;
}
&:-webkit-autofill {
animation-duration: 50000s;
animation-name: onautofillstart;
}
}
@keyframes onautofillstart {
from {
}
}