dashboard/cloud-credential/azure.vue

122 lines
3.1 KiB
Vue

<script>
import CreateEditView from '@/mixins/create-edit-view';
import LabeledInput from '@/components/form/LabeledInput';
import { azureEnvironments } from '@/machine-config/azure';
import LabeledSelect from '@/components/form/LabeledSelect';
export default {
components: { LabeledInput, LabeledSelect },
mixins: [CreateEditView],
data() {
return { azureEnvironments };
},
watch: {
'value.decodedData.clientId'(neu) {
this.$emit('validationChanged', !!neu);
},
'value.decodedData.clientSecret'(neu) {
this.$emit('validationChanged', !!neu);
},
'value.decodedData.subscriptionId'(neu) {
this.$emit('validationChanged', !!neu);
},
'value.decodedData.tenantId'(neu) {
this.$emit('validationChanged', !!neu);
},
'value.decodedData.environment'(neu) {
this.$emit('validationChanged', !!neu);
},
},
methods: {
async test() {
const {
clientId,
clientSecret,
subscriptionId,
tenantId,
} = this.value.decodedData;
try {
await this.$store.dispatch('management/request', {
url: '/meta/aksLocations',
method: 'POST',
data: {
clientId,
clientSecret,
subscriptionId,
tenantId,
},
});
return true;
} catch (e) {
return false;
}
},
},
};
</script>
<template>
<section>
<div class="row mb-10">
<div class="col span-6">
<LabeledInput
:value="value.decodedData.tenantId"
label-key="cluster.credential.azure.tenantId.label"
type="text"
:mode="mode"
@input="value.setData('tenantId', $event)"
/>
</div>
<div class="col span-6">
<LabeledInput
:value="value.decodedData.subscriptionId"
label-key="cluster.credential.azure.subscriptionId.label"
type="text"
:mode="mode"
@input="value.setData('subscriptionId', $event)"
/>
</div>
</div>
<div class="row mb-10">
<div class="col span-6">
<LabeledInput
:value="value.decodedData.clientId"
label-key="cluster.credential.azure.clientId.label"
type="text"
:mode="mode"
@input="value.setData('clientId', $event)"
/>
</div>
<div class="col span-6">
<LabeledInput
:value="value.decodedData.clientSecret"
label-key="cluster.credential.azure.clientSecret.label"
type="password"
:mode="mode"
@input="value.setData('clientSecret', $event)"
/>
</div>
</div>
<div class="row mb-10">
<div class="col span-6">
<LabeledSelect
:value="value.decodedData.environment"
:mode="mode"
:options="azureEnvironments"
option-key="value"
option-label="value"
:searchable="false"
:required="true"
:label="t('cluster.credential.azure.environment.label')"
@input="value.setData('environment', $event)"
/>
</div>
</div>
</section>
</template>