ihba updates

src/components/user_settings/user_settings.js

@@ -65,6 +65,9 @@ const UserSettings = {
       backgroundPreview: null,
       bannerUploadError: null,
       backgroundUploadError: null,
+      mascot: this.$store.state.users.currentUser.mascot,
+      mascotPreview: null,
+      mascotUploadError: null,
       changeEmailError: false,
       changeEmailPassword: '',
       changedEmail: false,
@@ -81,6 +84,7 @@ const UserSettings = {
   },
   created () {
     this.$store.dispatch('fetchTokens')
+    this.$store.dispatch('fetchMascot')
   },
   components: {
     StyleSwitcher,
@@ -253,6 +257,20 @@ const UserSettings = {
         this.backgroundUploading = false
       })
     },
+    submitMascot () {
+      if (!this.mascotPreview) { return }
+      let mascot = this.mascot
+      this.mascotUploading = true
+      this.$store.state.api.backendInteractor.updateMascot({ mascot }).then((data) => {
+        if (!data.error) {
+          this.mascotPreview = null
+          this.$store.commit('updateMascot', data.url)
+        } else {
+          this.mascotUploadError = this.$t('upload.error.base') + ' ' + data.error
+        }
+        this.mascotUploading = false
+      })
+    },
     importFollows (file) {
       return this.$store.state.api.backendInteractor.importFollows({ file })
         .then((status) => {

src/components/user_settings/user_settings.vue

@@ -233,6 +233,47 @@
               />
             </div>
           </div>
+          <div class="setting-item">
+            <h2>{{ $t('settings.mascot') }}</h2>
+            <p>{{ $t('settings.current_mascot') }}</p>
+            <img
+              :src="user.mascot"
+              class="current-mascot"
+            >
+            <p>{{ $t('settings.set_new_mascot') }}</p>
+            <img
+              v-if="mascotPreview"
+              class="mascot"
+              :src="mascotPreview"
+            >
+            <div>
+              <input
+                type="file"
+                @change="uploadFile('mascot', $event)"
+              >
+            </div>
+            <i
+              v-if="mascotUploading"
+              class=" icon-spin4 animate-spin uploading"
+            />
+            <button
+              v-else-if="mascotPreview"
+              class="btn btn-default"
+              @click="submitMascot"
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <div
+              v-if="mascotUploadError"
+              class="alert error"
+            >
+              Error: {{ mascotUploadError }}
+              <i
+                class="button-icon icon-cancel"
+                @click="clearUploadError('mascot')"
+              />
+            </div>
+          </div>
         </div>
 
         <div :label="$t('settings.security_tab')">
@@ -683,6 +724,15 @@
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
   }
 
+  .current-mascot {
+    display: block;
+    max-height: 250px;
+  }
+
+  .mascot {
+    max-width: 100%;
+  }
+
   .oauth-tokens {
     width: 100%;