New layout.

frontend/src/App.vue

@@ -7,7 +7,6 @@
   </v-main>
 </v-app>
 <v-app v-else>
-  <topbar />
   <navbar />
   <v-main>
     <v-container fluid>
@@ -20,7 +19,6 @@
 <script>
 import { mapGetters } from 'vuex'
 import Navbar from '@/components/layout/Navbar'
-import Topbar from '@/components/layout/Topbar'
 
 export default {
   name: 'App',
@@ -30,8 +28,7 @@ export default {
     })
   },
   components: {
-    Navbar,
-    Topbar
+    Navbar
   },
   // created () {
   //   this.$store.dispatch('auth/initialize')

frontend/src/components/domains/DomainCreationForm.vue

@@ -0,0 +1,109 @@
+<template>
+<v-dialog v-model="dialog" max-width="600">
+  <v-stepper v-model="step">
+    <v-stepper-header>
+      <v-stepper-step :complete="step > 1" step="1">
+        <translate>General</translate>
+      </v-stepper-step>
+      <v-stepper-step :complete="step > 2" step="2">
+        <translate>DNS</translate>
+      </v-stepper-step>
+      <v-stepper-step :complete="step > 3" step="3">
+        <translate>Limitations</translate>
+      </v-stepper-step>
+      <v-stepper-step step="4">
+        <translate>Options</translate>
+      </v-stepper-step>
+    </v-stepper-header>
+    <v-stepper-items>
+      <v-stepper-content step="1">
+        <v-text-field
+          :label="'Name' | translate"
+          v-model="domain.name"
+          :error="formErrors['name'] !== undefined"
+          :error-messages="formErrors['name']"
+          />
+        <v-select :label="'Type' | translate" :items="domainTypes" />
+        <v-checkbox :label="'Enabled' | translate" v-model="domain.enabled" />
+        <div class="float-right">
+          <v-btn text @click="close">
+            <translate>Cancel</translate>
+          </v-btn>
+          <v-btn
+            text
+            color="primary"
+            @click="step = 2"
+            >
+            <translate>Next</translate>
+          </v-btn>
+        </div>
+      </v-stepper-content>
+      <v-stepper-content step="2">
+        <v-checkbox
+          label="Enable DNS checks"
+          v-model="domain.enable_dns_checks"
+          />
+        <v-checkbox
+          label="Enable DKIM signing"
+          v-model="domain.enable_dkim"
+          />
+        <v-text-field
+          label="DKIM key selector"
+          v-model="domain.dkim_key_selector"
+          v-if="domain.enable_dkim"
+          />
+        <v-text-field
+          label="DKIM key length"
+          v-model="domain.dkim_key_length"
+          v-if="domain.enable_dkim"
+          />
+
+        <div class="float-right">
+          <v-btn text @click="dialog = false">
+            <translate>Cancel</translate>
+          </v-btn>
+          <v-btn
+            text
+            color="primary"
+            @click="step = 3"
+            >
+            <translate>Next</translate>
+          </v-btn>
+        </div>
+      </v-stepper-content>
+    </v-stepper-items>
+  </v-stepper>
+</v-dialog>
+</template>
+
+<script>
+export default {
+  props: ['value'],
+  components: {
+  },
+  computed: {
+    dialog: {
+      get () {
+        return this.value
+      },
+      set (newValue) {
+        this.$emit('input', newValue)
+      }
+    }
+  },
+  data () {
+    return {
+      domain: {},
+      domainTypes: ['Domain', 'Relay domain'],
+      formErrors: {},
+      step: 1
+    }
+  },
+  methods: {
+    close () {
+      this.dialog = false
+      this.step = 1
+    }
+  }
+}
+</script>

frontend/src/components/domains/DomainList.vue

@@ -15,23 +15,11 @@
       <v-btn class="mr-2" fab small>
         <v-icon>mdi-file-export-outline</v-icon>
       </v-btn>
-      <v-btn fab small color="primary" :to="{ name: 'DomainAdd' }">
+      <v-btn fab small color="secondary" :to="{ name: 'DomainAdd' }">
         <v-icon>mdi-plus</v-icon>
       </v-btn>
     </v-toolbar>
     <v-data-table :headers="headers" :items="domains" :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="'Delete this domain' | translate"
-          @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 }}
@@ -66,6 +54,20 @@
       <template v-slot:item.allocated_quota_in_percent="{ item }">
         <v-progress-linear v-model="item.allocated_quota_in_percent" />
       </template>
+      <template v-slot:item.actions="{ item }">
+        <div class="text-right">
+          <v-btn icon x-small :to="{ name: 'DomainEdit', params: { domainPk: item.pk }}">
+            <v-icon>mdi-circle-edit-outline</v-icon>
+          </v-btn>
+          <v-btn
+            icon
+            x-small
+            :title="'Delete this domain' | translate"
+            @click="confirmDelete(item)">
+            <v-icon>mdi-delete-outline</v-icon>
+          </v-btn>
+        </div>
+      </template>
     </v-data-table>
 
   <confirm-dialog v-model="showConfirmDialog"
@@ -88,11 +90,11 @@ export default {
   data () {
     return {
       headers: [
-        { text: '', value: 'actions', sortable: false },
         { text: 'Name', value: 'name' },
         { text: 'Tags', value: 'tags' },
         { text: 'DNS status', value: 'dns_status', sortable: false },
-        { text: 'Quota', value: 'allocated_quota_in_percent' }
+        { text: 'Quota', value: 'allocated_quota_in_percent' },
+        { text: this.$gettext('Actions'), value: 'actions', sortable: false }
       ],
       deleteDomainMsg: this.$gettext('Confirm deletion?'),
       selectedDomain: null,

frontend/src/components/layout/Navbar.vue

@@ -1,13 +1,22 @@
 <template>
   <v-navigation-drawer
     v-model="drawer"
+    color="primary"
     app
-    clipped
-  >
-    <v-list dense>
+    dark
+    >
+    <div class="d-flex justify-center">
+      <v-img
+        src="../../assets/Modoboa_RVB-BLANC-SANS.png"
+        max-width="190"
+        />
+    </div>
+
+    <v-list>
       <template v-for="item in items">
         <v-list-item
           v-if="!item.children"
+          class="menu-item"
           :to="item.to"
           link
           :key="item.title"
@@ -21,6 +30,7 @@
           </v-list-item-content>
         </v-list-item>
         <v-list-group v-else
+                      color="white"
                       :key="item.text"
                       :prepend-icon="item.icon"
                       no-action>
@@ -56,20 +66,34 @@
         </v-list-group>
       </template>
     </v-list>
+    <template v-slot:append>
+      <div class="user-box justify-end white--text">
+        <v-avatar size="40" color="primary">
+          <span class="white--text headline">AN</span>
+        </v-avatar>
+        <span class="mx-2">{{ authUser.first_name }} {{ authUser.last_name }}</span>
+      </div>
+    </template>
   </v-navigation-drawer>
 </template>
 
 <script>
 // import * as api from '@/api'
+import { mapGetters } from 'vuex'
 
 export default {
+  computed: {
+    ...mapGetters({
+      authUser: 'auth/authUser'
+    })
+  },
   data () {
     return {
       drawer: true,
       items: [
         {
           text: this.$gettext('Dashboard'),
-          icon: 'mdi-view-dashboard'
+          icon: 'mdi-view-dashboard-outline'
         },
         {
           text: this.$gettext('Domains'),
@@ -105,3 +129,19 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.v-list-item {
+  &--active {
+    background: rgba(0, 0, 0, 0.30) !important;
+  }
+}
+
+.user-box {
+  box-sizing: border-box;
+  border: 1px solid #979797;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.25);
+  padding: 5px;
+}
+</style>

frontend/src/plugins/vuetify.js

@@ -7,7 +7,8 @@ export default new Vuetify({
   theme: {
     themes: {
       light: {
-        primary: '#046BF8'
+        primary: '#046BF8',
+        secondary: '#F18429'
       }
     }
   }

frontend/src/store/modules/auth.js

@@ -7,7 +7,7 @@ function setupAxios (token) {
 }
 
 function fetchUser (commit) {
-  return Vue.prototype.$axios.get('/account/me').then(resp => {
+  return Vue.prototype.$axios.get('/account/me/').then(resp => {
     commit('SET_AUTH_USER', { authUser: resp.data, isAuthenticated: true })
   })
 }
@@ -18,7 +18,8 @@ const state = () => ({
 })
 
 const getters = {
-  isAuthenticated: state => state.isAuthenticated
+  isAuthenticated: state => state.isAuthenticated,
+  authUser: state => state.authUser
 }
 
 const mutations = {