UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: очистка loader Authentik

infra/authentik/custom-templates/base/header_js.html

@@ -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() {

infra/authentik/custom-templates/branding/nodedc-login.css

@@ -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);
+  -webkit-backdrop-filter: blur(40px) !important;
-  backdrop-filter: blur(40px);
+  backdrop-filter: blur(40px) !important;
-  justify-content: flex-start !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,