Manager avatar

2 files changed, 101 insertions, 0 deletions

diff --git a/pages/settings.vue b/pages/settings.vue
index 6535dd6..fc08199 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -7,6 +7,27 @@
       .overflow-hidden.shadow(class="sm:rounded-md")
         .space-y-6.bg-white.px-4.py-5(class="sm:p-6")
           div
+            label.block.text-sm.font-medium.text-gray-700 Avatar
+            span.text-green-500.text-xs(v-if="avatarChanged") Avatar changed. Reload this page and/or clear your browser cache.
+            .mt-1.flex.items-center
+              user-avatar(:data="me")
+              input(type="file" hidden id="avatar" @change="editAvatar" accept="image/*")
+              label(
+                for="avatar" 
+                class="ml-5 cursor-pointer rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              ) Change
+              button(
+                type="button"
+                class="ml-5 cursor-pointer rounded-md border border-red-600 flex bg-red-600 py-2 px-3 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                @click="deleteAvatar"
+                v-if="me.avatar"
+              )
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                </svg>
+                | Delete
+
+          div
             label.block.text-sm.font-medium.text-gray-700(for="name") Name
             .mt-1
               input#name.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -62,6 +83,7 @@ export default {
   data() {
     return {
       form: {},
+      avatarChanged: false,
     };
   },
   created() {
@@ -73,6 +95,31 @@ export default {
     },
   },
   methods: {
+    editAvatar(event) {
+      const file = event.target.files[0];
+      this.$store
+        .dispatch("users/editAvatar", { id: this.me.id, file })
+        .then((response) => {
+          if (response.status == 200) {
+            this.$toast.success(`Avatar has been uploaded`);
+            this.avatarChanged = true;
+          } else {
+            this.$toast.error(`Error uploading '${file.name}'`);
+          }
+        });
+    },
+    deleteAvatar() {
+      this.$store
+        .dispatch("users/deleteAvatar", this.me.id)
+        .then((response) => {
+          if (response.status == 200) {
+            this.$toast.success("Avatar has been removed");
+            this.avatarChanged = true;
+          } else {
+            this.$toast.error("Error removing");
+          }
+        });
+    },
     save(event) {
       const f = this.form;
 
diff --git a/store/users.js b/store/users.js
index e1f6767..cf1ca86 100644
--- a/store/users.js
+++ b/store/users.js
@@ -87,4 +87,58 @@ export const actions = {
 
     return res;
   },
+  // Edit avatar
+  // FIX: use the right endpoint with `payload.id`, not `me`
+  async editAvatar({ commit, rootGetters }, payload) {
+    commit("loadingStatus", true, { root: true });
+    let res = { status: 0, data: null };
+    let api = this.$config.api;
+
+    const body = new FormData();
+    body.append("file", payload.file);
+
+    await fetch(`${api}/v1/users/me/avatar`, {
+      method: "PUT",
+      headers: {
+        Authorization: `Bearer ${rootGetters["auth/accessToken"]}`,
+      },
+      body,
+    })
+      .then(async (response) => {
+        res.data = await response.json();
+        res.status = response.status;
+      })
+      .catch((e) => {
+        res.status = e.status;
+      });
+
+    commit("loadingStatus", false, { root: true });
+
+    return res;
+  },
+  // Delete the avatar
+  // FIX: use the right endpoint with `id`, not `me`
+  async deleteAvatar({ commit, rootGetters }, id) {
+    commit("loadingStatus", true, { root: true });
+    let res = { status: 0, data: null };
+    let api = this.$config.api;
+
+    await fetch(`${api}/v1/users/me/avatar`, {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${rootGetters["auth/accessToken"]}`,
+      },
+    })
+      .then(async (response) => {
+        res.status = response.status;
+        if (res.status != 200) res.data = await response.json();
+      })
+      .catch((e) => {
+        res.status = e.status;
+      });
+
+    commit("loadingStatus", false, { root: true });
+
+    return res;
+  },
 };