Login.vue (678390cd88d939ac0af3841074d1588f0666bea6) Login.vue (932aff93a96fff5fb2d1e1dc264f944cc78b3f83)
1<template>
1<template>
2 <b-form
3 class="login-form mx-auto ml-md-5 mb-3"
4 novalidate
5 @submit.prevent="login"
6 >
2 <b-form class="login-form" novalidate @submit.prevent="login">
7 <alert class="login-error mb-4" :show="authError" variant="danger">
8 <p id="login-error-alert">
9 {{ $t('pageLogin.alert.message') }}
10 </p>
11 </alert>
12 <b-form-group label-for="language" :label="$t('pageLogin.language')">
13 <b-form-select
14 id="language"

--- 17 unchanged lines hidden (view full) ---

32 <b-form-invalid-feedback id="username-required" role="alert">
33 <template v-if="!$v.userInfo.username.required">
34 {{ $t('global.form.fieldRequired') }}
35 </template>
36 </b-form-invalid-feedback>
37 </b-form-group>
38 <div class="login-form__section mb-3">
39 <label for="password">{{ $t('pageLogin.password') }}</label>
3 <alert class="login-error mb-4" :show="authError" variant="danger">
4 <p id="login-error-alert">
5 {{ $t('pageLogin.alert.message') }}
6 </p>
7 </alert>
8 <b-form-group label-for="language" :label="$t('pageLogin.language')">
9 <b-form-select
10 id="language"

--- 17 unchanged lines hidden (view full) ---

28 <b-form-invalid-feedback id="username-required" role="alert">
29 <template v-if="!$v.userInfo.username.required">
30 {{ $t('global.form.fieldRequired') }}
31 </template>
32 </b-form-invalid-feedback>
33 </b-form-group>
34 <div class="login-form__section mb-3">
35 <label for="password">{{ $t('pageLogin.password') }}</label>
40 <b-form-input
41 id="password"
42 v-model="userInfo.password"
43 aria-describedby="login-error-alert password-required"
44 :state="getValidationState($v.userInfo.password)"
45 type="password"
46 data-test-id="login-input-password"
47 @input="$v.userInfo.password.$touch()"
48 >
49 </b-form-input>
36 <input-password-toggle>
37 <b-form-input
38 id="password"
39 v-model="userInfo.password"
40 aria-describedby="login-error-alert password-required"
41 :state="getValidationState($v.userInfo.password)"
42 type="password"
43 data-test-id="login-input-password"
44 class="form-control-with-button"
45 @input="$v.userInfo.password.$touch()"
46 >
47 </b-form-input>
48 </input-password-toggle>
50 <b-form-invalid-feedback id="password-required" role="alert">
51 <template v-if="!$v.userInfo.password.required">
52 {{ $t('global.form.fieldRequired') }}
53 </template>
54 </b-form-invalid-feedback>
55 </div>
56 <b-button
49 <b-form-invalid-feedback id="password-required" role="alert">
50 <template v-if="!$v.userInfo.password.required">
51 {{ $t('global.form.fieldRequired') }}
52 </template>
53 </b-form-invalid-feedback>
54 </div>
55 <b-button
57 block
58 class="mt-5"
56 class="mt-3"
59 type="submit"
60 variant="primary"
61 data-test-id="login-button-submit"
62 :disabled="disableSubmitButton"
63 >{{ $t('pageLogin.logIn') }}</b-button
64 >
65 </b-form>
66</template>
67
68<script>
69import { required } from 'vuelidate/lib/validators';
70import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
71import i18n from '@/i18n';
72import Alert from '@/components/Global/Alert';
57 type="submit"
58 variant="primary"
59 data-test-id="login-button-submit"
60 :disabled="disableSubmitButton"
61 >{{ $t('pageLogin.logIn') }}</b-button
62 >
63 </b-form>
64</template>
65
66<script>
67import { required } from 'vuelidate/lib/validators';
68import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
69import i18n from '@/i18n';
70import Alert from '@/components/Global/Alert';
71import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
73
74export default {
75 name: 'Login',
72
73export default {
74 name: 'Login',
76 components: { Alert },
75 components: { Alert, InputPasswordToggle },
77 mixins: [VuelidateMixin],
78 data() {
79 return {
80 userInfo: {
81 username: null,
82 password: null,
83 },
84 disableSubmitButton: false,

--- 55 unchanged lines hidden (view full) ---

140 }
141 })
142 .catch((error) => console.log(error))
143 .finally(() => (this.disableSubmitButton = false));
144 },
145 },
146};
147</script>
76 mixins: [VuelidateMixin],
77 data() {
78 return {
79 userInfo: {
80 username: null,
81 password: null,
82 },
83 disableSubmitButton: false,

--- 55 unchanged lines hidden (view full) ---

139 }
140 })
141 .catch((error) => console.log(error))
142 .finally(() => (this.disableSubmitButton = false));
143 },
144 },
145};
146</script>
148
149<style lang="scss" scoped>
150.login-form {
151 max-width: 360px;
152}
153</style>