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) {
let form = document.getElementsByTagName('form')[0];
let inputs = form.getElementsByTagName('input');
if (button) {
button.disabled = true;
}
addRequiredEventListener(inputs, checks, form, button);
disableDoubleSubmit(form, button);
// 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");
if (button) {
button.disabled = true;
}
addRequiredEventListener(inputs, checks, form, button);
disableDoubleSubmit(form, button);
toggleButton(checks, form, inputs, button);
}
function addRequiredEventListener(inputs, checks, form, button) {
let eventType = 'input';
for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) {
eventType = 'input';
if (inputs[i].type === 'checkbox') {
eventType = 'click';
}
inputs[i].addEventListener(eventType, function () {
toggleButton(checks, form, inputs, button);
});
}
let eventType = "input";
for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) {
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');
button.disabled = true;
});
form.addEventListener("submit", function () {
document.body.classList.add("waiting");
button.disabled = true;
});
}
function toggleButton(checks, form, inputs, button) {
if (checks !== undefined) {
if (checks() === false) {
button.disabled = true;
return;
}
if (checks !== undefined) {
if (checks() === false) {
button.disabled = true;
return;
}
const targetValue = !allRequiredDone(form, inputs);
button.disabled = targetValue;
}
const targetValue = !allRequiredDone(form, inputs);
button.disabled = targetValue;
}
function allRequiredDone(form, inputs) {
for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) {
if (inputs[i].type === 'checkbox' && !inputs[i].checked) {
return false;
}
if (inputs[i].value === '') {
return false;
}
}
for (i = 0; i < inputs.length; i++) {
if (inputs[i].required) {
if (inputs[i].type === "checkbox" && !inputs[i].checked) {
return false;
}
if (inputs[i].value === "" && !inputs[i].isAutofilled) {
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;
@mixin lgn-input-base {
display: block;
box-sizing: border-box;
padding-inline-start: $lgn-input-padding-start;
outline: none;
display: inline-block;
text-align: start;
cursor: text;
border-radius: $lgn-input-border-radius;
transform: all .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;
width: 100%;
margin: $lgn-input-margin;
display: block;
box-sizing: border-box;
padding-inline-start: $lgn-input-padding-start;
outline: none;
display: inline-block;
text-align: start;
cursor: text;
border-radius: $lgn-input-border-radius;
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 0.2s ease-in-out;
width: 100%;
margin: $lgn-input-margin;
&::placeholder {
font-size: $lgn-input-placeholder-font-size;
font-style: italic;
}
&::placeholder {
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 {
}
}