web/flows: include ShadyDOM, always enable ShadyDOM for flow interface

improve compatibility with password managers and iOS

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

authentik/core/templates/base/skeleton.html

@@ -15,6 +15,8 @@
         <link rel="stylesheet" type="text/css" href="{% static 'dist/empty-state.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/spinner.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
+        {% block head_before %}
+        {% endblock %}
         <script src="{% static 'dist/poly.js' %}?v={{ ak_version }}" type="module"></script>
         <script>window["polymerSkipLoadingFontRoboto"] = true;</script>
         {% block head %}

authentik/core/templates/if/flow.html

@@ -3,6 +3,10 @@
 {% load static %}
 {% load i18n %}
 
+{% block head_before %}
+<script>ShadyDOM = { force: true };</script>
+{% endblock %}
+
 {% block head %}
 <script src="{% static 'dist/FlowInterface.js' %}?v={{ ak_version }}" type="module"></script>
 {% endblock %}

web/package-lock.json

@@ -2303,6 +2303,11 @@
             "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.10.2.tgz",
             "integrity": "sha512-9Iseu8bRtecb0klvv+WXZOVZatsRkbaH7M97Z+f+Pt909R4lDfgUODAnra23DOZTpeMTAkVpf4m/FZztN7Ox1A=="
         },
+        "@webcomponents/webcomponentsjs": {
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz",
+            "integrity": "sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg=="
+        },
         "acorn": {
             "version": "7.4.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",

web/package.json

@@ -57,6 +57,7 @@
         "@types/grecaptcha": "^3.0.1",
         "@typescript-eslint/eslint-plugin": "^4.22.0",
         "@typescript-eslint/parser": "^4.22.0",
+        "@webcomponents/webcomponentsjs": "^2.5.0",
         "authentik-api": "file:api",
         "babel-plugin-macros": "^3.0.1",
         "base64-js": "^1.5.1",

web/poly.ts

@@ -0,0 +1,2 @@
+import "construct-style-sheets-polyfill";
+import "@webcomponents/webcomponentsjs";

web/rollup.config.js

@@ -76,9 +76,7 @@ export default [
     },
     // Polyfills (imported first)
     {
-        input: [
-            "construct-style-sheets-polyfill"
-        ],
+        input: "./poly.ts",
         output: [
             {
                 format: "iife",

web/src/interfaces/flow/index.html

@@ -10,6 +10,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/empty-state.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/spinner.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
+        <script>ShadyDOM = { force: true };</script>
         <script src="/static/dist/poly.js" type="module"></script>
         <script>window["polymerSkipLoadingFontRoboto"] = true;</script>
         <script src="/static/dist/FlowInterface.js" type="module"></script>