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

<script setup>

import { ref, useTemplateRef } from 'vue';
import { Dialog, TextInput, FormGroup, Checkbox } from 'pankow';
import DomainsModel from '../models/DomainsModel.js';
import DomainProviderForm from './DomainProviderForm.vue';

const emit = defineEmits([ 'success' ]);

const domainsModel = DomainsModel.create();

 // currently, validation of wildcard with various provider is done server side
 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: 'Custom Wildcard Certificate', value: 'fallback' },
];

const dialog = useTemplateRef('dialog');

const busy = ref(false);
const errorMessage = ref('');
const editing = ref(false);
const domain = ref('');
const zoneName = ref('');
const provider = ref('');
const tlsProvider = ref('letsencrypt-prod-wildcard');
const showAdvanced = ref(false);
const customNameservers = ref(false);
const dnsConfig = ref({});

const isFormValid = ref(false);
function checkValidity() {
  isFormValid.value = form.value.checkValidity();
}

const form = useTemplateRef('form');
async function onSubmit() {
  if (!form.value.reportValidity()) return;

  busy.value = true;
  errorMessage.value = '';

  const config = dnsConfig.value;
  config.customNameservers = customNameservers.value;

  const tlsConfig = {
    provider: tlsProvider.value,
    wildcard: false
  };

  // UI uses -wildcard providers, API uses wildcard flag
  if (tlsConfig.provider.indexOf('-wildcard') !== -1) {
    tlsConfig.provider = tlsConfig.provider.replace('-wildcard', '');
    tlsConfig.wildcard = true;
  }

  const func = editing.value ? domainsModel.update : domainsModel.add;
  const [error] = await func(domain.value, zoneName.value, provider.value, config, null, tlsConfig);
  if (error) {
    errorMessage.value = error.body ? error.body.message : 'Internal error';
    busy.value = false;
    return console.error(error);
  }

  emit('success');
  dialog.value.close();
}

defineExpose({
  open(d) {
    d = d || { config: {}, tlsConfig: {}};

    provider.value = d.provider || '';
    dnsConfig.value = d.config;
    tlsProvider.value = d.tlsConfig.provider || 'letsencrypt-prod-wildcard';

    busy.value = false;
    showAdvanced.value = false;
    errorMessage.value = '';
    editing.value = !!d.domain;
    domain.value = d.domain || '';
    zoneName.value = d.zoneName || '';

    customNameservers.value = d.config.customNameservers;

    dialog.value.open();
  }
});

</script>

<template>
  <Dialog ref="dialog"
    :title="editing ? $t('domains.domainDialog.editTitle', { domain: domain }) : $t('domains.domainDialog.addTitle')"
    :modal="busy"
    :confirm-busy="busy"
    :confirm-active="isFormValid"
    :confirm-label="$t('main.dialog.save')"
    :reject-label="busy ? null : $t('main.dialog.cancel')"
    :reject-active="!busy"
     reject-style="secondary"
    @confirm="onSubmit()"
  >
    <p class="text-danger" v-show="errorMessage">{{ errorMessage }}</p>

    <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
      <fieldset :disabled="busy">
        <input style="display: none;" type="submit" :disabled="busy"/>
        <p class="has-error text-center" v-show="error">{{ error }}</p>

        <FormGroup>
          <label for="domainInput">{{ $t('domains.domainDialog.domain') }}</label>
          <TextInput id="domainInput" v-model="domain" placeholder="example.com" :readonly="editing ? true : undefined" required />
        </FormGroup>

        <DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" :domain="domain" />

        <p style="margin-top: 15px" v-show="!showAdvanced" @click="showAdvanced = true" class="actionable">{{ $t('domains.domainDialog.advancedAction') }}</p>

        <div v-show="showAdvanced">
          <FormGroup>
            <label for="zoneNameInput">{{ $t('domains.domainDialog.zoneName') }} <sup><a href="https://docs.cloudron.io/domains/#zone-name" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
            <TextInput id="zoneNameInput" v-model="zoneName" />
          </FormGroup>

          <Checkbox v-model="customNameservers" :label="$t('domains.domainDialog.customNameservers')" />

          <FormGroup>
            <label for="tlsProviderInput">{{ $t('domains.domainDialog.certProvider') }} <sup><a href="https://docs.cloudron.io/certificates/#certificate-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
            <select id="tlsProviderInput" v-model="tlsProvider">
              <option v-for="provider in tlsProviders" :value="provider.value" :key="provider.value">{{ provider.name }}</option>
            </select>
          </FormGroup>

          <!-- custom certificate -->
          <div v-if="tlsProvider === 'fallback'">
            <label >{{ $t('domains.domainDialog.fallbackCertCustomCert') }}</label>
            <p v-html="$t('domains.domainDialog.fallbackCertCustomCertInfo', { customCertLink: 'https://docs.cloudron.io/certificates/#custom-certificates' })"></p>
          </div>

          <FormGroup v-if="tlsProvider === 'fallback'">
            <div class="input-group">
              <input type="file" id="fallbackCertFileInput" style="display:none"/>
              <input type="text" class="form-control" :placeholder="$t('domains.domainDialog.fallbackCertCertificatePlaceholder')" ng-model="domainConfigure.fallbackCert.certificateFileName" name="cert" onclick="getElementById('fallbackCertFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy">
              <span class="input-group-addon"><i class="fa fa-upload" onclick="getElementById('fallbackCertFileInput').click();"></i></span>
            </div>
          </FormGroup>
          <FormGroup v-if="tlsProvider === 'fallback'">
            <div class="input-group">
              <input type="file" id="fallbackKeyFileInput" style="display:none"/>
              <input type="text" class="form-control" :placeholder="$t('domains.domainDialog.fallbackCertKeyPlaceholder')" ng-model="domainConfigure.fallbackCert.keyFileName" id="fallbackKeyInput" name="key" onclick="getElementById('fallbackKeyFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy">
              <span class="input-group-addon"><i class="fa fa-upload" onclick="getElementById('fallbackKeyFileInput').click();"></i></span>
            </div>
          </FormGroup>
        </div>
      </fieldset>
    </form>
  </Dialog>
</template>