Skip to content

Commit

Permalink
OCPBUGS-43610: Disable login button when logging in
Browse files Browse the repository at this point in the history
  • Loading branch information
@logonoff
logonoff committed Jan 11, 2025
1 parent c7d1eef commit 8d657d1
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 6 deletions.
3 changes: 1 addition & 2 deletions _config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.

title: OpenShift oauth templates
title: OpenShift OAuth Templates
# email: [email protected]
# description: >- # this means to ignore newlines until "baseurl:"
# Write an awesome description for your new site here. You can edit this
Expand Down Expand Up @@ -73,4 +73,3 @@ exclude:
- generate-styles.js
- package.json
- yarn.lock

129 changes: 128 additions & 1 deletion _includes/styles/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,13 @@ button) {
--pf-t--global--font--line-height--200: 1.5;
--pf-t--global--font--size--100: 0.75rem;
--pf-t--global--font--size--200: 0.875rem;
--pf-t--global--font--size--300: 1rem;
--pf-t--global--font--size--700: 1.75rem;
--pf-t--global--font--weight--100: 400;
--pf-t--global--font--weight--200: 500;
--pf-t--global--font--weight--300: 500;
--pf-t--global--icon--size--250: 1rem;
--pf-t--global--icon--size--400: 3.5rem;
--pf-t--global--spacer--100: 0.25rem;
--pf-t--global--spacer--200: 0.5rem;
--pf-t--global--spacer--300: 1rem;
Expand Down Expand Up @@ -156,12 +159,16 @@ button) {
--pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
--pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
--pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
--pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
--pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
--pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
--pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
--pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
--pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
--pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
--pf-t--global--icon--color--300: var(--pf-t--color--white);
--pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
--pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
--pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
--pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
--pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
Expand All @@ -188,6 +195,7 @@ button) {
--pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
--pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
--pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
--pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
--pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
--pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
--pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
Expand All @@ -205,11 +213,15 @@ button) {
--pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
--pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
--pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
--pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
--pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
--pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
--pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
--pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl);
}

Expand All @@ -224,6 +236,7 @@ button) {
--pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
--pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
--pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
--pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
--pf-t--global--dark--text--color--100: var(--pf-t--color--white);
--pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
--pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
Expand All @@ -238,6 +251,8 @@ button) {
--pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
--pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100);
--pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--200);
--pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
--pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
--pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
--pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
--pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
Expand All @@ -247,6 +262,8 @@ button) {
--pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
--pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
--pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
--pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
Expand Down Expand Up @@ -369,10 +386,25 @@ button) {
--pf-v6-c-button--hover--TextDecorationStyle: none;
--pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
--pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
--pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
--pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
--pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
--pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
--pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
--pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
--pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
--pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
--pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
--pf-v6-c-button__progress--TranslateY: -50%;
--pf-v6-c-button__progress--TranslateX: 0;
--pf-v6-c-button__progress--InsetBlockStart: 50%;
--pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
--pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
--pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
--pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
--pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
--pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
--pf-v6-c-button--m-block--Display: flex;
--pf-v6-c-button--m-block--Width: 100%;
}
Expand Down Expand Up @@ -420,8 +452,10 @@ button) {
.pf-v6-c-button.pf-m-primary {
--pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor);
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color);
--pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color);
--pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor);
--pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color);
}
.pf-v6-c-button.pf-m-block {
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
Expand All @@ -432,6 +466,7 @@ button) {
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
--pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
--pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
}
.pf-v6-c-button:disabled {
Expand All @@ -444,6 +479,28 @@ button) {
.pf-v6-c-button:disabled::after {
border-color: transparent;
}
.pf-v6-c-button.pf-m-progress {
--pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
--pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
}
.pf-v6-c-button.pf-m-in-progress {
}
.pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
--pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
--pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
}

.pf-v6-c-button__progress {
position: absolute;
inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
line-height: 1;
color: var(--pf-v6-c-button__progress--Color);
transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
}
.pf-v6-c-button__progress .pf-v6-c-spinner {
--pf-v6-c-spinner--Color: currentcolor;
}

:root {
}
Expand Down Expand Up @@ -796,11 +853,74 @@ button) {
padding-inline-end: var(--pf-v6-c-login__footer--PaddingInlineEnd);
}

.pf-v6-c-spinner {
--pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
--pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
--pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
--pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
--pf-v6-c-spinner--AnimationDuration: 1.4s;
--pf-v6-c-spinner--AnimationTimingFunction: linear;
--pf-v6-c-spinner--StrokeWidth: 10;
--pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
--pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
}

.pf-v6-c-spinner {
width: var(--pf-v6-c-spinner--Width);
height: var(--pf-v6-c-spinner--Height);
overflow: hidden;
animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
}
.pf-v6-c-spinner.pf-m-md {
--pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
}

.pf-v6-c-spinner__path {
width: 100%;
height: 100%;
stroke: var(--pf-v6-c-spinner--Color);
stroke-dasharray: 283;
stroke-dashoffset: 280;
stroke-linecap: round;
stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
transform-origin: 50% 50%;
animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
}

@keyframes pf-v6-c-spinner-animation-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pf-v6-c-spinner-animation-dash {
0% {
stroke-dashoffset: 280;
transform: rotate(0);
}
15% {
stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
}
40% {
stroke-dasharray: 220;
stroke-dashoffset: 150;
}
100% {
stroke-dashoffset: 280;
transform: rotate(720deg);
}
}

.pf-v6-c-title {
--pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
--pf-v6-c-title--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
--pf-v6-c-title--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
--pf-v6-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
--pf-v6-c-title--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
--pf-v6-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
--pf-v6-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading--default);
}

.pf-v6-c-title {
Expand All @@ -811,4 +931,11 @@ button) {
font-size: var(--pf-v6-c-title--m-3xl--FontSize);
font-weight: var(--pf-v6-c-title--m-3xl--FontWeight);
line-height: var(--pf-v6-c-title--m-3xl--LineHeight);
}
}
.pf-v6-c-title.pf-m-md {
font-size: var(--pf-v6-c-title--m-md--FontSize);
font-weight: var(--pf-v6-c-title--m-md--FontWeight);
line-height: var(--pf-v6-c-title--m-md--LineHeight);
} .pf-v6-u-hidden {
display: none !important;
}
39 changes: 36 additions & 3 deletions _layouts/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<h1 class="pf-v6-c-title pf-m-3xl">{{ .Locale.LogInToYourAccount }}</h1>
</header>
<div class="pf-v6-c-login__main-body">
<form class="pf-v6-c-form" novalidate action="{{ .Action }}" method="POST">
<form class="pf-v6-c-form" action="{{ .Action }}" method="POST" id="co-login-form">
<input type="hidden" name="{{ .Names.Then }}" value="{{ .Values.Then }}">
<input type="hidden" name="{{ .Names.CSRF }}" value="{{ .Values.CSRF }}">
<div class="pf-v6-c-form__helper-text" aria-live="polite">
Expand Down Expand Up @@ -45,8 +45,16 @@ <h1 class="pf-v6-c-title pf-m-3xl">{{ .Locale.LogInToYourAccount }}</h1>
</span>
</div>
<div class="pf-v6-c-form__group pf-m-action">
<button class="pf-v6-c-button pf-m-block pf-m-primary" type="submit">
<span class="pf-v6-c-button__text">{{ .Locale.LogIn }}</span>
<button class="pf-m-progress pf-v6-c-button pf-m-block pf-m-primary" type="submit" id="co-login-button">
<span class="pf-v6-c-button__text">
<span class="pf-v6-c-button__progress" style="inset-inline-start: unset; margin-inline-start: calc(-1.5 * var(--pf-t--global--icon--size--lg))">
<svg class="pf-v6-c-spinner pf-m-md pf-v6-u-hidden" role="progressbar" viewBox="0 0 100 100"
aria-label="Loading...">
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
</svg>
</span>
{{ .Locale.LogIn }}
</span>
</button>
</div>
</form>
Expand All @@ -55,3 +63,28 @@ <h1 class="pf-v6-c-title pf-m-3xl">{{ .Locale.LogInToYourAccount }}</h1>
<footer class="pf-v6-c-login__footer">
<p>{% raw %}{{ .Locale.WelcomeTo }}{% endraw %} {{ collection.name }}</p>
</footer>

<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById('co-login-form').addEventListener('submit', () => {
const loginButton = document.getElementById('co-login-button');

loginButton.querySelector('.pf-v6-c-spinner').classList.remove('pf-v6-u-hidden');
loginButton.classList.add('pf-m-in-progress');
loginButton.disabled = true;
});

document.getElementById('co-login-button').disabled = true;

const checkFormValidity = () => {
const username = document.getElementById('inputUsername').value;
const password = document.getElementById('inputPassword').value;

document.getElementById('co-login-button').disabled = !(username && password);
};

document.getElementById('co-login-form').addEventListener('change', checkFormValidity);
document.getElementById('inputUsername').addEventListener('input', checkFormValidity);
document.getElementById('inputPassword').addEventListener('input', checkFormValidity);
});
</script>

0 comments on commit 8d657d1

Please sign in to comment.