User can update alias name

app/dashboard/templates/dashboard/index.html

@@ -249,14 +249,15 @@
               </div>
             {% endif %}
 
-            <div class="d-flex mt-2">
+            <div class="small-text mt-2">Alias Note</div>
+            <div class="d-flex">
               <div class="flex-grow-1 mr-2">
                 <textarea
                     id="note-{{ alias.id }}"
                     name="note"
                     class="form-control"
                     rows="2"
-                    placeholder="Alias Note.">{{ alias.note or "" }}</textarea>
+                    placeholder="e.g. where the alias is used or why is it created">{{ alias.note or "" }}</textarea>
               </div>
 
               <div class="">
@@ -267,6 +268,29 @@
               </div>
             </div>
 
+            <div class="small-text mt-2" data-toogle="tooltip"
+                 title="Alias name is used when you send or reply from alias">
+              Alias name
+              <i class="fe fe-help-circle"></i>
+            </div>
+
+            <div class="d-flex">
+              <div class="flex-grow-1 mr-2">
+                <input id="alias-name-{{ alias.id }}"
+                       value="{{ alias.name or '' }}" class="form-control" placeholder="Alias name">
+              </div>
+
+
+              <div class="">
+                <a data-alias="{{ alias.id }}"
+                   class="save-alias-name btn btn-sm btn-outline-primary w-100">
+                  save
+                </a>
+              </div>
+
+
+            </div>
+
             <div class="row mt-3">
               <div class="col">
                 <form method="post">
@@ -501,5 +525,31 @@
       }
 
     })
+
+    $(".save-alias-name").on("click", async function () {
+      let aliasId = $(this).data("alias");
+      let name = $(`#alias-name-${aliasId}`).val();
+
+      try {
+        let res = await fetch(`/api/aliases/${aliasId}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: name,
+          }),
+        });
+
+        if (res.ok) {
+          toastr.success(`Alias Name Saved`);
+        } else {
+          toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
+        }
+      } catch (e) {
+        toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
+      }
+
+    })
   </script>
 {% endblock %}