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