lots of cleanup and refactoring

cookbook/templates/include/recipe_open_modal.html

@@ -0,0 +1,74 @@
+{% load i18n %}
+
+<style>
+    .loader {
+        border: 16px solid #f3f3f3; /* Light grey */
+        border-top: 16px solid #3498db; /* Blue */
+        border-radius: 50%;
+        width: 120px;
+        height: 120px;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>
+
+
+<div class="modal" tabindex="-1" role="dialog" id="modal_recipe">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{% trans 'Recipe' %}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" style="text-align: center">
+                <div class="loader" id="div_loader"></div>
+                <a href="" id="a_recipe_open" target="_blank" onclick="afterClick()" style="font-size: 250%"></a>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans 'Close' %}</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    function openRecipe(id) {
+        var link = $('#a_recipe_open');
+        link.hide();
+
+        var url = "{% url 'api_get_file_link' recipe_id=12345 %}".replace(/12345/, id);
+
+        link.text("{% trans 'Open Recipe' %}");
+        $('#modal_recipe').modal('show');
+
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function () {
+            if (this.readyState === 4 && this.status === 200) {
+                window.open(this.responseText);
+                $('#modal_recipe').modal('hide');
+                //link.attr("href", this.responseText);
+                //link.show();
+                $('#div_loader').hide();
+
+            }
+        };
+        xhttp.open("GET", url, true);
+        xhttp.send();
+    }
+
+    function afterClick() {
+        $('#modal_recipe').modal('hide');
+        return true;
+    }
+</script>

cookbook/templates/include/storage_backend_warning.html

@@ -0,0 +1,12 @@
+{% load i18n %}
+
+<div class="alert alert-danger" role="alert">
+    <h4 class="alert-heading"><i class="far fa-exclamation-triangle"></i> {% trans 'Security Warning' %}</h4>
+    <p>{% blocktrans %}
+        The <b>Password and Token</b> field are stored as <b>plain text</b> inside the database.
+        This is necessary because they are needed to make API requests, but it also increases the risk of
+        someone stealing it. <br/>
+        To limit the possible damage use read only tokens or accounts if available or create separate accounts
+        with limited access (only to recipes).
+    {% endblocktrans %}</p>
+</div>