diff options
author | Andrey V.Kosteltsev <AKosteltsev@IBS.RU> | 2022-07-04 23:11:28 +0300 |
---|---|---|
committer | Andrey V.Kosteltsev <AKosteltsev@IBS.RU> | 2022-07-04 23:11:28 +0300 |
commit | 3f4094d08b873e17464a51c817ea7d41177f848d (patch) | |
tree | 8880a0e7c8c0ac07ed298ce719cfab3278f2aa12 /src/views/_ibs/ChangePassword | |
parent | f5c8dbfa6fb3812a3b3a2aafd3538fbdf8b8c668 (diff) | |
download | webui-vue-3f4094d08b873e17464a51c817ea7d41177f848d.tar.xz |
IBS: _ibs UI Theme
Diffstat (limited to 'src/views/_ibs/ChangePassword')
-rw-r--r-- | src/views/_ibs/ChangePassword/ChangePassword.vue | 134 | ||||
-rw-r--r-- | src/views/_ibs/ChangePassword/index.js | 2 |
2 files changed, 136 insertions, 0 deletions
diff --git a/src/views/_ibs/ChangePassword/ChangePassword.vue b/src/views/_ibs/ChangePassword/ChangePassword.vue new file mode 100644 index 00000000..2440ace1 --- /dev/null +++ b/src/views/_ibs/ChangePassword/ChangePassword.vue @@ -0,0 +1,134 @@ +<template> + <div class="change-password-container"> + <alert variant="danger" class="mb-4"> + <p v-if="changePasswordError"> + {{ $t('pageChangePassword.changePasswordError') }} + </p> + <p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p> + </alert> + <div class="change-password__form-container"> + <dl> + <dt>{{ $t('pageChangePassword.username') }}</dt> + <dd>{{ username }}</dd> + </dl> + <b-form novalidate @submit.prevent="changePassword"> + <b-form-group + label-for="password" + :label="$t('pageChangePassword.newPassword')" + > + <input-password-toggle> + <b-form-input + id="password" + v-model="form.password" + autofocus="autofocus" + type="password" + :state="getValidationState($v.form.password)" + class="form-control-with-button" + @change="$v.form.password.$touch()" + > + </b-form-input> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <b-form-group + label-for="password-confirm" + :label="$t('pageChangePassword.confirmNewPassword')" + > + <input-password-toggle> + <b-form-input + id="password-confirm" + v-model="form.passwordConfirm" + type="password" + :state="getValidationState($v.form.passwordConfirm)" + class="form-control-with-button" + @change="$v.form.passwordConfirm.$touch()" + > + </b-form-input> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.passwordConfirm.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-else-if="!$v.form.passwordConfirm.sameAsPassword"> + {{ $t('global.form.passwordsDoNotMatch') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <div class="text-right"> + <b-button type="button" variant="link" @click="goBack"> + {{ $t('pageChangePassword.goBack') }} + </b-button> + <b-button type="submit" variant="primary"> + {{ $t('pageChangePassword.changePassword') }} + </b-button> + </div> + </b-form> + </div> + </div> +</template> + +<script> +import { required, sameAs } from 'vuelidate/lib/validators'; +import Alert from '@/components/Global/Alert'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; + +export default { + name: 'ChangePassword', + components: { Alert, InputPasswordToggle }, + mixins: [VuelidateMixin, BVToastMixin], + data() { + return { + form: { + password: null, + passwordConfirm: null, + }, + username: this.$store.getters['global/username'], + changePasswordError: false, + }; + }, + validations() { + return { + form: { + password: { required }, + passwordConfirm: { + required, + sameAsPassword: sameAs('password'), + }, + }, + }; + }, + methods: { + goBack() { + // Remove session created if navigating back to the Login page + this.$store.dispatch('authentication/logout'); + }, + changePassword() { + this.$v.$touch(); + if (this.$v.$invalid) return; + let data = { + originalUsername: this.username, + password: this.form.password, + }; + + this.$store + .dispatch('userManagement/updateUser', data) + .then(() => this.$router.push('/')) + .catch(() => (this.changePasswordError = true)); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.change-password__form-container { + @include media-breakpoint-up('md') { + max-width: 360px; + } +} +</style> diff --git a/src/views/_ibs/ChangePassword/index.js b/src/views/_ibs/ChangePassword/index.js new file mode 100644 index 00000000..9de0af42 --- /dev/null +++ b/src/views/_ibs/ChangePassword/index.js @@ -0,0 +1,2 @@ +import ChangePassword from './ChangePassword.vue'; +export default ChangePassword; |