Return on error in activation view
This commit is contained in:
Johannes Zellner
330
dashboard/src/components/DomainProviderForm.vue
Normal file
330
dashboard/src/components/DomainProviderForm.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<script setup>
|
||||
|
||||
import { TextInput, FormGroup, Checkbox } from 'pankow';
|
||||
import { ENDPOINTS_OVH } from '../constants.js';
|
||||
|
||||
defineProps({
|
||||
domain: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const provider = defineModel('provider');
|
||||
const dnsConfig = defineModel('dnsConfig');
|
||||
const tlsProvider = defineModel('tlsProvider');
|
||||
|
||||
// keep in sync with setup.js
|
||||
const domainProviders = [
|
||||
{ name: 'AWS Route53', value: 'route53' },
|
||||
{ name: 'Bunny', value: 'bunny' },
|
||||
{ name: 'Cloudflare', value: 'cloudflare' },
|
||||
{ name: 'deSEC', value: 'desec' },
|
||||
{ name: 'DigitalOcean', value: 'digitalocean' },
|
||||
{ name: 'DNSimple', value: 'dnsimple' },
|
||||
{ name: 'Gandi LiveDNS', value: 'gandi' },
|
||||
{ name: 'GoDaddy', value: 'godaddy' },
|
||||
{ name: 'Google Cloud DNS', value: 'gcdns' },
|
||||
{ name: 'Hetzner', value: 'hetzner' },
|
||||
{ name: 'INWX', value: 'inwx' },
|
||||
{ name: 'Linode', value: 'linode' },
|
||||
{ name: 'Name.com', value: 'namecom' },
|
||||
{ name: 'Namecheap', value: 'namecheap' },
|
||||
{ name: 'Netcup', value: 'netcup' },
|
||||
{ name: 'OVH', value: 'ovh' },
|
||||
{ name: 'Porkbun', value: 'porkbun' },
|
||||
{ name: 'Vultr', value: 'vultr' },
|
||||
{ name: 'Wildcard', value: 'wildcard' },
|
||||
{ name: 'Manual (not recommended)', value: 'manual' },
|
||||
{ name: 'No-op (only for development)', value: 'noop' }
|
||||
];
|
||||
|
||||
function needsPort80(dnsProvider, tlsProvider) {
|
||||
return ((dnsProvider === 'manual' || dnsProvider === 'noop' || dnsProvider === 'wildcard') &&
|
||||
(tlsProvider === 'letsencrypt-prod' || tlsProvider === 'letsencrypt-staging'));
|
||||
}
|
||||
|
||||
function setDefaultTlsProvider() {
|
||||
const dnsProvider = provider.value;
|
||||
// wildcard LE won't work without automated DNS
|
||||
if (dnsProvider === 'manual' || dnsProvider === 'noop' || dnsProvider === 'wildcard') {
|
||||
tlsProvider.value = 'letsencrypt-prod';
|
||||
} else {
|
||||
tlsProvider.value = 'letsencrypt-prod-wildcard';
|
||||
}
|
||||
}
|
||||
|
||||
function onGcdnsFileInputChange(event) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (result) {
|
||||
if (!result.target || !result.target.result) return console.error('Unable to read local file');
|
||||
const serviceAccount = JSON.parse(result.target.result);
|
||||
dnsConfig.value.projectId = serviceAccount.project_id;
|
||||
dnsConfig.value.credentials = {
|
||||
client_email: serviceAccount.client_email,
|
||||
private_key: serviceAccount.private_key,
|
||||
};
|
||||
};
|
||||
reader.readAsText(event.target.files[0]);
|
||||
}
|
||||
|
||||
// TODO clear non related fields based on provider when it changes
|
||||
// if (provider.value === 'route53') {
|
||||
// config.accessKeyId = dnsConfig.value.accessKeyId;
|
||||
// config.secretAccessKey = dnsConfig.value.secretAccessKey;
|
||||
// } else if (provider.value === 'gcdns') {
|
||||
// config.projectId = dnsConfig.value.gcdnsProjectId;
|
||||
// config.credentials = {
|
||||
// client_email: dnsConfig.value.gcdnsClientEmail,
|
||||
// private_key: dnsConfig.value.gcdnsPrivateKey,
|
||||
// };
|
||||
// } else if (provider.value === 'digitalocean') {
|
||||
// config.token = dnsConfig.value.digitalOceanToken;
|
||||
// } else if (provider.value === 'linode') {
|
||||
// config.token = dnsConfig.value.linodeToken;
|
||||
// } else if (provider.value === 'bunny') {
|
||||
// config.accessKey = dnsConfig.value.bunnyAccessKey;
|
||||
// } else if (provider.value === 'dnsimple') {
|
||||
// config.accessToken = dnsConfig.value.dnsimpleAccessToken;
|
||||
// } else if (provider.value === 'hetzner') {
|
||||
// config.token = dnsConfig.value.hetznerToken;
|
||||
// } else if (provider.value === 'vultr') {
|
||||
// config.token = dnsConfig.value.vultrToken;
|
||||
// } else if (provider.value === 'desec') {
|
||||
// config.token = dnsConfig.value.deSecToken;
|
||||
// } else if (provider.value === 'gandi') {
|
||||
// config.token = dnsConfig.value.gandiApiKey;
|
||||
// config.tokenType = dnsConfig.value.gandiTokenType;
|
||||
// } else if (provider.value === 'godaddy') {
|
||||
// config.apiKey = dnsConfig.value.godaddyApiKey;
|
||||
// config.apiSecret = dnsConfig.value.godaddyApiSecret;
|
||||
// } else if (provider.value === 'cloudflare') {
|
||||
// config.token = dnsConfig.value.cloudflareToken;
|
||||
// config.email = dnsConfig.value.cloudflareEmail;
|
||||
// config.tokenType = dnsConfig.value.cloudflareTokenType;
|
||||
// config.defaultProxyStatus = dnsConfig.value.cloudflareDefaultProxyStatus;
|
||||
// } else if (provider.value === 'namecom') {
|
||||
// config.token = dnsConfig.value.nameComToken;
|
||||
// config.username = dnsConfig.value.nameComUsername;
|
||||
// } else if (provider.value === 'namecheap') {
|
||||
// config.token = dnsConfig.value.namecheapApiKey;
|
||||
// config.username = dnsConfig.value.namecheapUsername;
|
||||
// } else if (provider.value === 'inwx') {
|
||||
// config.username = dnsConfig.value.inwxUsername;
|
||||
// config.password = dnsConfig.value.inwxPassword;
|
||||
// } else if (provider.value === 'netcup') {
|
||||
// config.customerNumber = dnsConfig.value.netcupCustomerNumber;
|
||||
// config.apiKey = dnsConfig.value.netcupApiKey;
|
||||
// config.apiPassword = dnsConfig.value.netcupApiPassword;
|
||||
// } else if (provider.value === 'ovh') {
|
||||
// config.endpoint = dnsConfig.value.ovhEndpoint;
|
||||
// config.consumerKey = dnsConfig.value.ovhConsumerKey;
|
||||
// config.appKey = dnsConfig.value.ovhAppKey;
|
||||
// config.appSecret = dnsConfig.value.ovhAppSecret;
|
||||
// } else if (provider.value === 'porkbun') {
|
||||
// config.apikey = dnsConfig.value.porkbunApikey;
|
||||
// config.secretapikey = dnsConfig.value.porkbunSecretapikey;
|
||||
// }
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<FormGroup>
|
||||
<label for="providerInput">{{ $t('domains.domainDialog.provider') }} <sup><a href="https://docs.cloudron.io/domains/#dns-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
|
||||
<select id="providerInput" v-model="provider" @change="setDefaultTlsProvider()" required>
|
||||
<option v-for="p in domainProviders" :value="p.value" :key="p.value">{{ p.name }}</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
|
||||
<!-- Route53 -->
|
||||
<FormGroup v-if="provider === 'route53'">
|
||||
<label for="accessKeyIdInput">{{ $t('domains.domainDialog.route53AccessKeyId') }}</label>
|
||||
<TextInput id="accessKeyIdInput" v-model="dnsConfig.accessKeyId" minlength="16" maxlength="32" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'route53'">
|
||||
<label for="secretAccessKeyInput">{{ $t('domains.domainDialog.route53SecretAccessKey') }}</label>
|
||||
<TextInput id="secretAccessKeyInput" v-model="dnsConfig.secretAccessKey" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Google Cloud DNS -->
|
||||
<FormGroup v-if="provider === 'gcdns'">
|
||||
<label class="control-label">{{ $t('domains.domainDialog.gcdnsServiceAccountKey') }}</label>
|
||||
<div class="input-group">
|
||||
<input type="file" id="gcdnsKeyFileInput" style="display:none" @change="onGcdnsFileInputChange"/>
|
||||
<input type="text" class="form-control" placeholder="Service Account Key" v-model="dnsConfig.projectId" onclick="getElementById('gcdnsKeyFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'gcdns'">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-upload" onclick="getElementById('gcdnsKeyFileInput').click();"></i>
|
||||
</span>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
<!-- DigitalOcean -->
|
||||
<FormGroup v-if="provider === 'digitalocean'">
|
||||
<label for="digitalOceanTokenInput">{{ $t('domains.domainDialog.digitalOceanToken') }}</label>
|
||||
<TextInput id="digitalOceanTokenInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Gandi -->
|
||||
<FormGroup v-if="provider === 'gandi'">
|
||||
<label for="gandiTokenTypeInput">{{ $t('domains.domainDialog.gandiTokenType') }}</label>
|
||||
<select id="gandiTokenTypeInput" v-model="dnsConfig.tokenType">
|
||||
<option value="ApiKey">{{ $t('domains.domainDialog.gandiTokenTypeApiKey') }}</option>
|
||||
<option value="PAT">{{ $t('domains.domainDialog.gandiTokenTypePAT') }}</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'gandi'">
|
||||
<label for="gandiApiKeyInput">{{ $t('domains.domainDialog.gandiApiKey') }}</label>
|
||||
<TextInput id="gandiApiKeyInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- GoDaddy -->
|
||||
<FormGroup v-if="provider === 'godaddy'">
|
||||
<label for="godaddyApiKeyInput">{{ $t('domains.domainDialog.goDaddyApiKey') }}</label>
|
||||
<TextInput id="godaddyApiKeyInput" v-model="dnsConfig.apiKey" minlength="1" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'godaddy'">
|
||||
<label for="godaddyApiSecretInput">{{ $t('domains.domainDialog.goDaddyApiSecret') }}</label>
|
||||
<TextInput for="godaddyApiSecretInput" v-model="dnsConfig.apiSecret" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Netcup -->
|
||||
<FormGroup v-if="provider === 'netcup'">
|
||||
<label for="netcupCustomerNumberInput">{{ $t('domains.domainDialog.netcupCustomerNumber') }}</label>
|
||||
<TextInput id="netcupCustomerNumberInput" v-model="dnsConfig.customerNumber" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'netcup'">
|
||||
<label for="netcupApiKeyInput">{{ $t('domains.domainDialog.netcupApiKey') }}</label>
|
||||
<TextInput id="netcupApiKeyInput" v-model="dnsConfig.apiKey" minlength="1" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'netcup'">
|
||||
<label for="netcupApiPasswordInput">{{ $t('domains.domainDialog.netcupApiPassword') }}</label>
|
||||
<TextInput id="netcupApiPasswordInput" v-model="dnsConfig.apiPassword" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- OVH -->
|
||||
<FormGroup v-if="provider === 'ovh'">
|
||||
<label for="ovhEndpointInput">{{ $t('domains.domainDialog.ovhEndpoint') }}</label>
|
||||
<select id="ovhEndpointInput" v-model="dnsConfig.endpoint">
|
||||
<option v-for="endpoint in ENDPOINTS_OVH" :value="endpoint.value" :key="endpoint.value">{{ endpoint.name }}</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'ovh'">
|
||||
<label for="ovhConsumerKeyInput">{{ $t('domains.domainDialog.ovhConsumerKey') }}</label>
|
||||
<TextInput id="ovhConsumerKeyInput" v-model="dnsConfig.consumerKey" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'ovh'">
|
||||
<label for="ovhAppKeyInput">{{ $t('domains.domainDialog.ovhAppKey') }}</label>
|
||||
<TextInput id="ovhAppKeyInput" v-model="dnsConfig.appKey" minlength="1" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'ovh'">
|
||||
<label for="ovhAppSecretInput">{{ $t('domains.domainDialog.ovhAppSecret') }}</label>
|
||||
<TextInput id="ovhAppSecretInput" v-model="dnsConfig.appSecret" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Porkbun -->
|
||||
<FormGroup v-if="provider === 'porkbun'">
|
||||
<label for="porkbunApikeyInput">{{ $t('domains.domainDialog.porkbunApikey') }}</label>
|
||||
<TextInput id="porkbunApikeyInput" v-model="dnsConfig.apikey" minlength="1" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'porkbun'">
|
||||
<label for="porkbunSecretapikeyInput">{{ $t('domains.domainDialog.porkbunSecretapikey') }}</label>
|
||||
<TextInput id="porkbunSecretapikeyInput" v-model="dnsConfig.secretapikey" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Cloudflare -->
|
||||
<FormGroup v-if="provider === 'cloudflare'">
|
||||
<label for="cloudflareTokenTypeInput">{{ $t('domains.domainDialog.cloudflareTokenType') }}</label>
|
||||
<select id="cloudflareTokenTypeInput" v-model="dnsConfig.tokenType">
|
||||
<option value="GlobalApiKey">{{ $t('domains.domainDialog.cloudflareTokenTypeGlobalApiKey') }}</option>
|
||||
<option value="ApiToken">{{ $t('domains.domainDialog.cloudflareTokenTypeApiToken') }}</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'cloudflare'">
|
||||
<label for="cloudflareTokenInput" v-show="dnsConfig.tokenType === 'GlobalApiKey'">{{ $t('domains.domainDialog.cloudflareTokenTypeGlobalApiKey') }}</label>
|
||||
<label for="cloudflareTokenInput" v-show="dnsConfig.tokenType === 'ApiToken'">{{ $t('domains.domainDialog.cloudflareTokenTypeApiToken') }}</label>
|
||||
<TextInput id="cloudflareTokenInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'cloudflare' && dnsConfig.tokenType === 'GlobalApiKey'">
|
||||
<label for="cloudflareEmailInput">{{ $t('domains.domainDialog.cloudflareEmail') }}</label>
|
||||
<TextInput id="cloudflareEmailInput" type="email" v-model="dnsConfig.email" :required="dnsConfig.tokenType === 'GlobalApiKey'" />
|
||||
</FormGroup>
|
||||
<div v-if="provider === 'cloudflare'">
|
||||
<Checkbox v-model="dnsConfig.defaultProxyStatus" :label="$t('domains.domainDialog.cloudflareDefaultProxyStatus')" />
|
||||
<sup><a href="https://docs.cloudron.io/domains/#cloudflare-dns" class="help" target="_blank" tabIndex="-1"><i class="fa fa-question-circle"></i></a></sup>
|
||||
</div>
|
||||
|
||||
<!-- Linode -->
|
||||
<FormGroup v-if="provider === 'linode'">
|
||||
<label for="linodeTokenInput">{{ $t('domains.domainDialog.linodeToken') }}</label>
|
||||
<TextInput id="linodeTokenInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Bunny -->
|
||||
<FormGroup v-if="provider === 'bunny'">
|
||||
<label for="bunnyAccessKeyInput">{{ $t('domains.domainDialog.bunnyAccessKey') }}</label>
|
||||
<TextInput id="bunnyAccessKeyInput" v-model="dnsConfig.accessKey" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- dnsimple -->
|
||||
<FormGroup v-if="provider === 'dnsimple'">
|
||||
<label for="dnsimpleAccessTokenInput">{{ $t('domains.domainDialog.dnsimpleAccessToken') }}</label>
|
||||
<TextInput id="dnsimpleAccessTokenInput" v-model="dnsConfig.accessToken" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Hetzner -->
|
||||
<FormGroup v-if="provider === 'hetzner'">
|
||||
<label for="hetznerTokenInput">{{ $t('domains.domainDialog.hetznerToken') }}</label>
|
||||
<TextInput id="hetznerTokenInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Vultr -->
|
||||
<FormGroup v-if="provider === 'vultr'">
|
||||
<label for="vultrTokenInput">{{ $t('domains.domainDialog.vultrToken') }}</label>
|
||||
<TextInput id="vultrTokenInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- deSEC -->
|
||||
<FormGroup v-if="provider === 'desec'">
|
||||
<label for="deSecTokenInput">{{ $t('domains.domainDialog.deSecToken') }}</label>
|
||||
<TextInput id="deSecTokenInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Name.com -->
|
||||
<FormGroup v-if="provider === 'namecom'">
|
||||
<label for="nameComUsernameInput">{{ $t('domains.domainDialog.nameComUsername') }}</label>
|
||||
<TextInput id="nameComUsernameInput" v-model="dnsConfig.username" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'namecom'">
|
||||
<label for="nameComTokenInput">{{ $t('domains.domainDialog.nameComApiToken') }}</label>
|
||||
<TextInput id="nameComTokenInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
|
||||
<!-- Namecheap -->
|
||||
<FormGroup v-if="provider === 'namecheap'">
|
||||
<label for="namecheapUsernameInput">{{ $t('domains.domainDialog.namecheapUsername') }}</label>
|
||||
<TextInput id="namecheapUsernameInput" v-model="dnsConfig.username" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'namecheap'">
|
||||
<label for="namecheapApiKeyInput">{{ $t('domains.domainDialog.namecheapApiKey') }}</label>
|
||||
<TextInput id="namecheapApiKeyInput" v-model="dnsConfig.token" required />
|
||||
</FormGroup>
|
||||
<p class="small text-info text-bold" v-if="provider === 'namecheap'" v-html="$t('domains.domainDialog.namecheapInfo')"></p>
|
||||
|
||||
<!-- INWX -->
|
||||
<FormGroup v-if="provider === 'inwx'">
|
||||
<label for="inwxUsernameInput">{{ $t('domains.domainDialog.inwxUsername') }}</label>
|
||||
<TextInput id="inwxUsernameInput" v-model="dnsConfig.username" required />
|
||||
</FormGroup>
|
||||
<FormGroup v-if="provider === 'inwx'">
|
||||
<label for="inwxPasswordInput">{{ $t('domains.domainDialog.inwxPassword') }}</label>
|
||||
<TextInput id="inwxPasswordInput" v-model="dnsConfig.password" required />
|
||||
</FormGroup>
|
||||
|
||||
<p class="small text-info text-bold" v-show="provider === 'wildcard'" v-html="$t('domains.domainDialog.wildcardInfo', { domain: domain })"></p>
|
||||
<p class="small text-info text-bold" v-show="provider === 'manual'" v-html="$t('domains.domainDialog.manualInfo')"></p>
|
||||
<p class="small text-info text-bold" v-show="needsPort80(provider, tlsProvider)" v-html="$t('domains.domainDialog.letsEncryptInfo')"></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user