diff --git a/src/App.scss b/src/App.scss index 425c8e01..47086006 100644 --- a/src/App.scss +++ b/src/App.scss @@ -654,6 +654,33 @@ nav { border-radius: var(--inputRadius, $fallback--inputRadius); } +@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); + } +} + @media all and (max-width: 800px) { .mobile-hidden { display: none; diff --git a/src/boot/routes.js b/src/boot/routes.js index 9dba532a..cfbcb1fe 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -39,7 +39,7 @@ export default (store) => { { name: 'dms', path: '/users/:username/dms', component: DMs }, { name: 'settings', path: '/settings', component: Settings }, { name: 'registration', path: '/registration', component: Registration }, - { name: 'registration', path: '/registration/:token', component: Registration }, + { name: 'registration-token', path: '/registration/:token', component: Registration }, { name: 'friend-requests', path: '/friend-requests', component: FollowRequests }, { name: 'user-settings', path: '/user-settings', component: UserSettings }, { name: 'notifications', path: '/:username/notifications', component: Notifications }, diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index 013222a8..fb6dc651 100644 --- a/src/components/login_form/login_form.js +++ b/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 } } } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 12971882..27a8e48a 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -33,6 +33,13 @@ + +
+
+ {{authError}} + +
+
@@ -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; + } +} diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index a3ba14d1..f428ead3 100644 --- a/src/components/registration/registration.vue +++ b/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; diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 386fff6a..fc90977b 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/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 { diff --git a/src/components/status/status.js b/src/components/status/status.js index 2d485616..9730eded 100644 --- a/src/components/status/status.js +++ b/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] diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index c9197a1c..991062cd 100644 --- a/src/components/user_profile/user_profile.js +++ b/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) { diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index d64ce277..f9b964ce 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -20,7 +20,8 @@ - + +