cloudron-box/dashboard/src/components/DomainProviderForm.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { TextInput, FormGroup, Checkbox, SingleSelect } from 'pankow';
import { ENDPOINTS_OVH } from '../constants.js';

defineProps({
  domain: {
    type: String,
    default: '',
  },
  showAdvanced: {
    type: Boolean,
    default: false,
  },
});

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' }
];

const tlsProviders = [
  { name: 'Let\'s Encrypt Prod', value: 'letsencrypt-prod' },
  { name: 'Let\'s Encrypt Prod - Wildcard', value: 'letsencrypt-prod-wildcard' },
  { name: 'Let\'s Encrypt Staging', value: 'letsencrypt-staging' },
  { name: 'Let\'s Encrypt Staging - Wildcard', value: 'letsencrypt-staging-wildcard' },
  { name: 'Self-Signed', value: 'fallback' }, // this is not 'Custom' because we don't allow user to upload certs during setup phase
];

const gandiTokenTypes = [
  { name: t('domains.domainDialog.gandiTokenTypeApiKey'), value: 'ApiKey' },
  { name: t('domains.domainDialog.gandiTokenTypePAT'), value: 'PAT' },
];

const cloudflareTokenTypes = [
  { name: t('domains.domainDialog.cloudflareTokenTypeGlobalApiKey'), value: 'GlobalApiKey' },
  { name: t('domains.domainDialog.cloudflareTokenTypeApiToken'), value: 'ApiToken' },
];

function needsPort80(dnsProvider, tlsProvider) {
  return ((dnsProvider === 'manual' || dnsProvider === 'noop' || dnsProvider === 'wildcard') &&
    (tlsProvider === 'letsencrypt-prod' || tlsProvider === 'letsencrypt-staging'));
}

function setDefaultTlsProvider() {
  // wildcard LE won't work without automated DNS
  if (provider.value === 'manual' || provider.value === 'noop' || provider.value === 'wildcard') {
    tlsProvider.value = 'letsencrypt-prod';
  } else {
    tlsProvider.value = 'letsencrypt-prod-wildcard';
  }
}

function resetFields() {
  dnsConfig.value = {};
  if (provider.value === 'route53') {
    dnsConfig.value.accessKeyId = '';
    dnsConfig.value.secretAccessKey = '';
  } else if (provider.value === 'gcdns') {
    dnsConfig.value.projectId = '';
    dnsConfig.value.credentials = {
      client_email: '',
      private_key: '',
    };
  } else if (provider.value === 'digitalocean') {
    dnsConfig.value.token = '';
  } else if (provider.value === 'linode') {
    dnsConfig.value.token = '';
  } else if (provider.value === 'bunny') {
    dnsConfig.value.accessKey = '';
  } else if (provider.value === 'dnsimple') {
    dnsConfig.value.accessToken = '';
  } else if (provider.value === 'hetzner') {
    dnsConfig.value.token = '';
  } else if (provider.value === 'vultr') {
    dnsConfig.value.token = '';
  } else if (provider.value === 'desec') {
    dnsConfig.value.token = '';
  } else if (provider.value === 'gandi') {
    dnsConfig.value.token = '';
    dnsConfig.value.tokenType = '';
  } else if (provider.value === 'godaddy') {
    dnsConfig.value.apiKey = '';
    dnsConfig.value.apiSecret = '';
  } else if (provider.value === 'cloudflare') {
    dnsConfig.value.token = '';
    dnsConfig.value.email = '';
    dnsConfig.value.tokenType = '';
    dnsConfig.value.defaultProxyStatus = false;
  } else if (provider.value === 'namecom') {
    dnsConfig.value.token = '';
    dnsConfig.value.username = '';
  } else if (provider.value === 'namecheap') {
    dnsConfig.value.token = '';
    dnsConfig.value.username = '';
  } else if (provider.value === 'inwx') {
    dnsConfig.value.username = '';
    dnsConfig.value.password = '';
  } else if (provider.value === 'netcup') {
    dnsConfig.value.customerNumber = '';
    dnsConfig.value.apiKey = '';
    dnsConfig.value.apiPassword = '';
  } else if (provider.value === 'ovh') {
    dnsConfig.value.endpoint = '';
    dnsConfig.value.consumerKey = '';
    dnsConfig.value.appKey = '';
    dnsConfig.value.appSecret = '';;
  } else if (provider.value === 'porkbun') {
    dnsConfig.value.apikey = '';
    dnsConfig.value.secretapikey = '';
  }
}

function onProviderChange() {
  setDefaultTlsProvider();
  resetFields();
}

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]);
}

</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>
      <SingleSelect v-model="provider" @select="onProviderChange()" :options="domainProviders" option-key="value" option-label="name" />
    </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>
      <SingleSelect v-model="dnsConfig.tokenType" :options="gandiTokenTypes" option-key="value" option-label="name" />
    </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>
      <SingleSelect id="ovhEndpointInput" v-model="dnsConfig.endpoint" :options="ENDPOINTS_OVH" option-key="value" option-label="name" />
    </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>
      <SingleSelect v-model="dnsConfig.tokenType" :options="cloudflareTokenTypes" option-key="value" option-label="name" />
    </FormGroup>
    <FormGroup v-if="provider === 'cloudflare' && dnsConfig.tokenType === 'GlobalApiKey' || dnsConfig.tokenType === 'ApiToken'">
      <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')" style="display: inline-flex; margin-top: 10px" />
      <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>
    <div class="warning-label" v-if="provider === 'namecheap'" v-html="$t('domains.domainDialog.namecheapInfo')"></div>

    <!-- 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>

    <FormGroup v-if="showAdvanced">
      <label>Certificate Provider <sup><a href="https://docs.cloudron.io/certificates/#certificate-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
      <SingleSelect v-model="tlsProvider" :options="tlsProviders" option-key="value" option-label="name"/>
    </FormGroup>

    <div class="warning-label" v-show="provider === 'wildcard'" v-html="$t('domains.domainDialog.wildcardInfo', { domain: domain })"></div>
    <div class="warning-label" v-show="provider === 'manual'" v-html="$t('domains.domainDialog.manualInfo')"></div>
    <div class="warning-label" v-show="needsPort80(provider, tlsProvider)" v-html="$t('domains.domainDialog.letsEncryptInfo')"></div>

  </div>
</template>