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.$invalid">
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.$invalid">
53                {{ $t('global.form.fieldRequired') }}
54              </template>
55              <template
56                v-else-if="v$.form.passwordConfirm.sameAsPassword.$invalid"
57              >
58                {{ $t('global.form.passwordsDoNotMatch') }}
59              </template>
60            </b-form-invalid-feedback>
61          </input-password-toggle>
62        </b-form-group>
63        <div class="text-right">
64          <b-button type="button" variant="link" @click="goBack">
65            {{ $t('pageChangePassword.goBack') }}
66          </b-button>
67          <b-button type="submit" variant="primary">
68            {{ $t('pageChangePassword.changePassword') }}
69          </b-button>
70        </div>
71      </b-form>
72    </div>
73  </div>
74</template>
75
76<script>
77import { required, sameAs } from '@vuelidate/validators';
78import Alert from '@/components/Global/Alert';
79import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
80import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
81import BVToastMixin from '@/components/Mixins/BVToastMixin';
82import { useVuelidate } from '@vuelidate/core';
83import { useI18n } from 'vue-i18n';
84
85export default {
86  name: 'ChangePassword',
87  components: { Alert, InputPasswordToggle },
88  mixins: [VuelidateMixin, BVToastMixin],
89  setup() {
90    return {
91      v$: useVuelidate(),
92    };
93  },
94  data() {
95    return {
96      $t: useI18n().t,
97      form: {
98        password: null,
99        passwordConfirm: null,
100      },
101      username: this.$store.getters['global/username'],
102      changePasswordError: false,
103    };
104  },
105  validations() {
106    return {
107      form: {
108        password: { required },
109        passwordConfirm: {
110          required,
111          sameAsPassword: sameAs('password'),
112        },
113      },
114    };
115  },
116  methods: {
117    goBack() {
118      // Remove session created if navigating back to the Login page
119      this.$store.dispatch('authentication/logout');
120    },
121    changePassword() {
122      this.v$.$touch();
123      if (this.v$.$invalid) return;
124      let data = {
125        originalUsername: this.username,
126        password: this.form.password,
127      };
128
129      this.$store
130        .dispatch('userManagement/updateUser', data)
131        .then(() => this.$router.push('/'))
132        .catch(() => (this.changePasswordError = true));
133    },
134  },
135};
136</script>
137
138<style lang="scss" scoped>
139@import '@/assets/styles/bmc/helpers/_index.scss';
140@import '@/assets/styles/bootstrap/_helpers.scss';
141
142@import '@/assets/styles/bootstrap/_helpers.scss';
143
144.change-password__form-container {
145  @include media-breakpoint-up('md') {
146    max-width: 360px;
147  }
148}
149</style>
150