@@ -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; | |||
}; | |||
} |
@@ -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)); | |||
} |
@@ -122,6 +122,7 @@ const actions = { | |||
const mutations = { | |||
refreshUser(state, user) { | |||
state.status = { loggedIn: (user !== null) }; | |||
state.user = user; | |||
}, | |||
loginRequest(state, user) { | |||
@@ -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 | |||
}; |
@@ -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 | |||
}; |
@@ -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 | |||
}; |
@@ -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 | |||
}; |
@@ -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 | |||
}; |
@@ -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 | |||
}; |
@@ -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 | |||
}; |
@@ -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> |
@@ -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> |
@@ -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' | |||
}), | |||
@@ -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> |