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

* upstream/develop:
  oof
  slightly changed the code to have less mutations, added comments
  more damage control
  fix chrome
  Prevent html-minifier to remove placeholder comment in index.html template
  Add placeholder to insert server generated metatags. Related to #430
  Added support for async following including delayed confirmation if we followed user or not
  search button for user finder
  hide logo when opening search bar on small screens

src/components/settings/settings.vue

@@ -120,7 +120,7 @@
             </li>
             <ul class="setting-list suboptions" >
               <li>
-                <input :disabled="!hideAttachmentsInConvLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
+                <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
                 <label for="preloadImage">{{$t('settings.preload_images')}}</label>
               </li>
             </ul>

src/components/user_card_content/user_card_content.js

@@ -5,6 +5,8 @@ export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ],
   data () {
     return {
+      followRequestInProgress: false,
+      followRequestSent: false,
       hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
         ? this.$store.state.instance.hideUserStats
         : this.$store.state.config.hideUserStats,
@@ -84,13 +86,68 @@ export default {
   methods: {
     followUser () {
       const store = this.$store
+      this.followRequestInProgress = true
       store.state.api.backendInteractor.followUser(this.user.id)
         .then((followedUser) => store.commit('addNewUsers', [followedUser]))
+        .then(() => {
+          // For locked users we just mark it that we sent the follow request
+          if (this.user.locked) {
+            this.followRequestInProgress = false
+            this.followRequestSent = true
+            return
+          }
+
+          if (this.user.following) {
+            // If we get result immediately, just stop.
+            this.followRequestInProgress = false
+            return
+          }
+
+          // But usually we don't get result immediately, so we ask server
+          // for updated user profile to confirm if we are following them
+          // Sometimes it takes several tries. Sometimes we end up not following
+          // user anyway, probably because they locked themselves and we
+          // don't know that yet.
+          // Recursive Promise, it will call itself up to 3 times.
+          const fetchUser = (attempt) => new Promise((resolve, reject) => {
+            setTimeout(() => {
+              store.state.api.backendInteractor.fetchUser({ id: this.user.id })
+                .then((user) => store.commit('addNewUsers', [user]))
+                .then(() => resolve([this.user.following, attempt]))
+                .catch((e) => reject(e))
+            }, 500)
+          }).then(([following, attempt]) => {
+            if (!following && attempt <= 3) {
+              // If we BE reports that we still not following that user - retry,
+              // increment attempts by one
+              return fetchUser(++attempt)
+            } else {
+              // If we run out of attempts, just return whatever status is.
+              return following
+            }
+          })
+
+          return fetchUser(1)
+            .then((following) => {
+              if (following) {
+                // We confirmed and everything its good.
+                this.followRequestInProgress = false
+              } else {
+                // If after all the tries, just treat it as if user is locked
+                this.followRequestInProgress = false
+                this.followRequestSent = true
+              }
+            })
+        })
     },
     unfollowUser () {
       const store = this.$store
+      this.followRequestInProgress = true
       store.state.api.backendInteractor.unfollowUser(this.user.id)
         .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
+        .then(() => {
+          this.followRequestInProgress = false
+        })
     },
     blockUser () {
       const store = this.$store

src/components/user_card_content/user_card_content.vue

@@ -44,13 +44,26 @@
         <div class="follow" v-if="loggedIn">
           <span v-if="user.following">
             <!--Following them!-->
-            <button @click="unfollowUser" class="pressed">
-              {{ $t('user_card.following') }}
+            <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')">
+              <template v-if="followRequestInProgress">
+                {{ $t('user_card.follow_progress') }}
+              </template>
+              <template v-else>
+                {{ $t('user_card.following') }}
+              </template>
             </button>
           </span>
           <span v-if="!user.following">
-            <button @click="followUser">
-              {{ $t('user_card.follow') }}
+            <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''">
+              <template v-if="followRequestInProgress">
+                {{ $t('user_card.follow_progress') }}
+              </template>
+              <template v-else-if="followRequestSent">
+                {{ $t('user_card.follow_sent') }}
+              </template>
+              <template v-else>
+                {{ $t('user_card.follow') }}
+              </template>
             </button>
           </span>
         </div>

src/components/user_finder/user_finder.js

@@ -11,6 +11,7 @@ const UserFinder = {
     },
     toggleHidden () {
       this.hidden = !this.hidden
+      this.$emit('toggled', this.hidden)
     }
   }
 }

src/components/user_finder/user_finder.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="user-finder-container">
     <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
-    <a href="#" v-if="hidden"  :title="$t('finder.find_user')" ><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
-    <span v-else>
+    <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
+    <template v-else>
       <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+      <button class="btn search-button" @click="findUser(username)">
+        <i class="icon-search"/>
+      </button>
       <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
-    </span>
+    </template>
   </div>
 </template>
 
@@ -16,11 +19,23 @@
 
 .user-finder-container {
   max-width: 100%;
-}
+  display: inline-flex;
+  align-items: baseline;
+  vertical-align: baseline;
 
-.user-finder-input {
-  max-width: 80%;
-  vertical-align: middle;
+
+  .user-finder-input,
+  .search-button {
+    height: 29px;
+  }
+  .user-finder-input {
+    max-width: 80%;
+  }
+
+  .search-button {
+    margin-left: .5em;
+    margin-right: .5em;
+  }
 }
 
 </style>

src/components/user_settings/user_settings.vue

@@ -31,7 +31,7 @@
             </p>
             <p>
               <input type="checkbox" v-model="newHideNetwork" id="account-hide-network">
-              <label for="account-no-rich-text">{{$t('settings.hide_network_description')}}</label>
+              <label for="account-hide-network">{{$t('settings.hide_network_description')}}</label>
             </p>
             <button :disabled='newName.length <= 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
           </div>