xref: /openbmc/webui-vue/src/views/Login/Login.vue (revision 511650a9) 
1<template>
2  <b-form class="login-form" novalidate @submit.prevent="login">
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"
11        v-model="$i18n.locale"
12        :options="languages"
13        data-test-id="login-select-language"
14      ></b-form-select>
15    </b-form-group>
16    <b-form-group label-for="username" :label="$t('pageLogin.username')">
17      <b-form-input
18        id="username"
19        v-model="userInfo.username"
20        aria-describedby="login-error-alert username-required"
21        :state="getValidationState($v.userInfo.username)"
22        type="text"
23        autofocus="autofocus"
24        data-test-id="login-input-username"
25        @input="$v.userInfo.username.$touch()"
26      >
27      </b-form-input>
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>
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>
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
56      class="mt-3"
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';
72
73export default {
74  name: 'Login',
75  components: { Alert, InputPasswordToggle },
76  mixins: [VuelidateMixin],
77  data() {
78    return {
79      userInfo: {
80        username: null,
81        password: null,
82      },
83      disableSubmitButton: false,
84      languages: [
85        {
86          value: 'en-US',
87          text: 'English',
88        },
89        {
90          value: 'ru-RU',
91          text: 'Русский',
92        },
93      ],
94    };
95  },
96  computed: {
97    authError() {
98      return this.$store.getters['authentication/authError'];
99    },
100  },
101  validations: {
102    userInfo: {
103      username: {
104        required,
105      },
106      password: {
107        required,
108      },
109    },
110  },
111  methods: {
112    login: function () {
113      this.$v.$touch();
114      if (this.$v.$invalid) return;
115      this.disableSubmitButton = true;
116      const username = this.userInfo.username;
117      const password = this.userInfo.password;
118      this.$store
119        .dispatch('authentication/login', { username, password })
120        .then(() => {
121          localStorage.setItem('storedLanguage', i18n.locale);
122          localStorage.setItem('storedUsername', username);
123          this.$store.commit('global/setUsername', username);
124          this.$store.commit('global/setLanguagePreference', i18n.locale);
125          return this.$store.dispatch('authentication/getUserInfo', username);
126        })
127        .then(({ PasswordChangeRequired }) => {
128          if (PasswordChangeRequired) {
129            this.$router.push('/change-password');
130          } else {
131            this.$router.push('/');
132          }
133        })
134        .catch((error) => console.log(error))
135        .finally(() => (this.disableSubmitButton = false));
136    },
137  },
138};
139</script>
140