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