Make alias form a bit more HTML friendly

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){
+    // 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){
+
+/**
+ * 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');
+        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){
+    }).fail(function (xhr, _textStatus, _error) {
         errMsg(xhr.responseJSON);
     });
- }
+}
+
+$(document).ready(function () {
+    // Attach event
+    document.getElementById("form_alias").addEventListener("submit", create_alias); 
+})

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>
-            </div>
+                <input type="submit" class="btn btn-success" value="{% trans "Add" %}">
             </div>
+        </form>
     </div>
     {% render_table aliases %}
 </div>

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>
-            </div>
+                <input type="submit" class="btn btn-success" value="{% trans "Add" %}">
             </div>
+        </form>
     </div>
     {% render_table aliases %}
 </div>