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

dashboard/src/models/DomainsModel.js

@@ -2,6 +2,35 @@
 import { fetcher } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
 
+const providers = [
+  { 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 prettyProviderName(provider) {
+  const tmp = providers.find(p => provider === p.value);
+  return tmp ? tmp.name : provider;
+};
+
 function filterForProvider(provider, config) {
   let props = [];
   switch (provider) {
@@ -66,6 +95,33 @@ function filterForProvider(provider, config) {
   return ret;
 }
 
+// creates an object with all potential properties for the UI forms to work with
+function createEmptyConfig() {
+  return {
+    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: '',
+  };
+}
+
 function create() {
   const accessToken = localStorage.token;
 
@@ -190,4 +246,7 @@ function create() {
 
 export default {
   create,
+  createEmptyConfig,
+  prettyProviderName,
+  providers,
 };

dashboard/src/views/DomainsView.vue

@@ -25,33 +25,6 @@ const dashboardDomain = ref('');
 const domainDialog = useTemplateRef('domainDialog');
 const wellKnownDialog = useTemplateRef('wellKnownDialog');
 
-function prettyProviderName(domain) {
-  switch (domain.provider) {
-    case 'bunny': return 'Bunny';
-    case 'route53': return 'AWS Route53';
-    case 'cloudflare': return 'Cloudflare';
-    case 'desec': return 'deSEC';
-    case 'digitalocean': return 'DigitalOcean';
-    case 'dnsimple': return 'dnsimple';
-    case 'gandi': return 'Gandi LiveDNS';
-    case 'hetzner': return 'Hetzner DNS';
-    case 'inwx': return 'INWX';
-    case 'linode': return 'Linode';
-    case 'namecom': return 'Name.com';
-    case 'namecheap': return 'Namecheap';
-    case 'netcup': return 'Netcup';
-    case 'ovh': return 'OVH';
-    case 'gcdns': return 'Google Cloud';
-    case 'godaddy': return 'GoDaddy';
-    case 'vultr': return 'Vultr';
-    case 'manual': return 'Manual';
-    case 'porkbun': return 'Porkbun';
-    case 'wildcard': return 'Wildcard';
-    case 'noop': return 'No-op';
-    default: return 'Unknown';
-  }
-};
-
 function onAdd () {
   domainDialog.value.open(null);
 }
@@ -141,7 +114,7 @@ onMounted(async () => {
 
       <TableView :model="filteredDomains" :columns="columns" :busy="busy" style="max-height: 200px;" @row-click="onEdit">
         <template #provider="domain">
-          {{ prettyProviderName(domain) }}
+          {{ DomainsModel.prettyProviderName(domain.provider) }}
         </template>
         <template #actions="domain">
           <div class="table-actions">