add redirect_uri add/remove buttons

.gitignore

@@ -1,3 +1,4 @@
 **/.ropeproject/*
 **/*.py[co]
 **/.env
+**/*.pem

static/css/authorize.css

@@ -37,3 +37,7 @@ td.placeholder {
 .form-group li {
     list-style-type: none;
 }
+
+.input-group {
+    margin-bottom: 5px;
+}

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 %}

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 %}