Show visual feedback on login error, redirect on success

This commit is contained in:
wakarimasen 2017-03-08 18:28:41 +01:00
parent ccbfc64bfc
commit a6b6fe95c0
3 changed files with 53 additions and 32 deletions

View file

@ -1,13 +1,17 @@
const LoginForm = { const LoginForm = {
data: () => ({ data: () => ({
user: {} user: {},
authError: false
}), }),
computed: { computed: {
loggingIn () { return this.$store.state.users.loggingIn } loggingIn () { return this.$store.state.users.loggingIn }
}, },
methods: { methods: {
submit () { submit () {
this.$store.dispatch('loginUser', this.user) this.$store.dispatch('loginUser', this.user).then(
() => { this.$router.push('/main/friends')},
() => { this.authError = true }
)
} }
} }
} }

View file

@ -17,6 +17,9 @@
<div class='form-group'> <div class='form-group'>
<button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button> <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
</div> </div>
<div v-if="authError" class='form-group'>
<button disabled='true' class='btn btn-default base05 error'>Error logging in, try again</button>
</div>
</form> </form>
</div> </div>
</div> </div>
@ -39,6 +42,12 @@
margin-top: 1.0em; margin-top: 1.0em;
min-height: 28px; min-height: 28px;
} }
.error {
margin-top: 0em;
margin-bottom: 0em;
background-color: rgba(255, 48, 16, 0.65);
}
} }
</style> </style>

View file

@ -65,40 +65,48 @@ const users = {
}) })
}, },
loginUser (store, userCredentials) { loginUser (store, userCredentials) {
const commit = store.commit return new Promise((resolve, reject) => {
commit('beginLogin') const commit = store.commit
store.rootState.api.backendInteractor.verifyCredentials(userCredentials) commit('beginLogin')
.then((response) => { store.rootState.api.backendInteractor.verifyCredentials(userCredentials)
if (response.ok) { .then((response) => {
response.json() if (response.ok) {
.then((user) => { response.json()
user.credentials = userCredentials .then((user) => {
commit('setCurrentUser', user) user.credentials = userCredentials
commit('addNewUsers', [user]) commit('setCurrentUser', user)
commit('addNewUsers', [user])
// Set our new backend interactor // Set our new backend interactor
commit('setBackendInteractor', backendInteractorService(userCredentials)) commit('setBackendInteractor', backendInteractorService(userCredentials))
// Start getting fresh tweets. // Start getting fresh tweets.
store.dispatch('startFetching', 'friends') store.dispatch('startFetching', 'friends')
// Get user mutes and follower info // Get user mutes and follower info
store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => { store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => {
each(mutedUsers, (user) => { user.muted = true }) each(mutedUsers, (user) => { user.muted = true })
store.commit('addNewUsers', mutedUsers) store.commit('addNewUsers', mutedUsers)
})
// Fetch our friends
store.rootState.api.backendInteractor.fetchFriends()
.then((friends) => commit('addNewUsers', friends))
}) })
} else {
// Fetch our friends // Authentication failed
store.rootState.api.backendInteractor.fetchFriends() commit('endLogin')
.then((friends) => commit('addNewUsers', friends)) reject()
}) }
} commit('endLogin')
commit('endLogin') resolve()
}) })
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
commit('endLogin') commit('endLogin')
}) reject()
})
})
} }
} }
} }