Skip to content

Commit 4514c3a

Browse files
ricardovanlaarhovenricardovanlaarhoven
committed
Split routes (authorisation/authorised)
Added translations to them
1 parent f5a7961 commit 4514c3a

17 files changed

Lines changed: 424 additions & 389 deletions

File tree

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

Lines changed: 51 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-card height="100%">
33
<v-form @submit.prevent="handleLogin()" ref="form" v-model="isValid">
4-
<v-card-title class="title">Ik wil inloggen</v-card-title>
4+
<VCardTitle class="title" v-text="$t('authorisation.login.title')"/>
55
<v-card-text>
66
<v-alert :value="!!errorMessage.length"
77
class="mb-10"
@@ -10,43 +10,59 @@
1010
>
1111
{{ errorMessage }}
1212
</v-alert>
13-
<VTextField
14-
:rules="[(v) => !!v || 'E-Mail is verplicht']"
15-
label="E-Mail"
16-
tabindex="1"
17-
v-model="form.email"
18-
/>
19-
<VTextField
20-
:append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
21-
:rules="[(v) => !!v || 'Wachtwoord is verplicht']"
22-
:type="showPassword ? 'text' : 'password'"
23-
@click:append="showPassword = !showPassword"
24-
label="Wachtwoord"
25-
tabindex="2"
26-
v-model="form.password"
27-
/>
13+
<k-field-group language-prefix="authorisation.fields">
14+
<KTextField field="email"
15+
autofocus
16+
tabindex="1"
17+
v-model="form.email"
18+
autocomplete="username"
19+
/>
20+
<KTextField :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
21+
:type="showPassword ? 'text' : 'password'"
22+
@click:append="showPassword = !showPassword"
23+
field="password"
24+
autocomplete="current-password"
25+
tabindex="2"
26+
v-model="form.password"
27+
/>
28+
</k-field-group>
2829
</v-card-text>
2930
<v-card-actions>
3031
<VSpacer/>
31-
<v-btn :to="{name: 'password.forgotten'}" color="primary" tabindex="4" text>Wachtwoord vergeten</v-btn>
32-
<v-btn :loading="isLoading" color="primary" tabindex="3" type="submit">Inloggen</v-btn>
32+
<VBtn :to="{name: 'password.forgotten'}"
33+
color="primary"
34+
tabindex="4"
35+
text
36+
v-text="$t('authorisation.actions.passwordForgotten')"/>
37+
<VBtn :loading="isLoading"
38+
color="primary"
39+
tabindex="3"
40+
type="submit"
41+
v-text="$t('authorisation.actions.login')"/>
3342
</v-card-actions>
3443
</v-form>
3544

3645
<v-overlay class="text-center" v-model="isRedirecting">
3746
<VProgressCircular indeterminate size="64"/>
38-
<div class="mt-5">Je bent ingelogd, we sturen je nu door.</div>
47+
<div class="mt-5" v-text="$t('authorisation.login.successMessage')"></div>
3948
</v-overlay>
4049
</v-card>
4150
</template>
4251

4352
<script>
53+
import { getRateLimitMinutes } from '@/api/util/response';
54+
import { getOrganisationFromUrl } from '@/application/util/url.js';
55+
import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
56+
import KTextField from '@/components/crud/fields/KTextField.vue';
4457
import { mapGetters } from 'vuex';
4558
import LoginRequest from '../../api/endpoints/authorisation/login';
46-
import { getRateLimitMinutes } from '../../api/util/response.js';
4759
4860
export default {
4961
name: 'LoginCard',
62+
components: {
63+
KFieldGroup,
64+
KTextField,
65+
},
5066
data() {
5167
return {
5268
errorMessage: '',
@@ -69,33 +85,33 @@ export default {
6985
handleLogin() {
7086
this.isLoading = true;
7187
LoginRequest(this.form.email, this.form.password)
72-
.then(res => {
88+
.then((res) => {
7389
this.isRedirecting = true;
7490
this.redirectToAuthDispense(res.data.data.token);
7591
})
76-
.catch(err => {
77-
const response = err.response;
78-
const status = response.status;
92+
.catch((err) => {
93+
const { response } = err;
94+
const { status } = response;
7995
8096
if (status === 429) {
81-
this.errorMessage =
82-
`Je hebt te veel foutieve inlog pogingen gedaan.
83-
Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
97+
this.errorMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
8498
} else {
8599
this.errorMessage = this.findError('email');
86100
}
87101
})
88-
.finally(() => this.isLoading = false);
102+
.finally(() => {
103+
this.isLoading = false;
104+
});
89105
},
90106
redirectToAuthDispense(token) {
91107
const form = document.createElement('form');
92108
93109
form.method = 'POST';
94-
form.action = process.env.VUE_APP_ROOT_API + '/auth/dispense';
110+
form.action = `${process.env.VUE_APP_ROOT_API}/auth/dispense`;
95111
96112
const redirectUriElement = document.createElement('input');
97113
redirectUriElement.name = 'redirect_uri';
98-
redirectUriElement.value = 'home';
114+
redirectUriElement.value = 'dashboard';
99115
form.appendChild(redirectUriElement);
100116
101117
const emailElement = document.createElement('input');
@@ -108,6 +124,11 @@ export default {
108124
tokenElement.value = token;
109125
form.appendChild(tokenElement);
110126
127+
const organisationElement = document.createElement('input');
128+
organisationElement.name = 'organisation';
129+
organisationElement.value = getOrganisationFromUrl();
130+
form.appendChild(organisationElement);
131+
111132
document.body.appendChild(form);
112133
form.submit();
113134
},

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

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-card height="100%">
3-
<v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
4-
<v-card-title class="title">Ik wil een account aanvragen</v-card-title>
3+
<v-form ref="form" v-model="isValid" @submit.prevent="handleRegister()">
4+
<VCardTitle class="title" v-text="$t('authorisation.passwordForgotten.title')"/>
55
<v-card-text>
66
<v-alert
77
:type="alertType"
@@ -11,26 +11,45 @@
1111
>
1212
{{ alertMessage }}
1313
</v-alert>
14-
<VTextField
15-
:rules="[(v) => !!v || 'E-Mail is verplicht']"
16-
label="E-Mail"
17-
tabindex="11"
18-
v-model="form.email"
19-
/>
14+
<k-field-group language-prefix="authorisation.fields">
15+
<KTextField
16+
v-model="form.email"
17+
autocomplete="username"
18+
autofocus
19+
field="email"
20+
tabindex="1"
21+
/>
22+
</k-field-group>
2023
</v-card-text>
2124
<v-card-actions>
2225
<VSpacer/>
23-
<v-btn :loading="isLoading" color="primary" tabindex="12" type="submit">Wachtwoord aanvragen</v-btn>
26+
<VBtn
27+
:to="{name:'login'}"
28+
color="primary"
29+
text
30+
v-text="$t('actions.back')"/>
31+
<VBtn :loading="isLoading"
32+
color="primary"
33+
tabindex="2"
34+
type="submit"
35+
v-text="$t('authorisation.passwordForgotten.request')"/>
2436
</v-card-actions>
2537
</v-form>
2638
</v-card>
2739
</template>
2840

2941
<script>
30-
import ForgottenRequest from '../../api/endpoints/password/forgotten.js';
42+
import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
43+
import KTextField from '@/components/crud/fields/KTextField.vue';
44+
import ForgottenRequest from '../../api/endpoints/authorisation/password/forgotten';
45+
import { getOrganisationFromUrl } from '../../application/util/url.js';
3146
3247
export default {
3348
name: 'PasswordForgottenCard',
49+
components: {
50+
KFieldGroup,
51+
KTextField,
52+
},
3453
data() {
3554
return {
3655
alertType: 'success',
@@ -52,13 +71,17 @@ export default {
5271
this.alertMessage = '';
5372
this.alertType = 'error';
5473
55-
ForgottenRequest(this.form.email)
74+
ForgottenRequest(this.form.email, getOrganisationFromUrl())
5675
.then(() => {
57-
this.alertMessage = 'Er is een wachtwoord vergeten mail verstuurd mits er een account bestaat met het gegeven email adres.';
76+
this.alertMessage = this.$t('authorisation.passwordForgotten.successMessage');
5877
this.alertType = 'success';
5978
})
60-
.catch(() => this.alertMessage = 'De ingevulde gegevens kloppen niet.')
61-
.finally(() => this.isLoading = false);
79+
.catch(() => {
80+
this.alertMessage = this.$t('errors.422');
81+
})
82+
.finally(() => {
83+
this.isLoading = false;
84+
});
6285
},
6386
},
6487
};

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

Lines changed: 48 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-card height="100%">
33
<v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
4-
<v-card-title class="title">Ik wil een account aanvragen</v-card-title>
4+
<VCardTitle class="title" v-text="$t('authorisation.passwordReset.title')"/>
55
<v-card-text>
66
<v-alert
77
:type="alertType"
@@ -11,45 +11,51 @@
1111
>
1212
{{ alertMessage }}
1313
</v-alert>
14-
<VTextField
15-
:rules="[(v) => !!v || 'E-Mail is verplicht']"
16-
label="E-Mail"
17-
tabindex="1"
18-
v-model="form.email"
19-
/>
20-
<VTextField
21-
:append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
22-
:rules="[(v) => !!v || 'Wachtwoord is verplicht']"
23-
:type="showPassword ? 'text' : 'password'"
24-
@click:append="showPassword = !showPassword"
25-
label="Wachtwoord"
26-
tabindex="2"
27-
v-model="form.password"
28-
/>
29-
<VTextField
30-
:append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
31-
:rules="[(v) => !!v || 'Wachtwoord is verplicht']"
32-
:type="showPassword ? 'text' : 'password'"
33-
@click:append="showPassword = !showPassword"
34-
label="Wachtwoord"
35-
tabindex="3"
36-
v-model="form.passwordConfirmation"
37-
/>
14+
<k-field-group language-prefix="authorisation.fields">
15+
<KTextField
16+
field="email"
17+
tabindex="1"
18+
v-model="form.email"
19+
/>
20+
<KTextField
21+
:append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
22+
:type="showPassword ? 'text' : 'password'"
23+
@click:append="showPassword = !showPassword"
24+
field="password"
25+
tabindex="2"
26+
v-model="form.password"
27+
/>
28+
<KTextField
29+
:append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
30+
:type="showPassword ? 'text' : 'password'"
31+
@click:append="showPassword = !showPassword"
32+
field="password"
33+
tabindex="3"
34+
v-model="form.passwordConfirmation"
35+
/>
36+
</k-field-group>
3837
</v-card-text>
3938
<v-card-actions>
4039
<VSpacer/>
41-
<v-btn :loading="isLoading" color="primary" tabindex="4" type="submit">Wachtwoord aanvragen</v-btn>
40+
<VBtn :loading="isLoading" color="primary" tabindex="4" type="submit" v-text="$t('actions.save')"/>
4241
</v-card-actions>
4342
</v-form>
4443
</v-card>
4544
</template>
4645

4746
<script>
48-
import resetRequest from '../../api/endpoints/password/reset.js';
49-
import { getRateLimitMinutes } from '../../api/util/response.js';
47+
import { getRateLimitMinutes } from '@/api/util/response.js';
48+
import { getOrganisationFromUrl } from '@/application/util/url.js';
49+
import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
50+
import KTextField from '@/components/crud/fields/KTextField.vue';
51+
import resetRequest from '../../api/endpoints/authorisation/password/reset';
5052
5153
export default {
5254
name: 'PasswordResetCard',
55+
components: {
56+
KTextField,
57+
KFieldGroup,
58+
},
5359
props: {
5460
token: {
5561
type: String,
@@ -70,6 +76,9 @@ export default {
7076
showPassword: false,
7177
};
7278
},
79+
created() {
80+
this.form.email = this.$route.query.email;
81+
},
7382
methods: {
7483
handleRegister() {
7584
this.$refs.form.validate();
@@ -80,26 +89,27 @@ export default {
8089
this.alertType = 'error';
8190
this.errorMessage = '';
8291
83-
resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation)
92+
resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation, getOrganisationFromUrl())
8493
.then(() => {
8594
this.alertType = 'success';
86-
this.alertMessage = 'Je wachtwoord is opnieuw ingesteld, je kan nu inloggen.';
95+
this.alertMessage = this.$t('authorisation.passwordReset.successMessage');
8796
})
88-
.catch(error => {
89-
const response = error.response;
90-
const status = response.status;
97+
.catch((error) => {
98+
this.alertType = 'error';
99+
const { response } = error;
100+
const { status } = response;
91101
92102
if (status === 429) {
93-
this.alertMessage =
94-
`Je hebt tevaak een foutieve login poging gedaan. Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
103+
this.alertMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
95104
} else if (status === 400) {
96-
this.alertMessage =
97-
'Deze wachtwoord reset pagina is verlopen, vraag opnieuw een wachtwoord aan via de wachtwoord vergeten optie';
105+
this.alertMessage = this.$t('authorisation.passwordReset.errorMessage');
98106
}
99107
100108
this.$refs.form.validate();
101109
})
102-
.finally(() => this.isLoading = false);
110+
.finally(() => {
111+
this.isLoading = false;
112+
});
103113
},
104114
},
105115
};

0 commit comments

Comments
 (0)