1<template>
2  <b-container fluid="xl">
3    <page-title />
4
5    <b-row>
6      <b-col md="8" lg="8" xl="6">
7        <page-section :section-title="$t('profileSettings.profileInfoTitle')">
8          <dl>
9            <dt>{{ $t('profileSettings.username') }}</dt>
10            <dd>
11              {{ username }}
12            </dd>
13          </dl>
14        </page-section>
15      </b-col>
16    </b-row>
17
18    <b-form @submit.prevent="submitForm">
19      <b-row>
20        <b-col sm="8" md="6" xl="3">
21          <page-section :section-title="$t('profileSettings.changePassword')">
22            <b-form-group
23              id="input-group-1"
24              :label="$t('profileSettings.newPassword')"
25              label-for="input-1"
26            >
27              <b-form-text id="password-help-block">
28                {{
29                  $t('pageLocalUserManagement.modal.passwordMustBeBetween', {
30                    min: passwordRequirements.minLength,
31                    max: passwordRequirements.maxLength
32                  })
33                }}
34              </b-form-text>
35              <input-password-toggle>
36                <b-form-input
37                  id="password"
38                  v-model="form.newPassword"
39                  type="password"
40                  aria-describedby="password-help-block"
41                  :state="getValidationState($v.form.newPassword)"
42                  @input="$v.form.newPassword.$touch()"
43                />
44                <b-form-invalid-feedback role="alert">
45                  <template v-if="!$v.form.newPassword.required">
46                    {{ $t('global.form.fieldRequired') }}
47                  </template>
48                  <template
49                    v-if="
50                      !$v.form.newPassword.minLength ||
51                        !$v.form.newPassword.maxLength
52                    "
53                  >
54                    {{
55                      $t('profileSettings.newPassLabelTextInfo', {
56                        min: passwordRequirements.minLength,
57                        max: passwordRequirements.maxLength
58                      })
59                    }}
60                  </template>
61                </b-form-invalid-feedback>
62              </input-password-toggle>
63            </b-form-group>
64            <b-form-group
65              id="input-group-2"
66              :label="$t('profileSettings.confirmPassword')"
67              label-for="input-2"
68            >
69              <input-password-toggle>
70                <b-form-input
71                  id="password-confirmation"
72                  v-model="form.confirmPassword"
73                  type="password"
74                  :state="getValidationState($v.form.confirmPassword)"
75                  @input="$v.form.confirmPassword.$touch()"
76                />
77                <b-form-invalid-feedback role="alert">
78                  <template v-if="!$v.form.confirmPassword.required">
79                    {{ $t('global.form.fieldRequired') }}
80                  </template>
81                  <template v-else-if="!$v.form.confirmPassword.sameAsPassword">
82                    {{ $t('profileSettings.passwordsDoNotMatch') }}
83                  </template>
84                </b-form-invalid-feedback>
85              </input-password-toggle>
86            </b-form-group>
87          </page-section>
88        </b-col>
89      </b-row>
90      <b-button variant="primary" type="submit">
91        {{ $t('global.action.save') }}
92      </b-button>
93    </b-form>
94  </b-container>
95</template>
96
97<script>
98import PageTitle from '@/components/Global/PageTitle';
99import PageSection from '@/components/Global/PageSection';
100import BVToastMixin from '@/components/Mixins/BVToastMixin';
101import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
102import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
103import {
104  maxLength,
105  minLength,
106  required,
107  sameAs
108} from 'vuelidate/lib/validators';
109
110export default {
111  name: 'ProfileSettings',
112  components: { PageTitle, PageSection, InputPasswordToggle },
113  mixins: [BVToastMixin, VuelidateMixin],
114  data() {
115    return {
116      passwordRequirements: {
117        minLength: 8,
118        maxLength: 20
119      },
120      form: {
121        newPassword: '',
122        confirmPassword: ''
123      }
124    };
125  },
126  validations() {
127    return {
128      form: {
129        newPassword: {
130          required,
131          minLength: minLength(this.passwordRequirements.minLength),
132          maxLength: maxLength(this.passwordRequirements.maxLength)
133        },
134        confirmPassword: {
135          required,
136          sameAsPassword: sameAs('newPassword')
137        }
138      }
139    };
140  },
141  computed: {
142    username() {
143      return this.$store.getters['global/username'];
144    }
145  },
146  methods: {
147    submitForm() {
148      this.$v.$touch();
149      if (this.$v.$invalid) return;
150      let userData = {
151        originalUsername: this.username,
152        password: this.form.newPassword
153      };
154
155      this.$store
156        .dispatch('localUsers/updateUser', userData)
157        .then(message => this.successToast(message))
158        .catch(({ message }) => this.errorToast(message));
159    }
160  }
161};
162</script>
163