add payment methods

src/_helpers/router.js

@@ -15,6 +15,7 @@ import DevicesPage from '../account/DevicesPage'
 import AppsPage from '../account/AppsPage'
 import AppPage from '../account/AppPage'
 import BillsPage from '../account/payment/BillsPage'
+import PaymentMethodsPage from "../account/payment/PaymentMethodsPage";
 import AppSitePage from '../account/AppSitePage'
 import AppDataViewPage from '../account/AppDataViewPage'
 import AppConfigPage from '../account/AppConfigPage'
@@ -34,13 +35,21 @@ import { util } from '../_helpers'
 
 Vue.use(Router);
 
+const paymentMethods = {
+  pay_stripe: StripePayment,
+  pay_invite: InviteCodePayment,
+  pay_free: FreePayment,
+  pay_unknown: UnknownPayment
+};
+
+const paymentMethodsChildren = [
+  { path: '', components: paymentMethods }
+];
+
 const newNetworkChildren = [
   { path: '', components: {
       default: NewNetworkPage,
-      pay_stripe: StripePayment,
-      pay_invite: InviteCodePayment,
-      pay_free: FreePayment,
-      pay_unknown: UnknownPayment
+      ...paymentMethods
     }
   }
 ];
@@ -67,6 +76,7 @@ export const router = new Router({
         { path: '/me/setPassword/:code', component: SetPasswordPage },
         { path: '/me/keys', component: SshKeysPage },
         { path: '/me/bills', component: BillsPage },
+        { path: '/me/payment', component: PaymentMethodsPage, children: paymentMethodsChildren },
         { path: '/devices', component: DevicesPage },
         { path: '/apps', component: AppsPage },
         { path: '/app/:app', component: AppPage },
@@ -105,6 +115,8 @@ export const router = new Router({
     { path: '/admin/accounts/:id/policy', component: PolicyPage },
     { path: '/admin/accounts/:id/changePassword', component: ChangePasswordPage },
     { path: '/admin/accounts/:id/keys', component: SshKeysPage },
+    { path: '/admin/accounts/:id/bills', component: BillsPage },
+    { path: '/admin/accounts/:id/payment', component: PaymentMethodsPage, children: paymentMethodsChildren },
     { path: '/admin/model', component: ModelSetupPage },
 
     // otherwise redirect to home

src/_helpers/util.js

@@ -229,6 +229,37 @@ export const util = {
 
     addMessages: function(existing, updates) {
         return new Proxy(Object.assign({}, existing, updates), util.messageNotFoundHandler);
+    },
+
+    validateAccount: function (vue)  {
+        vue.me = vue.$route.path.startsWith('/me/');
+        if (vue.me) {
+            vue.linkPrefix = '/me';
+            if (vue.currentUser === null) {
+                console.warn('validateAccount: /me requested but no currentUser, sending to home page');
+                vue.$router.push('/');
+                return false;
+
+            } else {
+                vue.userId = vue.currentUser.uuid;
+            }
+
+        } else if (vue.currentUser.admin !== true) {
+            console.warn('validateAccount: not admin and path not /me, sending to /me ...');
+            vue.$router.push('/me');
+            return false;
+
+        } else if (typeof vue.$route.params.id === 'undefined' || vue.$route.params.id === null) {
+            console.warn('validateAccount: no id param found, sending to accounts page');
+            vue.$router.push('/admin/accounts');
+            return false;
+
+        } else {
+            vue.userId = vue.$route.params.id;
+            vue.linkPrefix = '/admin/accounts/' + vue.userId;
+        }
+        this.isMe = (this.me === true || util.currentUser().uuid === this.userId || util.currentUser().name === this.userId);
+        return true;
     }
 
 };

src/_services/accountPlan.service.js

@@ -9,11 +9,11 @@ export const accountPlanService = {
 };
 
 function getAllAccountPlans(userId, messages, errors) {
-    return fetch(`${config.apiUrl}/users/${userId}/accountPlans`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
+    return fetch(`${config.apiUrl}/users/${userId}/plans`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
 }
 
 function getAccountPlanById(userId, accountPlanId, messages, errors) {
-    return fetch(`${config.apiUrl}/users/${userId}/accountPlans/${accountPlanId}`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
+    return fetch(`${config.apiUrl}/users/${userId}/plans/${accountPlanId}`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
 }
 
 function newAccountPlan(userId, accountPlan, messages, errors) {

src/_services/index.js

@@ -4,8 +4,8 @@ export * from './domain.service';
 export * from './plan.service';
 export * from './footprint.service';
 export * from './paymentMethod.service';
+export * from './bill.service';
 export * from './accountPlan.service';
 export * from './network.service';
 export * from './device.service';
 export * from './app.service';
-export * from './bill.service';

src/_services/paymentMethod.service.js

@@ -3,16 +3,23 @@ import { util } from '../_helpers';
 
 export const paymentMethodService = {
     getAllPaymentMethods,
+    getAllAccountPaymentMethods,
     getPublicById,
     getAllByAccount,
     getByAccountAndId,
-    addAccountPaymentMethod
+    addAccountPaymentMethod,
+    setAccountPaymentMethodForPlan,
+    deleteAccountPaymentMethod,
 };
 
 function getAllPaymentMethods(messages, errors) {
     return fetch(`${config.apiUrl}/paymentMethods`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
 }
 
+function getAllAccountPaymentMethods(userId, messages, errors) {
+    return fetch(`${config.apiUrl}/users/${userId}/paymentMethods?all=true`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
+}
+
 function getPublicById(paymentMethodId, messages, errors) {
     return fetch(`${config.apiUrl}/paymentMethods/${paymentMethodId}`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
 }
@@ -28,3 +35,12 @@ function getByAccountAndId(userId, paymentMethodId, messages, errors) {
 function addAccountPaymentMethod(userId, paymentMethod, messages, errors) {
     return fetch(`${config.apiUrl}/users/${userId}/paymentMethods`, util.putWithAuth(paymentMethod)).then(util.handleCrudResponse(messages, errors));
 }
+
+function setAccountPaymentMethodForPlan(userId, planId, pmId, messages, errors) {
+    const update = {paymentMethod: pmId};
+    return fetch(`${config.apiUrl}/users/${userId}/plans/${planId}`, util.postWithAuth(update)).then(util.handleCrudResponse(messages, errors));
+}
+
+function deleteAccountPaymentMethod(userId, pmId, messages, errors) {
+    return fetch(`${config.apiUrl}/users/${userId}/paymentMethods/${pmId}`, util.deleteWithAuth()).then(util.handleCrudResponse(messages, errors));
+}

src/_store/index.js

@@ -9,11 +9,11 @@ import { plans } from './plans.module';
 import { footprints } from './footprints.module';
 import { domains } from './domains.module';
 import { paymentMethods } from './paymentMethods.module';
+import { bills } from './bills.module';
 import { accountPlans } from './accountPlans.module';
 import { networks } from './networks.module';
 import { devices } from './devices.module';
 import { apps } from './apps.module';
-import { bills } from './bills.module';
 
 Vue.use(Vuex);
 
@@ -27,11 +27,11 @@ export const store = new Vuex.Store({
         footprints,
         domains,
         paymentMethods,
+        bills,
         accountPlans,
         networks,
         devices,
-        apps,
-        bills
+        apps
     }
 });
 

src/_store/paymentMethods.module.js

@@ -5,7 +5,7 @@ const state = {
     loading: {
         paymentMethods: false, paymentMethod: false,
         accountPaymentMethods: false, accountPaymentMethod: false,
-        adding: false
+        adding: false, updating: false, deleting: false
     },
     paymentStatus: {},
     error: null,
@@ -27,6 +27,16 @@ const actions = {
                 error => commit('getAllPaymentMethodsFailure', error)
             );
     },
+
+    getAllAccountPaymentMethods({ commit }, {userId, messages, errors}) {
+        commit('getAllAccountPaymentMethodsRequest');
+        paymentMethodService.getAllAccountPaymentMethods(userId, messages, errors)
+            .then(
+                paymentMethods => commit('getAllAccountPaymentMethodsSuccess', paymentMethods),
+                error => commit('getAllAccountPaymentMethodsFailure', error)
+            );
+    },
+
     getPublicById({ commit }, {paymentMethodId, messages, errors}) {
         commit('getPublicByIdRequest');
         paymentMethodService.getPublicById(paymentMethodId, messages, errors)
@@ -66,6 +76,22 @@ const actions = {
                 errors => commit('addAccountPaymentMethodFailure', errors)
             );
     },
+    setAccountPaymentMethodForPlan({ commit }, {userId, planId, pmId, messages, errors}) {
+        commit('setAccountPaymentMethodForPlanRequest');
+        paymentMethodService.setAccountPaymentMethodForPlan(userId, planId, pmId, messages, errors)
+            .then(
+                pm => commit('setAccountPaymentMethodForPlanSuccess', pm),
+                errors => commit('setAccountPaymentMethodForPlanFailure', errors)
+            );
+    },
+    deleteAccountPaymentMethod({ commit }, {userId, pmId, messages, errors}) {
+        commit('deleteAccountPaymentMethodRequest');
+        paymentMethodService.deleteAccountPaymentMethod(userId, pmId, messages, errors)
+            .then(
+                ok => commit('deleteAccountPaymentMethodSuccess', ok),
+                errors => commit('deleteAccountPaymentMethodFailure', errors)
+            );
+    },
     clearPaymentInfo({ commit }) {
         commit('clearPaymentInfoSuccess');
     }
@@ -83,6 +109,19 @@ const mutations = {
         state.loading.paymentMethods = false;
         state.error = { error };
     },
+
+    getAllAccountPaymentMethodsRequest(state) {
+        state.loading.accountPaymentMethods = true;
+    },
+    getAllAccountPaymentMethodsSuccess(state, paymentMethods) {
+        state.loading.accountPaymentMethods = false;
+        state.accountPaymentMethods = paymentMethods;
+    },
+    getAllAccountPaymentMethodsFailure(state, error) {
+        state.loading.accountPaymentMethods = false;
+        state.error = { error };
+    },
+
     getPublicByIdRequest(state) {
         state.loading.paymentMethod = true;
     },
@@ -142,6 +181,36 @@ const mutations = {
         state.errors = errors;
     },
 
+    setAccountPaymentMethodForPlanRequest(state) {
+        state.loading.updating = true;
+        state.errors = null;
+        state.paymentStatus = { updatingPaymentMethod: true };
+    },
+    setAccountPaymentMethodForPlanSuccess(state, pm) {
+        state.loading.updating = false;
+        state.paymentStatus = { updatedPaymentMethod: true };
+    },
+    setAccountPaymentMethodForPlanFailure(state, errors) {
+        state.loading.updating = false;
+        state.paymentStatus = {};
+        state.errors = errors;
+    },
+
+    deleteAccountPaymentMethodRequest(state) {
+        state.loading.deleting = true;
+        state.paymentStatus = { deletingPaymentMethod: true };
+        state.errors = null;
+    },
+    deleteAccountPaymentMethodSuccess(state, ok) {
+        state.loading.deleting = false;
+        state.paymentStatus = { deletedPaymentMethod: true };
+        state.errors = null;
+    },
+    deleteAccountPaymentMethodFailure(state, errors) {
+        state.loading.deleting = false;
+        state.paymentStatus = {};
+    },
+
     clearPaymentInfoSuccess(state) {
         state.paymentInfo = null;
     }

src/_store/system.module.js

@@ -182,13 +182,6 @@ const getters = {
                 icon: messages.label_menu_apps_icon
             });
         }
-        if (configs.paymentsEnabled) {
-            menu.splice(3, 0,{
-                href: '/me/bills',
-                title: messages.label_menu_bills,
-                icon: messages.label_menu_bills_icon
-            });
-        }
         if (account.state.user.admin === true) {
             const admin_menu = {
                 href: '/admin',

src/account/NewNetworkPage.vue

@@ -221,8 +221,8 @@
                         <h5>{{messages.err_noPaymentMethods}}</h5>
                     </div>
                     <span v-for="pm in paymentMethods">
-                    <button class="btn btn-primary" :disabled="loading()" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
-                </span>
+                        <button class="btn btn-primary" :disabled="loading()" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
+                    </span>
                 </div>
 
                 <div v-if="selectedPaymentMethod !== null && selectedPaymentMethod.paymentMethodType === 'credit'">

src/account/payment/BillsPage.vue

@@ -64,7 +64,6 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
-    import { Settings } from 'luxon';
 
     export default {
         data() {
@@ -98,33 +97,9 @@
             }
         },
         created () {
-            this.me = this.$route.path.startsWith('/me/');
-            if (this.me) {
-                this.linkPrefix = '/me';
-                if (this.currentUser === null) {
-                    console.warn('BillsPage.created: /me requested but no currentUser, sending to home page');
-                    this.$router.push('/');
-                    return;
-
-                } else {
-                    this.userId = this.currentUser.uuid;
-                }
-
-            } else if (this.currentUser.admin !== true) {
-                console.warn('BillsPage.created: not admin and path not /me, sending to /me ...');
-                this.$router.push('/me');
-                return;
-
-            } else if (typeof this.$route.params.id === 'undefined' || this.$route.params.id === null) {
-                console.warn('BillsPage.created: no id param found, sending to accounts page');
-                this.$router.push('/admin/accounts');
-                return;
-
-            } else {
-                this.userId = this.$route.params.id;
-                this.linkPrefix = '/admin/accounts/' + this.userId;
+            if (util.validateAccount(this)) {
+                this.getAllBillsByAccount({userId: this.userId, messages: this.messages, errors: this.errors});
             }
-            this.getAllBillsByAccount({userId: this.userId, messages: this.messages, errors: this.errors});
         }
     };
 </script>

src/account/payment/PaymentMethodsPage.vue

@@ -0,0 +1,210 @@
+<template>
+    <div>
+        <h5>{{messages.title_account_payment_methods}}</h5>
+
+        <div v-if="payMethods">
+            <table border="1">
+                <thead>
+                <tr>
+                    <td>{{messages.label_account_payment_method_type}}</td>
+                    <td>{{messages.label_account_payment_method_info}}</td>
+                    <td>{{messages.label_account_payment_method_added}}</td>
+                    <td>{{messages.label_account_payment_method_current}}</td>
+                    <td>{{messages.label_account_payment_method_set}}</td>
+                    <td>{{messages.label_account_payment_method_remove}}</td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="pm in payMethods">
+                    <td>{{messages['payment_method_'+pm.paymentMethodType]}}</td>
+                    <td nowrap="nowrap"><small>{{pm.maskedPaymentInfo}}</small></td>
+                    <td>{{messages.label_account_payment_method_added_format.parseDateMessage(pm.ctime, messages)}}</td>
+
+                    <td v-if="pm.planNames && pm.planNames.length > 0">
+                        <div v-for="name in pm.planNames">{{name}}</div>
+                    </td>
+                    <td v-else></td>
+
+                    <td v-if="accountPlans && accountPlans.length > 0">
+                        <div v-for="ap in accountPlans">
+                            <button style="white-space:nowrap" v-if="ap.paymentMethod !== pm.uuid" @click="setPayMethodForPlan(ap.uuid, pm.uuid)">{{ap.name}}</button>
+                        </div>
+                    </td>
+                    <td v-else></td>
+
+                    <td v-if="pm.deletable">
+                        <button v-if="pm.deletable" @click="deletePayMethod(pm.uuid)">{{messages.button_label_account_payment_delete}}</button>
+                    </td>
+                    <td v-else></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <hr/>
+        <div class="form-group">
+            <label htmlFor="paymentMethod"><b>{{messages.label_account_payment_add}}</b></label>
+            <div v-if="!loading() && (typeof paymentMethods === 'undefined' || paymentMethods === null || paymentMethods.length === 0)" class="invalid-feedback d-block">
+                <h5>{{messages.err_noPaymentMethods}}</h5>
+            </div>
+            <div>
+                <span v-for="pm in paymentMethods">
+                    <button class="btn btn-primary" :disabled="loading()" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
+                </span>
+            </div>
+
+            <div v-if="selectedPaymentMethod !== null && selectedPaymentMethod.paymentMethodType === 'credit'">
+                <router-view name="pay_stripe" v-if="selectedPaymentMethod.driverClass.endsWith('StripePaymentDriver')"></router-view>
+                <router-view name="pay_unknown" v-else></router-view>
+            </div>
+            <div v-else-if="selectedPaymentMethod !== null && selectedPaymentMethod.paymentMethodType === 'code'">
+                <router-view name="pay_invite" v-if="selectedPaymentMethod.driverClass.endsWith('CodePaymentDriver')"></router-view>
+                <router-view name="pay_unknown" v-else></router-view>
+            </div>
+            <div v-else-if="selectedPaymentMethod !== null && selectedPaymentMethod.paymentMethodType === 'free'">
+                <router-view name="pay_free" v-if="selectedPaymentMethod.driverClass.endsWith('FreePaymentDriver')"></router-view>
+                <router-view name="pay_unknown" v-else></router-view>
+            </div>
+            <div v-else-if="selectedPaymentMethod !== null">
+                <router-view name="pay_unknown"></router-view>
+            </div>
+
+        </div>
+
+        <hr/>
+        <div v-if="promos && promos.length > 0">
+            <h5>{{messages.title_account_promotions}}</h5>
+
+            <table border="1">
+                <thead>
+                <tr>
+                    <td>{{messages.label_account_payment_method_info}}</td>
+                    <td>{{messages.label_account_payment_method_added}}</td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="pm in promos">
+                    <td>{{messages['label_promotion_'+pm.maskedPaymentInfo]}}</td>
+                    <td>{{messages.label_account_payment_method_added_format.parseDateMessage(pm.ctime, messages)}}</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <hr/>
+        <div v-if="usedPromos && usedPromos.length > 0">
+            <h5>{{messages.title_account_promotions_used}}</h5>
+
+            <table border="1">
+                <thead>
+                <tr>
+                    <td>{{messages.label_account_payment_method_info}}</td>
+                    <td>{{messages.label_account_payment_method_added}}</td>
+                    <td>{{messages.label_account_promotion_used}}</td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="pm in usedPromos">
+                    <td>{{messages['label_promotion_'+pm.maskedPaymentInfo]}}</td>
+                    <td>{{messages.label_account_payment_method_added_format.parseDateMessage(pm.ctime, messages)}}</td>
+                    <td>{{messages.label_account_payment_method_used_format.parseDateMessage(pm.deleted, messages)}}</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import { mapState, mapActions, mapGetters } from 'vuex';
+    import { util } from '../../_helpers';
+
+    export default {
+        data() {
+            return {
+                me: null,
+                userId: null,
+                linkPrefix: null,
+                currentUser: util.currentUser(),
+                payMethods: null,
+                promos: null,
+                usedPromos: null,
+                selectedPaymentMethod: null,
+                newPaymentMethod: {
+                    paymentMethodType: null,
+                    paymentInfo: null
+                }
+            };
+        },
+        computed: {
+            ...mapState('system', ['messages']),
+            ...mapState('paymentMethods', ['paymentMethods', 'accountPaymentMethods', 'paymentMethod', 'paymentStatus']),
+            ...mapState('accountPlans', ['accountPlans']),
+        },
+        methods: {
+            ...mapActions('paymentMethods', [
+                'getAllPaymentMethods', 'getAllAccountPaymentMethods', 'setPaymentMethod', 'deleteAccountPaymentMethod',
+                'setAccountPaymentMethodForPlan'
+            ]),
+            ...mapActions('accountPlans', ['getAllAccountPlans']),
+            ...mapGetters('paymentMethods', ['loading']),
+            deletePayMethod (pmId) {
+                this.deleteAccountPaymentMethod({userId: this.userId, pmId: pmId, messages: this.messages, errors: this.errors});
+            },
+            setPayMethodForPlan(planId, pmId) {
+                this.setAccountPaymentMethodForPlan({userId: this.userId, planId: planId, pmId: pmId, messages: this.messages, errors: this.errors});
+            }
+        },
+        watch: {
+            accountPaymentMethods (pms) {
+                if (pms) {
+                    const payMethods = [];
+                    const promos = [];
+                    const usedPromos = [];
+                    for (let i=0; i<pms.length; i++) {
+                        const pm = pms[i];
+                        if (pm.promotion) {
+                            if (typeof pm.deleted !== 'undefined' && pm.deleted !== null) {
+                                usedPromos.push(pm);
+                            } else {
+                                promos.push(pm);
+                            }
+                        } else {
+                            if (typeof pm.deleted === 'undefined' || pm.deleted === null) {
+                                payMethods.push(pm);
+                            }
+                        }
+                    }
+                    this.payMethods = payMethods;
+                    this.promos = promos;
+                    this.usedPromos = usedPromos;
+                }
+            },
+            paymentMethod (pm) {
+                if (pm) {
+                    this.selectedPaymentMethod = pm;
+                    this.newPaymentMethod.paymentMethodType = pm.paymentMethodType;
+                    this.newPaymentMethod.paymentInfo = null;
+                }
+            },
+            paymentStatus (status) {
+                if (status && (status.addedPaymentMethod === true || status.updatedPaymentMethod === true || status.deletedPaymentMethod === true)) {
+                    this.selectedPaymentMethod = null;
+                    if (status.updatedPaymentMethod === true) {
+                        this.getAllAccountPlans({userId: this.userId, messages: this.messages, errors: this.errors});
+                    }
+                    this.getAllAccountPaymentMethods({userId: this.userId, messages: this.messages, errors: this.errors});
+                }
+            }
+        },
+        created () {
+            this.me = this.$route.path.startsWith('/me/');
+            if (util.validateAccount(this)) {
+                this.getAllAccountPaymentMethods({userId: this.userId, messages: this.messages, errors: this.errors});
+                this.getAllPaymentMethods({messages: this.messages, errors: this.errors});
+                this.getAllAccountPlans({userId: this.userId, messages: this.messages, errors: this.errors});
+            }
+        }
+    };
+</script>

src/account/profile/ChangePasswordPage.vue

@@ -110,37 +110,7 @@
             }
         },
         created () {
-            this.me = this.$route.path.startsWith('/me/');
-            if (this.me) {
-                this.linkPrefix = '/me';
-                if (this.currentUser === null) {
-                    this.admin = false;
-                    console.warn('ChangePasswordPage.created: /me requested but no currentUser, sending to home page');
-                    this.$router.push('/');
-                    return;
-
-                } else {
-                    this.admin = this.currentUser.admin === true;
-                    this.userId = this.currentUser.uuid;
-                    this.isMe = (this.me === true || this.currentUser.uuid === this.userId || this.currentUser.name === this.userId);
-                    this.getUserById({userId: this.currentUser.uuid, messages: this.messages, errors: this.errors});
-                    this.getPolicyByUserId({userId: this.currentUser.uuid, messages: this.messages, errors: this.errors});
-                }
-
-            } else if (this.currentUser.admin !== true) {
-                console.warn('ChangePasswordPage.created: not admin and path not /me, sending to /me ...');
-                this.$router.push('/me');
-                return;
-
-            } else if (typeof this.$route.params.id === 'undefined' || this.$route.params.id === null) {
-                console.warn('ChangePasswordPage.created: no id param found, sending to accounts page');
-                this.$router.push('/admin/accounts');
-                return;
-
-            } else {
-                this.userId = this.$route.params.id;
-                this.linkPrefix = '/admin/accounts/' + this.userId;
-                this.isMe = (this.me === true || this.currentUser.uuid === this.userId || this.currentUser.name === this.userId);
+            if (util.validateAccount(this)) {
                 this.getUserById({userId: this.userId, messages: this.messages, errors: this.errors});
                 this.getPolicyByUserId({userId: this.userId, messages: this.messages, errors: this.errors});
             }

src/account/profile/PolicyPage.vue

@@ -645,25 +645,7 @@
             }
         },
         created () {
-            this.me = this.$route.path.startsWith('/me/');
-            if (this.me) {
-                this.userId = this.currentUser.uuid;
-                this.linkPrefix = '/me';
-                this.getPolicyByUserId({userId: this.currentUser.uuid, messages: this.messages, errors: this.errors});
-
-            } else if (this.currentUser.admin !== true) {
-                console.warn('PolicyPage.created: /me requested but no currentUser, sending to home page');
-                this.$router.push('/');
-                return;
-
-            } else if (typeof this.$route.params.id === 'undefined' || this.$route.params.id === null) {
-                console.warn('PolicyPage.created: no id param found, sending to accounts page');
-                this.$router.push('/admin/accounts');
-                return;
-
-            } else {
-                this.userId = this.$route.params.id;
-                this.linkPrefix = '/admin/accounts/' + this.userId;
+            if (util.validateAccount(this)) {
                 this.getPolicyByUserId({userId: this.userId, messages: this.messages, errors: this.errors});
             }
             // console.log('PolicyPage.created: $route.params='+JSON.stringify(this.$route.query));

src/account/profile/ProfilePage.vue

@@ -10,6 +10,10 @@
             <hr/>
             <router-link :to="linkPrefix+'/keys'">{{messages.link_label_account_ssh_keys}}</router-link>
             <hr/>
+            <router-link :to="linkPrefix+'/payment'">{{messages.link_label_account_payments}}</router-link>
+            <hr/>
+            <router-link :to="linkPrefix+'/bills'">{{messages.link_label_account_bills}}</router-link>
+            <hr/>
         </div>
 
         <form @submit.prevent="handleSubmit">

src/account/profile/SshKeysPage.vue

@@ -147,33 +147,9 @@
                 this.timezone = this.detectedTimezone.timeZoneId;
             }
 
-            this.me = this.$route.path.startsWith('/me/');
-            if (this.me) {
-                this.linkPrefix = '/me';
-                if (this.currentUser === null) {
-                    console.warn('SshKeysPage.created: /me requested but no currentUser, sending to home page');
-                    this.$router.push('/');
-                    return;
-
-                } else {
-                    this.userId = this.currentUser.uuid;
-                }
-
-            } else if (this.currentUser.admin !== true) {
-                console.warn('SshKeysPage.created: not admin and path not /me, sending to /me ...');
-                this.$router.push('/me');
-                return;
-
-            } else if (typeof this.$route.params.id === 'undefined' || this.$route.params.id === null) {
-                console.warn('SshKeysPage.created: no id param found, sending to accounts page');
-                this.$router.push('/admin/accounts');
-                return;
-
-            } else {
-                this.userId = this.$route.params.id;
-                this.linkPrefix = '/admin/accounts/' + this.userId;
+            if (util.validateAccount(this)) {
+                this.listSshKeysByUserId({userId: this.userId, messages: this.messages, errors: this.errors});
             }
-            this.listSshKeysByUserId({userId: this.userId, messages: this.messages, errors: this.errors});
         }
     };
 </script>