Abstract JS for multivalue form fields

bookwyrm/static/js/bookwyrm.js

@@ -368,4 +368,22 @@ let BookWyrm = new class {
             );
         }
     }
+
+    duplicateInput (input_id ) {
+        const orig = document.getElementById(input_id);
+        const parent = orig.parentNode;
+        const new_count = parent.querySelectorAll("input").length + 1
+
+        let input = orig.cloneNode();
+
+        input.id += ("-" + (new_count))
+        input.value = ""
+
+        let label = parent.querySelector("label").cloneNode();
+
+        label.setAttribute("for", input.id)
+
+        parent.appendChild(label)
+        parent.appendChild(input)
+    }
 }();

bookwyrm/templates/book/edit/edit_book_form.html

@@ -119,10 +119,16 @@
                 </fieldset>
                 {% endif %}
                 <div class="field">
-                    <label class="label" for="id_add_author">{% trans "Add Authors:" %}</label>
+                    <label class="label">{% trans "Add Authors:" %}</label>
-                    <input class="input" type="text" name="add_author" id="id_add_author" placeholder="{% trans 'John Doe, Jane Smith' %}" value="{{ add_author }}" {% if confirm_mode %}readonly{% endif %}>
+                    {% for author in add_author %}
-                    <span class="help">{% trans "Separate multiple values with commas." %}</span>
+                    <label class="label is-sr-only" for="id_add_author{% if not forloop.first %}-{{forloop.counter}}{% endif %}">{% trans "Add Author" %}</label>
+                    <input class="input" type="text" name="add_author" id="id_add_author{% if not forloop.first %}-{{forloop.counter}}{% endif %}" placeholder="{% trans 'Jane Doe' %}" value="{{ author }}" {% if confirm_mode %}readonly{% endif %}>
+                    {% empty %}
+                    <label class="label is-sr-only" for="id_add_author">{% trans "Add Author" %}</label>
+                    <input class="input" type="text" name="add_author" id="id_add_author" placeholder="{% trans 'Jane Doe' %}" value="{{ author }}" {% if confirm_mode %}readonly{% endif %}>
+                    {% endfor %}
                 </div>
+                <span class="help"><a id="another_author_field" onclick="BookWyrm.duplicateInput('id_add_author')">{% trans "Add Another Author" %}</a></span>
             </div>
         </section>
     </div>

bookwyrm/views/books/edit_book.py

@@ -43,12 +43,12 @@ class EditBook(View):
         if not form.is_valid():
             return TemplateResponse(request, "book/edit/edit_book.html", data)
 
-        add_author = request.POST.get("add_author")
+        add_author = request.POST.getlist("add_author")
         # we're adding an author through a free text field
         if add_author:
             data["add_author"] = add_author
             data["author_matches"] = []
-            for author in add_author.split(","):
+            for author in add_author:
                 if not author:
                     continue
                 # check for existing authors