Merge remote-tracking branch 'upstream/develop' into docs

* upstream/develop: (193 commits)
  fix user avatar fallback logic
  remove dead code
  make bio textarea resizable vertically only
  remove dead code
  remove dead code
  fix crazy watch logic in conversation
  show three dot button only if needed
  hide mute conversation button to guests
  update keyBy
  generate idObj at timeline level
  fix pin showing logic in conversation
  Show a message when JS is disabled
  Initialize chat only if user is logged in and it wasn't initialized before
  i18n/Update Japanese
  i18n/Update pedantic Japanese
  sync profile tab state with location query
  refactor TabSwitcher
  use better name of controlled prop
  fix potential bug to render active tab in controlled way
  remove unused param
  ...

7 files changed, 630 insertions, 262 deletions

diff --git a/src/components/user_settings/confirm.vue b/src/components/user_settings/confirm.vue
index 46a42e38..69b3811b 100644
--- a/src/components/user_settings/confirm.vue
+++ b/src/components/user_settings/confirm.vue
@@ -1,13 +1,21 @@
 <template>
-<div>
-  <slot></slot>
-  <button class="btn btn-default" @click="confirm" :disabled="disabled">
-    {{$t('general.confirm')}}
-  </button>
-  <button class="btn btn-default" @click="cancel" :disabled="disabled">
-    {{$t('general.cancel')}}
-  </button>
-</div>
+  <div>
+    <slot />
+    <button
+      class="btn btn-default"
+      :disabled="disabled"
+      @click="confirm"
+    >
+      {{ $t('general.confirm') }}
+    </button>
+    <button
+      class="btn btn-default"
+      :disabled="disabled"
+      @click="cancel"
+    >
+      {{ $t('general.cancel') }}
+    </button>
+  </div>
 </template>
 
 <script src="./confirm.js">
diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js
index 2acee862..3090138a 100644
--- a/src/components/user_settings/mfa.js
+++ b/src/components/user_settings/mfa.js
@@ -7,6 +7,7 @@ import { mapState } from 'vuex'
 const Mfa = {
   data: () => ({
     settings: { // current settings of MFA
+      available: false,
       enabled: false,
       totp: false
     },
@@ -106,7 +107,7 @@ const Mfa = {
           this.setupState.setupOTPState = 'confirm'
         })
     },
-    doConfirmOTP () {  // handler confirm enable OTP
+    doConfirmOTP () { // handler confirm enable OTP
       this.error = null
       this.backendInteractor.mfaConfirmOTP({
         token: this.otpConfirmToken,
@@ -139,7 +140,9 @@ const Mfa = {
     // fetch settings from server
     async fetchSettings () {
       let result = await this.backendInteractor.fetchSettingsMFA()
+      if (result.error) return
       this.settings = result.settings
+      this.settings.available = true
       return result
     }
   },
diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue
index ded426dd..14ea10a1 100644
--- a/src/components/user_settings/mfa.vue
+++ b/src/components/user_settings/mfa.vue
@@ -1,86 +1,138 @@
 <template>
-<div class="setting-item mfa-settings" v-if="readyInit">
-
-  <div class="mfa-heading">
-    <h2>{{$t('settings.mfa.title')}}</h2>
-  </div>
-
-  <div>
-    <div class="setting-item" v-if="!setupInProgress">
-      <!-- Enabled methods -->
-      <h3>{{$t('settings.mfa.authentication_methods')}}</h3>
-      <totp-item :settings="settings" @deactivate="fetchSettings" @activate="activateOTP"/>
-      <br />
-
-      <div v-if="settings.enabled"> <!-- backup codes block-->
-        <recovery-codes :backup-codes="backupCodes" v-if="!confirmNewBackupCodes" />
-        <button class="btn btn-default" @click="getBackupCodes" v-if="!confirmNewBackupCodes">
-          {{$t('settings.mfa.generate_new_recovery_codes')}}
-        </button>
+  <div
+    v-if="readyInit && settings.available"
+    class="setting-item mfa-settings"
+  >
+    <div class="mfa-heading">
+      <h2>{{ $t('settings.mfa.title') }}</h2>
+    </div>
 
-        <div v-if="confirmNewBackupCodes">
-          <confirm @confirm="confirmBackupCodes" @cancel="cancelBackupCodes"
-                   :disabled="backupCodes.inProgress">
-            <p class="warning">{{$t('settings.mfa.warning_of_generate_new_codes')}}</p>
-          </confirm>
+    <div>
+      <div
+        v-if="!setupInProgress"
+        class="setting-item"
+      >
+        <!-- Enabled methods -->
+        <h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
+        <totp-item
+          :settings="settings"
+          @deactivate="fetchSettings"
+          @activate="activateOTP"
+        />
+        <br>
+
+        <div v-if="settings.enabled">
+          <!-- backup codes block-->
+          <recovery-codes
+            v-if="!confirmNewBackupCodes"
+            :backup-codes="backupCodes"
+          />
+          <button
+            v-if="!confirmNewBackupCodes"
+            class="btn btn-default"
+            @click="getBackupCodes"
+          >
+            {{ $t('settings.mfa.generate_new_recovery_codes') }}
+          </button>
+
+          <div v-if="confirmNewBackupCodes">
+            <confirm
+              :disabled="backupCodes.inProgress"
+              @confirm="confirmBackupCodes"
+              @cancel="cancelBackupCodes"
+            >
+              <p class="warning">
+                {{ $t('settings.mfa.warning_of_generate_new_codes') }}
+              </p>
+            </confirm>
+          </div>
         </div>
       </div>
-    </div>
-
-    <div v-if="setupInProgress"> <!-- setup block-->
 
-      <h3>{{$t('settings.mfa.setup_otp')}}</h3>
+      <div v-if="setupInProgress">
+        <!-- setup block-->
 
-      <recovery-codes :backup-codes="backupCodes" v-if="!setupOTPInProgress"/>
+        <h3>{{ $t('settings.mfa.setup_otp') }}</h3>
 
+        <recovery-codes
+          v-if="!setupOTPInProgress"
+          :backup-codes="backupCodes"
+        />
 
-      <button class="btn btn-default" @click="cancelSetup" v-if="canSetupOTP">
-        {{$t('general.cancel')}}
-      </button>
-
-      <button class="btn btn-default" v-if="canSetupOTP" @click="setupOTP">
-        {{$t('settings.mfa.setup_otp')}}
-      </button>
-
-      <template v-if="setupOTPInProgress">
-        <i v-if="prepareOTP">{{$t('settings.mfa.wait_pre_setup_otp')}}</i>
+        <button
+          v-if="canSetupOTP"
+          class="btn btn-default"
+          @click="cancelSetup"
+        >
+          {{ $t('general.cancel') }}
+        </button>
 
-        <div v-if="confirmOTP">
-          <div class="setup-otp">
-            <div class="qr-code">
-              <h4>{{$t('settings.mfa.scan.title')}}</h4>
-              <p>{{$t('settings.mfa.scan.desc')}}</p>
-              <qrcode :value="otpSettings.provisioning_uri" :options="{ width: 200 }"></qrcode>
-              <p>
-                {{$t('settings.mfa.scan.secret_code')}}:
-                {{otpSettings.key}}
-              </p>
-            </div>
+        <button
+          v-if="canSetupOTP"
+          class="btn btn-default"
+          @click="setupOTP"
+        >
+          {{ $t('settings.mfa.setup_otp') }}
+        </button>
 
-            <div class="verify">
-              <h4>{{$t('general.verify')}}</h4>
-              <p>{{$t('settings.mfa.verify.desc')}}</p>
-              <input type="text" v-model="otpConfirmToken">
+        <template v-if="setupOTPInProgress">
+          <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i>
+
+          <div v-if="confirmOTP">
+            <div class="setup-otp">
+              <div class="qr-code">
+                <h4>{{ $t('settings.mfa.scan.title') }}</h4>
+                <p>{{ $t('settings.mfa.scan.desc') }}</p>
+                <qrcode
+                  :value="otpSettings.provisioning_uri"
+                  :options="{ width: 200 }"
+                />
+                <p>
+                  {{ $t('settings.mfa.scan.secret_code') }}:
+                  {{ otpSettings.key }}
+                </p>
+              </div>
 
-              <p>{{$t('settings.enter_current_password_to_confirm')}}:</p>
-              <input type="password" v-model="currentPassword">
-              <div class="confirm-otp-actions">
-                <button class="btn btn-default" @click="doConfirmOTP">
-                  {{$t('settings.mfa.confirm_and_enable')}}
-                </button>
-                <button class="btn btn-default" @click="cancelSetup">
-                  {{$t('general.cancel')}}
-                </button>
+              <div class="verify">
+                <h4>{{ $t('general.verify') }}</h4>
+                <p>{{ $t('settings.mfa.verify.desc') }}</p>
+                <input
+                  v-model="otpConfirmToken"
+                  type="text"
+                >
+
+                <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
+                <input
+                  v-model="currentPassword"
+                  type="password"
+                >
+                <div class="confirm-otp-actions">
+                  <button
+                    class="btn btn-default"
+                    @click="doConfirmOTP"
+                  >
+                    {{ $t('settings.mfa.confirm_and_enable') }}
+                  </button>
+                  <button
+                    class="btn btn-default"
+                    @click="cancelSetup"
+                  >
+                    {{ $t('general.cancel') }}
+                  </button>
+                </div>
+                <div
+                  v-if="error"
+                  class="alert error"
+                >
+                  {{ error }}
+                </div>
               </div>
-              <div class="alert error" v-if="error">{{error}}</div>
             </div>
           </div>
-        </div>
-      </template>
+        </template>
+      </div>
     </div>
-
   </div>
-</div>
 </template>
 
 <script src="./mfa.js"></script>
diff --git a/src/components/user_settings/mfa_backup_codes.vue b/src/components/user_settings/mfa_backup_codes.vue
index c275bd63..e6c8ede2 100644
--- a/src/components/user_settings/mfa_backup_codes.vue
+++ b/src/components/user_settings/mfa_backup_codes.vue
@@ -1,12 +1,23 @@
 <template>
-<div>
-  <h4 v-if="displayTitle">{{$t('settings.mfa.recovery_codes')}}</h4>
-  <i v-if="inProgress">{{$t('settings.mfa.waiting_a_recovery_codes')}}</i>
-  <template v-if="ready">
-    <p class="alert warning">{{$t('settings.mfa.recovery_codes_warning')}}</p>
-    <ul class="backup-codes"><li v-for="code in backupCodes.codes">{{code}}</li></ul>
-  </template>
-</div>
+  <div>
+    <h4 v-if="displayTitle">
+      {{ $t('settings.mfa.recovery_codes') }}
+    </h4>
+    <i v-if="inProgress">{{ $t('settings.mfa.waiting_a_recovery_codes') }}</i>
+    <template v-if="ready">
+      <p class="alert warning">
+        {{ $t('settings.mfa.recovery_codes_warning') }}
+      </p>
+      <ul class="backup-codes">
+        <li
+          v-for="code in backupCodes.codes"
+          :key="code"
+        >
+          {{ code }}
+        </li>
+      </ul>
+    </template>
+  </div>
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
diff --git a/src/components/user_settings/mfa_totp.vue b/src/components/user_settings/mfa_totp.vue
index 6b73c8f4..c6f2cc7b 100644
--- a/src/components/user_settings/mfa_totp.vue
+++ b/src/components/user_settings/mfa_totp.vue
@@ -1,23 +1,43 @@
 <template>
-<div>
-  <div class="method-item">
-    <strong>{{$t('settings.mfa.otp')}}</strong>
-    <button class="btn btn-default" v-if="!isActivated" @click="doActivate">
-      {{$t('general.enable')}}
-    </button>
+  <div>
+    <div class="method-item">
+      <strong>{{ $t('settings.mfa.otp') }}</strong>
+      <button
+        v-if="!isActivated"
+        class="btn btn-default"
+        @click="doActivate"
+      >
+        {{ $t('general.enable') }}
+      </button>
 
-    <button class="btn btn-default" :disabled="deactivate" @click="doDeactivate"
-            v-if="isActivated">
-      {{$t('general.disable')}}
-    </button>
-  </div>
+      <button
+        v-if="isActivated"
+        class="btn btn-default"
+        :disabled="deactivate"
+        @click="doDeactivate"
+      >
+        {{ $t('general.disable') }}
+      </button>
+    </div>
 
-  <confirm @confirm="confirmDeactivate" @cancel="cancelDeactivate"
-           :disabled="inProgress" v-if="deactivate">
-    {{$t('settings.enter_current_password_to_confirm')}}:
-    <input type="password" v-model="currentPassword">
-  </confirm>
-  <div class="alert error" v-if="error">{{error}}</div>
-</div>
+    <confirm
+      v-if="deactivate"
+      :disabled="inProgress"
+      @confirm="confirmDeactivate"
+      @cancel="cancelDeactivate"
+    >
+      {{ $t('settings.enter_current_password_to_confirm') }}:
+      <input
+        v-model="currentPassword"
+        type="password"
+      >
+    </confirm>
+    <div
+      v-if="error"
+      class="alert error"
+    >
+      {{ error }}
+    </div>
+  </div>
 </template>
 <script src="./mfa_totp.js"></script>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 69505806..b5a7f0df 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -12,11 +12,11 @@ import MuteCard from '../mute_card/mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
+import suggestor from '../emoji-input/suggestor.js'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import Importer from '../importer/importer.vue'
 import Exporter from '../exporter/exporter.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
-import userSearchApi from '../../services/new_api/user_search.js'
 import Mfa from './mfa.vue'
 
 const BlockList = withSubscription({
@@ -46,7 +46,9 @@ const UserSettings = {
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
+      banner: null,
       bannerPreview: null,
+      background: null,
       backgroundPreview: null,
       bannerUploadError: null,
       backgroundUploadError: null,
@@ -83,6 +85,22 @@ const UserSettings = {
     user () {
       return this.$store.state.users.currentUser
     },
+    emojiUserSuggestor () {
+      return suggestor({
+        emoji: [
+          ...this.$store.state.instance.emoji,
+          ...this.$store.state.instance.customEmoji
+        ],
+        users: this.$store.state.users.users,
+        updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
+      })
+    },
+    emojiSuggestor () {
+      return suggestor({ emoji: [
+        ...this.$store.state.instance.emoji,
+        ...this.$store.state.instance.customEmoji
+      ] })
+    },
     pleromaBackend () {
       return this.$store.state.instance.pleromaBackend
     },
@@ -126,10 +144,10 @@ const UserSettings = {
             hide_followers: this.hideFollowers,
             show_role: this.showRole
             /* eslint-enable camelcase */
-          }}).then((user) => {
-            this.$store.commit('addNewUsers', [user])
-            this.$store.commit('setCurrentUser', user)
-          })
+          } }).then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+        })
     },
     updateNotificationSettings () {
       this.$store.state.api.backendInteractor
@@ -144,12 +162,12 @@ const UserSettings = {
       if (file.size > this.$store.state.instance[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
+        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
         return
       }
       // eslint-disable-next-line no-undef
       const reader = new FileReader()
-      reader.onload = ({target}) => {
+      reader.onload = ({ target }) => {
         const img = target.result
         this[slot + 'Preview'] = img
         this[slot] = file
@@ -185,7 +203,7 @@ const UserSettings = {
       if (!this.bannerPreview) { return }
 
       this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateBanner({banner: this.banner})
+      this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
         .then((user) => {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
@@ -198,22 +216,12 @@ const UserSettings = {
     },
     submitBg () {
       if (!this.backgroundPreview) { return }
-      let img = this.backgroundPreview
-      // eslint-disable-next-line no-undef
-      let imginfo = new Image()
-      let cropX, cropY, cropW, cropH
-      imginfo.src = img
-      cropX = 0
-      cropY = 0
-      cropW = imginfo.width
-      cropH = imginfo.width
+      let background = this.background
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
+      this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
         if (!data.error) {
-          let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
-          clone.background_image = data.url
-          this.$store.commit('addNewUsers', [clone])
-          this.$store.commit('setCurrentUser', clone)
+          this.$store.commit('addNewUsers', [data])
+          this.$store.commit('setCurrentUser', data)
           this.backgroundPreview = null
         } else {
           this.backgroundUploadError = this.$t('upload.error.base') + data.error
@@ -261,11 +269,11 @@ const UserSettings = {
       this.deletingAccount = true
     },
     deleteAccount () {
-      this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
+      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
         .then((res) => {
           if (res.status === 'success') {
             this.$store.dispatch('logout')
-            this.$router.push({name: 'root'})
+            this.$router.push({ name: 'root' })
           } else {
             this.deleteAccountError = res.error
           }
@@ -314,11 +322,8 @@ const UserSettings = {
       })
     },
     queryUserIds (query) {
-      return userSearchApi.search({query, store: this.$store})
-        .then((users) => {
-          this.$store.dispatch('addNewUsers', users)
-          return map(users, 'id')
-        })
+      return this.$store.dispatch('searchUsers', query)
+        .then((users) => map(users, 'id'))
     },
     blockUsers (ids) {
       return this.$store.dispatch('blockUsers', ids)
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index bbe41f11..34ea8569 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -2,15 +2,23 @@
   <div class="settings panel panel-default">
     <div class="panel-heading">
       <div class="title">
-        {{$t('settings.user_settings')}}
+        {{ $t('settings.user_settings') }}
       </div>
       <transition name="fade">
         <template v-if="currentSaveStateNotice">
-          <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+          <div
+            v-if="currentSaveStateNotice.error"
+            class="alert error"
+            @click.prevent
+          >
             {{ $t('settings.saving_err') }}
           </div>
 
-          <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+          <div
+            v-if="!currentSaveStateNotice.error"
+            class="alert transparent"
+            @click.prevent
+          >
             {{ $t('settings.saving_ok') }}
           </div>
         </template>
@@ -19,133 +27,267 @@
     <div class="panel-body profile-edit">
       <tab-switcher>
         <div :label="$t('settings.profile_tab')">
-          <div class="setting-item" >
-            <h2>{{$t('settings.name_bio')}}</h2>
-            <p>{{$t('settings.name')}}</p>
+          <div class="setting-item">
+            <h2>{{ $t('settings.name_bio') }}</h2>
+            <p>{{ $t('settings.name') }}</p>
             <EmojiInput
-              type="text"
               v-model="newName"
-              id="username"
-              classname="name-changer"
-            />
-            <p>{{$t('settings.bio')}}</p>
+              :suggest="emojiSuggestor"
+            >
+              <input
+                id="username"
+                v-model="newName"
+                classname="name-changer"
+              >
+            </EmojiInput>
+            <p>{{ $t('settings.bio') }}</p>
             <EmojiInput
-              type="textarea"
               v-model="newBio"
-              classname="bio"
-            />
+              :suggest="emojiUserSuggestor"
+            >
+              <textarea
+                v-model="newBio"
+                classname="bio"
+              />
+            </EmojiInput>
             <p>
-              <input type="checkbox" v-model="newLocked" id="account-locked">
-              <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
+              <input
+                id="account-locked"
+                v-model="newLocked"
+                type="checkbox"
+              >
+              <label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
             </p>
             <div>
-              <label for="default-vis">{{$t('settings.default_vis')}}</label>
-              <div id="default-vis" class="visibility-tray">
+              <label for="default-vis">{{ $t('settings.default_vis') }}</label>
+              <div
+                id="default-vis"
+                class="visibility-tray"
+              >
                 <scope-selector
-                  :showAll="true"
-                  :userDefault="newDefaultScope"
-                  :initialScope="newDefaultScope"
-                  :onScopeChange="changeVis"/>
+                  :show-all="true"
+                  :user-default="newDefaultScope"
+                  :initial-scope="newDefaultScope"
+                  :on-scope-change="changeVis"
+                />
               </div>
             </div>
             <p>
-              <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text">
-              <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
+              <input
+                id="account-no-rich-text"
+                v-model="newNoRichText"
+                type="checkbox"
+              >
+              <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
             </p>
             <p>
-              <input type="checkbox" v-model="hideFollows" id="account-hide-follows">
-              <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label>
+              <input
+                id="account-hide-follows"
+                v-model="hideFollows"
+                type="checkbox"
+              >
+              <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
             </p>
             <p>
-              <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
-              <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
+              <input
+                id="account-hide-followers"
+                v-model="hideFollowers"
+                type="checkbox"
+              >
+              <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label>
             </p>
             <p>
-              <input type="checkbox" v-model="showRole" id="account-show-role">
-              <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
-              <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
+              <input
+                id="account-show-role"
+                v-model="showRole"
+                type="checkbox"
+              >
+              <label
+                v-if="role === 'admin'"
+                for="account-show-role"
+              >{{ $t('settings.show_admin_badge') }}</label>
+              <label
+                v-if="role === 'moderator'"
+                for="account-show-role"
+              >{{ $t('settings.show_moderator_badge') }}</label>
             </p>
-            <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
+            <button
+              :disabled="newName && newName.length === 0"
+              class="btn btn-default"
+              @click="updateProfile"
+            >
+              {{ $t('general.submit') }}
+            </button>
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.avatar')}}</h2>
-            <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" />
-            <p>{{$t('settings.set_new_avatar')}}</p>
-            <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
-            <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
+            <h2>{{ $t('settings.avatar') }}</h2>
+            <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"
+            >
+            <p>{{ $t('settings.set_new_avatar') }}</p>
+            <button
+              v-show="pickAvatarBtnVisible"
+              id="pick-avatar"
+              class="btn"
+              type="button"
+            >
+              {{ $t('settings.upload_a_photo') }}
+            </button>
+            <image-cropper
+              trigger="#pick-avatar"
+              :submit-handler="submitAvatar"
+              @open="pickAvatarBtnVisible=false"
+              @close="pickAvatarBtnVisible=true"
+            />
           </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" />
-            <p>{{$t('settings.set_new_profile_banner')}}</p>
-            <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
+            <h2>{{ $t('settings.profile_banner') }}</h2>
+            <p>{{ $t('settings.current_profile_banner') }}</p>
+            <img
+              :src="user.cover_photo"
+              class="banner"
+            >
+            <p>{{ $t('settings.set_new_profile_banner') }}</p>
+            <img
+              v-if="bannerPreview"
+              class="banner"
+              :src="bannerPreview"
+            >
             <div>
-              <input type="file" @change="uploadFile('banner', $event)" />
+              <input
+                type="file"
+                @change="uploadFile('banner', $event)"
+              >
             </div>
-            <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
-            <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
-            <div class='alert error' v-if="bannerUploadError">
+            <i
+              v-if="bannerUploading"
+              class=" icon-spin4 animate-spin uploading"
+            />
+            <button
+              v-else-if="bannerPreview"
+              class="btn btn-default"
+              @click="submitBanner"
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <div
+              v-if="bannerUploadError"
+              class="alert error"
+            >
               Error: {{ bannerUploadError }}
-              <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
+              <i
+                class="button-icon icon-cancel"
+                @click="clearUploadError('banner')"
+              />
             </div>
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.profile_background')}}</h2>
-            <p>{{$t('settings.set_new_profile_background')}}</p>
-            <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
+            <h2>{{ $t('settings.profile_background') }}</h2>
+            <p>{{ $t('settings.set_new_profile_background') }}</p>
+            <img
+              v-if="backgroundPreview"
+              class="bg"
+              :src="backgroundPreview"
+            >
             <div>
-              <input type="file" @change="uploadFile('background', $event)" />
+              <input
+                type="file"
+                @change="uploadFile('background', $event)"
+              >
             </div>
-            <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
-            <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
-            <div class='alert error' v-if="backgroundUploadError">
+            <i
+              v-if="backgroundUploading"
+              class=" icon-spin4 animate-spin uploading"
+            />
+            <button
+              v-else-if="backgroundPreview"
+              class="btn btn-default"
+              @click="submitBg"
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <div
+              v-if="backgroundUploadError"
+              class="alert error"
+            >
               Error: {{ backgroundUploadError }}
-              <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
+              <i
+                class="button-icon icon-cancel"
+                @click="clearUploadError('background')"
+              />
             </div>
           </div>
         </div>
 
         <div :label="$t('settings.security_tab')">
           <div class="setting-item">
-            <h2>{{$t('settings.change_password')}}</h2>
+            <h2>{{ $t('settings.change_password') }}</h2>
             <div>
-              <p>{{$t('settings.current_password')}}</p>
-              <input type="password" v-model="changePasswordInputs[0]">
+              <p>{{ $t('settings.current_password') }}</p>
+              <input
+                v-model="changePasswordInputs[0]"
+                type="password"
+              >
             </div>
             <div>
-              <p>{{$t('settings.new_password')}}</p>
-              <input type="password" v-model="changePasswordInputs[1]">
+              <p>{{ $t('settings.new_password') }}</p>
+              <input
+                v-model="changePasswordInputs[1]"
+                type="password"
+              >
             </div>
             <div>
-              <p>{{$t('settings.confirm_new_password')}}</p>
-              <input type="password" v-model="changePasswordInputs[2]">
+              <p>{{ $t('settings.confirm_new_password') }}</p>
+              <input
+                v-model="changePasswordInputs[2]"
+                type="password"
+              >
             </div>
-            <button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button>
-            <p v-if="changedPassword">{{$t('settings.changed_password')}}</p>
-            <p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p>
-            <p v-if="changePasswordError">{{changePasswordError}}</p>
+            <button
+              class="btn btn-default"
+              @click="changePassword"
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <p v-if="changedPassword">
+              {{ $t('settings.changed_password') }}
+            </p>
+            <p v-else-if="changePasswordError !== false">
+              {{ $t('settings.change_password_error') }}
+            </p>
+            <p v-if="changePasswordError">
+              {{ changePasswordError }}
+            </p>
           </div>
 
           <div class="setting-item">
-            <h2>{{$t('settings.oauth_tokens')}}</h2>
+            <h2>{{ $t('settings.oauth_tokens') }}</h2>
             <table class="oauth-tokens">
               <thead>
                 <tr>
-                  <th>{{$t('settings.app_name')}}</th>
-                  <th>{{$t('settings.valid_until')}}</th>
-                  <th></th>
+                  <th>{{ $t('settings.app_name') }}</th>
+                  <th>{{ $t('settings.valid_until') }}</th>
+                  <th />
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id">
-                  <td>{{oauthToken.appName}}</td>
-                  <td>{{oauthToken.validUntil}}</td>
+                <tr
+                  v-for="oauthToken in oauthTokens"
+                  :key="oauthToken.id"
+                >
+                  <td>{{ oauthToken.appName }}</td>
+                  <td>{{ oauthToken.validUntil }}</td>
                   <td class="actions">
-                    <button class="btn btn-default" @click="revokeToken(oauthToken.id)">
-                      {{$t('settings.revoke_token')}}
+                    <button
+                      class="btn btn-default"
+                      @click="revokeToken(oauthToken.id)"
+                    >
+                      {{ $t('settings.revoke_token') }}
                     </button>
                   </td>
                 </tr>
@@ -154,123 +296,250 @@
           </div>
           <mfa />
           <div class="setting-item">
-            <h2>{{$t('settings.delete_account')}}</h2>
-            <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
+            <h2>{{ $t('settings.delete_account') }}</h2>
+            <p v-if="!deletingAccount">
+              {{ $t('settings.delete_account_description') }}
+            </p>
             <div v-if="deletingAccount">
-              <p>{{$t('settings.delete_account_instructions')}}</p>
-              <p>{{$t('login.password')}}</p>
-              <input type="password" v-model="deleteAccountConfirmPasswordInput">
-              <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
+              <p>{{ $t('settings.delete_account_instructions') }}</p>
+              <p>{{ $t('login.password') }}</p>
+              <input
+                v-model="deleteAccountConfirmPasswordInput"
+                type="password"
+              >
+              <button
+                class="btn btn-default"
+                @click="deleteAccount"
+              >
+                {{ $t('settings.delete_account') }}
+              </button>
             </div>
-            <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
-            <p v-if="deleteAccountError">{{deleteAccountError}}</p>
-            <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
+            <p v-if="deleteAccountError !== false">
+              {{ $t('settings.delete_account_error') }}
+            </p>
+            <p v-if="deleteAccountError">
+              {{ deleteAccountError }}
+            </p>
+            <button
+              v-if="!deletingAccount"
+              class="btn btn-default"
+              @click="confirmDelete"
+            >
+              {{ $t('general.submit') }}
+            </button>
           </div>
         </div>
 
-        <div :label="$t('settings.notifications')" v-if="pleromaBackend">
+        <div
+          v-if="pleromaBackend"
+          :label="$t('settings.notifications')"
+        >
           <div class="setting-item">
             <div class="select-multiple">
-              <span class="label">{{$t('settings.notification_setting')}}</span>
+              <span class="label">{{ $t('settings.notification_setting') }}</span>
               <ul class="option-list">
                 <li>
-                  <input type="checkbox" id="notification-setting-follows" v-model="notificationSettings.follows">
+                  <input
+                    id="notification-setting-follows"
+                    v-model="notificationSettings.follows"
+                    type="checkbox"
+                  >
                   <label for="notification-setting-follows">
-                  {{$t('settings.notification_setting_follows')}}
+                    {{ $t('settings.notification_setting_follows') }}
                   </label>
                 </li>
                 <li>
-                  <input type="checkbox" id="notification-setting-followers" v-model="notificationSettings.followers">
+                  <input
+                    id="notification-setting-followers"
+                    v-model="notificationSettings.followers"
+                    type="checkbox"
+                  >
                   <label for="notification-setting-followers">
-                  {{$t('settings.notification_setting_followers')}}
+                    {{ $t('settings.notification_setting_followers') }}
                   </label>
                 </li>
                 <li>
-                  <input type="checkbox" id="notification-setting-non-follows" v-model="notificationSettings.non_follows">
+                  <input
+                    id="notification-setting-non-follows"
+                    v-model="notificationSettings.non_follows"
+                    type="checkbox"
+                  >
                   <label for="notification-setting-non-follows">
-                  {{$t('settings.notification_setting_non_follows')}}
+                    {{ $t('settings.notification_setting_non_follows') }}
                   </label>
                 </li>
                 <li>
-                  <input type="checkbox" id="notification-setting-non-followers" v-model="notificationSettings.non_followers">
+                  <input
+                    id="notification-setting-non-followers"
+                    v-model="notificationSettings.non_followers"
+                    type="checkbox"
+                  >
                   <label for="notification-setting-non-followers">
-                  {{$t('settings.notification_setting_non_followers')}}
+                    {{ $t('settings.notification_setting_non_followers') }}
                   </label>
                 </li>
               </ul>
             </div>
-            <p>{{$t('settings.notification_mutes')}}</p>
-            <p>{{$t('settings.notification_blocks')}}</p>
-            <button class="btn btn-default" @click="updateNotificationSettings">{{$t('general.submit')}}</button>
+            <p>{{ $t('settings.notification_mutes') }}</p>
+            <p>{{ $t('settings.notification_blocks') }}</p>
+            <button
+              class="btn btn-default"
+              @click="updateNotificationSettings"
+            >
+              {{ $t('general.submit') }}
+            </button>
           </div>
         </div>
 
-        <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
+        <div
+          v-if="pleromaBackend"
+          :label="$t('settings.data_import_export_tab')"
+        >
           <div class="setting-item">
-            <h2>{{$t('settings.follow_import')}}</h2>
-            <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
-            <Importer :submitHandler="importFollows" :successMessage="$t('settings.follows_imported')" :errorMessage="$t('settings.follow_import_error')" />
+            <h2>{{ $t('settings.follow_import') }}</h2>
+            <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+            <Importer
+              :submit-handler="importFollows"
+              :success-message="$t('settings.follows_imported')"
+              :error-message="$t('settings.follow_import_error')"
+            />
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.follow_export')}}</h2>
-            <Exporter :getContent="getFollowsContent" filename="friends.csv" :exportButtonLabel="$t('settings.follow_export_button')" />
+            <h2>{{ $t('settings.follow_export') }}</h2>
+            <Exporter
+              :get-content="getFollowsContent"
+              filename="friends.csv"
+              :export-button-label="$t('settings.follow_export_button')"
+            />
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.block_import')}}</h2>
-            <p>{{$t('settings.import_blocks_from_a_csv_file')}}</p>
-            <Importer :submitHandler="importBlocks" :successMessage="$t('settings.blocks_imported')" :errorMessage="$t('settings.block_import_error')" />
+            <h2>{{ $t('settings.block_import') }}</h2>
+            <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+            <Importer
+              :submit-handler="importBlocks"
+              :success-message="$t('settings.blocks_imported')"
+              :error-message="$t('settings.block_import_error')"
+            />
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.block_export')}}</h2>
-            <Exporter :getContent="getBlocksContent" filename="blocks.csv" :exportButtonLabel="$t('settings.block_export_button')" />
+            <h2>{{ $t('settings.block_export') }}</h2>
+            <Exporter
+              :get-content="getBlocksContent"
+              filename="blocks.csv"
+              :export-button-label="$t('settings.block_export_button')"
+            />
           </div>
         </div>
 
         <div :label="$t('settings.blocks_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_block')">
-              <BlockCard slot-scope="row" :userId="row.item"/>
+            <Autosuggest
+              :filter="filterUnblockedUsers"
+              :query="queryUserIds"
+              :placeholder="$t('settings.search_user_to_block')"
+            >
+              <BlockCard
+                slot-scope="row"
+                :user-id="row.item"
+              />
             </Autosuggest>
           </div>
-          <BlockList :refresh="true" :getKey="identity">
-            <template slot="header" slot-scope="{selected}">
+          <BlockList
+            :refresh="true"
+            :get-key="identity"
+          >
+            <template
+              slot="header"
+              slot-scope="{selected}"
+            >
               <div class="profile-edit-bulk-actions">
-                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => blockUsers(selected)"
+                >
                   {{ $t('user_card.block') }}
-                  <template slot="progress">{{ $t('user_card.block_progress') }}</template>
+                  <template slot="progress">
+                    {{ $t('user_card.block_progress') }}
+                  </template>
                 </ProgressButton>
-                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unblockUsers(selected)">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unblockUsers(selected)"
+                >
                   {{ $t('user_card.unblock') }}
-                  <template slot="progress">{{ $t('user_card.unblock_progress') }}</template>
+                  <template slot="progress">
+                    {{ $t('user_card.unblock_progress') }}
+                  </template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="{item}"><BlockCard :userId="item" /></template>
-            <template slot="empty">{{$t('settings.no_blocks')}}</template>
+            <template
+              slot="item"
+              slot-scope="{item}"
+            >
+              <BlockCard :user-id="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_blocks') }}
+            </template>
           </BlockList>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_mute')">
-              <MuteCard slot-scope="row" :userId="row.item"/>
+            <Autosuggest
+              :filter="filterUnMutedUsers"
+              :query="queryUserIds"
+              :placeholder="$t('settings.search_user_to_mute')"
+            >
+              <MuteCard
+                slot-scope="row"
+                :user-id="row.item"
+              />
             </Autosuggest>
           </div>
-          <MuteList :refresh="true" :getKey="identity">
-            <template slot="header" slot-scope="{selected}">
+          <MuteList
+            :refresh="true"
+            :get-key="identity"
+          >
+            <template
+              slot="header"
+              slot-scope="{selected}"
+            >
               <div class="profile-edit-bulk-actions">
-                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => muteUsers(selected)"
+                >
                   {{ $t('user_card.mute') }}
-                  <template slot="progress">{{ $t('user_card.mute_progress') }}</template>
+                  <template slot="progress">
+                    {{ $t('user_card.mute_progress') }}
+                  </template>
                 </ProgressButton>
-                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unmuteUsers(selected)">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteUsers(selected)"
+                >
                   {{ $t('user_card.unmute') }}
-                  <template slot="progress">{{ $t('user_card.unmute_progress') }}</template>
+                  <template slot="progress">
+                    {{ $t('user_card.unmute_progress') }}
+                  </template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="{item}"><MuteCard :userId="item" /></template>
-            <template slot="empty">{{$t('settings.no_mutes')}}</template>
+            <template
+              slot="item"
+              slot-scope="{item}"
+            >
+              <MuteCard :user-id="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
           </MuteList>
         </div>
       </tab-switcher>