UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: очистка loader Authentik
This commit is contained in:
Codex
parent
b0b439e4df
commit
9d7f8167d3
|
|
@ -1,6 +1,151 @@
|
|||
{% load i18n %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
|
||||
<style data-id="nodedc-auth-critical-loader">
|
||||
:root {
|
||||
--ak-global--primary: rgb(195, 255, 102) !important;
|
||||
--ak-global--background: #0e0f10 !important;
|
||||
--ak-global--background-image: none !important;
|
||||
--pf-global--primary-color--100: rgb(195, 255, 102) !important;
|
||||
--pf-v5-global--primary-color--100: rgb(195, 255, 102) !important;
|
||||
--pf-v6-global--primary-color--100: rgb(195, 255, 102) !important;
|
||||
--pf-v4-global--palette--blue-300: rgb(195, 255, 102) !important;
|
||||
--ak-global--palette--blue-300: rgb(195, 255, 102) !important;
|
||||
--pf-global--active-color--100: rgb(195, 255, 102) !important;
|
||||
--pf-global--link--Color: rgb(195, 255, 102) !important;
|
||||
--nodedc-auth-primary: rgb(195, 255, 102) !important;
|
||||
--nodedc-auth-bg: #0e0f10 !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
html body .pf-c-login {
|
||||
background: #0e0f10 !important;
|
||||
color-scheme: dark !important;
|
||||
}
|
||||
|
||||
html body ak-flow-executor::part(main),
|
||||
html body .pf-c-login__main,
|
||||
html body .pf-c-empty-state,
|
||||
html body .pf-v5-c-empty-state,
|
||||
html body .pf-v6-c-empty-state,
|
||||
html body .pf-c-card,
|
||||
html body .pf-v5-c-card,
|
||||
html body .pf-v6-c-card,
|
||||
html body [class*="empty-state"] {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
html body .pf-c-spinner,
|
||||
html body .pf-v5-c-spinner,
|
||||
html body .pf-v6-c-spinner,
|
||||
html body [role="progressbar"],
|
||||
html body ak-spinner {
|
||||
--pf-c-spinner--Color: rgb(195, 255, 102) !important;
|
||||
--pf-v5-c-spinner--Color: rgb(195, 255, 102) !important;
|
||||
--pf-v6-c-spinner--Color: rgb(195, 255, 102) !important;
|
||||
--pf-c-spinner__clipper--after--BoxShadowColor: rgb(195, 255, 102) !important;
|
||||
--pf-c-spinner__lead-ball--after--BackgroundColor: rgb(195, 255, 102) !important;
|
||||
--pf-c-spinner__tail-ball--after--BackgroundColor: rgb(195, 255, 102) !important;
|
||||
color: rgb(195, 255, 102) !important;
|
||||
}
|
||||
|
||||
html body #ak-placeholder.ak-c-placeholder,
|
||||
html body .ak-c-placeholder[slot="placeholder"] {
|
||||
position: fixed !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
display: block !important;
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
min-width: 2.5rem !important;
|
||||
min-height: 2.5rem !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 999px !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
html body #ak-placeholder.ak-c-placeholder .pf-c-spinner,
|
||||
html body .ak-c-placeholder[slot="placeholder"] .pf-c-spinner,
|
||||
html body #ak-placeholder.ak-c-placeholder [role="progressbar"],
|
||||
html body .ak-c-placeholder[slot="placeholder"] [role="progressbar"] {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
html body #ak-placeholder.ak-c-placeholder::before,
|
||||
html body .ak-c-placeholder[slot="placeholder"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid rgba(195, 255, 102, 0.22);
|
||||
border-top-color: rgb(195, 255, 102);
|
||||
border-radius: 999px;
|
||||
animation: nodedc-auth-placeholder-spin 0.72s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html body.nodedc-auth-loading ak-flow-executor::part(main),
|
||||
html body.nodedc-auth-loading .pf-c-login__main {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
html body.nodedc-auth-loading::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1200;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 2px solid rgba(195, 255, 102, 0.22);
|
||||
border-top-color: rgb(195, 255, 102);
|
||||
border-radius: 999px;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: nodedc-auth-loader-spin 0.72s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html body.nodedc-auth-card-ready::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@keyframes nodedc-auth-loader-spin {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nodedc-auth-placeholder-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script data-id="authentik-config">
|
||||
"use strict";
|
||||
|
||||
|
|
@ -62,6 +207,11 @@
|
|||
`;
|
||||
const genericLoginError = "Не удалось выполнить вход. Проверьте email и пароль или запросите доступ.";
|
||||
const revokedLoginError = "Аккаунт больше не активен. Запросите доступ, если хотите подключиться снова.";
|
||||
const genericFlowErrorMessages = [
|
||||
"Response returned an error code",
|
||||
"Response returned an error",
|
||||
"Не удалось завершить операцию.",
|
||||
];
|
||||
const accountStatusCache = new Map();
|
||||
const authTranslations = new Map([
|
||||
["Failed to authenticate.", genericLoginError],
|
||||
|
|
@ -88,6 +238,7 @@
|
|||
["Not you?", "Сменить пользователя"],
|
||||
["Request has been denied.", "Доступ к модулю ограничен."],
|
||||
["Go home", "Вернуться назад"],
|
||||
["Response returned an error code", "Не удалось завершить операцию."],
|
||||
]);
|
||||
|
||||
function visitRoots(root, callback) {
|
||||
|
|
@ -479,6 +630,43 @@
|
|||
return getLoginErrorMessages().some((message) => text.includes(message));
|
||||
}
|
||||
|
||||
function hasGenericFlowError(root) {
|
||||
const text = root.textContent || "";
|
||||
return genericFlowErrorMessages.some((message) => text.includes(message));
|
||||
}
|
||||
|
||||
function hasLoadingOnlyScreen(root) {
|
||||
const isFlowExecutorRoot = root.host?.tagName?.toLowerCase() === "ak-flow-executor";
|
||||
const hasProgress =
|
||||
root.querySelector?.(".pf-c-spinner, .pf-v5-c-spinner, [role='progressbar'], ak-spinner");
|
||||
const isEmptyFlowExecutor = isFlowExecutorRoot && (root.textContent || "").trim() === "";
|
||||
const hasInteractiveAuth =
|
||||
root.querySelector?.("input, textarea, select, button[type='submit'], .pf-c-alert, .pf-v5-c-alert") ||
|
||||
hasGenericFlowError(root);
|
||||
|
||||
return Boolean((hasProgress || isEmptyFlowExecutor) && !hasInteractiveAuth);
|
||||
}
|
||||
|
||||
function syncLoadingState() {
|
||||
let isLoadingOnly = false;
|
||||
let hasAuthContent = false;
|
||||
visitRoots(document, (root) => {
|
||||
if (hasLoadingOnlyScreen(root)) {
|
||||
isLoadingOnly = true;
|
||||
}
|
||||
if (
|
||||
root.querySelector?.("input, textarea, select, button[type='submit'], .pf-c-alert, .pf-v5-c-alert") ||
|
||||
hasGenericFlowError(root)
|
||||
) {
|
||||
hasAuthContent = true;
|
||||
}
|
||||
});
|
||||
const shouldShowLoader = isLoadingOnly && !hasAuthContent;
|
||||
|
||||
document.body?.classList.toggle("nodedc-auth-loading", shouldShowLoader);
|
||||
document.body?.classList.toggle("nodedc-auth-card-ready", hasAuthContent);
|
||||
}
|
||||
|
||||
function restoreCardOnErrors(root) {
|
||||
if (hasAuthError(root)) {
|
||||
document.body?.classList.remove("nodedc-auth-submitting");
|
||||
|
|
@ -520,6 +708,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
function buildLoggedOutRedirectUrl() {
|
||||
return new URL("/auth/logged-out", getLauncherBaseUrl()).toString();
|
||||
}
|
||||
|
||||
function redirectGenericFlowError(root) {
|
||||
if (document.body?.dataset.nodedcFlowErrorRedirected === "true") return;
|
||||
if (!window.location.pathname.includes("/if/flow/")) return;
|
||||
if (!hasGenericFlowError(root)) return;
|
||||
|
||||
document.body.dataset.nodedcFlowErrorRedirected = "true";
|
||||
document.body.classList.add("nodedc-auth-submitting");
|
||||
window.setTimeout(() => {
|
||||
window.location.replace(getSafePostLogoutRedirect() || buildLoggedOutRedirectUrl());
|
||||
}, 120);
|
||||
}
|
||||
|
||||
function redirectCompletedLogout(root) {
|
||||
if (!isOidcLogoutFlow() || document.body?.dataset.nodedcLogoutRedirected === "true") return;
|
||||
|
||||
|
|
@ -562,8 +766,10 @@
|
|||
hidePermissionDeniedReason(root);
|
||||
restoreCardOnErrors(root);
|
||||
redirectCompletedLogout(root);
|
||||
redirectGenericFlowError(root);
|
||||
});
|
||||
syncPermissionDeniedState();
|
||||
syncLoadingState();
|
||||
}
|
||||
|
||||
function scheduleEnhancement() {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
--ak-c-login__footer--PaddingBlock: 0;
|
||||
--pf-global--primary-color--100: rgb(195, 255, 102);
|
||||
--pf-global--primary-color--200: rgb(218, 255, 139);
|
||||
--pf-v4-global--palette--blue-300: rgb(195, 255, 102);
|
||||
--ak-global--palette--blue-300: rgb(195, 255, 102);
|
||||
--pf-global--active-color--100: rgb(195, 255, 102);
|
||||
--pf-global--link--Color: rgb(195, 255, 102);
|
||||
--pf-global--link--Color--hover: rgb(218, 255, 139);
|
||||
--pf-global--BackgroundColor--100: #0e0f10;
|
||||
|
|
@ -181,12 +184,19 @@ ak-flow-executor::part(main),
|
|||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 1.9rem !important;
|
||||
background: transparent !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
body.nodedc-auth-card-ready ak-flow-executor::part(main),
|
||||
body.nodedc-auth-card-ready .pf-c-login__main {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.015) 100%),
|
||||
var(--nodedc-auth-card-bg) !important;
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
backdrop-filter: blur(40px);
|
||||
justify-content: flex-start !important;
|
||||
-webkit-backdrop-filter: blur(40px) !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
}
|
||||
|
||||
ak-flow-card,
|
||||
|
|
@ -204,7 +214,16 @@ ak-stage-password {
|
|||
.pf-c-input-group,
|
||||
.pf-c-input-group__item,
|
||||
.pf-c-card,
|
||||
.pf-c-card__body {
|
||||
.pf-c-card__body,
|
||||
.pf-c-empty-state,
|
||||
.pf-c-empty-state__content,
|
||||
.pf-c-empty-state__body,
|
||||
.pf-v5-c-empty-state,
|
||||
.pf-v5-c-empty-state__content,
|
||||
.pf-v5-c-empty-state__body,
|
||||
.pf-v6-c-empty-state,
|
||||
.pf-v6-c-empty-state__content,
|
||||
.pf-v6-c-empty-state__body {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
|
|
@ -559,15 +578,118 @@ button.pf-m-link {
|
|||
}
|
||||
|
||||
body.nodedc-auth-submitting ak-flow-executor::part(main),
|
||||
body.nodedc-auth-loading ak-flow-executor::part(main),
|
||||
body.nodedc-auth-submitting .pf-c-login__main,
|
||||
body.nodedc-auth-loading .pf-c-login__main,
|
||||
body.nodedc-auth-submitting .pf-c-empty-state,
|
||||
body.nodedc-auth-loading .pf-c-empty-state,
|
||||
body.nodedc-auth-submitting .pf-c-spinner,
|
||||
body.nodedc-auth-loading .pf-c-spinner,
|
||||
body.nodedc-auth-submitting [role="progressbar"] {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
body.nodedc-auth-loading [role="progressbar"] {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.pf-c-spinner,
|
||||
.pf-v5-c-spinner,
|
||||
[role="progressbar"],
|
||||
ak-spinner {
|
||||
--pf-c-spinner--Color: var(--nodedc-auth-primary) !important;
|
||||
--pf-v5-c-spinner--Color: var(--nodedc-auth-primary) !important;
|
||||
--pf-c-spinner__clipper--after--BoxShadowColor: var(--nodedc-auth-primary) !important;
|
||||
--pf-c-spinner__lead-ball--after--BackgroundColor: var(--nodedc-auth-primary) !important;
|
||||
--pf-c-spinner__tail-ball--after--BackgroundColor: var(--nodedc-auth-primary) !important;
|
||||
color: var(--nodedc-auth-primary) !important;
|
||||
}
|
||||
|
||||
#ak-placeholder.ak-c-placeholder,
|
||||
.ak-c-placeholder[slot="placeholder"] {
|
||||
position: fixed !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
display: block !important;
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
min-width: 2.5rem !important;
|
||||
min-height: 2.5rem !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 999px !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#ak-placeholder.ak-c-placeholder .pf-c-spinner,
|
||||
.ak-c-placeholder[slot="placeholder"] .pf-c-spinner,
|
||||
#ak-placeholder.ak-c-placeholder [role="progressbar"],
|
||||
.ak-c-placeholder[slot="placeholder"] [role="progressbar"] {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
#ak-placeholder.ak-c-placeholder::before,
|
||||
.ak-c-placeholder[slot="placeholder"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid rgba(186, 255, 74, 0.22);
|
||||
border-top-color: var(--nodedc-auth-primary);
|
||||
border-radius: 999px;
|
||||
animation: nodedc-auth-placeholder-spin 0.72s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.nodedc-auth-submitting::before,
|
||||
body.nodedc-auth-loading::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1200;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 2px solid rgba(186, 255, 74, 0.22);
|
||||
border-top-color: var(--nodedc-auth-primary);
|
||||
border-radius: 999px;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: nodedc-auth-loader-spin 0.72s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes nodedc-auth-loader-spin {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nodedc-auth-placeholder-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
ak-library-application,
|
||||
ak-application-wizard,
|
||||
ak-user-interface,
|
||||
|
|
|
|||
Loading…
Reference in New Issue