flows: add compatibility_mode to toggle ShadyDOM

closes #894

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/core/templates/if/flow.html

@@ -4,7 +4,9 @@
 {% load i18n %}
 
 {% block head_before %}
+{% if flow.compatibility_mode %}
 <script>ShadyDOM = { force: !navigator.webdriver };</script>
+{% endif %}
 {% endblock %}
 
 {% block head %}

authentik/core/urls.py

@@ -6,6 +6,7 @@ from django.views.generic import RedirectView
 from django.views.generic.base import TemplateView
 
 from authentik.core.views import impersonate
+from authentik.core.views.interface import FlowInterfaceView
 
 urlpatterns = [
     path(
@@ -32,7 +33,7 @@ urlpatterns = [
     ),
     path(
         "if/flow/<slug:flow_slug>/",
-        ensure_csrf_cookie(TemplateView.as_view(template_name="if/flow.html")),
+        ensure_csrf_cookie(FlowInterfaceView.as_view()),
         name="if-flow",
     ),
     # Fallback for WS

authentik/core/views/interface.py

@@ -0,0 +1,17 @@
+"""Interface views"""
+from typing import Any
+
+from django.shortcuts import get_object_or_404
+from django.views.generic.base import TemplateView
+
+from authentik.flows.models import Flow
+
+
+class FlowInterfaceView(TemplateView):
+    """Flow interface"""
+
+    template_name = "if/flow.html"
+
+    def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
+        kwargs["flow"] = get_object_or_404(Flow, slug=self.kwargs.get("slug"))
+        return super().get_context_data(**kwargs)

authentik/flows/api/flows.py

@@ -63,6 +63,7 @@ class FlowSerializer(ModelSerializer):
             "policies",
             "cache_count",
             "policy_engine_mode",
+            "compatibility_mode",
         ]
         extra_kwargs = {
             "background": {"read_only": True},

authentik/flows/migrations/0020_flow_compatibility_mode.py

@@ -0,0 +1,21 @@
+# Generated by Django 3.2.3 on 2021-06-05 17:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_flows", "0019_alter_flow_background"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="flow",
+            name="compatibility_mode",
+            field=models.BooleanField(
+                default=True,
+                help_text="Enable compatibility mode, increases compatibility with password managers on mobile devices.",
+            ),
+        ),
+    ]

authentik/flows/models.py

@@ -115,6 +115,14 @@ class Flow(SerializerModel, PolicyBindingModel):
         help_text=_("Background shown during execution"),
     )
 
+    compatibility_mode = models.BooleanField(
+        default=True,
+        help_text=_(
+            "Enable compatibility mode, increases compatibility with "
+            "password managers on mobile devices."
+        ),
+    )
+
     @property
     def background_url(self) -> str:
         """Get the URL to the background image. If the name is /static or starts with http

authentik/flows/urls.py

@@ -1,6 +1,5 @@
 """flow urls"""
 from django.urls import path
-from django.views.generic import RedirectView
 
 from authentik.flows.models import FlowDesignation
 from authentik.flows.views import CancelView, ConfigureFlowInitView, ToDefaultFlow
@@ -22,9 +21,4 @@ urlpatterns = [
         ConfigureFlowInitView.as_view(),
         name="configure",
     ),
-    path(
-        "<slug:flow_slug>/",
-        RedirectView.as_view(pattern_name="authentik_core:if-flow"),
-        name="flow-executor-shell",
-    ),
 ]

schema.yml

@@ -17294,6 +17294,10 @@ components:
           readOnly: true
         policy_engine_mode:
           $ref: '#/components/schemas/PolicyEngineMode'
+        compatibility_mode:
+          type: boolean
+          description: Enable compatibility mode, increases compatibility with password
+            managers on mobile devices.
       required:
       - background
       - cache_count
@@ -17417,6 +17421,10 @@ components:
             flow is redirect to when an un-authenticated user visits authentik.
         policy_engine_mode:
           $ref: '#/components/schemas/PolicyEngineMode'
+        compatibility_mode:
+          type: boolean
+          description: Enable compatibility mode, increases compatibility with password
+            managers on mobile devices.
       required:
       - designation
       - name
@@ -22245,6 +22253,10 @@ components:
             flow is redirect to when an un-authenticated user visits authentik.
         policy_engine_mode:
           $ref: '#/components/schemas/PolicyEngineMode'
+        compatibility_mode:
+          type: boolean
+          description: Enable compatibility mode, increases compatibility with password
+            managers on mobile devices.
     PatchedFlowStageBindingRequest:
       type: object
       description: FlowStageBinding Serializer

web/src/locales/en.po

@@ -641,6 +641,10 @@ msgstr "Code"
 msgid "Common Name"
 msgstr "Common Name"
 
+#: src/pages/flows/FlowForm.ts
+msgid "Compatibility mode"
+msgstr "Compatibility mode"
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Confidential"
 msgstr "Confidential"
@@ -1267,6 +1271,10 @@ msgstr "Enable Static Tokens"
 msgid "Enable TOTP"
 msgstr "Enable TOTP"
 
+#: src/pages/flows/FlowForm.ts
+msgid "Enable compatibility mode, increases compatibility with password managers on mobile devices."
+msgstr "Enable compatibility mode, increases compatibility with password managers on mobile devices."
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 msgid "Enable forward-auth mode"
 msgstr "Enable forward-auth mode"

web/src/locales/pseudo-LOCALE.po

@@ -635,6 +635,10 @@ msgstr ""
 msgid "Common Name"
 msgstr ""
 
+#: 
+msgid "Compatibility mode"
+msgstr ""
+
 #: 
 msgid "Confidential"
 msgstr ""
@@ -1259,6 +1263,10 @@ msgstr ""
 msgid "Enable TOTP"
 msgstr ""
 
+#: 
+msgid "Enable compatibility mode, increases compatibility with password managers on mobile devices."
+msgstr ""
+
 #: 
 msgid "Enable forward-auth mode"
 msgstr ""

web/src/pages/flows/FlowForm.ts

@@ -146,6 +146,15 @@ export class FlowForm extends ModelForm<Flow, string> {
                     <p class="pf-c-form__helper-text">${t`Background shown during execution.`}</p>
                 </ak-form-element-horizontal>`;
             }))}
+            <ak-form-element-horizontal name="compatibilityMode">
+                <div class="pf-c-check">
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.compatibilityMode, true)}>
+                    <label class="pf-c-check__label">
+                        ${t`Compatibility mode`}
+                    </label>
+                </div>
+                <p class="pf-c-form__helper-text">${t`Enable compatibility mode, increases compatibility with password managers on mobile devices.`}</p>
+            </ak-form-element-horizontal>
         </form>`;
     }