From ac8e492b4ef843071b0206ae724b975d21c64f99 Mon Sep 17 00:00:00 2001
From: Jonathan Cobb <jonathan@kyuss.org>
Date: Wed, 1 Jan 2020 18:23:49 -0500
Subject: [PATCH] refactor loading flags, start adding support for selecting
 cloud/region for new network

---
 src/_helpers/api-util.js            |  9 ++++
 src/_services/network.service.js    |  5 +++
 src/_store/account.module.js        |  1 +
 src/_store/accountPlans.module.js   | 28 +++++++-----
 src/_store/domains.module.js        | 24 ++++++----
 src/_store/footprints.module.js     | 22 +++++----
 src/_store/networks.module.js       | 55 +++++++++++++++++------
 src/_store/paymentMethods.module.js | 47 ++++++++++++--------
 src/_store/plans.module.js          | 28 +++++++-----
 src/_store/users.module.js          | 69 ++++++++++++++++++++---------
 src/account/NetworkPage.vue         |  6 +--
 src/account/NetworksPage.vue        |  6 +--
 src/account/NewNetworkPage.vue      | 52 ++++++++++++++++++----
 src/admin/AccountsPage.vue          |  7 +--
 14 files changed, 251 insertions(+), 108 deletions(-)

diff --git a/src/_helpers/api-util.js b/src/_helpers/api-util.js
index aa31100..fea0046 100644
--- a/src/_helpers/api-util.js
+++ b/src/_helpers/api-util.js
@@ -101,4 +101,13 @@ export function setValidationErrors(data, messages, errors) {
         }
         // todo: else add "global" error message for unrecognized/non-field error
     }
+}
+
+export function checkLoading(loadingArray) {
+    return function() {
+        for (const key in loadingArray) {
+            if (key === true) return true;
+        }
+        return false;
+    };
 }
\ No newline at end of file
diff --git a/src/_services/network.service.js b/src/_services/network.service.js
index b0a4099..6c0f993 100644
--- a/src/_services/network.service.js
+++ b/src/_services/network.service.js
@@ -13,3 +13,8 @@ function getAll(userId, messages, errors) {
 function getById(userId, networkId, messages, errors) {
     return fetch(`${config.apiUrl}/users/${userId}/networks/${networkId}`, getWithAuth()).then(handleCrudResponse(messages, errors));
 }
+
+function getNearestRegions(userId, footprint, messages, errors) {
+    const footprintParam = (typeof footprint === "undefined" || footprint === null || footprint === '') ? "" : `?footprint=${footprint}`;
+    return fetch(`${config.apiUrl}/me/regions/closest${footprintParam}`, getWithAuth()).then(handleCrudResponse(messages, errors));
+}
diff --git a/src/_store/account.module.js b/src/_store/account.module.js
index 4f63355..a159c40 100644
--- a/src/_store/account.module.js
+++ b/src/_store/account.module.js
@@ -122,6 +122,7 @@ const actions = {
 
 const mutations = {
     refreshUser(state, user) {
+        state.status = { loggedIn: (user !== null) };
         state.user = user;
     },
     loginRequest(state, user) {
diff --git a/src/_store/accountPlans.module.js b/src/_store/accountPlans.module.js
index 84e5abd..41ea07e 100644
--- a/src/_store/accountPlans.module.js
+++ b/src/_store/accountPlans.module.js
@@ -1,8 +1,9 @@
 import { accountPlanService } from '../_services';
 import { account } from '../_store/account.module';
+import { checkLoading } from "../_helpers";
 
 const state = {
-    loading: null,
+    loading: {plans: false, plan: false, deleting: false},
     error: null,
     accountPlans: null,
     accountPlan: null
@@ -42,47 +43,52 @@ const actions = {
 
 const mutations = {
     getAllRequest(state) {
-        state.loading = true;
+        state.loading.plans = true;
     },
     getAllSuccess(state, accountPlans) {
-        state.loading = false;
+        state.loading.plans = false;
         state.accountPlans = accountPlans;
     },
     getAllFailure(state, error) {
-        state.loading = false;
+        state.loading.plans = false;
         state.error = { error };
     },
     getByUuidRequest(state) {
-        state.loading = true;
+        state.loading.plan = true;
     },
     getByUuidSuccess(state, accountPlan) {
-        state.loading = false;
+        state.loading.plan = false;
         state.accountPlan = accountPlan;
     },
     getByUuidFailure(state, error) {
-        state.loading = false;
+        state.loading.plan = false;
         state.error = { error };
     },
     deleteRequest(state, id) {
-        state.loading = true;
+        state.loading.deleting = true;
     },
     deleteSuccess(state, id) {
-        state.loading = false;
+        state.loading.deleting = false;
         // remove deleted accountPlan from state
         if (state.accountPlans) {
             state.accountPlans = state.accountPlans.filter(accountPlan => accountPlan.uuid !== id)
         }
     },
     deleteFailure(state, { id, error }) {
-        state.loading = false;
+        state.loading.deleting = false;
         // remove 'deleting:true' property and add 'deleteError:[error]' property to accountPlan
         state.error = error;
     }
 };
 
+const getters = {
+    loading: checkLoading(state.loading)
+};
+
 export const accountPlans = {
     namespaced: true,
     state,
     actions,
-    mutations
+    mutations,
+    getters
 };
diff --git a/src/_store/domains.module.js b/src/_store/domains.module.js
index f837998..734c0a9 100644
--- a/src/_store/domains.module.js
+++ b/src/_store/domains.module.js
@@ -1,7 +1,10 @@
 import { domainService } from '../_services';
+import { checkLoading } from "../_helpers";
 
 const state = {
-    loading: null,
+    loading: {
+        domains: false, domain: false
+    },
     error: null,
     domains: null,
     domain: null
@@ -29,32 +32,37 @@ const actions = {
 
 const mutations = {
     getAllRequest(state) {
-        state.loading = true;
+        state.loading.domains = true;
     },
     getAllSuccess(state, domains) {
-        state.loading = false;
+        state.loading.domains = false;
         state.domains = domains;
     },
     getAllFailure(state, error) {
-        state.loading = false;
+        state.loading.domains = false;
         state.error = { error };
     },
     getByUuidRequest(state) {
-        state.loading = true;
+        state.loading.domain = true;
     },
     getByUuidSuccess(state, domain) {
-        state.loading = false;
+        state.loading.domain = false;
         state.domain = domain;
     },
     getByUuidFailure(state, error) {
-        state.loading = false;
+        state.loading.domain = false;
         state.error = { error };
     }
 };
 
+const getters = {
+    loading: checkLoading(state.loading)
+};
+
 export const domains = {
     namespaced: true,
     state,
     actions,
-    mutations
+    mutations,
+    getters
 };
diff --git a/src/_store/footprints.module.js b/src/_store/footprints.module.js
index 16560fa..659e335 100644
--- a/src/_store/footprints.module.js
+++ b/src/_store/footprints.module.js
@@ -1,7 +1,8 @@
 import { footprintService } from '../_services';
+import { checkLoading } from "../_helpers";
 
 const state = {
-    loading: null,
+    loading: { footprints: false, footprint: false },
     error: null,
     footprints: null,
     footprint: null
@@ -29,32 +30,37 @@ const actions = {
 
 const mutations = {
     getAllRequest(state) {
-        state.loading = true;
+        state.loading.footprints = true;
     },
     getAllSuccess(state, footprints) {
-        state.loading = false;
+        state.loading.footprints = false;
         state.footprints = footprints;
     },
     getAllFailure(state, error) {
-        state.loading = false;
+        state.loading.footprints = false;
         state.error = { error };
     },
     getByUuidRequest(state) {
-        state.loading = true;
+        state.loading.footprint = true;
     },
     getByUuidSuccess(state, footprint) {
-        state.loading = false;
+        state.loading.footprint = false;
         state.footprint = footprint;
     },
     getByUuidFailure(state, error) {
-        state.loading = false;
+        state.loading.footprint = false;
         state.error = { error };
     }
 };
 
+const getters = {
+    loading: checkLoading(state.loading)
+};
+
 export const footprints = {
     namespaced: true,
     state,
     actions,
-    mutations
+    mutations,
+    getters
 };
diff --git a/src/_store/networks.module.js b/src/_store/networks.module.js
index 9040317..b88ced8 100644
--- a/src/_store/networks.module.js
+++ b/src/_store/networks.module.js
@@ -1,12 +1,16 @@
 import { networkService } from '../_services';
 import { account } from '../_store/account.module';
+import { checkLoading } from "../_helpers";
 
 const state = {
-    loading: null,
+    loading: {
+        networks: false, network: false, deleting: false, nearestRegions: false
+    },
     creating: null,
     error: null,
     networks: null,
-    network: null
+    network: null,
+    nearestRegions: null
 };
 
 const actions = {
@@ -39,52 +43,77 @@ const actions = {
                 network => commit('deleteSuccess', network),
                 error => commit('deleteFailure', { id, error: error.toString() })
             );
-    }
+    },
+
+    getNearestRegions({ commit }, {footprint, messages, errors}) {
+        commit('getNearestRegionsRequest');
+        networkService.getNearestRegions(account.state.user.uuid, footprint, messages, errors)
+            .then(
+                regions => commit('getNearestRegionsSuccess', regions),
+                error => commit('getNearestRegionsFailure', error)
+            );
+    },
 };
 
 const mutations = {
     getAllRequest(state) {
-        state.loading = true;
+        state.loading.networks = true;
     },
     getAllSuccess(state, networks) {
-        state.loading = false;
+        state.loading.networks = false;
         state.networks = networks;
     },
     getAllFailure(state, error) {
-        state.loading = false;
+        state.loading.networks = false;
         state.error = { error };
     },
     getByUuidRequest(state) {
-        state.loading = true;
+        state.loading.network = true;
     },
     getByUuidSuccess(state, network) {
-        state.loading = false;
+        state.loading.network = false;
         state.network = network;
     },
     getByUuidFailure(state, error) {
-        state.loading = false;
+        state.loading.network = false;
         state.error = { error };
     },
     deleteRequest(state, id) {
-        state.loading = true;
+        state.loading.deleting = true;
     },
     deleteSuccess(state, id) {
-        state.loading = false;
+        state.loading.deleting = false;
         // remove deleted network from state
         if (state.networks) {
             state.networks = state.networks.filter(network => network.uuid !== id)
         }
     },
     deleteFailure(state, { id, error }) {
-        state.loading = false;
+        state.loading.deleting = false;
         // remove 'deleting:true' property and add 'deleteError:[error]' property to network
         state.error = error;
+    },
+    getNearestRegionsRequest(state) {
+        state.loading.nearestRegions = true;
+    },
+    getNearestRegionsSuccess(state, regions) {
+        state.loading.nearestRegions = false;
+        state.nearestRegions = regions;
+    },
+    getNearestRegionsFailure(state, error) {
+        state.loading.nearestRegions = false;
+        state.error = { error };
     }
 };
 
+const getters = {
+    loading: checkLoading(state.loading)
+};
+
 export const networks = {
     namespaced: true,
     state,
     actions,
-    mutations
+    mutations,
+    getters
 };
diff --git a/src/_store/paymentMethods.module.js b/src/_store/paymentMethods.module.js
index 96bcba3..3ad02b6 100644
--- a/src/_store/paymentMethods.module.js
+++ b/src/_store/paymentMethods.module.js
@@ -1,7 +1,12 @@
-import {footprintService, paymentMethodService} from '../_services';
+import { paymentMethodService } from '../_services';
+import { checkLoading } from "../_helpers";
 
 const state = {
-    loading: null,
+    loading: {
+        paymentMethods: false, paymentMethod: false,
+        accountPaymentMethods: false, accountPaymentMethod: false,
+        adding: false
+    },
     paymentStatus: {},
     error: null,
     errors: null,
@@ -69,25 +74,25 @@ const actions = {
 
 const mutations = {
     getAllRequest(state) {
-        state.loading = true;
+        state.loading.paymentMethods = true;
     },
     getAllSuccess(state, paymentMethods) {
-        state.loading = false;
+        state.loading.paymentMethods = false;
         state.paymentMethods = paymentMethods;
     },
     getAllFailure(state, error) {
-        state.loading = false;
+        state.loading.paymentMethods = false;
         state.error = { error };
     },
     getByUuidRequest(state) {
-        state.loading = true;
+        state.loading.paymentMethod = true;
     },
     getByUuidSuccess(state, paymentMethod) {
-        state.loading = false;
+        state.loading.paymentMethod = false;
         state.paymentMethod = paymentMethod;
     },
     getByUuidFailure(state, error) {
-        state.loading = false;
+        state.loading.paymentMethod = false;
         state.error = { error };
     },
 
@@ -98,44 +103,43 @@ const mutations = {
     },
 
     getAllByAccountRequest(state) {
-        state.loading = true;
+        state.loading.accountPaymentMethods = true;
     },
     getAllByAccountSuccess(state, paymentMethods) {
-        state.loading = false;
+        state.loading.accountPaymentMethods = false;
         state.accountPaymentMethods = paymentMethods;
     },
     getAllByAccountFailure(state, error) {
-        state.loading = false;
+        state.loading.accountPaymentMethods = false;
         state.error = { error };
     },
 
     getByAccountAndIdRequest(state) {
-        state.loading = true;
+        state.loading.accountPaymentMethod = true;
     },
     getByAccountAndIdSuccess(state, paymentMethod) {
-        state.loading = false;
+        state.loading.accountPaymentMethod = false;
         state.accountPaymentMethod = paymentMethod;
     },
     getByAccountAndIdFailure(state, error) {
-        state.loading = false;
+        state.loading.accountPaymentMethod = false;
         state.error = { error };
     },
 
     addAccountPaymentMethodRequest(state) {
+        state.loading.adding = true;
         state.errors = null;
         state.paymentStatus = { addingPaymentMethod: true };
-        state.loading = true;
     },
     addAccountPaymentMethodSuccess(state, {paymentMethod, originalPaymentMethod}) {
+        state.loading.adding = false;
         state.paymentStatus = { addedPaymentMethod: true };
-        state.loading = false;
         state.accountPaymentMethod = paymentMethod;
         state.paymentInfo = originalPaymentMethod.paymentInfo;
     },
     addAccountPaymentMethodFailure(state, errors) {
-        console.log("addAccountPaymentMethodFailure: errors="+JSON.stringify(errors));
+        state.loading.adding = false;
         state.paymentStatus = {};
-        state.loading = false;
         state.errors = errors;
     },
 
@@ -144,9 +148,14 @@ const mutations = {
     }
 };
 
+const getters = {
+    loading: checkLoading(state.loading)
+};
+
 export const paymentMethods = {
     namespaced: true,
     state,
     actions,
-    mutations
+    mutations,
+    getters
 };
\ No newline at end of file
diff --git a/src/_store/plans.module.js b/src/_store/plans.module.js
index c37bee2..02f1bbd 100644
--- a/src/_store/plans.module.js
+++ b/src/_store/plans.module.js
@@ -1,7 +1,8 @@
 import { planService } from '../_services';
+import { checkLoading } from "../_helpers";
 
 const state = {
-    loading: null,
+    loading: {plans: false, plan: false, deleting: false},
     error: null,
     plans: null,
     plan: null
@@ -38,47 +39,52 @@ const actions = {
 
 const mutations = {
     getAllRequest(state) {
-        state.loading = true;
+        state.loading.plans = true;
     },
     getAllSuccess(state, plans) {
-        state.loading = false;
+        state.loading.plans = false;
         state.plans = plans;
     },
     getAllFailure(state, error) {
-        state.loading = false;
+        state.loading.plans = false;
         state.error = { error };
     },
     getByUuidRequest(state) {
-        state.loading = true;
+        state.loading.plan = true;
     },
     getByUuidSuccess(state, plan) {
-        state.loading = false;
+        state.loading.plan = false;
         state.plan = plan;
     },
     getByUuidFailure(state, error) {
-        state.loading = false;
+        state.loading.plan = false;
         state.error = { error };
     },
     deleteRequest(state, id) {
-        state.loading = true;
+        state.loading.deleting = true;
     },
     deleteSuccess(state, id) {
-        state.loading = false;
+        state.loading.deleting = false;
         // remove deleted plan from state
         if (state.plans) {
             state.plans = state.plans.filter(plan => plan.uuid !== id)
         }
     },
     deleteFailure(state, { id, error }) {
-        state.loading = false;
+        state.loading.deleting = false;
         // remove 'deleting:true' property and add 'deleteError:[error]' property to user
         state.error = error;
     }
 };
 
+const getters = {
+    loading: checkLoading(state.loading)
+};
+
 export const plans = {
     namespaced: true,
     state,
     actions,
-    mutations
+    mutations,
+    getters
 };
diff --git a/src/_store/users.module.js b/src/_store/users.module.js
index 491a1b5..bf0d652 100644
--- a/src/_store/users.module.js
+++ b/src/_store/users.module.js
@@ -1,11 +1,16 @@
 import { userService } from '../_services';
 import { account } from '../_store/account.module';
+import { checkLoading } from "../_helpers";
 
 const state = {
-    all: {},
+    loading: {
+        users: false, user: false, updating: false, deleting: false,
+        policy: false, updatingPolicy: false, addPolicyContact: false, removePolicyContact: false
+    },
+    errors: {},
+    users: null,
     user: null,
     policy: {},
-    policyStatus: {},
     contact: null,
     authenticator: {}
 };
@@ -120,53 +125,61 @@ const actions = {
 
 const mutations = {
     getAllRequest(state) {
-        state.all = { loading: true };
+        state.loading.users = true;
     },
     getAllSuccess(state, users) {
-        state.all = { items: users };
+        state.loading.users = false;
+        state.users = users;
     },
     getAllFailure(state, error) {
-        state.all = { error };
+        state.loading.users = false;
+        state.errors.all = error;
     },
 
     getByUuidRequest(state) {
-        state.user = { loading: true };
+        state.loading.user = true;
     },
     getByUuidSuccess(state, user) {
+        state.loading.user = false;
         state.user = user;
     },
     getByUuidFailure(state, error) {
-        state.user = { error };
+        state.loading.user = false;
+        state.errors.user = error;
     },
 
     getPolicyByUuidRequest(state) {
+        state.loading.policy = true;
         state.user = { loading: true };
     },
     getPolicyByUuidSuccess(state, policy) {
+        state.loading.policy = false;
         state.policy = policy;
         setAuthenticator(policy);
     },
     getPolicyByUuidFailure(state, error) {
-        state.policy = { error };
+        state.loading.policy = false;
+        state.errors.policy = error;
     },
 
     updatePolicyByUuidRequest(state) {
-        state.policyStatus = { updating: true };
+        state.loading.updatingPolicy = true;
     },
     updatePolicyByUuidSuccess(state, policy) {
-        state.policyStatus = {};
+        state.loading.updatingPolicy = false;
         state.policy = policy;
         setAuthenticator(policy);
     },
     updatePolicyByUuidFailure(state, error) {
-        state.policyStatus = {};
+        state.loading.updatingPolicy = false;
         state.policy = { error };
     },
 
     addPolicyContactByUuidRequest(state) {
-        state.user = { loading: true };
+        state.loading.addPolicyContact = true;
     },
     addPolicyContactByUuidSuccess(state, contact) {
+        state.loading.addPolicyContact = false;
         state.contact = contact;
         if (isAuthenticator(contact)) {
             state.authenticator = JSON.parse(contact.info);
@@ -174,46 +187,55 @@ const mutations = {
         }
     },
     addPolicyContactByUuidFailure(state, error) {
-        state.contact = { error };
+        state.loading.addPolicyContact = false;
+        state.errors.contact = error;
     },
 
     removePolicyContactByUuidRequest(state) {
-        state.user = { loading: true };
+        state.loading.removePolicyContact = true;
     },
     removePolicyContactByUuidSuccess(state, policy) {
+        state.loading.removePolicyContact = false;
         state.policy = policy;
     },
     removePolicyContactByUuidFailure(state, error) {
-        state.policy = { error };
+        state.loading.removePolicyContact = false;
+        state.errors.policy = error;
     },
 
     updateRequest(state, user) {
-        // todo: add 'updating:true' property to user being updated
+        state.loading.updating = true;
     },
     updateSuccess(state, user) {
+        state.loading.updating = false;
         user.token = account.state.user.token;  // preserve token
         state.user = account.state.user = user;
         localStorage.setItem('user', JSON.stringify(user));
     },
     updateFailure(state, { id, error }) {
-        // todo: remove 'updating:true' property and add 'updateError:[error]' property to user
+        state.loading.updating = false;
+        state.errors.update = error;
     },
 
     deleteRequest(state, id) {
+        // todo: use proper delete API
         // add 'deleting:true' property to user being deleted
-        state.all.items = state.all.items.map(user =>
+        state.loading.deleting = true;
+        state.users = state.users.map(user =>
             user.uuid === id
                 ? { ...user, deleting: true }
                 : user
         )
     },
     deleteSuccess(state, id) {
+        state.loading.deleting = false;
         // remove deleted user from state
-        state.all.items = state.all.items.filter(user => user.uuid !== id)
+        state.users = state.users.filter(user => user.uuid !== id)
     },
     deleteFailure(state, { id, error }) {
+        state.loading.deleting = false;
         // remove 'deleting:true' property and add 'deleteError:[error]' property to user 
-        state.all.items = state.items.map(user => {
+        state.users = state.users.map(user => {
             if (user.uuid === id) {
                 // make copy of user without 'deleting:true' property
                 const { deleting, ...userCopy } = user;
@@ -226,9 +248,14 @@ const mutations = {
     }
 };
 
+const getters = {
+    loading: checkLoading(state.loading)
+};
+
 export const users = {
     namespaced: true,
     state,
     actions,
-    mutations
+    mutations,
+    getters
 };
diff --git a/src/account/NetworkPage.vue b/src/account/NetworkPage.vue
index ab91e5f..debef5b 100644
--- a/src/account/NetworkPage.vue
+++ b/src/account/NetworkPage.vue
@@ -5,12 +5,11 @@
 </template>
 
 <script>
-    import { mapState, mapActions } from 'vuex'
+    import { mapState, mapActions, mapGetters } from 'vuex'
 
     export default {
         computed: {
             ...mapState({
-                loading: state => state.loading,
                 network: state => state.network,
                 error: state => state.error
             })
@@ -22,7 +21,8 @@
             ...mapActions('networks', {
                 getById: 'getByUuid',
                 deleteNetwork: 'delete'
-            })
+            }),
+            ...mapGetters('networks', ['loading'])
         }
     };
 </script>
\ No newline at end of file
diff --git a/src/account/NetworksPage.vue b/src/account/NetworksPage.vue
index 4f4bb9a..e042b5e 100644
--- a/src/account/NetworksPage.vue
+++ b/src/account/NetworksPage.vue
@@ -41,12 +41,11 @@
 </template>
 
 <script>
-    import { mapState, mapActions } from 'vuex'
+    import { mapState, mapActions, mapGetters } from 'vuex'
 
     export default {
         computed: {
             ...mapState({
-                loading: state => state.networks.loading,
                 networks: state => state.networks.networks
             }),
             ...mapState('system', ['messages'])
@@ -58,7 +57,8 @@
             ...mapActions('networks', {
                 getAllNetworks: 'getAll',
                 deleteNetwork: 'delete'
-            })
+            }),
+            ...mapGetters('networks', ['loading'])
         }
     };
 </script>
\ No newline at end of file
diff --git a/src/account/NewNetworkPage.vue b/src/account/NewNetworkPage.vue
index 52fd369..76be6e0 100644
--- a/src/account/NewNetworkPage.vue
+++ b/src/account/NewNetworkPage.vue
@@ -100,6 +100,24 @@
             </div>
             <hr/>
 
+            <!-- cloud+region -->
+            <div v-if="customize.region === true" class="form-group">
+                <label htmlFor="region">{{messages.field_label_region}}</label>
+                <v-select v-validate="'required'" v-if="regionObjects" :options="regionObjects" :reduce="region => region.cloud+':'+region.internalName" label="name" :value="cloudRegion" type="text" v-model="cloudRegion" name="region" class="form-control" :class="{ 'is-invalid': submitted && errors.has('region') }"></v-select>
+                <div v-if="submitted && errors.has('region')" class="invalid-feedback">{{ errors.first('region') }}</div>
+                <button @click="customize.region = false">{{messages.button_label_use_default}}</button>
+            </div>
+            <div v-if="customize.region === false">
+                {{messages.field_label_region}}:
+                <span v-if="defaults.region">{{defaults.region.name}}</span>
+                <span v-else>{{messages.message_auto_detecting}}</span>
+                <button @click="customize.region = true">{{messages.button_label_customize}}</button>
+            </div>
+            <div>
+                {{cloudRegion.name}}
+            </div>
+            <hr/>
+
             <!-- footprint -->
             <div v-if="customize.footprint === true" class="form-group">
                 <label htmlFor="footprint">{{messages.field_label_footprint}}</label>
@@ -121,7 +139,7 @@
             <div class="form-group">
                 <label htmlFor="paymentMethod">{{messages.field_label_paymentMethod}}</label>
                 <span v-for="pm in paymentMethods">
-                    <button class="btn btn-primary" :disabled="status.creating" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
+                    <button class="btn btn-primary" :disabled="status.loading" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
                 </span>
             </div>
 
@@ -136,8 +154,8 @@
             <hr/>
 
             <div class="form-group">
-                <button class="btn btn-primary" :disabled="status.creating || !isComplete">{{messages.button_label_create_new_network}}</button>
-                <img v-show="status.creating" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <button class="btn btn-primary" :disabled="status.loading || !isComplete">{{messages.button_label_create_new_network}}</button>
+                <img v-show="status.loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
             </div>
         </form>
         </div>
@@ -145,7 +163,7 @@
 </template>
 
 <script>
-    import { mapState, mapActions } from 'vuex'
+    import { mapState, mapActions, mapGetters } from 'vuex'
     import { currentUser } from '../_helpers'
 
     // convenience methods
@@ -178,19 +196,22 @@
                         paymentInfo: null
                     }
                 },
+                cloudRegion: '',
                 customize: {
                     domain: false,
                     locale: false,
                     timezone: false,
                     plan: false,
-                    footprint: false
+                    footprint: false,
+                    region: false
                 },
                 defaults: {
                     domain: '',
                     locale: '',
                     timezone: '',
                     plan: 'bubble',
-                    footprint: 'Worldwide'
+                    footprint: 'Worldwide',
+                    region: ''
                 },
                 user: currentUser(),
                 submitted: false,
@@ -208,8 +229,8 @@
             ...mapState('plans', ['plans']),
             ...mapState('footprints', ['footprints']),
             ...mapState('paymentMethods', ['paymentMethods', 'paymentMethod', 'paymentInfo']),
+            ...mapState('networks', ['nearestRegions']),
             ...mapState('networks', {
-                creating: state => state.loading,
                 error: state => state.error
             }),
             ...mapState('users', ['policy']),
@@ -259,6 +280,19 @@
                     }
                 }
                 return fp_array;
+            },
+            regionObjects: function () {
+                const regions_array = [];
+                if (this.footprints) {
+                    for (let i = 0; i < this.footprints.length; i++) {
+                        fp_array.push({
+                            ...this.footprints[i],
+                            localName: this.messages['footprint_name_' + this.footprints[i].name],
+                            description: this.messages['footprint_description_' + this.footprints[i].name]
+                        })
+                    }
+                }
+                return regions_array;
             }
         },
         methods: {
@@ -266,8 +300,10 @@
             ...mapActions('account', ['approveAction', 'resendVerificationCode']),
             ...mapActions('system', ['detectTimezone', 'detectLocale']),
             ...mapActions('networks', {
-                createNewNetwork: 'create'
+                createNewNetwork: 'create',
+                getNearestRegions: 'getNearestRegions'
             }),
+            ...mapGetters('networks', ['loading']),
             ...mapActions('domains', {
                 loadDomains: 'getAll'
             }),
diff --git a/src/admin/AccountsPage.vue b/src/admin/AccountsPage.vue
index 641cd80..3a3be8e 100644
--- a/src/admin/AccountsPage.vue
+++ b/src/admin/AccountsPage.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-    import { mapState, mapActions } from 'vuex'
+    import { mapState, mapActions, mapGetters } from 'vuex'
 
     export default {
         computed: {
             ...mapState({
                 account: state => state.account,
-                users: state => state.users.all
+                users: state => state.users
             })
         },
         created () {
@@ -36,7 +36,8 @@
             ...mapActions('users', {
                 getAllUsers: 'getAll',
                 deleteUser: 'delete'
-            })
+            }),
+            ...mapGetters('users', ['loading'])
         }
     };
 </script>
\ No newline at end of file