AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

Merge branch 'feature/failed-login-error' into 'develop'

Browse source 
Visual feedback on failed login

See merge request !49
This commit is contained in:
Shpuld Shpuldson 2017-03-08 19:21:36 -05:00
commit ba4f7ef3ef
3 changed files with 63 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/login_form/login_form.js
View file

@ -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 = ''
}
)
}
}
}

11
src/components/login_form/login_form.vue
View file

@ -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>

72
src/modules/users.js
View file

@ -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')
})
})
}
}
}