Move more dns provider related code into the shared DomainsModel.js to avoid duplication

dashboard/src/components/DomainDialog.vue

@@ -21,30 +21,7 @@ const tlsProvider = ref('letsencrypt-prod-wildcard');
 const showAdvanced = ref(false);
 const customNameservers = ref(false);
 
-// we have to define all properties here which are used in the DomainProviderForm to keep reactivity alive
-const dnsConfig = ref({
-  accessKeyId: '',
-  accessKey: '',
-  accessToken: '',
-  apiKey: '',
-  apikey: '',
-  appSecret: '',
-  apiPassword: '',
-  apiSecret: '',
-  consumerKey: '',
-  credentials: { client_email: '', private_key: '' },
-  customerNumber: '',
-  defaultProxyStatus: false,
-  email: '',
-  endpoint: '',
-  password: '',
-  projectId: '',
-  secretAccessKey: '',
-  secretapikey: '',
-  token: '',
-  tokenType: '',
-  username: '',
-});
+const dnsConfig = ref(DomainsModel.createEmptyConfig());
 
 const isFormValid = ref(false);
 function checkValidity() {

dashboard/src/components/DomainProviderForm.vue

@@ -6,6 +6,7 @@ const t = i18n.t;
 
 import { TextInput, FormGroup, Checkbox, SingleSelect } from 'pankow';
 import { ENDPOINTS_OVH } from '../constants.js';
+import DomainsModel from '../models/DomainsModel.js';
 
 defineProps({
   domain: {
@@ -22,31 +23,6 @@ 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' },
@@ -128,7 +104,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>
-      <SingleSelect v-model="provider" @select="onProviderChange" :options="domainProviders" option-key="value" option-label="name" />
+      <SingleSelect v-model="provider" @select="onProviderChange" :options="DomainsModel.providers" option-key="value" option-label="name" />
     </FormGroup>
 
     <!-- Route53 -->