Update mailbox using ajax

refactor: return Mailbox in User.mailboxes()

app/api/views/alias.py

@@ -245,7 +245,6 @@ def update_alias(alias_id):
     if alias.user_id != user.id:
         return jsonify(error="Forbidden"), 403
 
-
     changed = False
     if "note" in data:
         new_note = data.get("note")

app/dashboard/templates/dashboard/index.html

@@ -222,10 +222,11 @@
                 <div class="small-text mt-2">Current mailbox</div>
                 <div class="d-flex">
                   <div class="flex-grow-1 mr-2">
-                    <select class="form-control form-control-sm custom-select" name="mailbox">
+                    <select id="mailbox-{{ alias.id }}"
+                        class="form-control form-control-sm custom-select" name="mailbox">
                       {% for mailbox in mailboxes %}
-                        <option value="{{ mailbox }}" {% if mailbox == alias_info.mailbox.email %} selected {% endif %}>
-                          {{ mailbox }}
+                        <option value="{{ mailbox.id }}" {% if mailbox.id == alias_info.mailbox.id %} selected {% endif %}>
+                          {{ mailbox.email }}
                         </option>
                       {% endfor %}
                     </select>
@@ -235,9 +236,10 @@
                     <input type="hidden" name="form-name" value="set-mailbox">
                     <input type="hidden" name="alias-id" value="{{ alias.id }}">
 
-                    <button class="btn btn-sm btn-outline-info w-100">
+                    <a data-alias="{{ alias.id }}"
+                        class="save-mailbox btn btn-sm btn-outline-info w-100">
                       Update
-                    </button>
+                    </a>
                   </div>
 
                 </div>
@@ -487,5 +489,37 @@
       }
 
     })
+
+    $(".save-mailbox").on("click", async function () {
+      let aliasId = $(this).data("alias");
+      let mailbox_id = $(`#mailbox-${aliasId}`).val();
+
+      try {
+        let res = await fetch(`/api/aliases/${aliasId}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            mailbox_id: mailbox_id,
+          }),
+        });
+
+        if (res.ok) {
+          toastr.success(`Mailbox Updated`);
+        } else {
+          toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
+          // reset to the original value
+          var 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
+        var oldValue = !$(this).prop("checked");
+        $(this).prop("checked", oldValue);
+      }
+
+    })
   </script>
 {% endblock %}

app/dashboard/views/custom_alias.py

@@ -40,7 +40,7 @@ def custom_alias():
             )
         )
 
-    mailboxes = current_user.mailboxes()
+    mailboxes = [mb.email for mb in current_user.mailboxes()]
 
     if request.method == "POST":
         alias_prefix = request.form.get("prefix")

app/models.py

@@ -2,6 +2,7 @@ import enum
 import random
 import uuid
 from email.utils import formataddr
+from typing import List
 
 import arrow
 import bcrypt
@@ -357,12 +358,12 @@ class User(db.Model, ModelMixin, UserMixin):
     def verified_custom_domains(self):
         return CustomDomain.query.filter_by(user_id=self.id, verified=True).all()
 
-    def mailboxes(self) -> [str]:
-        """list of mailbox emails that user own"""
+    def mailboxes(self) -> List["Mailbox"]:
+        """list of mailbox that user own"""
         mailboxes = []
 
         for mailbox in Mailbox.query.filter_by(user_id=self.id, verified=True):
-            mailboxes.append(mailbox.email)
+            mailboxes.append(mailbox)
 
         return mailboxes
 

server.py

@@ -160,11 +160,12 @@ def fake_data():
     m1 = Mailbox.create(user_id=user.id, email="m1@cd.ef", verified=True)
     db.session.commit()
 
-    user.default_mailbox_id = m1.id
-
     Alias.create_new(user, "e1@", mailbox_id=m1.id)
-    for i in range(10):
-        Alias.create_new(user, f"e{i}@", mailbox_id=m1.id)
+    for i in range(30):
+        if i % 2 == 0:
+            Alias.create_new(user, f"e{i}@", mailbox_id=m1.id)
+        else:
+            Alias.create_new(user, f"e{i}@")
 
     CustomDomain.create(user_id=user.id, domain="ab.cd", verified=True)
     CustomDomain.create(