diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/settings.vue | 47 |
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; |