forked from AkkomaGang/akkoma-fe
Merge branch 'feature/failed-login-error' into 'develop'
Visual feedback on failed login See merge request !49
This commit is contained in:
commit
ba4f7ef3ef
3 changed files with 63 additions and 32 deletions
|
@ -1,13 +1,21 @@
|
|||
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')},
|
||||
(error) => {
|
||||
this.authError = error
|
||||
this.user.username = ''
|
||||
this.user.password = ''
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -17,6 +17,9 @@
|
|||
<div class='form-group'>
|
||||
<button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
|
||||
</div>
|
||||
<div v-if="authError" class='form-group'>
|
||||
<div class='error base05'>{{authError}}</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -39,6 +42,14 @@
|
|||
margin-top: 1.0em;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 48, 16, 0.65);
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -67,40 +67,52 @@ 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')
|
||||
if (response.status === 401) {
|
||||
reject('Wrong username or password')
|
||||
} else {
|
||||
reject('An error occurred, please try again')
|
||||
}
|
||||
}
|
||||
commit('endLogin')
|
||||
resolve()
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
commit('endLogin')
|
||||
reject('Failed to connect to server, try again')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue