From f633f2d61725fb5ed14021e171788146f590b683 Mon Sep 17 00:00:00 2001
From: Piotr Dobrowolski <admin@tastycode.pl>
Date: Sun, 31 May 2020 00:15:26 +0200
Subject: [PATCH] add redirect_uri add/remove buttons

---
 .gitignore                 |  1 +
 static/css/authorize.css   |  4 ++++
 templates/_helpers.html    | 10 +++++++++-
 templates/client_edit.html | 39 +++++++++++++++++++++++++++++++++++++-
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index bd3bfe1..277d785 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 **/.ropeproject/*
 **/*.py[co]
 **/.env
+**/*.pem
diff --git a/static/css/authorize.css b/static/css/authorize.css
index f52c976..ca6206d 100644
--- a/static/css/authorize.css
+++ b/static/css/authorize.css
@@ -37,3 +37,7 @@ td.placeholder {
 .form-group li {
     list-style-type: none;
 }
+
+.input-group {
+    margin-bottom: 5px;
+}
diff --git a/templates/_helpers.html b/templates/_helpers.html
index 02a94c4..7691789 100644
--- a/templates/_helpers.html
+++ b/templates/_helpers.html
@@ -34,6 +34,10 @@ None
     {% endif %}
 {% endmacro %}
 
+{% macro add_remove_button() %}
+  <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-remove"></i></button>
+{% endmacro %}
+
 {% macro render_field_inner(field, prefix=None, suffix=None, label=True, input_group_class='') %}
     {% if field.type == 'BooleanField' %}<div class="checkbox"><label for="{{ field.id }}">{% endif %}
             {% if prefix or suffix %}<div class="input-group {{ input_group_class }}">{% endif %}
@@ -46,8 +50,12 @@ None
         {{ field(**kwargs) }}
         {% elif field.type == 'FieldList' %}
         {% for f in field.entries %}
-          {{ render_field_inner(f) }}
+          <div class="input-group" data-fieldlist="{{ field.name }}">
+            {{ render_field_inner(f) }}
+            <span class="input-group-btn" data-remove="">{{ add_remove_button() }}</span>
+          </div>
         {% endfor %}
+        <button class="btn btn-default btn-xs center-block" data-add="{{ field.name }}" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
         {% else %}
         {{ field(class_='form-control '+kwargs.pop('class_', ''), **kwargs) }}
         {% endif %}
diff --git a/templates/client_edit.html b/templates/client_edit.html
index 8490cf1..0bb2e93 100644
--- a/templates/client_edit.html
+++ b/templates/client_edit.html
@@ -53,10 +53,47 @@
     </div>
     <script>
         document.querySelectorAll('button[data-toggle]').forEach(e => {
-            e.addEventListener('click', () => {
+            e.addEventListener('click', evt => {
+                evt.preventDefault();
                 const input = document.querySelector(e.attributes['data-toggle'].value);
                 input.type = (input.type === 'password') ? 'text' : 'password';
+                return false;
             });
         });
+
+        function bindRemove(node) {
+            node.querySelector('[data-remove]').addEventListener('click', evt => {
+                evt.preventDefault();
+
+                if (document.querySelectorAll('[data-fieldlist="' + node.attributes['data-fieldlist'].value + '"]').length === 1) {
+                    return;
+                }
+
+                node.parentNode.removeChild(node);
+            });
+        }
+
+        document.querySelectorAll('[data-fieldlist]').forEach(e => {
+            bindRemove(e);
+        });
+
+        document.querySelectorAll('button[data-add]').forEach(e => {
+            e.addEventListener('click', evt => {
+                evt.preventDefault();
+                const nodes = document.querySelectorAll('[data-fieldlist="' + e.attributes['data-add'].value + '"]');
+                console.info(nodes[nodes.length-1]);
+
+                const newNode = nodes[nodes.length-1].cloneNode(true);
+                let [name, idx] = newNode.querySelector('input').id.split('-');
+                idx = parseInt(idx);
+                newNode.querySelector('input').id = `${name}-${idx+1}`;
+                newNode.querySelector('input').name = `${name}-${idx+1}`;
+                bindRemove(newNode);
+                nodes[nodes.length-1].after(newNode);
+
+                return true;
+            });
+        });
+
     </script>
 {% endblock %}