streamline profile image api, update reset ui for all profile images to match avatar, remove unnecessary stuff

src/components/settings_modal/tabs/profile_tab.js

@@ -77,6 +77,33 @@ const ProfileTab = {
     },
     maxFields () {
       return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
+    },
+    defaultAvatar () {
+      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
+    },
+    defaultBanner () {
+      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
+    },
+    isDefaultAvatar () {
+      const baseAvatar = this.$store.state.instance.defaultAvatar
+      return !(this.$store.state.users.currentUser.profile_image_url) ||
+      this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
+    },
+    isDefaultBanner () {
+      const baseBanner = this.$store.state.instance.defaultBanner
+      return !(this.$store.state.users.currentUser.cover_photo) ||
+      this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
+    },
+    isDefaultBackground () {
+      return !(this.$store.state.users.currentUser.background_image)
+    },
+    avatarImgSrc () {
+      const src = this.$store.state.users.currentUser.profile_image_url_original
+      return (!src) ? this.defaultAvatar : src
+    },
+    bannerImgSrc () {
+      const src = this.$store.state.users.currentUser.cover_photo
+      return (!src) ? this.defaultBanner : src
     }
   },
   methods: {
@@ -150,11 +177,29 @@ const ProfileTab = {
       }
       reader.readAsDataURL(file)
     },
+    resetAvatar () {
+      const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
+      if (confirmed) {
+        this.submitAvatar(undefined, '')
+      }
+    },
+    resetBanner () {
+      const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
+      if (confirmed) {
+        this.submitBanner('')
+      }
+    },
+    resetBackground () {
+      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
+      if (confirmed) {
+        this.submitBackground('')
+      }
+    },
     submitAvatar (cropper, file) {
       const that = this
       return new Promise((resolve, reject) => {
         function updateAvatar (avatar) {
-          that.$store.state.api.backendInteractor.updateAvatar({ avatar })
+          that.$store.state.api.backendInteractor.updateProfileImages({ avatar })
             .then((user) => {
               that.$store.commit('addNewUsers', [user])
               that.$store.commit('setCurrentUser', user)
@@ -172,11 +217,11 @@ const ProfileTab = {
         }
       })
     },
-    submitBanner () {
-      if (!this.bannerPreview) { return }
+    submitBanner (banner) {
+      if (!this.bannerPreview && banner !== '') { return }
 
       this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
+      this.$store.state.api.backendInteractor.updateProfileImages({ banner })
         .then((user) => {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
@@ -187,11 +232,11 @@ const ProfileTab = {
         })
         .then(() => { this.bannerUploading = false })
     },
-    submitBg () {
-      if (!this.backgroundPreview) { return }
-      let background = this.background
+    submitBackground (background) {
+      if (!this.backgroundPreview && background !== '') { return }
+
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
+      this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
         if (!data.error) {
           this.$store.commit('addNewUsers', [data])
           this.$store.commit('setCurrentUser', data)

src/components/settings_modal/tabs/profile_tab.scss

@@ -13,8 +13,14 @@
     height: auto;
   }
 
-  .banner {
+  .banner-background-preview {
     max-width: 100%;
+    width: 300px;
+    position: relative;
+
+    img {
+      width: 100%;
+    }
   }
 
   .uploading {
@@ -26,18 +32,40 @@
     width: 100%;
   }
 
-  .bg {
-    max-width: 100%;
+  .current-avatar-container {
+    position: relative;
+    width: 150px;
+    height: 150px;
   }
 
   .current-avatar {
     display: block;
-    width: 150px;
-    height: 150px;
+    width: 100%;
+    height: 100%;
     border-radius: $fallback--avatarRadius;
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
   }
 
+  .reset-button {
+    position: absolute;
+    top: 0.2em;
+    right: 0.2em;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0.7;
+    color: white;
+    width: 1.5em;
+    height: 1.5em;
+    text-align: center;
+    line-height: 1.5em;
+    font-size: 1.5em;
+    cursor: pointer;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .oauth-tokens {
     width: 100%;
 
@@ -86,6 +114,7 @@
     &>.emoji-input {
       flex: 1 1 auto;
       margin: 0 .2em .5em;
+      min-width: 0;
     }
 
     &>.icon-container {

src/components/settings_modal/tabs/profile_tab.vue

@@ -161,11 +161,19 @@
       <p class="visibility-notice">
         {{ $t('settings.avatar_size_instruction') }}
       </p>
-      <p>{{ $t('settings.current_avatar') }}</p>
-      <img
-        :src="user.profile_image_url_original"
-        class="current-avatar"
-      >
+      <div class="current-avatar-container">
+        <img
+          :src="user.profile_image_url_original"
+          class="current-avatar"
+        >
+        <i
+          v-if="!isDefaultAvatar && pickAvatarBtnVisible"
+          :title="$t('settings.reset_avatar')"
+          class="reset-button icon-cancel"
+          type="button"
+          @click="resetAvatar"
+        />
+      </div>
       <p>{{ $t('settings.set_new_avatar') }}</p>
       <button
         v-show="pickAvatarBtnVisible"
@@ -184,15 +192,20 @@
     </div>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_banner') }}</h2>
-      <p>{{ $t('settings.current_profile_banner') }}</p>
-      <img
-        :src="user.cover_photo"
-        class="banner"
-      >
+      <div class="banner-background-preview">
+        <img :src="user.cover_photo">
+        <i
+          v-if="!isDefaultBanner"
+          :title="$t('settings.reset_profile_banner')"
+          class="reset-button icon-cancel"
+          type="button"
+          @click="resetBanner"
+        />
+      </div>
       <p>{{ $t('settings.set_new_profile_banner') }}</p>
       <img
         v-if="bannerPreview"
-        class="banner"
+        class="banner-background-preview"
         :src="bannerPreview"
       >
       <div>
@@ -208,7 +221,7 @@
       <button
         v-else-if="bannerPreview"
         class="btn btn-default"
-        @click="submitBanner"
+        @click="submitBanner(banner)"
       >
         {{ $t('general.submit') }}
       </button>
@@ -225,10 +238,20 @@
     </div>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_background') }}</h2>
+      <div class="banner-background-preview">
+        <img :src="user.background_image">
+        <i
+          v-if="!isDefaultBackground"
+          :title="$t('settings.reset_profile_background')"
+          class="reset-button icon-cancel"
+          type="button"
+          @click="resetBackground"
+        />
+      </div>
       <p>{{ $t('settings.set_new_profile_background') }}</p>
       <img
         v-if="backgroundPreview"
-        class="bg"
+        class="banner-background-preview"
         :src="backgroundPreview"
       >
       <div>
@@ -244,7 +267,7 @@
       <button
         v-else-if="backgroundPreview"
         class="btn btn-default"
-        @click="submitBg"
+        @click="submitBackground(background)"
       >
         {{ $t('general.submit') }}
       </button>