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