From a3ae8278395ac76f54c6c611f92f732d9924156e Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 21 Feb 2020 21:02:03 +0100
Subject: [PATCH] ui: centrally load CodeMirror and init via data tag

---
 .../admin/templates/administration/base.html  | 13 ++++++++++
 passbook/admin/templates/generic/form.html    |  5 ----
 .../app_gw/templates/app_gw/setup_modal.html  | 24 ++-----------------
 .../saml/idp/admin_metadata_modal.html        | 21 +---------------
 passbook/static/static/passbook/pf.js         | 15 ++++++++++++
 5 files changed, 31 insertions(+), 47 deletions(-)

diff --git a/passbook/admin/templates/administration/base.html b/passbook/admin/templates/administration/base.html
index e4892177f..25953a71a 100644
--- a/passbook/admin/templates/administration/base.html
+++ b/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 %}
diff --git a/passbook/admin/templates/generic/form.html b/passbook/admin/templates/generic/form.html
index dc77bb231..e42819d94 100644
--- a/passbook/admin/templates/generic/form.html
+++ b/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 %}
diff --git a/passbook/providers/app_gw/templates/app_gw/setup_modal.html b/passbook/providers/app_gw/templates/app_gw/setup_modal.html
index 6eb2d3521..db8000332 100644
--- a/passbook/providers/app_gw/templates/app_gw/setup_modal.html
+++ b/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>
diff --git a/passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html b/passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html
index 1d08f3e39..c52518970 100644
--- a/passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html
+++ b/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">
-                        {{ metadata }}
-                    </textarea>
+                    <textarea class="codemirror" readonly data-cm-mode="xml">{{ 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>
diff --git a/passbook/static/static/passbook/pf.js b/passbook/static/static/passbook/pf.js
index f29f3aa6a..1e75d5850 100644
--- a/passbook/static/static/passbook/pf.js
+++ b/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,
+    });
+});