From 9cd856cf03b81f474ab254e3b98198e7c20c805c Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Tue, 16 Feb 2021 14:28:32 +0100
Subject: [PATCH] Use chips to display domain aliases.

---
 frontend/package.json                         |  2 +-
 frontend/src/api/account.js                   |  9 +++++
 frontend/src/api/auth.js                      |  7 ++++
 frontend/src/api/domains.js                   | 32 ++++++++++++++++
 frontend/src/api/logs.js                      |  9 +++++
 frontend/src/api/parameters.js                | 18 +++++++++
 .../{plugins/axios.js => api/repository.js}   | 38 ++-----------------
 .../src/components/domains/DomainList.vue     | 17 +++++++--
 frontend/src/components/layout/Navbar.vue     |  4 +-
 frontend/src/components/logs/LogList.vue      |  4 +-
 .../components/parameters/ParametersForm.vue  |  9 +++--
 frontend/src/main.js                          |  1 -
 frontend/src/store/modules/auth.js            | 12 +++---
 frontend/src/store/modules/domains.js         | 13 ++++---
 frontend/src/views/Login.vue                  |  3 +-
 15 files changed, 118 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/api/account.js
 create mode 100644 frontend/src/api/auth.js
 create mode 100644 frontend/src/api/domains.js
 create mode 100644 frontend/src/api/logs.js
 create mode 100644 frontend/src/api/parameters.js
 rename frontend/src/{plugins/axios.js => api/repository.js} (63%)

diff --git a/frontend/package.json b/frontend/package.json
index 67f05ce4c..92da867f1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "Modoboa",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/frontend/src/api/account.js b/frontend/src/api/account.js
new file mode 100644
index 000000000..65f2bd5a7
--- /dev/null
+++ b/frontend/src/api/account.js
@@ -0,0 +1,9 @@
+import repository from './repository'
+
+const resource = 'account'
+
+export default {
+  getMe () {
+    return repository.get(`/${resource}/me/`)
+  }
+}
diff --git a/frontend/src/api/auth.js b/frontend/src/api/auth.js
new file mode 100644
index 000000000..0fec62969
--- /dev/null
+++ b/frontend/src/api/auth.js
@@ -0,0 +1,7 @@
+import repository from './repository'
+
+export default {
+  requestToken (data) {
+    return repository.post('/token/', data)
+  }
+}
diff --git a/frontend/src/api/domains.js b/frontend/src/api/domains.js
new file mode 100644
index 000000000..9f8fed7bd
--- /dev/null
+++ b/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}/`)
+  }
+}
diff --git a/frontend/src/api/logs.js b/frontend/src/api/logs.js
new file mode 100644
index 000000000..2d2ce9a54
--- /dev/null
+++ b/frontend/src/api/logs.js
@@ -0,0 +1,9 @@
+import repository from './repository'
+
+const resource = 'logs'
+
+export default {
+  getAll () {
+    return repository.get(`/${resource}/`)
+  }
+}
diff --git a/frontend/src/api/parameters.js b/frontend/src/api/parameters.js
new file mode 100644
index 000000000..b4c6358e4
--- /dev/null
+++ b/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)
+  }
+}
diff --git a/frontend/src/plugins/axios.js b/frontend/src/api/repository.js
similarity index 63%
rename from frontend/src/plugins/axios.js
rename to frontend/src/api/repository.js
index 3afb3ee72..b355c27f1 100644
--- a/frontend/src/plugins/axios.js
+++ b/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
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index 2e2b0d0d8..08fd8fd39 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/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)
       })
     },
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index e3d7890ba..b3cac4f1d 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/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,
diff --git a/frontend/src/components/logs/LogList.vue b/frontend/src/components/logs/LogList.vue
index dd024f1c1..80e946fd4 100644
--- a/frontend/src/components/logs/LogList.vue
+++ b/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
     })
diff --git a/frontend/src/components/parameters/ParametersForm.vue b/frontend/src/components/parameters/ParametersForm.vue
index 54ea00a61..ea01a2b2e 100644
--- a/frontend/src/components/parameters/ParametersForm.vue
+++ b/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
       })
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2217a53b7..bbdb84000 100644
--- a/frontend/src/main.js
+++ b/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'
diff --git a/frontend/src/store/modules/auth.js b/frontend/src/store/modules/auth.js
index f695e89ab..1b035179a 100644
--- a/frontend/src/store/modules/auth.js
+++ b/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')
diff --git a/frontend/src/store/modules/domains.js b/frontend/src/store/modules/domains.js
index d4b35aa2c..94322ab93 100644
--- a/frontend/src/store/modules/domains.js
+++ b/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)
     })
   }
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index e95f1ff75..310d6ab4e 100644
--- a/frontend/src/views/Login.vue
+++ b/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(() => {