Use chips to display domain aliases.

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "Modoboa",
   "version": "0.1.0",
   "private": true,
   "scripts": {

frontend/src/api/account.js

@@ -0,0 +1,9 @@
+import repository from './repository'
+
+const resource = 'account'
+
+export default {
+  getMe () {
+    return repository.get(`/${resource}/me/`)
+  }
+}

frontend/src/api/auth.js

@@ -0,0 +1,7 @@
+import repository from './repository'
+
+export default {
+  requestToken (data) {
+    return repository.post('/token/', data)
+  }
+}

frontend/src/api/domains.js

@@ -0,0 +1,32 @@
+import repository from './repository'
+
+const domainResource = 'domains'
+const domainAliasResource = 'domainaliases'
+
+export default {
+  getDomains () {
+    return repository.get(`/${domainResource}/`)
+  },
+  getDomainAliases (domain) {
+    let url = `/${domainAliasResource}/`
+    if (domain !== undefined) {
+      url += `?domain=${domain}`
+    }
+    return repository.get(url)
+  },
+  createDomain (data) {
+    return repository.post(`/${domainResource}/`, data)
+  },
+  updateDomain (domainId, data) {
+    return repository.put(`/${domainResource}/${domainId}/`, data)
+  },
+  createDomainAlias (data) {
+    return repository.post(`/${domainAliasResource}/`, data)
+  },
+  updateDomainAlias (aliasId, data) {
+    return repository.put(`/${domainAliasResource}/${aliasId}/`, data)
+  },
+  deleteDomainAlias (aliasId) {
+    return repository.delete(`/${domainAliasResource}/${aliasId}/`)
+  }
+}

frontend/src/api/logs.js

@@ -0,0 +1,9 @@
+import repository from './repository'
+
+const resource = 'logs'
+
+export default {
+  getAll () {
+    return repository.get(`/${resource}/`)
+  }
+}

frontend/src/api/parameters.js

@@ -0,0 +1,18 @@
+import repository from './repository'
+
+const resource = 'parameters'
+
+export default {
+  getApplications () {
+    return repository.get(`/${resource}/applications/`)
+  },
+  getAppliction (app) {
+    return repository.get(`/${resource}/${app}/`)
+  },
+  getApplicationStructure (app) {
+    return repository.get(`/${resource}/structure/?app=${app}`)
+  },
+  saveApplication (app, data) {
+    return repository.post(`/${resource}/${app}/`, data)
+  }
+}

frontend/src/api/repository.js

@@ -1,24 +1,11 @@
-'use strict'
-
-import Vue from 'vue'
 import axios from 'axios'
 import Cookies from 'js-cookie'
 
 import router from '../router'
 import store from '../store'
 
-// Full config:  https://github.com/axios/axios#request-config
-axios.defaults.baseURL = process.VUE_APP_API_BASE_URL || ''
-// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
-// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-
-const config = {
-  baseURL: process.env.VUE_APP_API_BASE_URL || ''
-  // timeout: 60 * 1000 // Timeout
-  // withCredentials: true // Check cross-site Access-Control
-}
-
-const _axios = axios.create(config)
+const baseURL = process.env.VUE_APP_API_BASE_URL || ''
+const _axios = axios.create({ baseURL })
 
 _axios.interceptors.request.use(
   function (config) {
@@ -65,23 +52,4 @@ _axios.interceptors.response.use(
   }
 )
 
-Plugin.install = function (Vue, options) {
-  Vue.axios = _axios
-  window.axios = _axios
-  Object.defineProperties(Vue.prototype, {
-    axios: {
-      get () {
-        return _axios
-      }
-    },
-    $axios: {
-      get () {
-        return _axios
-      }
-    }
-  })
-}
-
-Vue.use(Plugin)
-
-export default Plugin
+export default _axios

frontend/src/components/domains/DomainList.vue

@@ -99,9 +99,17 @@
       <template v-slot:expanded-item="{ headers, item }">
         <tr>
           <td :colspan="headers.length">
-            <span class="mr-4" v-for="alias in aliases[item.name]" :key="alias.name">
-              {{ alias.name }} <v-chip color="success" label x-small>DNS OK</v-chip>
-            </span>
+            <v-chip v-for="alias in aliases[item.name]"
+                    :key="alias.name"
+                    class="mr-2"
+                    pill
+                    title="DNS OK"
+                    >
+              <v-icon left color="success">mdi-server-network</v-icon>
+              {{ alias.name }}
+              <v-btn class="ml-4" x-small icon><v-icon>mdi-circle-edit-outline</v-icon></v-btn>
+              <v-btn x-small icon color="error"><v-icon>mdi-delete-outline</v-icon></v-btn>
+            </v-chip>
           </td>
         </tr>
       </template>
@@ -112,6 +120,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import domainApi from '@/api/domains'
 import ConfirmDialog from '@/components/layout/ConfirmDialog'
 
 export default {
@@ -192,7 +201,7 @@ export default {
       if (!value) {
         return
       }
-      this.$axios.get(`/domainaliases/?domain=${item.name}`).then(resp => {
+      domainApi.getDomainAliases(item.name).then(resp => {
         this.$set(this.aliases, item.name, resp.data)
       })
     },

frontend/src/components/layout/Navbar.vue

@@ -98,7 +98,7 @@
 </template>
 
 <script>
-// import * as api from '@/api'
+import parameters from '@/api/parameters'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -145,7 +145,7 @@ export default {
     }
   },
   created () {
-    this.$axios.get('/parameters/applications/').then(response => {
+    parameters.getApplications().then(response => {
       response.data.forEach(item => {
         this.mainMenuItems[4].children.push({
           text: item.label,

frontend/src/components/logs/LogList.vue

@@ -44,6 +44,8 @@
 </template>
 
 <script>
+import logs from '@/api/logs'
+
 export default {
   data () {
     return {
@@ -61,7 +63,7 @@ export default {
     }
   },
   created () {
-    this.$axios.get('/logs/').then(response => {
+    logs.getAll().then(response => {
       this.logs = response.data
       this.loading = false
     })

frontend/src/components/parameters/ParametersForm.vue

@@ -56,6 +56,8 @@
 </template>
 
 <script>
+import parameters from '@/api/parameters'
+
 export default {
   data () {
     return {
@@ -67,7 +69,6 @@ export default {
   },
   computed: {
     displayableElements () {
-      console.log(this.structure)
       const result = this.structure.filter(element => this.display(element))
       return result
     }
@@ -82,10 +83,10 @@ export default {
   },
   methods: {
     loadParams (app) {
-      this.$axios.get(`/parameters/structure/?app=${app}`).then(response => {
+      parameters.getApplicationStructure(app).then(response => {
         this.structure = response.data
       })
-      this.$axios.get(`/parameters/${app}/`).then(response => {
+      parameters.getApplication(app).then(response => {
         this.parameters = response.data
       })
     },
@@ -103,7 +104,7 @@ export default {
       return params.filter(param => this.display(param))
     },
     save () {
-      this.$axios.post(`/parameters/${this.$route.params.app}/`, this.parameters).then(response => {
+      parameters.saveApplication(this.$route.params.app, this.parameters).then(response => {
       }, response => {
         this.formErrors = response.data
       })

frontend/src/main.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import './plugins/axios'
 import './plugins/vee-validate'
 import './plugins/vue-cookie'
 import './plugins/vue-gettext'

frontend/src/store/modules/auth.js

@@ -1,13 +1,15 @@
-import Vue from 'vue'
 import Cookies from 'js-cookie'
 
+import repository from '@/api/repository'
+import account from '@/api/account'
+
 function setupAxios (token) {
-  Vue.prototype.$axios.defaults.headers.common.Authorization = `Bearer ${token}`
-  Vue.prototype.$axios.defaults.headers.post['Content-Type'] = 'application/json'
+  repository.defaults.headers.common.Authorization = `Bearer ${token}`
+  repository.defaults.headers.post['Content-Type'] = 'application/json'
 }
 
 function fetchUser (commit) {
-  return Vue.prototype.$axios.get('/account/me/').then(resp => {
+  return account.getMe().then(resp => {
     commit('SET_AUTH_USER', { authUser: resp.data, isAuthenticated: true })
   })
 }
@@ -47,7 +49,7 @@ const actions = {
   },
   logout ({ commit }) {
     return new Promise((resolve, reject) => {
-      delete Vue.prototype.$axios.defaults.headers.common.Authorization
+      delete repository.defaults.headers.common.Authorization
       Cookies.remove('token')
       Cookies.remove('refreshToken')
       commit('LOGOUT_USER')

frontend/src/store/modules/domains.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import domainApi from '@/api/domains'
 
 // mutation types
 const SET_DOMAINS = 'SET_DOMAINS'
@@ -33,17 +34,17 @@ const getters = {
 // actions
 const actions = {
   getDomains ({ commit }) {
-    return Vue.prototype.$axios.get('/domains/').then(response => {
+    return domainApi.getDomains().then(response => {
       commit(SET_DOMAINS, { domains: response.data })
     })
   },
   createDomain ({ commit }, data) {
-    return Vue.prototype.$axios.post('/domains/', data).then(response => {
+    return domainApi.createDomain(data).then(response => {
       commit(ADD_DOMAIN, { domain: response.data })
     })
   },
   updateDomain ({ commit }, data) {
-    return Vue.prototype.$axios.put(`/domains/${data.pk}/`, data).then(response => {
+    return domainApi.updateDomain(data.pk, data).then(response => {
       commit(UPDATE_DOMAIN, { domain: response.data })
     })
   },
@@ -53,17 +54,17 @@ const actions = {
     })
   },
   addDomainAlias ({ commit }, data) {
-    return Vue.prototype.$axios.post('/domainaliases/', data).then(response => {
+    return domainApi.createDomainAlias(data).then(response => {
       commit(ADD_DOMAIN_ALIAS, response.data)
     })
   },
   updateDomainAlias ({ commit }, { id, data }) {
-    return Vue.prototype.$axios.put(`/domainaliases/${id}/`, data).then(response => {
+    return domainApi.updateDomainAlias(id, data).then(response => {
       commit(UPDATE_DOMAIN_ALIAS, response.data)
     })
   },
   deleteDomainAlias ({ commit }, domainAliasId) {
-    return Vue.prototype.$axios.delete(`/domainaliases/${domainAliasId}/`).then(response => {
+    return domainApi.deleteDomainAlias(domainAliasId).then(response => {
       commit(REMOVE_DOMAIN_ALIAS, domainAliasId)
     })
   }

frontend/src/views/Login.vue

@@ -36,6 +36,7 @@
 <script>
 import Cookies from 'js-cookie'
 import { mapGetters } from 'vuex'
+import auth from '@/api/auth'
 
 export default {
   computed: {
@@ -56,7 +57,7 @@ export default {
         username: this.username,
         password: this.password
       }
-      this.$axios.post('/token/', payload).then(resp => {
+      auth.requestToken(payload).then(resp => {
         Cookies.set('token', resp.data.access, { sameSite: 'strict' })
         Cookies.set('refreshToken', resp.data.refresh, { sameSite: 'strict' })
         this.$store.dispatch('auth/initialize').then(() => {