From 0ba77fb8f075e8a21f98c77ba150be1ae3c4531d Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Sun, 23 Aug 2020 00:33:36 +0200
Subject: [PATCH] Make alias form a bit more HTML friendly

---
 apps/member/static/member/js/alias.js         | 76 ++++++++++---------
 apps/member/templates/member/club_alias.html  | 14 ++--
 .../templates/member/profile_alias.html       | 14 ++--
 3 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/apps/member/static/member/js/alias.js b/apps/member/static/member/js/alias.js
index cdb21b2b..2d652dde 100644
--- a/apps/member/static/member/js/alias.js
+++ b/apps/member/static/member/js/alias.js
@@ -1,37 +1,43 @@
+/**
+ * On form submit, create a new alias
+ */
+function create_alias (e) {
+    // Do not submit HTML form
+    e.preventDefault();
 
- $("#alias_input").on('keypress',function(e) {
-     if(e.which == 13) {
-         $("#alias_submit").click();
-     }
- });
-
- function create_alias(note_id){
-     $.post("/api/note/alias/",
-            {
-                "csrfmiddlewaretoken": CSRF_TOKEN,
-                "name": $("#alias_input").val(),
-                "note": note_id
-            }
-     ).done(function(){
-         $("#alias_table").load(location.pathname+ " #alias_table");
-         addMsg("Alias ajouté","success");
-     })
-      .fail(function(xhr, textStatus, error){
-          errMsg(xhr.responseJSON);
-      });
+    // Get data and send to API
+    const formData = new FormData(e.target);
+    $.post("/api/note/alias/", {
+        "csrfmiddlewaretoken": formData.get("csrfmiddlewaretoken"),
+        "name": formData.get("name"),
+        "note": formData.get("note")
+    }).done(function () {
+        // Reload table
+        $("#alias_table").load(location.pathname + " #alias_table");
+        addMsg("Alias ajouté", "success");
+    }).fail(function (xhr, _textStatus, _error) {
+        errMsg(xhr.responseJSON);
+    });
 }
- // on click of button "delete" , call the API
- function delete_button(button_id){
-     $.ajax({
-         url:"/api/note/alias/"+button_id+"/",
-         method:"DELETE",
-         headers: {"X-CSRFTOKEN": CSRF_TOKEN}
-     })
-      .done(function(){
-          addMsg('Alias supprimé','success');
-          $("#alias_table").load(location.pathname + " #alias_table");
-      })
-      .fail(function(xhr,textStatus, error){
-          errMsg(xhr.responseJSON);
-      });
- }
+
+/**
+ * On click of "delete", delete the alias
+ * @param Integer button_id Alias id to remove
+ */
+function delete_button (button_id) {
+    $.ajax({
+        url: "/api/note/alias/" + button_id + "/",
+        method: "DELETE",
+        headers: { "X-CSRFTOKEN": CSRF_TOKEN }
+    }).done(function () {
+        addMsg('Alias supprimé', 'success');
+        $("#alias_table").load(location.pathname + " #alias_table");
+    }).fail(function (xhr, _textStatus, _error) {
+        errMsg(xhr.responseJSON);
+    });
+}
+
+$(document).ready(function () {
+    // Attach event
+    document.getElementById("form_alias").addEventListener("submit", create_alias); 
+})
\ No newline at end of file
diff --git a/apps/member/templates/member/club_alias.html b/apps/member/templates/member/club_alias.html
index 86a25b49..60e2bef0 100644
--- a/apps/member/templates/member/club_alias.html
+++ b/apps/member/templates/member/club_alias.html
@@ -6,15 +6,15 @@
     <h3 class="card-header text-center">
         {% trans "Note aliases" %}
     </h3>
-    <div class="card-body text-center">
-        <div class="input-group">
-            <input id="alias_input" type="text" class="form-control">
+    <div class="card-body">
+        <form class="input-group" method="POST" id="form_alias">
+            {% csrf_token %}
+            <input type="hidden" name="note" value="{{ object.note.pk }}">
+            <input type="text" name="name" class="form-control">
             <div class="input-group-append">
-                <button id="alias_submit" class="btn btn-success" onclick="create_alias({{ object.note.pk }})">
-                    {% trans "Add" %}
-                </button>
+                <input type="submit" class="btn btn-success" value="{% trans "Add" %}">
             </div>
-        </div>
+        </form>
     </div>
     {% render_table aliases %}
 </div>
diff --git a/apps/member/templates/member/profile_alias.html b/apps/member/templates/member/profile_alias.html
index b5d51253..ee2369e4 100644
--- a/apps/member/templates/member/profile_alias.html
+++ b/apps/member/templates/member/profile_alias.html
@@ -6,15 +6,15 @@
     <h3 class="card-header text-center">
         {% trans "Note aliases" %}
     </h3>
-    <div class="card-body text-center">
-        <div class="input-group">
-            <input id="alias_input" type="text" class="form-control">
+    <div class="card-body">
+        <form class="input-group" method="POST" id="form_alias">
+            {% csrf_token %}
+            <input type="hidden" name="note" value="{{ object.note.pk }}">
+            <input type="text" name="name" class="form-control">
             <div class="input-group-append">
-                <button id="alias_submit" class="btn btn-success" onclick="create_alias({{ object.note.pk }})">
-                    {% trans "Add" %}
-                </button>
+                <input type="submit" class="btn btn-success" value="{% trans "Add" %}">
             </div>
-        </div>
+        </form>
     </div>
     {% render_table aliases %}
 </div>