mirror of https://github.com/rancher/dashboard.git
125 lines
2.9 KiB
Vue
125 lines
2.9 KiB
Vue
<script>
|
|
import LabeledInput from '@/components/form/LabeledInput';
|
|
import LabeledSelect from '@/components/form/LabeledSelect';
|
|
export default {
|
|
components: { LabeledInput, LabeledSelect },
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
certs: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
const defaultCert = {
|
|
label: this.t('ingress.certificates.defaultCertLabel'),
|
|
value: null,
|
|
};
|
|
const { hosts = [''], secretName = defaultCert.value } = this.value;
|
|
|
|
return {
|
|
defaultCert,
|
|
hosts,
|
|
secretName,
|
|
};
|
|
},
|
|
computed: {
|
|
certsWithDefault() {
|
|
return [this.defaultCert, ...this.certs];
|
|
},
|
|
},
|
|
methods: {
|
|
addHost(ev) {
|
|
ev.preventDefault();
|
|
this.hosts.push('');
|
|
this.update();
|
|
},
|
|
remove(ev, idx) {
|
|
ev.preventDefault();
|
|
this.hosts.splice(idx, 1);
|
|
this.update();
|
|
},
|
|
update() {
|
|
const out = { hosts: this.hosts };
|
|
|
|
if (this.secretName !== this.defaultCert) {
|
|
out.secretName = this.secretName;
|
|
}
|
|
this.$emit('input', out);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cert" @input="update">
|
|
<div class="row">
|
|
<div class="col span-6">
|
|
<LabeledSelect
|
|
:value="secretName"
|
|
:options="certsWithDefault"
|
|
:label="t('ingress.certificates.certificate.label')"
|
|
required
|
|
@input="
|
|
(e) => {
|
|
secretName = e;
|
|
update();
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="col span-5">
|
|
<div v-for="(host, i) in hosts" :key="i" class="row mb-10">
|
|
<div :style="{ 'margin-right': '0px' }" class="col span-12">
|
|
<LabeledInput
|
|
:value="host"
|
|
:label="t('ingress.certificates.host.label')"
|
|
:placeholder="t('ingress.certificates.host.placeholder')"
|
|
@input="(e) => $set(hosts, i, e)"
|
|
/>
|
|
</div>
|
|
<button
|
|
class="btn btn-sm role-link col"
|
|
style="line-height: 40px;"
|
|
@click="(e) => remove(e, i)"
|
|
>
|
|
{{ t("ingress.certificates.removeHost") }}
|
|
</button>
|
|
</div>
|
|
<button
|
|
:style="{ padding: '0px 0px 0px 5px' }"
|
|
class="bn btn-sm role-link"
|
|
@click="addHost"
|
|
>
|
|
{{ t("ingress.certificates.addHost") }}
|
|
</button>
|
|
</div>
|
|
<div class="col span-1">
|
|
<button class="btn role-link close" @click="$emit('remove')">
|
|
<i class="icon icon-2x icon-x" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.close {
|
|
float: right;
|
|
padding: 0px;
|
|
position: relative;
|
|
top: -10px;
|
|
right: -10px;
|
|
}
|
|
.cert:not(:last-of-type) {
|
|
padding-bottom: 10px;
|
|
margin-bottom: 30px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
</style>
|