From a6b6fe95c0fe2aa60ebbfca87fde47e629035c49 Mon Sep 17 00:00:00 2001 From: wakarimasen Date: Wed, 8 Mar 2017 18:28:41 +0100 Subject: [PATCH] Show visual feedback on login error, redirect on success --- src/components/login_form/login_form.js | 8 ++- src/components/login_form/login_form.vue | 9 ++++ src/modules/users.js | 68 +++++++++++++----------- 3 files changed, 53 insertions(+), 32 deletions(-) diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index 827c704c..2ad5b0b5 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -1,13 +1,17 @@ const LoginForm = { data: () => ({ - user: {} + user: {}, + authError: false }), computed: { loggingIn () { return this.$store.state.users.loggingIn } }, methods: { submit () { - this.$store.dispatch('loginUser', this.user) + this.$store.dispatch('loginUser', this.user).then( + () => { this.$router.push('/main/friends')}, + () => { this.authError = true } + ) } } } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index c0273bae..279469ee 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -17,6 +17,9 @@
+
+ +
@@ -39,6 +42,12 @@ margin-top: 1.0em; min-height: 28px; } + + .error { + margin-top: 0em; + margin-bottom: 0em; + background-color: rgba(255, 48, 16, 0.65); + } } diff --git a/src/modules/users.js b/src/modules/users.js index 31731880..a5274480 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -65,40 +65,48 @@ const users = { }) }, loginUser (store, userCredentials) { - const commit = store.commit - commit('beginLogin') - store.rootState.api.backendInteractor.verifyCredentials(userCredentials) - .then((response) => { - if (response.ok) { - response.json() - .then((user) => { - user.credentials = userCredentials - commit('setCurrentUser', user) - commit('addNewUsers', [user]) + return new Promise((resolve, reject) => { + const commit = store.commit + commit('beginLogin') + store.rootState.api.backendInteractor.verifyCredentials(userCredentials) + .then((response) => { + if (response.ok) { + response.json() + .then((user) => { + user.credentials = userCredentials + commit('setCurrentUser', user) + commit('addNewUsers', [user]) - // Set our new backend interactor - commit('setBackendInteractor', backendInteractorService(userCredentials)) + // Set our new backend interactor + commit('setBackendInteractor', backendInteractorService(userCredentials)) - // Start getting fresh tweets. - store.dispatch('startFetching', 'friends') + // Start getting fresh tweets. + store.dispatch('startFetching', 'friends') - // Get user mutes and follower info - store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => { - each(mutedUsers, (user) => { user.muted = true }) - store.commit('addNewUsers', mutedUsers) + // Get user mutes and follower info + store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => { + each(mutedUsers, (user) => { user.muted = true }) + store.commit('addNewUsers', mutedUsers) + }) + + // Fetch our friends + store.rootState.api.backendInteractor.fetchFriends() + .then((friends) => commit('addNewUsers', friends)) }) - - // Fetch our friends - store.rootState.api.backendInteractor.fetchFriends() - .then((friends) => commit('addNewUsers', friends)) - }) - } - commit('endLogin') - }) - .catch((error) => { - console.log(error) - commit('endLogin') - }) + } else { + // Authentication failed + commit('endLogin') + reject() + } + commit('endLogin') + resolve() + }) + .catch((error) => { + console.log(error) + commit('endLogin') + reject() + }) + }) } } }