xref: /openbmc/webui-vue/src/views/ChangePassword/ChangePassword.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b)
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/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';
80import { useVuelidate } from '@vuelidate/core';
81
82export default {
83  name: 'ChangePassword',
84  components: { Alert, InputPasswordToggle },
85  mixins: [VuelidateMixin, BVToastMixin],
86  setup() {
87    return {
88      v$: useVuelidate(),
89    };
90  },
91  data() {
92    return {
93      form: {
94        password: null,
95        passwordConfirm: null,
96      },
97      username: this.$store.getters['global/username'],
98      changePasswordError: false,
99    };
100  },
101  validations() {
102    return {
103      form: {
104        password: { required },
105        passwordConfirm: {
106          required,
107          sameAsPassword: sameAs('password'),
108        },
109      },
110    };
111  },
112  methods: {
113    goBack() {
114      // Remove session created if navigating back to the Login page
115      this.$store.dispatch('authentication/logout');
116    },
117    changePassword() {
118      this.$v.$touch();
119      if (this.$v.$invalid) return;
120      let data = {
121        originalUsername: this.username,
122        password: this.form.password,
123      };
124
125      this.$store
126        .dispatch('userManagement/updateUser', data)
127        .then(() => this.$router.push('/'))
128        .catch(() => (this.changePasswordError = true));
129    },
130  },
131};
132</script>
133
134<style lang="scss" scoped>
135@import '@/assets/styles/bmc/helpers/_index.scss';
136@import '@/assets/styles/bootstrap/_helpers.scss';
137
138@import '@/assets/styles/bootstrap/_helpers.scss';
139
140.change-password__form-container {
141  @include media-breakpoint-up('md') {
142    max-width: 360px;
143  }
144}
145</style>
146