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

* upstream/develop: (21 commits)
  #449 - fix auth token fetch issue
  Make select tag use --inputText as text color
  #444 - remote follow clean up
  #444 - show `remote follow` button when logged out
  Add button to save without cropping
  post-merge fixes
  [i18n] Update oc.json
  after store: fix setting postFormats field
  afterStoreSetup: Move log in and theme load to afterStoreSetup.
  afterStoreSetup: Handle 404 cases.
  afterStoreSetup: Emoji and nodeinfo refactor.
  afterStoreSetup: refactor TOS and panel fetching, handle 404s.
  afterStoreSetup: refactor.
  Load persistedStated with async/await.
  fixing typos and badly translated strings
  #434 - fix plain text issue
  Added some tests
  Code refactoring
  Version links to BE/FE
  Added new tab to display versions of BE/FE
  ...

src/components/follow_card/follow_card.js

@@ -1,4 +1,5 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 
 const FollowCard = {
@@ -14,13 +15,17 @@ const FollowCard = {
     }
   },
   components: {
-    BasicUserCard
+    BasicUserCard,
+    RemoteFollow
   },
   computed: {
     isMe () { return this.$store.state.users.currentUser.id === this.user.id },
     following () { return this.updated ? this.updated.following : this.user.following },
     showFollow () {
       return !this.following || this.updated && !this.updated.following
+    },
+    loggedIn () {
+      return this.$store.state.users.currentUser
     }
   },
   methods: {

src/components/follow_card/follow_card.vue

@@ -4,9 +4,12 @@
       <span class="faint" v-if="!noFollowsYou && user.follows_you">
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
       </span>
+      <div class="btn-follow" v-if="showFollow && !loggedIn">
+        <RemoteFollow :user="user" />
+      </div>
       <button
-        v-if="showFollow"
-        class="btn btn-default"
+        v-if="showFollow && loggedIn"
+        class="btn btn-default btn-follow"
         @click="followUser"
         :disabled="inProgress"
         :title="requestSent ? $t('user_card.follow_again') : ''"
@@ -44,7 +47,7 @@
   flex-wrap: wrap;
   line-height: 1.5em;
 
-  .btn {
+  .btn-follow {
     margin-top: 0.5em;
     margin-left: auto;
     width: 10em;

src/components/image_cropper/image_cropper.js

@@ -31,6 +31,9 @@ const ImageCropper = {
     saveButtonLabel: {
       type: String
     },
+    saveWithoutCroppingButtonlabel: {
+      type: String
+    },
     cancelButtonLabel: {
       type: String
     }
@@ -48,6 +51,9 @@ const ImageCropper = {
     saveText () {
       return this.saveButtonLabel || this.$t('image_cropper.save')
     },
+    saveWithoutCroppingText () {
+      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
+    },
     cancelText () {
       return this.cancelButtonLabel || this.$t('image_cropper.cancel')
     },
@@ -76,6 +82,18 @@ const ImageCropper = {
           this.submitting = false
         })
     },
+    submitWithoutCropping () {
+      this.submitting = true
+      this.avatarUploadError = null
+      this.submitHandler(false, this.dataUrl)
+        .then(() => this.destroy())
+        .catch((err) => {
+          this.submitError = err
+        })
+        .finally(() => {
+          this.submitting = false
+        })
+    },
     pickImage () {
       this.$refs.input.click()
     },

src/components/image_cropper/image_cropper.vue

@@ -7,6 +7,7 @@
       <div class="image-cropper-buttons-wrapper">
         <button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
         <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
+        <button class="btn" type="button" :disabled="submitting" @click="submitWithoutCropping" v-text="saveWithoutCroppingText"></button>
         <i class="icon-spin4 animate-spin" v-if="submitting"></i>
       </div>
       <div class="alert error" v-if="submitError">
@@ -36,7 +37,11 @@
   }
 
   &-buttons-wrapper {
-    margin-top: 15px;
+    margin-top: 10px;
+
+    button {
+      margin-top: 5px;
+    }
   }
 }
 </style>

src/components/remote_follow/remote_follow.js

@@ -0,0 +1,10 @@
+export default {
+  props: [ 'user' ],
+  computed: {
+    subscribeUrl () {
+      // eslint-disable-next-line no-undef
+      const serverUrl = new URL(this.user.statusnet_profile_url)
+      return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
+    }
+  }
+}

src/components/remote_follow/remote_follow.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="remote-follow">
+    <form method="POST" :action='subscribeUrl'>
+      <input type="hidden" name="nickname" :value="user.screen_name">
+      <input type="hidden" name="profile" value="">
+      <button click="submit" class="remote-button">
+        {{ $t('user_card.remote_follow') }}
+      </button>
+    </form>
+  </div>
+</template>
+
+<script src="./remote_follow.js"></script>
+
+<style lang="scss">
+.remote-follow {
+  max-width: 220px;
+
+  .remote-button {
+    width: 100%;
+    min-height: 28px;
+  }
+}
+</style>

src/components/settings/settings.js

@@ -1,8 +1,13 @@
 /* eslint-env browser */
+import { filter, trim } from 'lodash'
+
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
-import { filter, trim } from 'lodash'
+import { extractCommit } from '../../services/version/version.service'
+
+const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
+const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
 
 const settings = {
   data () {
@@ -83,7 +88,10 @@ const settings = {
         // Future spec, still not supported in Nightly 63 as of 08/2018
         Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
       playVideosInModal: user.playVideosInModal,
-      useContainFit: user.useContainFit
+      useContainFit: user.useContainFit,
+
+      backendVersion: instance.backendVersion,
+      frontendVersion: instance.frontendVersion
     }
   },
   components: {
@@ -101,7 +109,13 @@ const settings = {
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    frontendVersionLink () {
+      return pleromaFeCommitUrl + this.frontendVersion
+    },
+    backendVersionLink () {
+      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
+    }
   },
   watch: {
     hideAttachmentsLocal (value) {

src/components/settings/settings.vue

@@ -267,6 +267,28 @@
           </div>
         </div>
       </div>
+      <div :label="$t('settings.version.title')" >
+        <div class="setting-item">
+          <ul class="setting-list">
+            <li>
+              <p>{{$t('settings.version.backend_version')}}</p>
+              <ul class="option-list">
+                <li>
+                  <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <p>{{$t('settings.version.frontend_version')}}</p>
+              <ul class="option-list">
+                <li>
+                  <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
     </tab-switcher>
 </keep-alive>
   </div>

src/components/user_card/user_card.js

@@ -1,4 +1,5 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -99,7 +100,8 @@ export default {
     }
   },
   components: {
-    UserAvatar
+    UserAvatar,
+    RemoteFollow
   },
   methods: {
     followUser () {

src/components/user_card/user_card.vue

@@ -84,14 +84,8 @@
             </button>
           </span>
         </div>
-        <div class="remote-follow" v-if='!loggedIn && user.is_local'>
-          <form method="POST" :action='subscribeUrl'>
-            <input type="hidden" name="nickname" :value="user.screen_name">
-            <input type="hidden" name="profile" value="">
-            <button click="submit" class="remote-button">
-              {{ $t('user_card.remote_follow') }}
-            </button>
-          </form>
+        <div v-if='!loggedIn && user.is_local'>
+          <RemoteFollow :user="user" />
         </div>
         <div class='block' v-if='isOtherUser && loggedIn'>
           <span v-if='user.statusnet_blocking'>
@@ -375,11 +369,6 @@
       min-height: 28px;
     }
 
-    .remote-follow {
-      max-width: 220px;
-      min-height: 28px;
-    }
-
     .follow {
       max-width: 220px;
       min-height: 28px;

src/components/user_settings/user_settings.js

@@ -160,7 +160,13 @@ const UserSettings = {
       reader.readAsDataURL(file)
     },
     submitAvatar (cropper, file) {
-      const img = cropper.getCroppedCanvas().toDataURL(file.type)
+      let img
+      if (cropper) {
+        img = cropper.getCroppedCanvas().toDataURL(file.type)
+      } else {
+        img = file
+      }
+
       return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])