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

* upstream/develop: (51 commits) toggle_activation api is also deprecated use vuex action refactor toggleActivationStatus replace setActivationStatus api with new one use flex for stickers i18n/update-ja_easy Use a centralized fallback for missing values and use instance.federating instead of instance.federation.enabled Add fallback in case BE does not report federating status in nodeinfo The value we are looking for is federationPolicy.enabled, not federationPolicy.federating Logic should be to hide TWKN if not federating OR if instance is not public Finally trust eslint More lint More lint Lint mfa: removed unused code increase icon width a little bit in the nav panel add icons to nav panel Revert "Merge branch 'revert-96cab6d8' into 'develop'" Support "native" captcha Revert "Merge branch 'oauth-extra-scopes' into 'develop'" ...
2019-12-26 12:47:51 +02:00 · 2019-12-26 12:47:51 +02:00 · b619477573
commit b619477573
parent 585702b1ce f7029a27eb
35 changed files with 1206 additions and 691 deletions
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@ -58,7 +58,7 @@ const LoginForm = {
        ).then((result) => {
          if (result.error) {
            if (result.error === 'mfa_required') {
-              this.requireMFA({ app: app, settings: result })
+              this.requireMFA({ settings: result })
            } else if (result.identifier === 'password_reset_required') {
              this.$router.push({ name: 'password-reset', params: { passwordResetRequested: true } })
            } else {
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@ -8,18 +8,23 @@ export default {
  }),
  computed: {
    ...mapGetters({
-      authApp: 'authFlow/app',
      authSettings: 'authFlow/settings'
    }),
-    ...mapState({ instance: 'instance' })
+    ...mapState({
+      instance: 'instance',
+      oauth: 'oauth'
+    })
  },
  methods: {
    ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
    ...mapActions({ login: 'authFlow/login' }),
    clearError () { this.error = false },
    submit () {
+      const { clientId, clientSecret } = this.oauth
+
      const data = {
-        app: this.authApp,
+        clientId,
+        clientSecret,
        instance: this.instance.server,
        mfaToken: this.authSettings.mfa_token,
        code: this.code
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@ -7,18 +7,23 @@ export default {
  }),
  computed: {
    ...mapGetters({
-      authApp: 'authFlow/app',
      authSettings: 'authFlow/settings'
    }),
-    ...mapState({ instance: 'instance' })
+    ...mapState({
+      instance: 'instance',
+      oauth: 'oauth'
+    })
  },
  methods: {
    ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']),
    ...mapActions({ login: 'authFlow/login' }),
    clearError () { this.error = false },
    submit () {
+      const { clientId, clientSecret } = this.oauth
+
      const data = {
-        app: this.authApp,
+        clientId,
+        clientSecret,
        instance: this.instance.server,
        mfaToken: this.authSettings.mfa_token,
        code: this.code
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@ -29,6 +29,7 @@ const MobileNav = {
    unseenNotificationsCount () {
      return this.unseenNotifications.length
    },
+    hideSitename () { return this.$store.state.instance.hideSitename },
    sitename () { return this.$store.state.instance.name }
  },
  methods: {
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -17,6 +17,7 @@
            <i class="button-icon icon-menu" />
          </a>
          <router-link
+            v-if="!hideSitename"
            class="site-name"
            :to="{ name: 'root' }"
            active-class="home"
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@ -71,12 +71,7 @@ const ModerationTools = {
      }
    },
    toggleActivationStatus () {
-      const store = this.$store
-      const status = !!this.user.deactivated
-      store.state.api.backendInteractor.setActivationStatus({ user: this.user, status }).then(response => {
-        if (!response.ok) { return }
-        store.commit('updateActivationStatus', { user: this.user, status: status })
-      })
+      this.$store.dispatch('toggleActivationStatus', { user: this.user })
    },
    deleteUserDialog (show) {
      this.showDeleteUserDialog = show
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -1,20 +1,18 @@
+import { mapState } from 'vuex'
+
 const NavPanel = {
  created () {
    if (this.currentUser && this.currentUser.locked) {
      this.$store.dispatch('startFetchingFollowRequest')
    }
  },
-  computed: {
-    currentUser () {
-      return this.$store.state.users.currentUser
-    },
-    chat () {
-      return this.$store.state.chat.channel
-    },
-    followRequestCount () {
-      return this.$store.state.api.followRequests.length
-    }
-  }
+  computed: mapState({
+    currentUser: state => state.users.currentUser,
+    chat: state => state.chat.channel,
+    followRequestCount: state => state.api.followRequests.length,
+    privateMode: state => state.instance.private,
+    federating: state => state.instance.federating
+  })
 }

 export default NavPanel
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -4,22 +4,22 @@
      <ul>
        <li v-if="currentUser">
          <router-link :to="{ name: 'friends' }">
-            {{ $t("nav.timeline") }}
+            <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
          </router-link>
        </li>
        <li v-if="currentUser">
          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.interactions") }}
+            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
          </router-link>
        </li>
        <li v-if="currentUser">
          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.dms") }}
+            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
          </router-link>
        </li>
        <li v-if="currentUser && currentUser.locked">
          <router-link :to="{ name: 'friend-requests' }">
-            {{ $t("nav.friend_requests") }}
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
            <span
              v-if="followRequestCount > 0"
              class="badge follow-request-count"
@ -28,19 +28,19 @@
            </span>
          </router-link>
        </li>
-        <li>
+        <li v-if="currentUser || !privateMode">
          <router-link :to="{ name: 'public-timeline' }">
-            {{ $t("nav.public_tl") }}
+            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
          </router-link>
        </li>
-        <li>
+        <li v-if="federating && !privateMode">
          <router-link :to="{ name: 'public-external-timeline' }">
-            {{ $t("nav.twkn") }}
+            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
          </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'about' }">
-            {{ $t("nav.about") }}
+            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
          </router-link>
        </li>
      </ul>
@ -113,4 +113,8 @@
    }
  }
 }
+
+.nav-panel .button-icon:before {
+  width: 1.1em;
+}
 </style>
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -172,7 +172,7 @@
                for="captcha-label"
              >{{ $t('captcha') }}</label>

-              <template v-if="captcha.type == 'kocaptcha'">
+              <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
                <img
                  :src="captcha.url"
                  @click="setCaptcha"
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@ -33,11 +33,20 @@ const SideDrawer = {
    logo () {
      return this.$store.state.instance.logo
    },
+    hideSitename () {
+      return this.$store.state.instance.hideSitename
+    },
    sitename () {
      return this.$store.state.instance.name
    },
    followRequestCount () {
      return this.$store.state.api.followRequests.length
+    },
+    privateMode () {
+      return this.$store.state.instance.private
+    },
+    federating () {
+      return this.$store.state.instance.federating
    }
  },
  methods: {
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -27,7 +27,7 @@
          class="side-drawer-logo-wrapper"
        >
          <img :src="logo">
-          <span>{{ sitename }}</span>
+          <span v-if="!hideSitename">{{ sitename }}</span>
        </div>
      </div>
      <ul>
@ -36,7 +36,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'login' }">
-            {{ $t("login.login") }}
+            <i class="button-icon icon-login" /> {{ $t("login.login") }}
          </router-link>
        </li>
        <li
@ -44,7 +44,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.dms") }}
+            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
          </router-link>
        </li>
        <li
@ -52,7 +52,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.interactions") }}
+            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
          </router-link>
        </li>
      </ul>
@ -62,7 +62,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'friends' }">
-            {{ $t("nav.timeline") }}
+            <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
          </router-link>
        </li>
        <li
@ -70,7 +70,7 @@
          @click="toggleDrawer"
        >
          <router-link to="/friend-requests">
-            {{ $t("nav.friend_requests") }}
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
            <span
              v-if="followRequestCount > 0"
              class="badge follow-request-count"
@ -79,14 +79,20 @@
            </span>
          </router-link>
        </li>
-        <li @click="toggleDrawer">
+        <li
+          v-if="currentUser || !privateMode"
+          @click="toggleDrawer"
+        >
          <router-link to="/main/public">
-            {{ $t("nav.public_tl") }}
+            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
          </router-link>
        </li>
-        <li @click="toggleDrawer">
+        <li
+          v-if="federating && !privateMode"
+          @click="toggleDrawer"
+        >
          <router-link to="/main/all">
-            {{ $t("nav.twkn") }}
+            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
          </router-link>
        </li>
        <li
@ -94,14 +100,17 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'chat' }">
-            {{ $t("nav.chat") }}
+            <i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
          </router-link>
        </li>
      </ul>
      <ul>
-        <li @click="toggleDrawer">
+        <li
+          v-if="currentUser || !privateMode"
+          @click="toggleDrawer"
+        >
          <router-link :to="{ name: 'search' }">
-            {{ $t("nav.search") }}
+            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
          </router-link>
        </li>
        <li
@ -109,17 +118,17 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'who-to-follow' }">
-            {{ $t("nav.who_to_follow") }}
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
          </router-link>
        </li>
        <li @click="toggleDrawer">
          <router-link :to="{ name: 'settings' }">
-            {{ $t("settings.settings") }}
+            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
          </router-link>
        </li>
        <li @click="toggleDrawer">
          <router-link :to="{ name: 'about'}">
-            {{ $t("nav.about") }}
+            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
          </router-link>
        </li>
        <li
@ -130,7 +139,7 @@
            href="/pleroma/admin/#/login-pleroma"
            target="_blank"
          >
-            {{ $t("nav.administration") }}
+            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
          </a>
        </li>
        <li
@ -141,7 +150,7 @@
            href="#"
            @click="doLogout"
          >
-            {{ $t("login.logout") }}
+            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
          </a>
        </li>
      </ul>
@ -215,6 +224,10 @@
  box-shadow: var(--panelShadow);
  background-color: $fallback--bg;
  background-color: var(--bg, $fallback--bg);
+
+  .button-icon:before {
+    width: 1.1em;
+  }
 }

 .side-drawer-logo-wrapper {
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@ -36,23 +36,23 @@

 .sticker-picker {
  width: 100%;
-  position: relative;
-  .tab-switcher {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-  .sticker-picker-content {
-    .sticker {
-      display: inline-block;
-      width: 20%;
-      height: 20%;
-      img {
-        width: 100%;
-        &:hover {
-          filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+  .contents {
+    min-height: 250px;
+    .sticker-picker-content {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 4px;
+      .sticker {
+        display: flex;
+        flex: 1 1 auto;
+        margin: 4px;
+        width: 56px;
+        height: 56px;
+        img {
+          height: 100%;
+          &:hover {
+            filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+          }
        }
      }
    }
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -36,7 +36,12 @@ const Timeline = {
    }
  },
  computed: {
-    timelineError () { return this.$store.state.statuses.error },
+    timelineError () {
+      return this.$store.state.statuses.error
+    },
+    errorData () {
+      return this.$store.state.statuses.errorData
+    },
    newStatusCount () {
      return this.timeline.newStatusCount
    },
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -11,15 +11,22 @@
      >
        {{ $t('timeline.error_fetching') }}
      </div>
+      <div
+        v-else-if="errorData"
+        class="loadmore-error alert error"
+        @click.prevent
+      >
+        {{ errorData.statusText }}
+      </div>
      <button
-        v-if="timeline.newStatusCount > 0 && !timelineError"
+        v-if="timeline.newStatusCount > 0 && !timelineError && !errorData"
        class="loadmore-button"
        @click.prevent="showNewStatuses"
      >
        {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
      </button>
      <div
-        v-if="!timeline.newStatusCount > 0 && !timelineError"
+        v-if="!timeline.newStatusCount > 0 && !timelineError && !errorData"
        class="loadmore-text faint"
        @click.prevent
      >
@ -67,12 +74,18 @@
        {{ $t('timeline.no_more_statuses') }}
      </div>
      <a
-        v-else-if="!timeline.loading"
+        v-else-if="!timeline.loading && !errorData"
        href="#"
        @click.prevent="fetchOlderStatuses()"
      >
        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
      </a>
+      <a
+        v-else-if="errorData"
+        href="#"
+      >
+        <div class="new-status-notification text-center panel-footer">{{ errorData.error }}</div>
+      </a>
      <div
        v-else
        class="new-status-notification text-center panel-footer"
@ -93,17 +106,4 @@
    opacity: 1;
  }
 }
-
-.new-status-notification {
-  position:relative;
-  margin-top: -1px;
-  font-size: 1.1em;
-  border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
-  z-index: 1;
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
-}
 </style>