Merge branch 'develop' into feat/media-modal

src/components/login_form/login_form.js

@@ -22,19 +22,29 @@ const LoginForm = {
         oauth: this.$store.state.oauth,
         instance: this.$store.state.instance.server
       }
+      this.clearError()
       oauthApi.getOrCreateApp(data).then((app) => {
         oauthApi.getTokenWithCredentials(
           {
             app,
             instance: data.instance,
             username: this.user.username,
-            password: this.user.password})
-          .then((result) => {
-            this.$store.commit('setToken', result.access_token)
-            this.$store.dispatch('loginUser', result.access_token)
-            this.$router.push({name: 'friends'})
-          })
+            password: this.user.password
+          }
+        ).then((result) => {
+          if (result.error) {
+            this.authError = result.error
+            this.user.password = ''
+            return
+          }
+          this.$store.commit('setToken', result.access_token)
+          this.$store.dispatch('loginUser', result.access_token)
+          this.$router.push({name: 'friends'})
+        })
       })
+    },
+    clearError () {
+      this.authError = false
     }
   }
 }

src/components/login_form/login_form.vue

@@ -33,6 +33,13 @@
           </div>
         </div>
       </form>
+      
+      <div v-if="authError" class='form-group'>
+        <div class='alert error'>
+          {{authError}}
+          <i class="button-icon icon-cancel" @click="clearError"></i>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -48,10 +55,6 @@
     width: 10em;
   }
 
-  .error {
-    text-align: center;
-  }
-
   .register {
     flex: 1 1;
   }
@@ -64,4 +67,14 @@
     justify-content: space-between;
   }
 }
+
+.login {
+  .error {
+    text-align: center;
+
+    animation-name: shakeError;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-in-out;
+  }
+}
 </style>

src/components/registration/registration.vue

@@ -147,24 +147,6 @@ $validations-cRed: #f04124;
     margin-bottom: 1em;
   }
 
-  @keyframes shakeError {
-    0% {
-      transform: translateX(0); }
-    15% {
-      transform: translateX(0.375rem); }
-    30% {
-      transform: translateX(-0.375rem); }
-    45% {
-      transform: translateX(0.375rem); }
-    60% {
-      transform: translateX(-0.375rem); }
-    75% {
-      transform: translateX(0.375rem); }
-    90% {
-      transform: translateX(-0.375rem); }
-    100% {
-      transform: translateX(0); } }
-
   .form-group--error {
     animation-name: shakeError;
     animation-duration: .6s;

src/components/side_drawer/side_drawer.vue

@@ -128,7 +128,7 @@
 
 .side-drawer {
   overflow-x: hidden;
-  transition: 0.5s;
+  transition: 0.35s;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   margin: 0 0 0 -100px;
   padding: 0 0 1em 100px;
@@ -146,7 +146,7 @@
 }
 
 .side-drawer-closed {
-  margin: 0 0 0 calc(-100% - 100px);
+  transform: translate(-100%);
 }
 
 .side-drawer-heading {

src/components/status/status.js

@@ -128,7 +128,7 @@ const Status = {
       return lengthScore > 20
     },
     isReply () {
-      return !!this.status.in_reply_to_status_id
+      return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
     },
     replyToName () {
       const user = this.$store.state.users.usersObject[this.status.in_reply_to_user_id]

src/components/user_profile/user_profile.js

@@ -6,8 +6,10 @@ const UserProfile = {
   created () {
     this.$store.commit('clearTimeline', { timeline: 'user' })
     this.$store.commit('clearTimeline', { timeline: 'favorites' })
+    this.$store.commit('clearTimeline', { timeline: 'media' })
     this.$store.dispatch('startFetching', ['user', this.fetchBy])
-    this.$store.dispatch('startFetching', ['favorites', this.fetchBy])
+    this.$store.dispatch('startFetching', ['media', this.fetchBy])
+    this.startFetchFavorites()
     if (!this.user.id) {
       this.$store.dispatch('fetchUser', this.fetchBy)
     }
@@ -15,6 +17,7 @@ const UserProfile = {
   destroyed () {
     this.$store.dispatch('stopFetching', 'user')
     this.$store.dispatch('stopFetching', 'favorites')
+    this.$store.dispatch('stopFetching', 'media')
   },
   computed: {
     timeline () {
@@ -23,6 +26,9 @@ const UserProfile = {
     favorites () {
       return this.$store.state.statuses.timelines.favorites
     },
+    media () {
+      return this.$store.state.statuses.timelines.media
+    },
     userId () {
       return this.$route.params.id || this.user.id
     },
@@ -68,6 +74,11 @@ const UserProfile = {
     fetchFriends () {
       const id = this.userId
       this.$store.dispatch('addFriends', { id })
+    },
+    startFetchFavorites () {
+      if (this.isUs) {
+        this.$store.dispatch('startFetching', ['favorites', this.fetchBy])
+      }
     }
   },
   watch: {
@@ -78,10 +89,13 @@ const UserProfile = {
       }
       this.$store.dispatch('stopFetching', 'user')
       this.$store.dispatch('stopFetching', 'favorites')
+      this.$store.dispatch('stopFetching', 'media')
       this.$store.commit('clearTimeline', { timeline: 'user' })
       this.$store.commit('clearTimeline', { timeline: 'favorites' })
+      this.$store.commit('clearTimeline', { timeline: 'media' })
       this.$store.dispatch('startFetching', ['user', this.fetchBy])
-      this.$store.dispatch('startFetching', ['favorites', this.fetchBy])
+      this.$store.dispatch('startFetching', ['media', this.fetchBy])
+      this.startFetchFavorites()
     },
     userId () {
       if (!this.isExternal) {
@@ -89,10 +103,13 @@ const UserProfile = {
       }
       this.$store.dispatch('stopFetching', 'user')
       this.$store.dispatch('stopFetching', 'favorites')
+      this.$store.dispatch('stopFetching', 'media')
       this.$store.commit('clearTimeline', { timeline: 'user' })
       this.$store.commit('clearTimeline', { timeline: 'favorites' })
+      this.$store.commit('clearTimeline', { timeline: 'media' })
       this.$store.dispatch('startFetching', ['user', this.fetchBy])
-      this.$store.dispatch('startFetching', ['favorites', this.fetchBy])
+      this.$store.dispatch('startFetching', ['media', this.fetchBy])
+      this.startFetchFavorites()
     },
     user () {
       if (this.user.id && !this.user.followers) {

src/components/user_profile/user_profile.vue

@@ -20,7 +20,8 @@
           <i class="icon-spin3 animate-spin"></i>
         </div>
       </div>
-      <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_profile.favorites_title')" timeline-name="favorites" :timeline="favorites"/>
+      <Timeline :label="$t('user_card.media')" :embedded="true" :title="$t('user_card.media')" timeline-name="media" :timeline="media" :user-id="fetchBy" />
+      <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_card.favorites')" timeline-name="favorites" :timeline="favorites"/>
     </tab-switcher>
   </div>
   <div v-else class="panel user-profile-placeholder">