summaryrefslogtreecommitdiff
path: root/pages/settings.vue
diff options
context:
space:
mode:
Diffstat (limited to 'pages/settings.vue')
-rw-r--r--pages/settings.vue47
1 files changed, 47 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;