Skip to content

Commit c43833f

Browse files
DeluzeDeluze
committed
Revamp authentication cards
1 parent 84f103e commit c43833f

7 files changed

Lines changed: 106 additions & 93 deletions

File tree

‎generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<template>
22
<v-card height="100%">
3-
<v-form @submit.prevent="handleLogin()" ref="form" v-model="valid">
3+
<v-form @submit.prevent="handleLogin()" ref="form" v-model="isValid">
44
<v-card-title class="title">Ik wil inloggen</v-card-title>
55
<v-card-text>
6-
<v-alert
7-
:value="errorMessage !== null"
8-
class="mb-10"
9-
transition="fade-transition"
10-
type="error"
6+
<v-alert :value="!!errorMessage.length"
7+
class="mb-10"
8+
transition="fade-transition"
9+
type="error"
1110
>
1211
{{errorMessage}}
1312
</v-alert>
@@ -42,69 +41,64 @@
4241
</template>
4342

4443
<script>
45-
import loginRequest from '../../api/endpoints/authorisation/login';
44+
import LoginRequest from '../../api/endpoints/authorisation/login';
45+
import {mapGetters} from 'vuex';
4646
4747
export default {
4848
name: 'LoginCard',
4949
data() {
5050
return {
51-
errorMessage: null,
51+
errorMessage: '',
5252
isLoading: false,
5353
showPassword: false,
54-
valid: null,
54+
isValid: false,
5555
form: {
5656
email: '',
5757
password: '',
5858
},
5959
isRedirecting: false,
6060
};
6161
},
62+
computed: {
63+
...mapGetters({
64+
findError: 'Error/find',
65+
}),
66+
},
6267
methods: {
63-
async handleLogin() {
64-
this.$refs.form.validate();
65-
if (!this.valid) {
66-
return;
67-
}
68+
handleLogin() {
6869
this.isLoading = true;
69-
const {success, message, token} = await loginRequest(this.form.email, this.form.password);
70-
71-
this.isLoading = false;
72-
73-
if (success) {
74-
this.isRedirecting = true;
75-
return this.redirectToAuthDispense(token);
76-
}
77-
78-
this.errorMessage = message;
70+
LoginRequest(this.form.email, this.form.password)
71+
.then(res => {
72+
this.isRedirecting = true;
73+
this.redirectToAuthDispense(res.data.token);
74+
})
75+
.catch(() => this.errorMessage = this.findError('email'))
76+
.finally(() => this.isLoading = false);
7977
},
8078
redirectToAuthDispense(token) {
81-
const form = document.createElement("form");
79+
const form = document.createElement('form');
8280
8381
form.method = 'POST';
8482
form.action = process.env.VUE_APP_ROOT_API + '/auth/dispense';
8583
86-
const redirectUriElement = document.createElement("input");
84+
const redirectUriElement = document.createElement('input');
8785
redirectUriElement.name = 'redirect_uri';
88-
redirectUriElement.value= 'home';
86+
redirectUriElement.value = 'home';
8987
form.appendChild(redirectUriElement);
9088
91-
const emailElement = document.createElement("input");
89+
const emailElement = document.createElement('input');
9290
emailElement.name = 'email';
93-
emailElement.value= this.form.email;
91+
emailElement.value = this.form.email;
9492
form.appendChild(emailElement);
9593
96-
const tokenElement = document.createElement("input");
94+
const tokenElement = document.createElement('input');
9795
tokenElement.name = 'token';
98-
tokenElement.value= token;
96+
tokenElement.value = token;
9997
form.appendChild(tokenElement);
10098
10199
document.body.appendChild(form);
102100
form.submit();
103-
}
101+
},
104102
},
105103
};
106104
</script>
107-
108-
<style scoped>
109-
110-
</style>

‎generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<v-card height="100%">
3-
<v-form @submit.prevent="handleRegister()" ref="form" v-model="valid">
3+
<v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
44
<v-card-title class="title">Ik wil een account aanvragen</v-card-title>
55
<v-card-text>
66
<v-alert
7-
:value="alertMessage !== null"
7+
:value="!!alertMessage.length"
88
class="mb-10"
99
transition="fade-transition"
1010
:type="alertType"
@@ -27,37 +27,40 @@
2727
</template>
2828

2929
<script>
30-
import forgottenRequest from '../../api/endpoints/password/forgotten.js';
30+
import ForgottenRequest from '../../api/endpoints/password/forgotten.js';
3131
3232
export default {
3333
name: 'PasswordForgottenCard',
3434
data() {
3535
return {
36-
alertType: 'info',
37-
alertMessage: null,
36+
alertType: 'success',
37+
alertMessage: '',
3838
isLoading: false,
39-
valid: null,
39+
isValid: false,
4040
form: {
4141
email: '',
4242
},
4343
};
4444
},
4545
methods: {
46-
async handleRegister() {
46+
handleRegister() {
4747
this.$refs.form.validate();
48-
if (!this.valid) {
49-
return;
50-
}
48+
49+
if (!this.isValid) return;
50+
5151
this.isLoading = true;
52-
const {success, message} = await forgottenRequest(this.form.email);
53-
this.alertType = success ? 'success' : 'error';
54-
this.alertMessage = message;
55-
this.isLoading = false;
52+
53+
ForgottenRequest(this.form.email)
54+
.then(() => {
55+
this.alertMessage = 'Er is een wachtwoord vergeten mail verstuurd mits er een account bestaat met het gegeven email adres.';
56+
this.alertType = 'success';
57+
})
58+
.catch(() => {
59+
this.alertMessage = 'De ingevulde gegevens kloppen niet.';
60+
this.alertType = 'error';
61+
})
62+
.finally(() => this.isLoading = false);
5663
},
5764
},
5865
};
5966
</script>
60-
61-
<style scoped>
62-
63-
</style>

‎generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<v-card height="100%">
3-
<v-form @submit.prevent="handleRegister()" ref="form" v-model="valid">
3+
<v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
44
<v-card-title class="title">Ik wil een account aanvragen</v-card-title>
55
<v-card-text>
66
<v-alert
7-
:value="alertMessage !== null"
7+
:value="!!alertMessage.length"
88
class="mb-10"
99
transition="fade-transition"
1010
:type="alertType"
@@ -33,33 +33,40 @@
3333
</template>
3434

3535
<script>
36-
import registerRequest from '../../api/endpoints/authorisation/register.js';
36+
import RegisterRequest from '../../api/endpoints/authorisation/register.js';
3737
3838
export default {
3939
name: 'RegisterCard',
4040
data() {
4141
return {
42-
alertType: 'info',
43-
alertMessage: null,
42+
alertType: 'success',
43+
alertMessage: '',
4444
isLoading: false,
45-
valid: null,
45+
isValid: false,
4646
form: {
4747
name: '',
4848
email: '',
4949
},
5050
};
5151
},
5252
methods: {
53-
async handleRegister() {
53+
handleRegister() {
5454
this.$refs.form.validate();
55-
if (!this.valid) {
56-
return;
57-
}
55+
56+
if (!this.isValid) return;
57+
5858
this.isLoading = true;
59-
const {success, message} = await registerRequest(this.form.email, this.form.name);
60-
this.alertType = success ? 'success' : 'error';
61-
this.alertMessage = message;
62-
this.isLoading = false;
59+
60+
RegisterRequest(this.form.email, this.form.name)
61+
.then(() => {
62+
this.alertType = 'success';
63+
this.alertMessage = 'Er is een account aangemaakt, controleer je e-mail om een wachtwoord te kiezen zodat je vervolgens kunt inloggen.';
64+
})
65+
.catch(() => {
66+
this.alertType = 'error';
67+
this.alertMessage = 'De ingevulde gegevens kloppen niet.';
68+
})
69+
.finally(() => this.isLoading = false);
6370
},
6471
},
6572
};

‎generator/templates/Authorisation/src/store/modules/Authorisation.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1+
import router from '../../router';
2+
13
export default {
24
namespaced: true,
35
state: {
4-
token: null,
5-
},
6+
token: '',
7+
},
68
mutations: {
79
setAuthorisationToken(currentState, token) {
810
currentState.token = token;
911
},
1012
},
11-
getters: {
12-
isLoggedIn: state => {
13-
return state.token !== null;
14-
},
15-
getAccessToken: state => {
16-
if (state.token === null) {
17-
return '';
18-
}
19-
return state.token;
13+
actions: {
14+
logout(state) {
15+
state.token = '';
16+
17+
router.push({
18+
name: 'login',
19+
});
2020
},
2121
},
22+
getters: {
23+
isLoggedIn: state => !!state.token.length,
24+
getAccessToken: state => state.token,
25+
},
2226
};

‎generator/templates/Default/src/components/AppBarMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
name: 'AppBarMenu',
2727
methods: {
2828
logout() {
29-
this.$store.dispatch('Authorisation/unauthorized');
29+
this.$store.dispatch('Authorisation/logout');
3030
}
3131
},
3232
};

‎generator/templates/Default/src/plugins/vuetify.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import Vue from 'vue';
22
import Vuetify from 'vuetify/lib';
3+
import nl from 'vuetify/es5/locale/nl';
4+
import '@kingscode/vuetify-resource/dist/vuetify-resource.css';
5+
36
<%_ if (options.plugins.includes('fontawesomepro')){ _%>
47
import '@fortawesome/fontawesome-pro/css/all.css';
58
<%_ } _%>
6-
import nl from 'vuetify/es5/locale/nl';
7-
import '@kingscode/vuetify-resource/dist/vuetify-resource.css';
89

910
Vue.use(Vuetify);
1011
export default new Vuetify({

‎generator/templates/Default/src/store/modules/Authorisation.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1+
import router from '../../router';
2+
13
export default {
24
namespaced: true,
35
state: {
4-
token: null,
5-
},
6+
token: '',
7+
},
68
mutations: {
79
setAuthorisationToken(currentState, token) {
810
currentState.token = token;
911
},
1012
},
11-
getters: {
12-
isLoggedIn: state => {
13-
return state.token !== null;
14-
},
15-
getAccessToken: state => {
16-
if (state.token === null) {
17-
return '';
18-
}
19-
return state.token;
13+
actions: {
14+
logout(state) {
15+
state.token = '';
16+
17+
router.push({
18+
name: 'login',
19+
});
2020
},
2121
},
22+
getters: {
23+
isLoggedIn: state => !!state.token.length,
24+
getAccessToken: state => state.token,
25+
},
2226
};

0 commit comments

Comments
 (0)