1<template>
2  <div class="change-password-container mx-auto ml-md-5 mb-3">
3    <alert variant="danger" class="mb-4">
4      <p v-if="changePasswordError">
5        {{ $t('pageChangePassword.changePasswordError') }}
6      </p>
7      <p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
8    </alert>
9    <dl>
10      <dt>{{ $t('pageChangePassword.username') }}</dt>
11      <dd>{{ username }}</dd>
12    </dl>
13    <b-form novalidate @submit.prevent="changePassword">
14      <b-form-group
15        label-for="password"
16        :label="$t('pageChangePassword.newPassword')"
17      >
18        <input-password-toggle>
19          <b-form-input
20            id="password"
21            v-model="form.password"
22            autofocus="autofocus"
23            type="password"
24            :state="getValidationState($v.form.password)"
25            @change="$v.form.password.$touch()"
26          >
27          </b-form-input>
28          <b-form-invalid-feedback role="alert">
29            <template v-if="!$v.form.password.required">
30              {{ $t('global.form.fieldRequired') }}
31            </template>
32          </b-form-invalid-feedback>
33        </input-password-toggle>
34      </b-form-group>
35      <b-form-group
36        label-for="password-confirm"
37        :label="$t('pageChangePassword.confirmNewPassword')"
38      >
39        <input-password-toggle>
40          <b-form-input
41            id="password-confirm"
42            v-model="form.passwordConfirm"
43            type="password"
44            :state="getValidationState($v.form.passwordConfirm)"
45            @change="$v.form.passwordConfirm.$touch()"
46          >
47          </b-form-input>
48          <b-form-invalid-feedback role="alert">
49            <template v-if="!$v.form.passwordConfirm.required">
50              {{ $t('global.form.fieldRequired') }}
51            </template>
52            <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
53              {{ $t('global.form.passwordsDoNotMatch') }}
54            </template>
55          </b-form-invalid-feedback>
56        </input-password-toggle>
57      </b-form-group>
58      <div class="text-right">
59        <b-button type="button" variant="link" @click="goBack">
60          {{ $t('pageChangePassword.goBack') }}
61        </b-button>
62        <b-button type="submit" variant="primary">
63          {{ $t('pageChangePassword.changePassword') }}
64        </b-button>
65      </div>
66    </b-form>
67  </div>
68</template>
69
70<script>
71import { required, sameAs } from 'vuelidate/lib/validators';
72import Alert from '@/components/Global/Alert';
73import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
74import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
75import BVToastMixin from '@/components/Mixins/BVToastMixin';
76
77export default {
78  name: 'ChangePassword',
79  components: { Alert, InputPasswordToggle },
80  mixins: [VuelidateMixin, BVToastMixin],
81  data() {
82    return {
83      form: {
84        password: null,
85        passwordConfirm: null
86      },
87      username: this.$store.getters['global/username'],
88      changePasswordError: false
89    };
90  },
91  validations() {
92    return {
93      form: {
94        password: { required },
95        passwordConfirm: {
96          required,
97          sameAsPassword: sameAs('password')
98        }
99      }
100    };
101  },
102  methods: {
103    goBack() {
104      // Remove session created if navigating back to the Login page
105      this.$store.dispatch('authentication/logout');
106    },
107    changePassword() {
108      this.$v.$touch();
109      if (this.$v.$invalid) return;
110      let data = {
111        originalUsername: this.username,
112        password: this.form.password
113      };
114
115      this.$store
116        .dispatch('localUsers/updateUser', data)
117        .then(() => this.$router.push('/'))
118        .catch(() => (this.changePasswordError = true));
119    }
120  }
121};
122</script>
123
124<style lang="scss" scoped>
125.change-password-container {
126  max-width: 360px;
127}
128</style>
129