Replace save/update buttons with an auto save feature (#1685)

* replace save/update buttons with auto save feature

* minor css improvement

static/js/index.js

@@ -155,10 +155,8 @@ $(".pin-alias").change(async function () {
   }
 });
 
-$(".save-note").on("click", async function () {
+async function handleNoteChange(aliasId, aliasEmail) {
-  let oldValue;
+  const note = document.getElementById(`note-${aliasId}`).value;
-  let aliasId = $(this).data("alias");
-  let note = $(`#note-${aliasId}`).val();
 
   try {
     let res = await fetch(`/api/aliases/${aliasId}`, {
@@ -172,26 +170,27 @@ $(".save-note").on("click", async function () {
     });
 
     if (res.ok) {
-      toastr.success(`Saved`);
+      toastr.success(`Description saved for ${aliasEmail}`);
     } else {
       toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
-      // reset to the original value
-      oldValue = !$(this).prop("checked");
-      $(this).prop("checked", oldValue);
     }
   } catch (e) {
     toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
-    // reset to the original value
-    oldValue = !$(this).prop("checked");
-    $(this).prop("checked", oldValue);
   }
 
-});
+}
 
-$(".save-mailbox").on("click", async function () {
+function handleNoteFocus(aliasId) {
-  let oldValue;
+  document.getElementById(`note-focus-message-${aliasId}`).classList.remove('d-none');
-  let aliasId = $(this).data("alias");
+}
-  let mailbox_ids = $(`#mailbox-${aliasId}`).val();
+
+function handleNoteBlur(aliasId) {
+  document.getElementById(`note-focus-message-${aliasId}`).classList.add('d-none');
+}
+
+async function handleMailboxChange(aliasId, aliasEmail) {
+  const selectedOptions = document.getElementById(`mailbox-${aliasId}`).selectedOptions;
+  const mailbox_ids = Array.from(selectedOptions).map((selectedOption) => selectedOption.value);
 
   if (mailbox_ids.length === 0) {
     toastr.error("You must select at least a mailbox", "Error");
@@ -210,25 +209,18 @@ $(".save-mailbox").on("click", async function () {
     });
 
     if (res.ok) {
-      toastr.success(`Mailbox Updated`);
+      toastr.success(`Mailbox updated for ${aliasEmail}`);
     } else {
       toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
-      // reset to the original value
-      oldValue = !$(this).prop("checked");
-      $(this).prop("checked", oldValue);
     }
   } catch (e) {
     toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
-    // reset to the original value
-    oldValue = !$(this).prop("checked");
-    $(this).prop("checked", oldValue);
   }
 
-});
+}
 
-$(".save-alias-name").on("click", async function () {
+async function handleDisplayNameChange(aliasId, aliasEmail) {
-  let aliasId = $(this).data("alias");
+  const name = document.getElementById(`alias-name-${aliasId}`).value;
-  let name = $(`#alias-name-${aliasId}`).val();
 
   try {
     let res = await fetch(`/api/aliases/${aliasId}`, {
@@ -242,7 +234,7 @@ $(".save-alias-name").on("click", async function () {
     });
 
     if (res.ok) {
-      toastr.success(`Alias Name Saved`);
+      toastr.success(`Display name saved for ${aliasEmail}`);
     } else {
       toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
     }
@@ -250,8 +242,15 @@ $(".save-alias-name").on("click", async function () {
     toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
   }
 
-});
+}
 
+function handleDisplayNameFocus(aliasId) {
+  document.getElementById(`display-name-focus-message-${aliasId}`).classList.remove('d-none');
+}
+
+function handleDisplayNameBlur(aliasId) {
+  document.getElementById(`display-name-focus-message-${aliasId}`).classList.add('d-none');
+}
 
 new Vue({
   el: '#filter-app',

templates/dashboard/index.html

@@ -342,17 +342,11 @@
       </div>
       <!-- END Email Activity -->
       <div class="small-text mt-1">
-        Alias description
+        Alias description <span id="note-focus-message-{{ alias.id }}" class="d-none font-italic">(automatically saved when you click outside the field)</span>
       </div>
       <div class="d-flex mb-2">
         <div class="flex-grow-1 mr-2">
-          <textarea id="note-{{ alias.id }}" name="note" class="form-control" style="font-size: 12px" rows="2" placeholder="e.g. where the alias is used or why is it created">{{ alias.note or "" }}</textarea>
+          <textarea id="note-{{ alias.id }}" name="note" class="form-control" style="font-size: 12px" rows="2" placeholder="e.g. where the alias is used or why is it created" onchange="handleNoteChange({{ alias.id }}, '{{ alias.email }}')" onfocus="handleNoteFocus({{ alias.id }})" onblur="handleNoteBlur({{ alias.id }})">{{ alias.note or "" }}</textarea>
-        </div>
-        <div>
-          <a data-alias="{{ alias.id }}"
-             class="save-note btn btn-sm btn-outline-success w-100">
-            Save
-          </a>
         </div>
       </div>
       <!-- Send Email && More button -->
@@ -421,7 +415,8 @@
                     data-width="100%"
                     class="mailbox-select"
                     multiple
-                    name="mailbox">
+                    name="mailbox"
+                    onchange="handleMailboxChange({{ alias.id }}, '{{ alias.email }}')">
               {% for mailbox in mailboxes %}
 
                 <option value="{{ mailbox.id }}" {% if alias_info.contain_mailbox(mailbox.id) %}
@@ -431,12 +426,6 @@
               {% endfor %}
             </select>
           </div>
-          <div>
-            <a data-alias="{{ alias.id }}"
-               class="save-mailbox btn btn-sm btn-outline-info w-100">
-              Update
-            </a>
-          </div>
         </div>
       {% elif alias_info.mailbox != None and alias_info.mailbox.email != current_user.email %}
         <div class="small-text">
@@ -448,19 +437,18 @@
            title="When sending an email from this alias, the email will have 'Display Name <{{ alias.email }}>' as sender.">
         Display name
         <i class="fe fe-help-circle"></i>
+        <span id="display-name-focus-message-{{ alias.id }}"
+              class="d-none font-italic">(automatically saved when you click outside the field or press Enter)</span>
       </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.custom_domain.name or "Alias name" }}">
+                 placeholder="{{ alias.custom_domain.name or "Alias name" }}"
-        </div>
+                 onchange="handleDisplayNameChange({{ alias.id }}, '{{ alias.email }}')"
-        <div>
+                 onfocus="handleDisplayNameFocus({{ alias.id }})"
-          <a data-alias="{{ alias.id }}"
+                 onblur="handleDisplayNameBlur({{ alias.id }})">
-             class="save-alias-name btn btn-sm btn-outline-primary w-100">
-            Save
-          </a>
         </div>
       </div>
       {% if alias.mailbox_support_pgp() %}