add DomainInfo view and mutation for UPDATE main_domain and DEL domain

app/src/components/globals/Icon.vue

@@ -13,8 +13,8 @@ export default {
 
 <style lang="scss" scoped>
 .icon {
-  font-size: 1rem;
-  width: 1rem;
+  font-size: inherit;
+  min-width: 1rem;
   text-align: center;
 
   &.lg {

app/src/helpers/dataStore.js

@@ -20,10 +20,18 @@ export default {
       state.domains.push(domain)
     },
 
+    'DEL_DOMAINS' (state, domain) {
+      state.domains.splice(state.domains.indexOf(domain), 1)
+    },
+
     'SET_MAIN_DOMAIN' (state, response) {
       state.main_domain = response.current_main_domain
     },
 
+    'UPDATE_MAIN_DOMAIN' (state, domain) {
+      state.main_domain = domain
+    },
+
     'SET_USERS' (state, users) {
       state.users = Object.keys(users).length === 0 ? null : users
     },
@@ -45,6 +53,11 @@ export default {
       Vue.set(user, 'fullname', `${userData.firstname} ${userData.lastname}`)
     },
 
+    'UPDATE_USERS_DETAILS' (state, payload) {
+      // FIXME use a common function to execute the same code ?
+      this.commit('SET_USERS_DETAILS', payload)
+    },
+
     'DEL_USERS_DETAILS' (state, username) {
       Vue.delete(state.users_details, username)
       if (state.users) {
@@ -117,7 +130,7 @@ export default {
     'PUT' ({ state, commit }, { uri, param, data, storeKey = uri }) {
       return api.put(param ? `${uri}/${param}` : uri, data).then(responseData => {
         const data = responseData[storeKey] ? responseData[storeKey] : responseData
-        commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data)
+        commit('UPDATE_' + storeKey.toUpperCase(), param ? [param, data] : data)
         return param ? state[storeKey][param] : state[storeKey]
       })
     },

app/src/locales/en.json

@@ -106,7 +106,7 @@
     "domain_dns_longdesc": "View DNS configuration",
     "domain_name": "Domain name",
     "domain_visit": "Visit",
-    "domain_visit_url": "Visit %s",
+    "domain_visit_url": "Visit {url}",
     "domains": "Domains",
     "enable": "Enable",
     "enabled": "Enabled",

app/src/routes.js

@@ -2,7 +2,7 @@ import Home from './views/Home'
 import Login from './views/Login'
 import { UserList, UserCreate, UserInfo, UserEdit } from './views/user'
 import { GroupList, GroupCreate } from './views/group'
-import { DomainList, DomainAdd } from './views/domain'
+import { DomainList, DomainAdd, DomainInfo } from './views/domain'
 
 const routes = [
   { name: 'home', path: '/', component: Home },
@@ -104,6 +104,18 @@ const routes = [
         { name: 'domain-add', trad: 'domain_add' }
       ]
     }
+  },
+  {
+    name: 'domain-info',
+    path: '/domains/:name',
+    component: DomainInfo,
+    props: true,
+    meta: {
+      breadcrumb: [
+        { name: 'domain-list', trad: 'domains' },
+        { name: 'domain-info', param: 'name' }
+      ]
+    }
   }
 ]
 

app/src/views/domain/DomainInfo.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="domain-info">
+    <b-card>
+      <template v-slot:header>
+        <h2><icon iname="globe" /> {{ name }}</h2>
+      </template>
+      <!-- VISIT -->
+      <p>{{ $t('domain_visit_url', { url: 'https://' + name }) }}</p>
+      <b-button variant="success" :href="'https://' + name" target="_blank">
+        <icon iname="external-link" /> {{ $t('domain_visit') }}
+      </b-button>
+      <hr>
+
+      <!-- DEFAULT DOMAIN -->
+      <p>{{ $t('domain_default_desc') }}</p>
+      <template v-if="isMainDomain">
+        <p class="alert alert-info">
+          <icon iname="star" /> {{ $t('domain_default_longdesc') }}
+        </p>
+      </template>
+      <template v-else>
+        <b-button variant="info" v-b-modal.default-domain-modal>
+          <icon iname="star" /> {{ $t('set_default') }}
+        </b-button>
+      </template>
+      <hr>
+
+      <!-- DNS CONFIG -->
+      <p>{{ $t('domain_dns_longdesc') }}</p>
+      <b-button :to="{ name: 'domain-dns', param: { name } }">
+        <icon iname="globe" /> {{ $t('domain_dns_config') }}
+      </b-button>
+      <hr>
+
+      <!-- SSL CERTIFICATE -->
+      <p>{{ $t('certificate_manage') }}</p>
+      <b-button :to="{ name: 'domain-certificate', param: { name } }">
+        <icon iname="lock" /> {{ $t('ssl_certificate') }}
+      </b-button>
+      <hr>
+
+      <!-- DELETE -->
+      <p>{{ $t('domain_delete_longdesc') }}</p>
+      <b-button variant="danger" v-b-modal.delete-modal>
+        <icon iname="trash-o" /> {{ $t('delete') }}
+      </b-button>
+    </b-card>
+
+    <!-- DEFAULT DOMAIN MODAL -->
+    <b-modal
+      id="default-domain-modal" centered
+      body-bg-variant="danger" body-text-variant="light"
+      @ok="setAsDefaultDomain" hide-header
+    >
+      {{ $t('confirm_change_maindomain') }}
+    </b-modal>
+
+    <!-- DELETE MODAL -->
+    <b-modal
+      id="delete-modal" centered
+      body-bg-variant="danger" body-text-variant="light"
+      @ok="deleteDomain" hide-header
+    >
+      {{ $t('confirm_delete', { name }) }}
+    </b-modal>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DomainInfo',
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      purge: false
+    }
+  },
+  computed: {
+    mainDomain () {
+      return this.$store.state.data.main_domain
+    },
+
+    isMainDomain () {
+      if (!this.mainDomain) return
+      return this.name === this.mainDomain
+    }
+  },
+  methods: {
+    deleteDomain () {
+      this.$store.dispatch('DELETE',
+        { uri: 'domains', param: this.name }
+      ).then(() => {
+        this.$router.push({ name: 'domain-list' })
+      })
+    },
+
+    setAsDefaultDomain () {
+      this.$store.dispatch('PUT',
+        { uri: 'domains/main', data: { new_main_domain: this.name }, storeKey: 'main_domain' }
+      ).then(data => {
+        console.log(data)
+      }).catch(() => {
+        // FIXME PUT /domains/main return empty text response instead of json
+        // commit from here for now
+        this.$store.commit('UPDATE_MAIN_DOMAIN', this.name)
+      })
+    }
+  },
+  created () {
+    this.$store.dispatch('FETCH',
+      { uri: 'domains/main', storeKey: 'main_domain' }
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-body > div {
+  flex-direction: column;
+  @include media-breakpoint-up(md) {
+      flex-direction: row;
+  }
+}
+
+.icon.fa-user {
+  font-size: 10rem;
+  padding-right: 3rem;
+  padding-left: 1.75rem;
+}
+
+.row {
+  + .row {
+      border-top: 1px solid #eee;
+  }
+
+  padding: .5rem;
+}
+
+.col {
+  margin: 0;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+
+  li {
+    font-style: italic;
+    list-style: none;
+  }
+}
+
+.skeleton {
+  opacity: 0.5;
+
+  h2 {
+    height: #{2 * 1.2}rem;
+  }
+
+  .col {
+    & > * {
+      display: block;
+      background-color: $skeleton-color;
+      height: 1.5rem;
+      max-width: 8rem;
+    }
+
+    strong {
+      max-width: 12rem;
+    }
+  }
+
+  button {
+    height: calc(2.25rem + 2px);
+    width: 7rem;
+  }
+}
+</style>

app/src/views/domain/index.js

@@ -1,2 +1,3 @@
 export { default as DomainList } from './DomainList'
 export { default as DomainAdd } from './DomainAdd'
+export { default as DomainInfo } from './DomainInfo'