Finish initial implementation dns setup view

dashboard/src/components/DomainDialog.vue

@@ -116,7 +116,7 @@ defineExpose({
           <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" />
+        <DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" :domain="domain" :show-advanced="showAdvanced" />
 
         <p style="margin-top: 15px" v-show="!showAdvanced" @click="showAdvanced = true" class="actionable">{{ $t('domains.domainDialog.advancedAction') }}</p>
 
@@ -128,13 +128,6 @@ defineExpose({
 
           <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>

dashboard/src/components/DomainProviderForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { TextInput, FormGroup, Checkbox } from 'pankow';
+import { TextInput, FormGroup, Checkbox, SingleSelect } from 'pankow';
 import { ENDPOINTS_OVH } from '../constants.js';
 
 defineProps({
@@ -8,6 +8,10 @@ defineProps({
     type: String,
     default: '',
   },
+  showAdvanced: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const provider = defineModel('provider');
@@ -39,6 +43,14 @@ const domainProviders = [
   { 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
+];
+
 function needsPort80(dnsProvider, tlsProvider) {
   return ((dnsProvider === 'manual' || dnsProvider === 'noop' || dnsProvider === 'wildcard') &&
     (tlsProvider === 'letsencrypt-prod' || tlsProvider === 'letsencrypt-staging'));
@@ -133,9 +145,7 @@ function onGcdnsFileInputChange(event) {
   <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>
+      <SingleSelect v-model="provider" @select="setDefaultTlsProvider()" :options="domainProviders" option-key="value" option-label="name" />
     </FormGroup>
 
     <!-- Route53 -->
@@ -322,6 +332,11 @@ function onGcdnsFileInputChange(event) {
       <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>
+
     <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>