ui: centrally load CodeMirror and init via data tag

passbook/admin/templates/administration/base.html

@@ -1 +1,14 @@
 {% extends "overview/base.html" %}
+
+{% load static %}
+
+{% block head %}
+{{ block.super }}
+<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
+<script src="{% static 'node_modules/codemirror/addon/display/autorefresh.js' %}"></script>
+<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
+<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
+<script src="{% static 'node_modules/codemirror/mode/xml/xml.js' %}"></script>
+<script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
+<script src="{% static 'node_modules/codemirror/mode/jinja2/jinja2.js' %}"></script>
+{% endblock %}

passbook/admin/templates/generic/form.html

@@ -16,11 +16,6 @@
 <script type="text/javascript" src="{% static 'admin/js/prepopulate.js' %}"></script>
 <script type="text/javascript" src="{% static 'admin/js/SelectBox.js' %}"></script>
 <script type="text/javascript" src="{% static 'admin/js/SelectFilter2.js' %}"></script>
-<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
-<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
-<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
-<script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
-<script src="{% static 'node_modules/codemirror/mode/jinja2/jinja2.js' %}"></script>
 {% endblock %}
 
 {% block content %}

passbook/providers/app_gw/templates/app_gw/setup_modal.html

@@ -1,12 +1,5 @@
 {% load i18n %}
 {% load static %}
-
-<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
-<script src="{% static 'node_modules/codemirror/addon/display/autorefresh.js' %}"></script>
-<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
-<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
-<script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
-
 <div class="pf-c-dropdown">
     <button class="pf-c-button pf-m-tertiary pf-c-dropdown__toggle" type="button">
         <span class="pf-c-dropdown__toggle-text">{% trans 'Setup with...' %}</span>
@@ -31,7 +24,7 @@
             <h1 class="pf-c-title pf-m-2xl">{% trans 'Setup with docker-compose' %}</h1>
             <div class="pf-c-modal-box__body">
                 {% trans 'Add the following snippet to your docker-compose file.' %}
-                <textarea class="codemirror">{% include 'app_gw/docker-compose.yml' %}</textarea>
+                <textarea class="codemirror" readonly data-cm-mode="yaml">{% include 'app_gw/docker-compose.yml' %}</textarea>
             </div>
             <footer class="pf-c-modal-box__footer pf-m-align-left">
                 <button data-modal-close class="pf-c-button pf-m-primary" type="button">{% trans 'Close' %}</button>
@@ -51,7 +44,7 @@
                 <p>{% trans 'Download the manifest to create the Gatekeeper deployment and service:' %}</p>
                 <a href="{% url 'passbook_providers_app_gw:k8s-manifest' provider=provider.pk %}">{% trans 'Here' %}</a>
                 <p>{% trans 'Afterwards, add the following annotations to the Ingress you want to secure:' %}</p>
-                <textarea class="codemirror">
+                <textarea class="codemirror" readonly data-cm-mode="yaml">
 nginx.ingress.kubernetes.io/auth-url: "https://{{ provider.external_host }}/oauth2/auth"
 nginx.ingress.kubernetes.io/auth-signin: "https://{{ provider.external_host }}/oauth2/start?rd=$escaped_request_uri"
                 </textarea>
@@ -62,16 +55,3 @@ nginx.ingress.kubernetes.io/auth-signin: "https://{{ provider.external_host }}/o
         </div>
     </div>
 </div>
-
-<script>
-    let attributes = document.getElementsByClassName('codemirror');
-    for (let attrib of attributes) {
-        let myCodeMirror = CodeMirror.fromTextArea(attrib, {
-            mode: 'yaml',
-            theme: 'monokai',
-            lineNumbers: false,
-            readOnly: true,
-            autoRefresh: true,
-        });
-    }
-</script>

passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html

@@ -1,12 +1,5 @@
 {% load i18n %}
 {% load static %}
-
-<script src="{% static 'node_modules/codemirror/lib/codemirror.js' %}"></script>
-<script src="{% static 'node_modules/codemirror/addon/display/autorefresh.js' %}"></script>
-<link rel="stylesheet" href="{% static 'node_modules/codemirror/lib/codemirror.css' %}">
-<link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
-<script src="{% static 'node_modules/codemirror/mode/xml/xml.js' %}"></script>
-
 <button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="saml-{{ provider.pk }}">{% trans 'View Metadata' %}</button>
 
 <div class="pf-c-backdrop" id="saml-{{ provider.pk }}" hidden>
@@ -18,9 +11,7 @@
             <h1 class="pf-c-title pf-m-2xl" id="modal-title">{% trans 'Metadata' %}</h1>
             <div class="pf-c-modal-box__body" id="modal-description">
                 <form method="post">
-                    <textarea class="codemirror" id="{{ provider.pk }}-textarea">
+                    <textarea class="codemirror" readonly data-cm-mode="xml">{{ metadata }}</textarea>
-                        {{ metadata }}
-                    </textarea>
                 </form>
             </div>
             <footer class="pf-c-modal-box__footer pf-m-align-left">
@@ -29,13 +20,3 @@
         </div>
     </div>
 </div>
-
-<script>
-CodeMirror.fromTextArea(document.getElementById("{{ provider.pk }}-textarea"), {
-    mode: 'xml',
-    theme: 'monokai',
-    lineNumbers: false,
-    readOnly: true,
-    autoRefresh: true,
-});
-</script>

passbook/static/static/passbook/pf.js

@@ -21,3 +21,18 @@ document.querySelectorAll(".pf-c-modal-box [data-modal-close]").forEach((b) => {
         parentContainer.setAttribute("hidden", true);
     });
 });
+
+// CodeMirror
+document.querySelectorAll(".codemirror").forEach((cm) => {
+    let cmMode = 'xml';
+    if ('data-cm-mode' in cm.attributes) {
+        cmMode = cm.attributes['data-cm-mode'].value;
+    }
+    CodeMirror.fromTextArea(cm, {
+        mode: cmMode,
+        theme: 'monokai',
+        lineNumbers: false,
+        readOnly: cm.readOnly,
+        autoRefresh: true,
+    });
+});