Extract sourceSpecs as mixin

htdocs/src/components/hModalAddSource.vue

@@ -32,7 +32,7 @@
   -->
 
 <template>
-  <b-modal id="modal-add-source" scrollable size="lg" title="New Source Form" :ok-title="state >= 0 ? 'OK' : 'Next >'" :ok-disabled="!mySource" @ok="handleModalSourceSubmit">
+  <b-modal id="modal-add-source" scrollable size="lg" title="New Source Form" :ok-title="state >= 0 ? 'OK' : 'Next >'" :ok-disabled="!sourceSpecsSelected" @ok="handleModalSourceSubmit">
     <template v-if="state >= 0 && form" v-slot:modal-footer>
       <h-source-state-buttons :form="form" @previousState="handleModalSourcePrevious" @nextState="handleModalSourceSubmit" />
     </template>
@@ -41,16 +41,17 @@
       <p>
         First, you need to select the provider hosting your domain:
       </p>
-      <h-new-source-selector v-model="mySource" />
+      <h-new-source-selector v-model="sourceSpecsSelected" />
     </div>
 
-    <div v-else-if="mySource">
-      <h-source-state v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sourceSpecs[mySource].name" :state="state" @submit="handleModalSourceSubmit" />
+    <div v-else-if="sourceSpecsSelected">
+      <h-source-state v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sourceSpecs[sourceSpecsSelected].name" :state="state" @submit="handleModalSourceSubmit" />
     </div>
   </b-modal>
 </template>
 
 <script>
+import SourceSpecs from '@/mixins/sourceSpecs'
 import SourceState from '@/mixins/sourceState'
 
 export default {
@@ -62,7 +63,13 @@ export default {
     hSourceStateButtons: () => import('@/components/hSourceStateButtons')
   },
 
-  mixins: [SourceState],
+  mixins: [SourceSpecs, SourceState],
+
+  data () {
+    return {
+      sourceSpecsSelected: null
+    }
+  },
 
   methods: {
     handleModalSourcePrevious () {
@@ -108,7 +115,7 @@ export default {
     },
 
     show () {
-      this.mySource = ''
+      this.sourceSpecsSelected = ''
       this.resetSettings()
       this.settings.redirect = window.location.pathname
       this.state = -1

htdocs/src/components/sourceList.vue

@@ -42,7 +42,7 @@
     <b-list-group-item v-for="(source, index) in sources" :key="index" button class="d-flex justify-content-between align-items-center" @click="selectSource(source)">
       <div>
         <div class="d-inline-block text-center" style="width: 50px;">
-          <img v-if="sources_specs" :src="'/api/source_specs/' + source._srctype + '.png'" :alt="sources_specs[source._srctype].name" :title="sources_specs[source._srctype].name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
+          <img v-if="sourceSpecs" :src="'/api/source_specs/' + source._srctype + '.png'" :alt="sourceSpecs[source._srctype].name" :title="sourceSpecs[source._srctype].name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
         </div>
         <span v-if="source._comment">{{ source._comment }}</span>
         <em v-else>No name</em>
@@ -51,8 +51,8 @@
         <b-badge class="ml-1" :variant="domain_in_sources[index] > 0 ? 'success' : 'danger'">
           {{ domain_in_sources[index] }} domain(s) associated
         </b-badge>
-        <b-badge class="ml-1" variant="secondary" :title="source._srctype">
-          {{ sources_specs[source._srctype].name }}
+        <b-badge v-if="sourceSpecs" class="ml-1" variant="secondary" :title="source._srctype">
+          {{ sourceSpecs[source._srctype].name }}
         </b-badge>
       </div>
     </b-list-group-item>
@@ -61,10 +61,13 @@
 
 <script>
 import axios from 'axios'
+import SourceSpecs from '@/mixins/sourceSpecs'
 
 export default {
   name: 'SourceList',
 
+  mixins: [SourceSpecs],
+
   props: {
     emitNewIfEmpty: {
       type: Boolean,
@@ -75,8 +78,7 @@ export default {
   data: function () {
     return {
       domains: null,
-      sources: null,
-      sources_specs: null
+      sources: null
     }
   },
 
@@ -99,7 +101,7 @@ export default {
     },
 
     isLoading () {
-      return this.domains == null || this.sources == null || this.sources_specs == null
+      return this.domains == null || this.sources == null || this.sourceSpecs == null
     }
   },
 
@@ -108,9 +110,6 @@ export default {
       .get('/api/domains')
       .then(response => { this.domains = response.data })
     this.updateSources()
-    axios
-      .get('/api/source_specs')
-      .then(response => { this.sources_specs = response.data })
   },
 
   methods: {

htdocs/src/mixins/sourceSpecs.js

@@ -0,0 +1,51 @@
+// Copyright or © or Copr. happyDNS (2020)
+//
+// contact@happydns.org
+//
+// This software is a computer program whose purpose is to provide a modern
+// interface to interact with DNS systems.
+//
+// This software is governed by the CeCILL license under French law and abiding
+// by the rules of distribution of free software.  You can use, modify and/or
+// redistribute the software under the terms of the CeCILL license as
+// circulated by CEA, CNRS and INRIA at the following URL
+// "http://www.cecill.info".
+//
+// As a counterpart to the access to the source code and rights to copy, modify
+// and redistribute granted by the license, users are provided only with a
+// limited warranty and the software's author, the holder of the economic
+// rights, and the successive licensors have only limited liability.
+//
+// In this respect, the user's attention is drawn to the risks associated with
+// loading, using, modifying and/or developing or reproducing the software by
+// the user in light of its specific status of free software, that may mean
+// that it is complicated to manipulate, and that also therefore means that it
+// is reserved for developers and experienced professionals having in-depth
+// computer knowledge. Users are therefore encouraged to load and test the
+// software's suitability as regards their requirements in conditions enabling
+// the security of their systems and/or data to be ensured and, more generally,
+// to use and operate it in the same conditions as regards security.
+//
+// The fact that you are presently reading this means that you have had
+// knowledge of the CeCILL license and that you accept its terms.
+
+import SourceSpecsApi from '@/services/SourceSpecsApi'
+
+export default {
+  data () {
+    return {
+      sourceSpecs: null
+    }
+  },
+
+  created () {
+    this.updateSourceSpecs()
+  },
+
+  methods: {
+    updateSourceSpecs () {
+      SourceSpecsApi.getSourceSpecs()
+        .then(response => (this.sourceSpecs = response.data))
+    }
+  }
+}

htdocs/src/mixins/sourceState.js

@@ -30,16 +30,13 @@
 // knowledge of the CeCILL license and that you accept its terms.
 
 import SourceSettingsApi from '@/services/SourceSettingsApi'
-import SourceSpecsApi from '@/services/SourceSpecsApi'
 
 export default {
   data () {
     return {
       form: null,
-      mySource: null,
       settings: null,
-      state: 0,
-      sourceSpecs: null
+      state: 0
     }
   },
 
@@ -56,7 +53,7 @@ export default {
 
   methods: {
     loadState (toState, recallid, cbSuccess, cbFail) {
-      SourceSettingsApi.getSourceSettings(this.mySource, toState, this.settings, recallid)
+      SourceSettingsApi.getSourceSettings(this.sourceSpecsSelected, toState, this.settings, recallid)
         .then(
           response => {
             if (response.data.form) {
@@ -108,21 +105,7 @@ export default {
     },
 
     updateSourceSettingsForm () {
-      SourceSpecsApi.getSourceSpecs()
-        .then(
-          response => (this.sourceSpecs = response.data),
-          error => {
-            this.$root.$bvToast.toast(
-              error.response.data.errmsg, {
-                title: 'Something went wrong during source configuration',
-                autoHideDelay: 5000,
-                variant: 'danger',
-                toaster: 'b-toaster-content-right'
-              }
-            )
-          })
-
-      if (this.mySource && this.state >= 0) {
+      if (this.sourceSpecsSelected && this.state >= 0) {
         this.loadState(this.state, this.$route.query.recall)
       }
     }

htdocs/src/views/source-new-state.vue

@@ -64,6 +64,7 @@
 </template>
 
 <script>
+import SourceSpecs from '@/mixins/sourceSpecs'
 import SourceState from '@/mixins/sourceState'
 
 export default {
@@ -73,11 +74,18 @@ export default {
     hSourceStateButtons: () => import('@/components/hSourceStateButtons')
   },
 
-  mixins: [SourceState],
+  mixins: [SourceSpecs, SourceState],
+
+  data () {
+    return {
+      sourceSpecsSelected: null
+    }
+  },
 
   created () {
-    this.mySource = this.$route.params.provider
+    this.sourceSpecsSelected = this.$route.params.provider
     this.state = parseInt(this.$route.params.state)
+    this.updateSourceSpecs()
   },
 
   methods: {