web/flows/sfe: fix global background image not being loaded (#14442)

* web/flows/sfe: add initial loading spinner

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix brand-level default flow background not working with SFE and loading original image with full flow interface

https://github.com/goauthentik/authentik/pull/13079#issuecomment-2853357407
Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

authentik/flows/templates/if/flow-sfe.html

@@ -15,6 +15,7 @@
         {% endblock %}
         <link rel="stylesheet" type="text/css" href="{% static 'dist/sfe/bootstrap.min.css' %}">
         <meta name="sentry-trace" content="{{ sentry_trace }}" />
+        <link rel="prefetch" href="{{ flow_background_url }}" />
         {% include "base/header_js.html" %}
         <style>
           html,
@@ -22,7 +23,7 @@
             height: 100%;
           }
           body {
-            background-image: url("{{ flow.background_url }}");
+            background-image: url("{{ flow_background_url }}");
             background-repeat: no-repeat;
             background-size: cover;
           }

authentik/flows/templates/if/flow.html

@@ -5,7 +5,7 @@
 
 {% block head_before %}
 {{ block.super }}
-<link rel="prefetch" href="{{ flow.background_url }}" />
+<link rel="prefetch" href="{{ flow_background_url }}" />
 {% if flow.compatibility_mode and not inspector %}
 <script>ShadyDOM = { force: !navigator.webdriver };</script>
 {% endif %}
@@ -21,7 +21,7 @@ window.authentik.flow = {
 <script src="{% versioned_script 'dist/flow/FlowInterface-%v.js' %}" type="module"></script>
 <style>
 :root {
-    --ak-flow-background: url("{{ flow.background_url }}");
+    --ak-flow-background: url("{{ flow_background_url }}");
 }
 </style>
 {% endblock %}

authentik/flows/views/interface.py

@@ -13,7 +13,9 @@ class FlowInterfaceView(InterfaceView):
     """Flow interface"""
 
     def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
-        kwargs["flow"] = get_object_or_404(Flow, slug=self.kwargs.get("flow_slug"))
+        flow = get_object_or_404(Flow, slug=self.kwargs.get("flow_slug"))
+        kwargs["flow"] = flow
+        kwargs["flow_background_url"] = flow.background_url(self.request)
         kwargs["inspector"] = "inspector" in self.request.GET
         return super().get_context_data(**kwargs)
 

web/packages/sfe/src/index.ts

@@ -47,7 +47,16 @@ class SimpleFlowExecutor {
         return `${ak().api.base}api/v3/flows/executor/${this.flowSlug}/?query=${encodeURIComponent(window.location.search.substring(1))}`;
     }
 
+    loading() {
+        this.container.innerHTML = `<div class="d-flex justify-content-center">
+            <div class="spinner-border spinner-border-md" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>`;
+    }
+
     start() {
+        this.loading();
         $.ajax({
             type: "GET",
             url: this.apiURL,