From 52cc076735b939b0f61d8e80abc650c6323d4327 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Sat, 24 Oct 2020 10:52:27 +0200
Subject: [PATCH] Added component to list domain aliases.

---
 .../components/domains/DomainAliasList.vue    | 89 +++++++++++++++++++
 .../src/components/domains/DomainList.vue     | 10 +--
 frontend/src/plugins/axios.js                 |  3 +-
 frontend/src/router/index.js                  |  3 +-
 frontend/src/store/modules/domains.js         | 15 +++-
 frontend/src/views/Domains.vue                | 33 +++++++
 6 files changed, 141 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/domains/DomainAliasList.vue
 create mode 100644 frontend/src/views/Domains.vue

diff --git a/frontend/src/components/domains/DomainAliasList.vue b/frontend/src/components/domains/DomainAliasList.vue
new file mode 100644
index 000000000..5d4b2da19
--- /dev/null
+++ b/frontend/src/components/domains/DomainAliasList.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <v-toolbar flat color="white">
+      <v-text-field
+        v-model="search"
+        append-icon="mdi-magnify"
+        label="Search"
+        single-line
+        hide-details
+        ></v-text-field>
+      <v-spacer></v-spacer>
+      <v-btn class="mr-2" fab small>
+        <v-icon>mdi-file-import-outline</v-icon>
+      </v-btn>
+      <v-btn class="mr-2" fab small>
+        <v-icon>mdi-file-export-outline</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-data-table :headers="headers" :items="domainAliases" :search="search" class="elevation-1">
+      <template v-slot:item.actions="{ item }">
+        <v-btn icon small :to="{ name: 'DomainEdit', params: { domainPk: item.pk }}">
+          <v-icon>mdi-circle-edit-outline</v-icon>
+        </v-btn>
+        <v-btn icon small title="Remove" @click="confirmDelete(item)">
+          <v-icon>mdi-delete-outline</v-icon>
+        </v-btn>
+      </template>
+      <template v-slot:item.name="{ item }">
+        <router-link :to="{ name: 'DomainDetail', params: { pk: item.pk } }">
+          {{ item.name }}
+        </router-link>
+      </template>
+      <template v-slot:item.dns_status="{ }">
+      </template>
+    </v-data-table>
+
+  <confirm-dialog v-model="showConfirmDialog"
+                  :message="deleteDomainMsg"
+                  @confirm="deleteDomain" />
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ConfirmDialog from '@/components/layout/ConfirmDialog'
+
+export default {
+  components: {
+    ConfirmDialog
+  },
+  computed: mapGetters({
+    domainAliases: 'domains/domainAliases'
+  }),
+  data () {
+    return {
+      headers: [
+        { text: '', value: 'actions', sortable: false },
+        { text: 'Name', value: 'name' },
+        { text: 'DNS status', value: 'dns_status', sortable: false }
+      ],
+      deleteDomainMsg: 'Confirm deletion?',
+      selectedDomain: null,
+      showConfirmDialog: false,
+      search: ''
+    }
+  },
+  created () {
+    this.$store.dispatch('domains/getDomainAliases')
+  },
+  methods: {
+    confirmDelete (domain) {
+      this.selectedDomain = domain
+      this.showConfirmDialog = true
+    },
+    deleteDomain () {
+
+    },
+    getDNSTagType (value) {
+      if (value === 'unknown') {
+        return 'orange'
+      }
+      if (value === 'ok') {
+        return 'warning'
+      }
+      return 'success'
+    }
+  }
+}
+</script>
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index 7fbbf3a40..a5e95985b 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/frontend/src/components/domains/DomainList.vue
@@ -1,10 +1,6 @@
 <template>
-<v-layout>
-  <v-flex>
+  <div>
     <v-toolbar flat color="white">
-      <v-toolbar-title>Domains</v-toolbar-title>
-      <v-divider class="mx-2" inset vertical></v-divider>
-      <v-spacer></v-spacer>
       <v-text-field
         v-model="search"
         append-icon="mdi-magnify"
@@ -67,11 +63,11 @@
         <v-progress-linear v-model="item.allocated_quota_in_percent" />
       </template>
     </v-data-table>
-  </v-flex>
+
   <confirm-dialog v-model="showConfirmDialog"
                   :message="deleteDomainMsg"
                   @confirm="deleteDomain" />
-</v-layout>
+</div>
 </template>
 
 <script>
diff --git a/frontend/src/plugins/axios.js b/frontend/src/plugins/axios.js
index 1642705df..e10da122d 100644
--- a/frontend/src/plugins/axios.js
+++ b/frontend/src/plugins/axios.js
@@ -42,12 +42,13 @@ _axios.interceptors.response.use(
       return Promise.reject(error)
     }
     const refreshToken = Cookies.get('refreshToken')
-    if (error.config.url === '/token/refresh/' || !refreshToken) {
+    if (error.config.url.endsWith('/token/refresh/') || !refreshToken) {
       store.dispatch('auth/logout')
       router.push('/login/')
       return Promise.reject(error)
     }
     return _axios.post('/token/refresh/', { refresh: refreshToken }).then(resp => {
+      console.log('OK')
       Cookies.set('token', resp.data.access, { sameSite: 'strict' })
       _axios.defaults.headers.common.Authorization = `Bearer ${resp.data.access}`
       const config = error.config
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 9f52234d4..74ef3a0f4 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -3,7 +3,6 @@ import VueRouter from 'vue-router'
 
 import store from '@/store'
 
-import DomainList from '@/components/domains/DomainList'
 import DomainForm from '@/components/domains/DomainForm'
 import ParametersForm from '@/components/parameters/ParametersForm'
 import LogList from '@/components/logs/LogList'
@@ -22,7 +21,7 @@ const routes = [
   {
     path: '/domains/',
     name: 'DomainList',
-    component: DomainList,
+    component: () => import('../views/Domains.vue'),
     meta: {
       requiresAuth: true
     }
diff --git a/frontend/src/store/modules/domains.js b/frontend/src/store/modules/domains.js
index 4fb5d9633..892c9f4da 100644
--- a/frontend/src/store/modules/domains.js
+++ b/frontend/src/store/modules/domains.js
@@ -4,11 +4,13 @@ import Vue from 'vue'
 const SET_DOMAINS = 'SET_DOMAINS'
 const ADD_DOMAIN = 'ADD_DOMAIN'
 const UPDATE_DOMAIN = 'UPDATE_DOMAIN'
+const SET_DOMAIN_ALIASES = 'SET_DOMAIN_ALIASES'
 
 // initial state
 const state = {
   domainsLoaded: false,
-  domains: []
+  domains: [],
+  domainAliases: []
 }
 
 // getters
@@ -21,7 +23,8 @@ const getters = {
       }
     }
     return null
-  }
+  },
+  domainAliases: state => state.domainAliases
 }
 
 // actions
@@ -40,6 +43,11 @@ const actions = {
     return Vue.prototype.$axios.put(`/domains/${data.pk}/`, data).then(response => {
       commit(UPDATE_DOMAIN, { domain: response.data })
     })
+  },
+  getDomainAliases ({ commit }) {
+    return Vue.prototype.$axios.get('/domainaliases/').then(response => {
+      commit(SET_DOMAIN_ALIASES, response.data)
+    })
   }
 }
 
@@ -58,6 +66,9 @@ const mutations = {
         Vue.set(state.domains, pos, domain)
       }
     })
+  },
+  [SET_DOMAIN_ALIASES] (state, domainAliases) {
+    state.domainAliases = domainAliases
   }
 }
 
diff --git a/frontend/src/views/Domains.vue b/frontend/src/views/Domains.vue
new file mode 100644
index 000000000..b6c55b7a1
--- /dev/null
+++ b/frontend/src/views/Domains.vue
@@ -0,0 +1,33 @@
+<template>
+<div>
+  <v-tabs v-model="tab">
+    <v-tab>Domains</v-tab>
+    <v-tab>Aliases</v-tab>
+  </v-tabs>
+  <v-tabs-items v-model="tab">
+    <v-tab-item>
+      <domain-list />
+    </v-tab-item>
+    <v-tab-item>
+      <domain-alias-list />
+    </v-tab-item>
+  </v-tabs-items>
+</div>
+</template>
+
+<script>
+import DomainList from '@/components/domains/DomainList'
+import DomainAliasList from '@/components/domains/DomainAliasList'
+
+export default {
+  components: {
+    DomainList,
+    DomainAliasList
+  },
+  data () {
+    return {
+      tab: null
+    }
+  }
+}
+</script>