diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2020-04-28 17:48:28 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-06-17 23:48:38 +0300 |
commit | b1f559f03e3f464c1b8b19a9327158be0ecafe62 (patch) | |
tree | 6af8b850a9aebf58a2f4a08ac9832872e0f80cb3 /src/views | |
parent | 5918b48a0530a43a4dd9ee1a3f134846c948011e (diff) | |
download | webui-vue-b1f559f03e3f464c1b8b19a9327158be0ecafe62.tar.xz |
Profile settings page
-To set the profile by setting password.
-This commit adds a profile page which allows the user to change their
password.
In the future, the profile page will also contain user settings like
language and timezone.
The API called to change the user's
password is '/redfish/v1/AccountService/Accounts/<userName>'
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: Ie54a54beff8c85bc9ac5af21c35edc481b34cf44
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/Login/Login.vue | 2 | ||||
-rw-r--r-- | src/views/ProfileSettings/ProfileSettings.vue | 162 | ||||
-rw-r--r-- | src/views/ProfileSettings/index.js | 2 |
3 files changed, 166 insertions, 0 deletions
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 4d8f2484..3993800c 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -138,6 +138,8 @@ export default { .then(() => this.$router.push('/')) .then(() => { localStorage.setItem('storedLanguage', i18n.locale); + localStorage.setItem('storedUsername', username); + this.$store.commit('global/setUsername', username); this.$store.commit('global/setLanguagePreference', i18n.locale); }) .catch(error => console.log(error)) diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue new file mode 100644 index 00000000..df74b4b7 --- /dev/null +++ b/src/views/ProfileSettings/ProfileSettings.vue @@ -0,0 +1,162 @@ +<template> + <b-container fluid="xl"> + <page-title /> + + <b-row> + <b-col md="8" lg="8" xl="6"> + <page-section :section-title="$t('profileSettings.profileInfoTitle')"> + <dl> + <dt>{{ $t('profileSettings.username') }}</dt> + <dd> + {{ username }} + </dd> + </dl> + </page-section> + </b-col> + </b-row> + + <b-form @submit.prevent="submitForm"> + <b-row> + <b-col sm="8" md="6" xl="3"> + <page-section :section-title="$t('profileSettings.changePassword')"> + <b-form-group + id="input-group-1" + :label="$t('profileSettings.newPassword')" + label-for="input-1" + > + <b-form-text id="password-help-block"> + {{ + $t('pageLocalUserManagement.modal.passwordMustBeBetween', { + min: passwordRequirements.minLength, + max: passwordRequirements.maxLength + }) + }} + </b-form-text> + <input-password-toggle> + <b-form-input + id="password" + v-model="form.newPassword" + type="password" + aria-describedby="password-help-block" + :state="getValidationState($v.form.newPassword)" + @input="$v.form.newPassword.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.newPassword.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template + v-if=" + !$v.form.newPassword.minLength || + !$v.form.newPassword.maxLength + " + > + {{ + $t('profileSettings.newPassLabelTextInfo', { + min: passwordRequirements.minLength, + max: passwordRequirements.maxLength + }) + }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <b-form-group + id="input-group-2" + :label="$t('profileSettings.confirmPassword')" + label-for="input-2" + > + <input-password-toggle> + <b-form-input + id="password-confirmation" + v-model="form.confirmPassword" + type="password" + :state="getValidationState($v.form.confirmPassword)" + @input="$v.form.confirmPassword.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.confirmPassword.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-else-if="!$v.form.confirmPassword.sameAsPassword"> + {{ $t('profileSettings.passwordsDoNotMatch') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + </page-section> + </b-col> + </b-row> + <b-button variant="primary" type="submit"> + {{ $t('global.action.save') }} + </b-button> + </b-form> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; +import { + maxLength, + minLength, + required, + sameAs +} from 'vuelidate/lib/validators'; + +export default { + name: 'ProfileSettings', + components: { PageTitle, PageSection, InputPasswordToggle }, + mixins: [BVToastMixin, VuelidateMixin], + data() { + return { + passwordRequirements: { + minLength: 8, + maxLength: 20 + }, + form: { + newPassword: '', + confirmPassword: '' + } + }; + }, + validations() { + return { + form: { + newPassword: { + required, + minLength: minLength(this.passwordRequirements.minLength), + maxLength: maxLength(this.passwordRequirements.maxLength) + }, + confirmPassword: { + required, + sameAsPassword: sameAs('newPassword') + } + } + }; + }, + computed: { + username() { + return this.$store.getters['global/username']; + } + }, + methods: { + submitForm() { + this.$v.$touch(); + if (this.$v.$invalid) return; + let userData = { + originalUsername: this.username, + password: this.form.newPassword + }; + + this.$store + .dispatch('localUsers/updateUser', userData) + .then(message => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + } + } +}; +</script> diff --git a/src/views/ProfileSettings/index.js b/src/views/ProfileSettings/index.js new file mode 100644 index 00000000..d6589c72 --- /dev/null +++ b/src/views/ProfileSettings/index.js @@ -0,0 +1,2 @@ +import ProfileSettings from './ProfileSettings.vue'; +export default ProfileSettings; |