Skip to content

Commit c35eb5c

Browse files
vedangimittalrfrandse
vedangimittal
authored and
rfrandse
committed
Implemented Change Password - 1060 (#415)
* Implemented Change Password - 1060 - Implemented Change Password - 1060 - Jira story: https://jsw.ibm.com/browse/PFEBMC-2368 Signed-off-by: Vedangi Mittal <[email protected]> * Made addtional changes in vue file - Made additional changes in vue file * Fixed logout issue - Fixed logout issue * Removed console log - Removed console log --------- Signed-off-by: Vedangi Mittal <[email protected]>
1 parent 7c66b0f commit c35eb5c

File tree

3 files changed

+103
-85
lines changed

3 files changed

+103
-85
lines changed

‎src/router/routes.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,11 @@ import EventLogs from '@/views/Logs/EventLogs';
4040
import FieldCoreOverride from '@/views/ResourceManagement/FieldCoreOverride';
4141
import ServiceLoginConsoles from '@/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue';
4242
import ServiceLogin from '@/views/Operations/ServiceLoginConsoles';
43-
import Dumps from '@/views/Logs/Dumps';
44-
import DateTime from '@/views/Settings/DateTime/DateTime.vue'
4543
import ProfileSettings from '@/views/ProfileSettings';
4644
import Network from '@/views/Settings/Network';
45+
import Dumps from '@/views/Logs/Dumps';
46+
import DateTime from '@/views/Settings/DateTime/DateTime.vue';
47+
import ChangePassword from '@/views/ChangePassword';
4748

4849
const roles = {
4950
administrator: 'Administrator',
@@ -61,6 +62,15 @@ export const routes = [
6162
name: 'LoginPage',
6263
component: LoginPage,
6364
},
65+
{
66+
path: '/change-password',
67+
name: 'change-password',
68+
component: ChangePassword,
69+
meta: {
70+
title: i18n.global.t('appPageTitle.changePassword'),
71+
requiresAuth: true,
72+
},
73+
},
6474
],
6575
},
6676
// Needs reimplementation once routes is implemented

‎src/store/modules/Authentication/AuthenticationStore.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { defineStore } from 'pinia';
22
import api from '@/store/api';
33
import { useCookies } from 'vue3-cookies';
4-
import { useRouter } from 'vue-router';
54
import Cookies from 'js-cookie';
65
const { cookies } = useCookies();
7-
const router = useRouter();
86

97
export const AuthenticationStore = defineStore('authentication', {
108
state: () => ({
@@ -67,17 +65,19 @@ export const AuthenticationStore = defineStore('authentication', {
6765
const headers = {
6866
'X-Xsrf-Token': cookies.get('X-XSRF-TOKEN'),
6967
};
70-
Cookies.remove('XSRF-TOKEN');
71-
Cookies.remove('IsAuthenticated');
72-
localStorage.removeItem('storedModelType');
73-
localStorage.removeItem('storedUsername');
74-
localStorage.removeItem('storedCurrentUser');
75-
localStorage.removeItem('storedHmcManagedValue');
76-
localStorage.removeItem('storedLanguage');
77-
this.xsrfCookie = undefined;
78-
this.isAuthenticatedCookie = undefined;
7968
return api
8069
.post('/logout', { data: [] }, { headers: headers })
70+
.then(()=>{
71+
Cookies.remove('XSRF-TOKEN')
72+
Cookies.remove('IsAuthenticated')
73+
localStorage.removeItem('storedModelType');
74+
localStorage.removeItem('storedUsername');
75+
localStorage.removeItem('storedCurrentUser');
76+
localStorage.removeItem('storedHmcManagedValue');
77+
localStorage.removeItem('storedLanguage');
78+
this.xsrfCookie = undefined;
79+
this.isAuthenticatedCookie = undefined;
80+
})
8181
.then(() => {
8282
this.logoutRemove();
8383
})

‎src/views/ChangePassword/ChangePassword.vue

Lines changed: 80 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,57 @@
1111
<dt>{{ $t('pageChangePassword.username') }}</dt>
1212
<dd>{{ username }}</dd>
1313
</dl>
14-
<b-form novalidate @submit.prevent="changePassword">
15-
<b-form-group
14+
<b-form novalidate @submit.prevent="changePassword()">
15+
<BFormGroup
1616
label-for="password"
1717
:label="$t('pageChangePassword.newPassword')"
1818
>
1919
<template #label>
2020
{{ $t('pageUserManagement.modal.userPassword') }}
2121
<info-tooltip-password />
2222
</template>
23-
<input-password-toggle>
24-
<b-form-input
23+
<input-password-toggle @updatePassView="updatePasswordType">
24+
<BFormInput
2525
id="password"
2626
v-model="form.password"
2727
autocomplete="off"
2828
autofocus="autofocus"
29-
type="password"
30-
:state="getValidationState($v.form.password)"
29+
:type="inputType"
30+
:state="getValidationState(v$.form.password)"
3131
class="form-control-with-button"
32-
@change="$v.form.password.$touch()"
33-
>
34-
</b-form-input>
35-
<b-form-invalid-feedback role="alert">
36-
<template v-if="!$v.form.password.required">
32+
@input="v$.form.password.$touch()"
33+
/>
34+
<BFormInvalidFeedback role="alert">
35+
<template v-if="v$.form.password.required.$invalid">
3736
{{ $t('global.form.fieldRequired') }}
3837
</template>
39-
</b-form-invalid-feedback>
38+
</BFormInvalidFeedback>
4039
</input-password-toggle>
41-
</b-form-group>
42-
<b-form-group
40+
</BFormGroup>
41+
<BFormGroup
4342
label-for="password-confirm"
4443
:label="$t('pageChangePassword.confirmNewPassword')"
4544
>
46-
<input-password-toggle>
47-
<b-form-input
45+
<input-password-toggle @updatePassView="updateConfirmPasswordType">
46+
<BFormInput
4847
id="password-confirm"
4948
v-model="form.passwordConfirm"
5049
autocomplete="off"
51-
type="password"
52-
:state="getValidationState($v.form.passwordConfirm)"
50+
:type="confirmPasswordType"
51+
:state="getValidationState(v$.form.passwordConfirm)"
5352
class="form-control-with-button"
54-
@change="$v.form.passwordConfirm.$touch()"
55-
>
56-
</b-form-input>
57-
<b-form-invalid-feedback role="alert">
58-
<template v-if="!$v.form.passwordConfirm.required">
53+
@input="v$.form.passwordConfirm.$touch()"
54+
/>
55+
<BFormInvalidFeedback role="alert">
56+
<template v-if="v$.form.passwordConfirm.required.$invalid">
5957
{{ $t('global.form.fieldRequired') }}
6058
</template>
61-
<template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
59+
<template v-else-if="v$.form.passwordConfirm.$errors.length > 0 ? v$.form.passwordConfirm.$errors[0].$validator === 'sameAsPassword' : false">
6260
{{ $t('global.form.passwordsDoNotMatch') }}
6361
</template>
64-
</b-form-invalid-feedback>
62+
</BFormInvalidFeedback>
6563
</input-password-toggle>
66-
</b-form-group>
64+
</BFormGroup>
6765
<div class="text-right">
6866
<b-button type="button" variant="link" @click="goBack">
6967
{{ $t('pageChangePassword.goBack') }}
@@ -77,68 +75,78 @@
7775
</div>
7876
</template>
7977

80-
<script>
81-
import { required, sameAs } from 'vuelidate/lib/validators';
82-
import Alert from '@/components/Global/Alert';
83-
import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
84-
import InfoTooltipPassword from '@/components/Global/InfoTooltipPassword';
85-
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
86-
import BVToastMixin from '@/components/Mixins/BVToastMixin';
78+
<script setup>
79+
import { ref, computed} from 'vue'
80+
import i18n from '@/i18n';
81+
import { UserManagementStore, GlobalStore, AuthenticationStore } from '@/store';
82+
import { required, sameAs } from '@vuelidate/validators';
83+
import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
84+
import { useVuelidate } from '@vuelidate/core';
85+
import Alert from '@/components/Global/Alert.vue';
86+
import InfoTooltipPassword from '@/components/Global/InfoTooltipPassword.vue';
87+
import InputPasswordToggle from '@/components/Global/InputPasswordToggle.vue';
88+
import { useRouter } from 'vue-router';
8789
88-
export default {
89-
name: 'ChangePassword',
90-
components: { Alert, InfoTooltipPassword, InputPasswordToggle },
91-
mixins: [VuelidateMixin, BVToastMixin],
92-
data() {
93-
return {
94-
form: {
95-
password: null,
96-
passwordConfirm: null,
97-
},
98-
username: this.$store.getters['global/username'],
99-
changePasswordError: false,
100-
};
101-
},
102-
validations() {
103-
return {
90+
const global = GlobalStore();
91+
const userManagementStore = UserManagementStore();
92+
const authenticationStore = AuthenticationStore();
93+
94+
const router = useRouter();
95+
const { getValidationState } = useVuelidateComposable();
96+
97+
const form = ref({
98+
password: '',
99+
passwordConfirm: '',
100+
});
101+
const username = ref(global.usernameGetter);
102+
const changePasswordError = ref(false);
103+
const inputType = ref('password')
104+
const confirmPasswordType = ref('password')
105+
106+
const rules = computed(() => ({
104107
form: {
105108
password: { required },
106109
passwordConfirm: {
107110
required,
108-
sameAsPassword: sameAs('password'),
111+
sameAsPassword: sameAs(form.value.password),
109112
},
110113
},
111-
};
112-
},
113-
methods: {
114-
goBack() {
114+
}));
115+
const v$ = useVuelidate(rules, {form});
116+
117+
const goBack = () => {
115118
// Remove session created if navigating back to the Login page
116-
this.$store.dispatch('authentication/logout');
117-
},
118-
changePassword() {
119-
this.$v.$touch();
120-
if (this.$v.$invalid) return;
119+
authenticationStore.logout().then(() => {
120+
router.push('/login');
121+
});
122+
};
123+
const changePassword = () => {
124+
v$.value.$touch();
125+
if (v$.value.$invalid) return;
121126
let data = {
122-
originalUsername: this.username,
123-
password: this.form.password,
127+
originalUsername: username.value,
128+
password: form.value.password,
124129
};
125130
126-
this.$store
127-
.dispatch('userManagement/updateUser', data)
131+
userManagementStore.updateUser(data)
128132
.then(() => {
129133
Promise.all([
130-
this.$store.dispatch('userManagement/getUsers'),
131-
this.$store.dispatch('global/getCurrentUser', this.username),
132-
this.$store.dispatch('global/getSystemInfo'),
133-
]);
134+
userManagementStore.getUsers(),
135+
global.getCurrentUser(username.value),
136+
global.getSystemInfo(),
137+
])
138+
v$.value.$reset();
134139
})
135-
.then(() => this.$router.push('/'))
136-
.catch(() => (this.changePasswordError = true));
137-
},
138-
},
140+
.then(() => router.push('/'))
141+
.catch(() => (changePasswordError.value = true));
142+
};
143+
const updatePasswordType = (passwordType) => {
144+
inputType.value=passwordType
145+
};
146+
const updateConfirmPasswordType = (passwordType) => {
147+
confirmPasswordType.value=passwordType
139148
};
140149
</script>
141-
142150
<style lang="scss" scoped>
143151
.change-password__form-container {
144152
@include media-breakpoint-up('md') {

0 commit comments

Comments
 (0)