@@ -4,7 +4,10 @@ import Router from 'vue-router'; | |||||
import HomePage from '../account/HomePage' | import HomePage from '../account/HomePage' | ||||
import RegisterPage from '../auth/RegisterPage' | import RegisterPage from '../auth/RegisterPage' | ||||
import LoginPage from '../auth/LoginPage' | import LoginPage from '../auth/LoginPage' | ||||
import ProfilePage from '../account/ProfilePage' | |||||
import ProfilePage from '../account/profile/ProfilePage' | |||||
import PolicyPage from '../account/profile/PolicyPage' | |||||
import NotificationsPage from '../account/NotificationsPage' | |||||
import ChangePasswordPage from '../account/profile/ChangePasswordPage' | |||||
import NetworksPage from '../account/NetworksPage' | import NetworksPage from '../account/NetworksPage' | ||||
import NewNetworkPage from '../account/NewNetworkPage' | import NewNetworkPage from '../account/NewNetworkPage' | ||||
import NetworkPage from '../account/NetworkPage' | import NetworkPage from '../account/NetworkPage' | ||||
@@ -25,7 +28,7 @@ const newNetworkChildren = [ | |||||
'unknown': UnknownPayment | 'unknown': UnknownPayment | ||||
} | } | ||||
}] | }] | ||||
}, | |||||
} | |||||
]; | ]; | ||||
export const router = new Router({ | export const router = new Router({ | ||||
@@ -38,7 +41,10 @@ export const router = new Router({ | |||||
path: '', component: NetworksPage, | path: '', component: NetworksPage, | ||||
children: newNetworkChildren | children: newNetworkChildren | ||||
}, | }, | ||||
{ path: '/profile', component: ProfilePage }, | |||||
{ path: '/me', component: ProfilePage }, | |||||
{ path: '/me/policy', component: PolicyPage }, | |||||
{ path: '/me/changePassword', component: ChangePasswordPage }, | |||||
{ path: '/notifications', component: NotificationsPage }, | |||||
{ | { | ||||
path: '/networks', component: NetworksPage , | path: '/networks', component: NetworksPage , | ||||
children: [ | children: [ | ||||
@@ -7,6 +7,10 @@ export const userService = { | |||||
register, | register, | ||||
getAll, | getAll, | ||||
getById, | getById, | ||||
getPolicyById, | |||||
updatePolicyById, | |||||
addPolicyContactById, | |||||
removePolicyContactByTypeAndInfo, | |||||
update, | update, | ||||
delete: _delete | delete: _delete | ||||
}; | }; | ||||
@@ -59,6 +63,22 @@ function getById(id, messages, errors) { | |||||
return fetch(`${config.apiUrl}/users/${id}`, getWithAuth()).then(handleCrudResponse(messages, errors)); | return fetch(`${config.apiUrl}/users/${id}`, getWithAuth()).then(handleCrudResponse(messages, errors)); | ||||
} | } | ||||
function getPolicyById(id, messages, errors) { | |||||
return fetch(`${config.apiUrl}/users/${id}/policy`, getWithAuth()).then(handleCrudResponse(messages, errors)); | |||||
} | |||||
function updatePolicyById(id, policy, messages, errors) { | |||||
return fetch(`${config.apiUrl}/users/${id}/policy`, postWithAuth(policy)).then(handleCrudResponse(messages, errors)); | |||||
} | |||||
function addPolicyContactById(id, contact, messages, errors) { | |||||
return fetch(`${config.apiUrl}/users/${id}/policy/contacts`, postWithAuth(contact)).then(handleCrudResponse(messages, errors)); | |||||
} | |||||
function removePolicyContactByTypeAndInfo(id, type, info, messages, errors) { | |||||
return fetch(`${config.apiUrl}/users/${id}/policy/contacts/${type}/${info}`, deleteWithAuth()).then(handleCrudResponse(messages, errors)); | |||||
} | |||||
function update(user, messages, errors) { | function update(user, messages, errors) { | ||||
return fetch(`${config.apiUrl}/users/${user.uuid}`, postWithAuth(user)).then(handleCrudResponse(messages, errors)); | return fetch(`${config.apiUrl}/users/${user.uuid}`, postWithAuth(user)).then(handleCrudResponse(messages, errors)); | ||||
} | } | ||||
@@ -13,6 +13,7 @@ const state = { | |||||
timezones: [], | timezones: [], | ||||
detectedTimezone: null, | detectedTimezone: null, | ||||
detectedLocale: null, | detectedLocale: null, | ||||
accountDeletionOptions: [], | |||||
error: null | error: null | ||||
}; | }; | ||||
@@ -65,37 +66,32 @@ const getters = { | |||||
title: messages.label_menu_dashboard, | title: messages.label_menu_dashboard, | ||||
icon: messages.label_menu_dashboard_icon | icon: messages.label_menu_dashboard_icon | ||||
}, { | }, { | ||||
href: '/profile', | |||||
href: '/me', | |||||
title: messages.label_menu_account, | title: messages.label_menu_account, | ||||
icon: messages.label_menu_account_icon, | |||||
child: [{ | |||||
href: '/profile/policy', | |||||
title: messages.label_menu_account_policy, | |||||
icon: messages.label_menu_account_policy_icon | |||||
}, { | |||||
href: '/profile/contacts', | |||||
title: messages.label_menu_account_contacts, | |||||
icon: messages.label_menu_account_contacts_icon | |||||
}] | |||||
icon: messages.label_menu_account_icon | |||||
}, { | |||||
href: '/notifications', | |||||
title: messages.label_menu_notifications, | |||||
icon: messages.label_menu_notifications_icon | |||||
}, { | }, { | ||||
href: '/logout', | href: '/logout', | ||||
title: messages.label_menu_logout, | title: messages.label_menu_logout, | ||||
icon: messages.label_menu_logout_icon | icon: messages.label_menu_logout_icon | ||||
}]; | }]; | ||||
if (configs.paymentsEnabled) { | |||||
menu[1].child.push({ | |||||
href: '/me/bills', | |||||
title: messages.label_menu_bills, | |||||
icon: messages.label_menu_bills_icon | |||||
}); | |||||
} | |||||
if (configs.sageLauncher) { | if (configs.sageLauncher) { | ||||
menu.splice(2, 0, { | |||||
menu.splice(3, 0, { | |||||
href: '/me/networks', | href: '/me/networks', | ||||
title: messages.label_menu_networks, | title: messages.label_menu_networks, | ||||
icon: messages.label_menu_networks_icon | icon: messages.label_menu_networks_icon | ||||
}); | }); | ||||
} | } | ||||
if (configs.paymentsEnabled) { | |||||
menu.splice(4, 0,{ | |||||
href: '/me/bills', | |||||
title: messages.label_menu_bills, | |||||
icon: messages.label_menu_bills_icon | |||||
}); | |||||
} | |||||
if (account.state.user.admin === true) { | if (account.state.user.admin === true) { | ||||
const admin_menu = { | const admin_menu = { | ||||
href: '/admin', | href: '/admin', | ||||
@@ -154,6 +150,9 @@ const mutations = { | |||||
} | } | ||||
state.locales = locales; | state.locales = locales; | ||||
} | } | ||||
if (messages.field_label_policy_account_deletion_options) { | |||||
state.accountDeletionOptions = messages.field_label_policy_account_deletion_options.split(','); | |||||
} | |||||
}, | }, | ||||
loadMessagesFailure(state, error) { | loadMessagesFailure(state, error) { | ||||
state.error = error; | state.error = error; | ||||
@@ -3,7 +3,8 @@ import { account } from '../_store/account.module'; | |||||
const state = { | const state = { | ||||
all: {}, | all: {}, | ||||
user: null | |||||
user: null, | |||||
policy: {} | |||||
}; | }; | ||||
const actions = { | const actions = { | ||||
@@ -37,6 +38,46 @@ const actions = { | |||||
); | ); | ||||
}, | }, | ||||
getPolicyByUuid({ commit }, {uuid, messages, errors}) { | |||||
commit('getPolicyByUuidRequest'); | |||||
userService.getPolicyById(uuid, messages, errors) | |||||
.then( | |||||
policy => commit('getPolicyByUuidSuccess', policy), | |||||
error => commit('getPolicyByUuidFailure', error) | |||||
); | |||||
}, | |||||
updatePolicyByUuid({ commit }, {uuid, policy, messages, errors}) { | |||||
commit('updatePolicyByUuidRequest'); | |||||
userService.updatePolicyById(uuid, policy, messages, errors) | |||||
.then( | |||||
policy => commit('updatePolicyByUuidSuccess', policy), | |||||
error => commit('updatePolicyByUuidFailure', error) | |||||
); | |||||
}, | |||||
addPolicyContactByUuid({ commit }, {uuid, contact, messages, errors}) { | |||||
commit('addPolicyContactByUuidRequest'); | |||||
userService.updatePolicyById(uuid, contact, messages, errors) | |||||
.then( | |||||
policy => commit('addPolicyContactByUuidSuccess', policy), | |||||
error => commit('addPolicyContactByUuidFailure', error) | |||||
); | |||||
}, | |||||
removePolicyContactByTypeAndInfo({ commit }, {uuid, type, info, messages, errors}) { | |||||
commit('removePolicyContactByTypeAndInfoRequest'); | |||||
userService.removePolicyContactByTypeAndInfo(uuid, type, info, messages, errors) | |||||
.then( | |||||
policy => commit('removePolicyContactByTypeAndInfoSuccess', policy), | |||||
error => commit('removePolicyContactByTypeAndInfoFailure', error) | |||||
); | |||||
}, | |||||
delete({ commit }, {id, messages, errors}) { | delete({ commit }, {id, messages, errors}) { | ||||
commit('deleteRequest', id); | commit('deleteRequest', id); | ||||
@@ -58,6 +99,7 @@ const mutations = { | |||||
getAllFailure(state, error) { | getAllFailure(state, error) { | ||||
state.all = { error }; | state.all = { error }; | ||||
}, | }, | ||||
getByUuidRequest(state) { | getByUuidRequest(state) { | ||||
state.user = { loading: true }; | state.user = { loading: true }; | ||||
}, | }, | ||||
@@ -67,6 +109,47 @@ const mutations = { | |||||
getByUuidFailure(state, error) { | getByUuidFailure(state, error) { | ||||
state.user = { error }; | state.user = { error }; | ||||
}, | }, | ||||
getPolicyByUuidRequest(state) { | |||||
state.user = { loading: true }; | |||||
}, | |||||
getPolicyByUuidSuccess(state, policy) { | |||||
state.policy = policy; | |||||
}, | |||||
getPolicyByUuidFailure(state, error) { | |||||
state.policy = { error }; | |||||
}, | |||||
updatePolicyByUuidRequest(state) { | |||||
state.user = { loading: true }; | |||||
}, | |||||
updatePolicyByUuidSuccess(state, policy) { | |||||
state.policy = policy; | |||||
}, | |||||
updatePolicyByUuidFailure(state, error) { | |||||
state.policy = { error }; | |||||
}, | |||||
addPolicyContactByUuidRequest(state) { | |||||
state.user = { loading: true }; | |||||
}, | |||||
addPolicyContactByUuidSuccess(state, policy) { | |||||
state.policy = policy; | |||||
}, | |||||
addPolicyContactByUuidFailure(state, error) { | |||||
state.policy = { error }; | |||||
}, | |||||
removePolicyContactByTypeAndInfoRequest(state) { | |||||
state.user = { loading: true }; | |||||
}, | |||||
removePolicyContactByTypeAndInfoSuccess(state, policy) { | |||||
state.policy = policy; | |||||
}, | |||||
removePolicyContactByTypeAndInfoFailure(state, error) { | |||||
state.policy = { error }; | |||||
}, | |||||
updateRequest(state, user) { | updateRequest(state, user) { | ||||
// todo: add 'updating:true' property to user being updated | // todo: add 'updating:true' property to user being updated | ||||
}, | }, | ||||
@@ -78,6 +161,7 @@ const mutations = { | |||||
updateFailure(state, { id, error }) { | updateFailure(state, { id, error }) { | ||||
// todo: remove 'updating:true' property and add 'updateError:[error]' property to user | // todo: remove 'updating:true' property and add 'updateError:[error]' property to user | ||||
}, | }, | ||||
deleteRequest(state, id) { | deleteRequest(state, id) { | ||||
// add 'deleting:true' property to user being deleted | // add 'deleting:true' property to user being deleted | ||||
state.all.items = state.all.items.map(user => | state.all.items = state.all.items.map(user => | ||||
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<h1>{{messages.label_homepage_hello && messages.label_homepage_hello.parseMessage(this)}}!</h1> | |||||
<h1>{{messages.label_homepage_hello && messages.label_homepage_hello.parseMessage(this)}}</h1> | |||||
<hr/> | <hr/> | ||||
<router-view></router-view> | <router-view></router-view> | ||||
</div> | </div> | ||||
@@ -0,0 +1,18 @@ | |||||
<template> | |||||
<div> | |||||
Notifications | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState, mapActions } from 'vuex' | |||||
export default { | |||||
computed: { | |||||
}, | |||||
created () { | |||||
}, | |||||
methods: { | |||||
} | |||||
}; | |||||
</script> |
@@ -0,0 +1,18 @@ | |||||
<template> | |||||
<div> | |||||
Change Password | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState, mapActions } from 'vuex' | |||||
export default { | |||||
computed: { | |||||
}, | |||||
created () { | |||||
}, | |||||
methods: { | |||||
} | |||||
}; | |||||
</script> |
@@ -0,0 +1,42 @@ | |||||
<template> | |||||
<div> | |||||
<h2>{{messages.form_label_title_account_policy}}</h2> | |||||
<form @submit.prevent="handleSubmit"> | |||||
<div class="form-group"> | |||||
<label htmlFor="url">{{messages.field_label_policy_account_deletion}}</label> | |||||
<select v-model="policy.deletionPolicy" name="deletionPolicy" class="form-control"> | |||||
<option v-for="opt in accountDeletionOptions" v-bind:value="opt">{{messages['account_deletion_name_'+opt]}}</option> | |||||
</select> | |||||
<span>{{messages['account_deletion_description_'+policy.deletionPolicy]}}</span> | |||||
<div v-if="submitted && errors.has('deletionPolicy')" class="invalid-feedback">{{ errors.first('deletionPolicy') }}</div> | |||||
</div> | |||||
</form> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState, mapActions } from 'vuex' | |||||
export default { | |||||
data() { | |||||
return {submitted: false} | |||||
}, | |||||
computed: { | |||||
...mapState('account', { | |||||
currentUser: state => state.user, | |||||
status: state => state.status | |||||
}), | |||||
...mapState('system', ['messages', 'accountDeletionOptions']), | |||||
...mapState('users', ['policy']) | |||||
}, | |||||
methods: { | |||||
...mapActions('users', ['getPolicyByUuid', 'updatePolicyByUuid', 'addPolicyContactByUuid', 'removePolicyContactByTypeAndInfo']), | |||||
handleSubmit(e) { | |||||
console.log('submitting with deletionPolicy='+this.policy.deletionPolicy); | |||||
} | |||||
}, | |||||
created () { | |||||
this.getPolicyByUuid({uuid: this.currentUser.uuid, messages: this.messages, errors: this.errors}); | |||||
} | |||||
}; | |||||
</script> |
@@ -1,6 +1,13 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<h2>Edit Profile</h2> | |||||
<h2>Account Profile</h2> | |||||
<hr/> | |||||
<router-link to="/me/changePassword">{{messages.link_label_change_password}}</router-link> | |||||
<hr/> | |||||
<router-link to="/me/policy">{{messages.link_label_account_policy}}</router-link> | |||||
<hr/> | |||||
<form @submit.prevent="handleSubmit"> | <form @submit.prevent="handleSubmit"> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<span>{{messages.field_label_username}}: {{user.name}}</span> | <span>{{messages.field_label_username}}: {{user.name}}</span> | ||||
@@ -63,7 +70,7 @@ | |||||
<script> | <script> | ||||
import { mapState, mapActions } from 'vuex' | import { mapState, mapActions } from 'vuex' | ||||
import { account } from '../_store/account.module' | |||||
import { account } from '../../_store/account.module' | |||||
export default { | export default { | ||||
data () { | data () { |