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%;
 

src/i18n/en.json

@@ -276,6 +276,7 @@
     "composing": "Composing",
     "confirm_new_password": "Confirm new password",
     "current_avatar": "Your current avatar",
+    "current_mascot": "Your current mascot",
     "current_password": "Current password",
     "current_profile_banner": "Your current profile banner",
     "data_import_export_tab": "Data Import / Export",
@@ -373,8 +374,10 @@
     "search_user_to_mute": "Search whom you want to mute",
     "security_tab": "Security",
     "scope_copy": "Copy scope when replying (DMs are always copied)",
+    "mascot": "Mastodon FE Mascot",
     "minimal_scopes_mode": "Minimize post scope selection options",
     "set_new_avatar": "Set new avatar",
+    "set_new_mascot": "Set new mascot",
     "set_new_profile_background": "Set new profile background",
     "set_new_profile_banner": "Set new profile banner",
     "settings": "Settings",

src/modules/users.js

@@ -81,6 +81,10 @@ const showReblogs = (store, userId) => {
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
+const fetchMascot = (store) => {
+  return store.rootState.api.backendInteractor.fetchMascot()
+    .then(({ url }) => store.commit('updateMascot', url))
+}
 const muteDomain = (store, domain) => {
   return store.rootState.api.backendInteractor.muteDomain({ domain })
     .then(() => store.commit('addDomainMute', domain))
@@ -179,6 +183,9 @@ export const mutations = {
       state.currentUser.muteIds.push(muteId)
     }
   },
+  updateMascot (state, mascotUrl) {
+    state.currentUser.mascot = mascotUrl
+  },
   saveDomainMutes (state, domainMutes) {
     state.currentUser.domainMutes = domainMutes
   },
@@ -318,6 +325,9 @@ const users = {
     unmuteUsers (store, ids = []) {
       return Promise.all(ids.map(id => unmuteUser(store, id)))
     },
+    fetchMascot (store) {
+      return fetchMascot(store)
+    },
     fetchDomainMutes (store) {
       return store.rootState.api.backendInteractor.fetchDomainMutes()
         .then((domainMutes) => {

src/services/api/api.service.js

@@ -73,6 +73,7 @@ const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
 const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
 const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
+const MASTODON_MASCOT_URL = '/api/v1/pleroma/mascot'
 const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
 const MASTODON_STREAMING = '/api/v1/streaming'
 const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
@@ -800,6 +801,20 @@ const unmuteUser = ({ id, credentials }) => {
   return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' })
 }
 
+const fetchMascot = ({ credentials }) => {
+  return promisedRequest({ url: MASTODON_MASCOT_URL, credentials })
+}
+
+const updateMascot = ({ mascot, credentials }) => {
+  const form = new FormData()
+  form.append('file', mascot)
+  return fetch(MASTODON_MASCOT_URL, {
+    headers: authHeaders(credentials),
+    method: 'PUT',
+    body: form
+  }).then((data) => data.json())
+}
+
 const subscribeUser = ({ id, credentials }) => {
   return promisedRequest({ url: MASTODON_SUBSCRIBE_USER(id), credentials, method: 'POST' })
 }
@@ -1180,6 +1195,8 @@ const apiService = {
   fetchPoll,
   fetchFavoritedByUsers,
   fetchRebloggedByUsers,
+  fetchMascot,
+  updateMascot,
   fetchEmojiReactions,
   reactWithEmoji,
   unreactWithEmoji,