From b68b98f02a850e3c42c918ccaebe25e02425e663 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Fri, 22 Jan 2021 10:03:28 +0100
Subject: [PATCH] Improved domain creation form.

---
 frontend/src/App.vue                          |   6 +
 .../components/domains/DomainCreationForm.vue | 103 ++++++++++++------
 .../src/components/domains/DomainList.vue     |  18 ++-
 frontend/src/components/layout/Navbar.vue     |   6 +-
 frontend/src/components/tools/ChoiceField.vue |  45 ++++++++
 frontend/src/views/Domains.vue                |  46 +++++++-
 6 files changed, 181 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/components/tools/ChoiceField.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index fc58607ba..6b6d7915e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -38,3 +38,9 @@ export default {
   })
 }
 </script>
+
+<style scoped>
+.v-main {
+  background-color: #f7f8fa;
+}
+</style>
diff --git a/frontend/src/components/domains/DomainCreationForm.vue b/frontend/src/components/domains/DomainCreationForm.vue
index 8a109d830..c50d37f93 100644
--- a/frontend/src/components/domains/DomainCreationForm.vue
+++ b/frontend/src/components/domains/DomainCreationForm.vue
@@ -1,7 +1,11 @@
 <template>
-<v-dialog v-model="dialog" max-width="600">
+<div class="d-flex justify-center inner">
   <v-stepper v-model="step">
-    <v-stepper-header>
+    <v-stepper-header class=" align-center">
+      <v-img
+        src="../../assets/Modoboa_RVB-ORANGE-SANS.png"
+        max-width="190"
+        />
       <v-stepper-step :complete="step > 1" step="1">
         <translate>General</translate>
       </v-stepper-step>
@@ -14,36 +18,37 @@
       <v-stepper-step step="4">
         <translate>Options</translate>
       </v-stepper-step>
+      <v-btn icon @click="close">
+        <v-icon color="primary" x-large>mdi-close</v-icon>
+      </v-btn>
     </v-stepper-header>
-    <v-stepper-items>
+    <v-stepper-items class="mx-14 mt-4">
       <v-stepper-content step="1">
         <v-text-field
           :label="'Name' | translate"
           v-model="domain.name"
+          outlined
           :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>
+        <choice-field v-model="domain.type" :label="'Type' | translate" :choices="domainTypes" />
+        <v-switch :label="'Enabled' | translate" v-model="domain.enabled" />
+        <div class="d-flex justify-center">
           <v-btn
-            text
             color="primary"
             @click="step = 2"
+            large
             >
             <translate>Next</translate>
           </v-btn>
         </div>
       </v-stepper-content>
       <v-stepper-content step="2">
-        <v-checkbox
+        <v-switch
           label="Enable DNS checks"
           v-model="domain.enable_dns_checks"
           />
-        <v-checkbox
+        <v-switch
           label="Enable DKIM signing"
           v-model="domain.enable_dkim"
           />
@@ -51,21 +56,22 @@
           label="DKIM key selector"
           v-model="domain.dkim_key_selector"
           v-if="domain.enable_dkim"
+          outlined
           />
-        <v-text-field
-          label="DKIM key length"
-          v-model="domain.dkim_key_length"
+        <choice-field
           v-if="domain.enable_dkim"
+          v-model="domain.dkim_key_length"
+          :label="'DKIM key length' | translate"
+          :choices="dkimKeyLengths"
           />
-
-        <div class="float-right">
-          <v-btn text @click="dialog = false">
-            <translate>Cancel</translate>
+        <div class="d-flex justify-center mt-8">
+          <v-btn @click="step = 1" class="mr-10" text>
+            <translate>Back</translate>
           </v-btn>
           <v-btn
-            text
             color="primary"
             @click="step = 3"
+            large
             >
             <translate>Next</translate>
           </v-btn>
@@ -73,37 +79,68 @@
       </v-stepper-content>
     </v-stepper-items>
   </v-stepper>
-</v-dialog>
+</div>
 </template>
 
 <script>
+import ChoiceField from '@/components/tools/ChoiceField'
 export default {
   props: ['value'],
   components: {
-  },
-  computed: {
-    dialog: {
-      get () {
-        return this.value
-      },
-      set (newValue) {
-        this.$emit('input', newValue)
-      }
-    }
+    ChoiceField
   },
   data () {
     return {
       domain: {},
-      domainTypes: ['Domain', 'Relay domain'],
+      domainTypes: [
+        {
+          label: 'Domain',
+          icon: 'mdi-earth',
+          value: 'domain'
+        },
+        {
+          label: 'Relay domain',
+          icon: 'mdi-earth',
+          value: 'relaydomain'
+        }
+      ],
+      dkimKeyLengths: [
+        {
+          label: '1024',
+          value: 1024
+        },
+        {
+          label: '2048',
+          value: 2048
+        },
+        {
+          label: '4096',
+          value: 4096
+        }
+      ],
       formErrors: {},
       step: 1
     }
   },
   methods: {
     close () {
-      this.dialog = false
+      this.$emit('close')
       this.step = 1
+    },
+    selectType (value) {
+      this.$set(this.domain, 'type', value)
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.inner {
+  height: 100%;
+  background-color: #fff;
+}
+.v-stepper {
+  height: 100%;
+  width: 60%;
+}
+</style>
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index 2e83c0c49..299317369 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/frontend/src/components/domains/DomainList.vue
@@ -1,7 +1,15 @@
 <template>
-  <div class="mt-6">
-    <v-toolbar flat color="white">
-      <v-spacer></v-spacer>
+  <v-card class="mt-6">
+    <v-toolbar flat>
+      <v-menu offset-y>
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn v-bind="attrs" v-on="on" small>
+            Actions <v-icon right>mdi-chevron-down</v-icon>
+          </v-btn>
+        </template>
+        <v-list dense>
+        </v-list>
+      </v-menu>
       <v-spacer></v-spacer>
       <v-text-field
         v-model="search"
@@ -10,6 +18,7 @@
         filled
         outlined
         dense
+        hide-details
         ></v-text-field>
     </v-toolbar>
     <v-data-table v-model="selected"
@@ -106,7 +115,7 @@
   <confirm-dialog v-model="showConfirmDialog"
                   :message="deleteDomainMsg"
                   @confirm="deleteDomain" />
-</div>
+</v-card>
 </template>
 
 <script>
@@ -168,7 +177,6 @@ export default {
       })
     },
     showAliases (item) {
-      console.log(item)
       this.expanded = [{ item }]
     }
   }
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index ce58c18a6..e3d7890ba 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -167,8 +167,10 @@ export default {
 <style lang="scss" scoped>
 .v-list-item {
   &--active {
-    background: rgba(0, 0, 0, 0.25);
-
+    &::before {
+      background-color: #000;
+      opacity: 0.3;
+    }
   }
 }
 
diff --git a/frontend/src/components/tools/ChoiceField.vue b/frontend/src/components/tools/ChoiceField.vue
new file mode 100644
index 000000000..dd0820c43
--- /dev/null
+++ b/frontend/src/components/tools/ChoiceField.vue
@@ -0,0 +1,45 @@
+<template>
+<div>
+  <div class="text-subtitle-1 grey--text text--darken-1 mb-4"><translate>{{ label }}</translate></div>
+  <div class="d-flex">
+    <div v-for="(choice, index) in choices"
+         :key="index"
+         class="choice rounded pa-10 mr-4 text-center"
+         :class="{ 'choice--selected': currentChoice === choice.value }"
+         @click="selectChoice(choice.value)">
+      <v-icon v-if="choice.icon" class="d-block mb-2" color="primary" x-large>{{ choice.icon }}</v-icon>
+      <translate class="grey--text text--darken-1">{{ choice.label }}</translate>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['value', 'label', 'choices'],
+  data () {
+    return {
+      currentChoice: this.value
+    }
+  },
+  methods: {
+    selectChoice (value) {
+      this.currentChoice = value
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.choice {
+  width: 200px;
+  background-color: #F2F5F7;
+  border: 1px solid #DBDDDF;
+  cursor: pointer;
+
+  &--selected {
+    border-color: #046BF8 !important;
+  }
+}
+</style>
diff --git a/frontend/src/views/Domains.vue b/frontend/src/views/Domains.vue
index 81fe67367..712ab76fd 100644
--- a/frontend/src/views/Domains.vue
+++ b/frontend/src/views/Domains.vue
@@ -9,24 +9,64 @@
     <v-btn class="mr-2">
       <v-icon>mdi-file-export-outline</v-icon>
     </v-btn>
-    <v-btn color="primary" :to="{ name: 'DomainAdd' }">
-      <v-icon>mdi-plus</v-icon>
-    </v-btn>
+    <v-menu offset-y>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn color="primary" v-bind="attrs" v-on="on">
+          <v-icon left>mdi-plus</v-icon> <translate>New</translate>
+        </v-btn>
+      </template>
+      <v-list dense>
+        <v-list-item @click="showDomainWizard = true">
+          <v-list-item-title><translate>Domain</translate></v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="showAliasForm = true">
+          <v-list-item-title><translate>Alias</translate></v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
   </v-toolbar>
   <domain-list />
+
+  <v-dialog
+    v-model="showDomainWizard"
+    fullscreen
+    transition="dialog-bottom-transition"
+    >
+    <domain-creation-form @close="showDomainWizard = false" />
+  </v-dialog>
+  <v-dialog v-model="showAliasForm"
+            persistent
+            max-width="800px">
+    <domain-alias-form @close="showAliasForm = false" />
+  </v-dialog>
 </div>
 </template>
 
 <script>
+import DomainAliasForm from '@/components/domains/DomainAliasForm'
+import DomainCreationForm from '@/components/domains/DomainCreationForm'
 import DomainList from '@/components/domains/DomainList'
 
 export default {
   components: {
+    DomainAliasForm,
+    DomainCreationForm,
     DomainList
   },
   data () {
     return {
+      showAliasForm: false,
+      showDomainWizard: false
     }
+  },
+  methods: {
+
   }
 }
 </script>
+
+<style scoped>
+.v-toolbar {
+  background-color: #f7f8fa !important;
+}
+</style>