Added new steps to creation form.

frontend/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "js-cookie": "^2.2.1",
+    "vee-validate": "^3.4.5",
     "vue": "^2.6.11",
     "vue-cookie": "^1.1.4",
     "vue-gettext": "^2.1.10",

frontend/src/components/domains/DomainCreationForm.vue

@@ -18,25 +18,43 @@
       <v-stepper-step step="4">
         <translate>Options</translate>
       </v-stepper-step>
+      <v-stepper-step step="5">
+        <translate>Summary</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 class="mx-14 mt-4">
+    <v-stepper-items class="mx-16 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']"
-          />
-        <choice-field v-model="domain.type" :label="'Type' | translate" :choices="domainTypes" />
-        <v-switch :label="'Enabled' | translate" v-model="domain.enabled" />
+        <validation-observer ref="observer_1">
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required"
+            >
+            <v-text-field
+              :label="'Name' | translate"
+              v-model="domain.name"
+              :error-messages="errors"
+              outlined
+              />
+          </validation-provider>
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required"
+            >
+            <choice-field v-model="domain.type"
+                          :label="'Type' | translate"
+                          :choices="domainTypes"
+                          :error-messages="errors"
+                          />
+          </validation-provider>
+          <v-switch :label="'Enabled' | translate" v-model="domain.enabled" />
+        </validation-observer>
         <div class="d-flex justify-center">
           <v-btn
             color="primary"
-            @click="step = 2"
+            @click="goToNextStep(1, 2)"
             large
             >
             <translate>Next</translate>
@@ -55,11 +73,10 @@
         <v-text-field
           label="DKIM key selector"
           v-model="domain.dkim_key_selector"
-          v-if="domain.enable_dkim"
+          :disabled="!domain.enable_dkim"
           outlined
           />
         <choice-field
-          v-if="domain.enable_dkim"
           v-model="domain.dkim_key_length"
           :label="'DKIM key length' | translate"
           :choices="dkimKeyLengths"
@@ -77,6 +94,184 @@
           </v-btn>
         </div>
       </v-stepper-content>
+      <v-stepper-content step="3">
+        <validation-observer ref="observer_3">
+          <v-text-field
+            :label="'Quota' | translate"
+            :hint="'Quota shared between mailboxes. Can be expressed in KB, MB (default) or GB. A value of 0 means no quota.' | translate"
+            persistent-hint
+            v-model="domain.quota"
+            :error-messages="errors"
+            outlined
+            />
+          <v-text-field
+            :label="'Default mailbox quota' | translate"
+            :hint="'Default quota applied to mailboxes. Can be expressed in KB, MB (default) or GB. A value of 0 means no quota.' | translate"
+            persistent-hint
+            v-model="domain.default_mailbox_quota"
+            :error-messages="errors"
+            outlined
+            />
+          <validation-provider
+            v-slot="{ errors }"
+            rules="number"
+            >
+            <v-text-field
+              :label="'Message sending limit' | translate"
+              :hint="'Number of messages this domain can send per day.' | translate"
+              persistent-hint
+              v-model="domain.message_sending_limit"
+              :error-messages="errors"
+              outlined
+              />
+          </validation-provider>
+        </validation-observer>
+        <div class="d-flex justify-center mt-8">
+          <v-btn @click="step = 2" class="mr-10" text>
+            <translate>Back</translate>
+          </v-btn>
+          <v-btn
+            color="primary"
+            @click="goToNextStep(3, 4)"
+            large
+            >
+            <translate>Next</translate>
+          </v-btn>
+        </div>
+      </v-stepper-content>
+      <v-stepper-content step="4">
+        <validation-observer ref="observer_4">
+          <v-switch v-model="createAdmin"
+                    :label="'Create a domain administrator' | translate"
+                    />
+          <v-text-field
+            :label="'Name' | translate"
+            :hint="'Name of the administrator' | translate"
+            persistent-hint
+            v-model="domain.dom_admin_username"
+            :error-messages="errors"
+            outlined
+            :disabled="!createAdmin"
+            />
+          <v-switch v-model="domain.dom_admin_random_password"
+                    :label="'Random password' | translate"
+                    :disabled="!createAdmin"
+                    :hint="'Generate a random password for the administrator.' | translate"
+                    persistent-hint
+                    />
+          <v-switch v-model="domain.dom_admin_with_mailbox"
+                    :label="'With a mailbox' | translate"
+                    :disabled="!createAdmin"
+                    :hint="'Create a mailbox for the administrator.' | translate"
+                    persistent-hint
+                    />
+          <v-switch v-model="domain.dom_admin_create_aliases"
+                    :label="'Create aliases' | translate"
+                    :disabled="!createAdmin"
+                    :hint="'Create standard aliases for the domain.' | translate"
+                    persistent-hint
+                    />
+
+        </validation-observer>
+        <div class="d-flex justify-center mt-8">
+          <v-btn @click="step = 3" class="mr-10" text>
+            <translate>Back</translate>
+          </v-btn>
+          <v-btn
+            color="primary"
+            @click="goToNextStep(4, 5)"
+            large
+            >
+            <translate>Next</translate>
+          </v-btn>
+        </div>
+      </v-stepper-content>
+      <v-stepper-content step="5">
+        <div class="text-center text-h3"><translate>Summary</translate></div>
+        <div class="subtitle text-subtitle-1 mt-4">
+          <translate>General</translate>
+        </div>
+        <v-row dense>
+          <v-col><translate class="grey--text">Name</translate></v-col>
+          <v-col class="text-right">{{ domain.name }}</v-col>
+        </v-row>
+        <v-row dense>
+          <v-col><translate class="grey--text">Type</translate></v-col>
+          <v-col class="text-right">{{ domain.type }}</v-col>
+        </v-row>
+        <v-row dense>
+          <v-col><translate class="grey--text">Enabled</translate></v-col>
+          <v-col class="text-right">{{ domain.enabled }}</v-col>
+        </v-row>
+        <div class="subtitle text-subtitle-1 mt-4">
+          <translate>DNS</translate>
+        </div>
+        <v-row dense>
+          <v-col><translate class="grey--text">Enable DNS checks</translate></v-col>
+          <v-col class="text-right">{{ domain.enable_dns_checks }}</v-col>
+        </v-row>
+        <v-row dense>
+          <v-col><translate class="grey--text">Enable DKIM signing</translate></v-col>
+          <v-col class="text-right">{{ domain.enable_dkim }}</v-col>
+        </v-row>
+        <v-row dense v-if="domain.enable_dkim">
+          <v-col><translate class="grey--text">DKIM key selector</translate></v-col>
+          <v-col class="text-right">{{ domain.dkim_key_selector }}</v-col>
+        </v-row>
+        <v-row dense v-if="domain.enable_dkim">
+          <v-col><translate class="grey--text">DKIM key length</translate></v-col>
+          <v-col class="text-right">{{ domain.dkim_key_length }}</v-col>
+        </v-row>
+        <div class="subtitle text-subtitle-1 mt-4">
+          <translate>Limitations</translate>
+        </div>
+        <v-row dense>
+          <v-col><translate class="grey--text">Quota</translate></v-col>
+          <v-col class="text-right">{{ domain.quota }}</v-col>
+        </v-row>
+        <v-row dense>
+          <v-col><translate class="grey--text">Default mailbox quota</translate></v-col>
+          <v-col class="text-right">{{ domain.default_mailbox_quota }}</v-col>
+        </v-row>
+        <v-row dense>
+          <v-col><translate class="grey--text">Message sending limit</translate></v-col>
+          <v-col class="text-right">{{ domain.message_sending_limit }}</v-col>
+        </v-row>
+        <div class="subtitle text-subtitle-1 mt-4">
+          <translate>Options</translate>
+        </div>
+        <v-row dense>
+          <v-col><translate class="grey--text">Create a domain administrator</translate></v-col>
+          <v-col class="text-right">{{ createAdmin }}</v-col>
+        </v-row>
+        <div v-if="createAdmin">
+          <v-row dense>
+            <v-col><translate class="grey--text">Administrator name</translate></v-col>
+            <v-col class="text-right">{{ domain.dom_admin_username }}</v-col>
+          </v-row>
+          <v-row dense>
+            <v-col><translate class="grey--text">Random password</translate></v-col>
+            <v-col class="text-right">{{ domain.dom_admin_random_password }}</v-col>
+          </v-row>
+          <v-row dense>
+            <v-col><translate class="grey--text">With mailbox</translate></v-col>
+            <v-col class="text-right">{{ domain.dom_admin_with_mailbox }}</v-col>
+          </v-row>
+          <v-row dense>
+            <v-col><translate class="grey--text">Create aliases</translate></v-col>
+            <v-col class="text-right">{{ domain.dom_admin_create_aliases }}</v-col>
+          </v-row>
+        </div>
+        <div class="d-flex justify-center mt-8">
+          <v-btn
+            color="primary"
+            @click="submit"
+            large
+            >
+            <translate>Confirm and create</translate>
+          </v-btn>
+        </div>
+      </v-stepper-content>
     </v-stepper-items>
   </v-stepper>
 </div>
@@ -91,6 +286,7 @@ export default {
   },
   data () {
     return {
+      createAdmin: false,
       domain: {},
       domainTypes: [
         {
@@ -122,13 +318,41 @@ export default {
       step: 1
     }
   },
+  mounted () {
+    this.initDomain()
+  },
   methods: {
+    initDomain () {
+      this.domain = {
+        type: 'domain',
+        enabled: true,
+        enable_dns_checks: true,
+        enable_dkim: false,
+        dkim_key_selector: 'modoboa',
+        quota: 0,
+        default_mailbox_quota: 0,
+        dom_admin_username: 'admin',
+        dom_admin_random_password: false,
+        dom_admin_with_mailbox: false,
+        dom_admin_create_aliases: false
+      }
+    },
     close () {
       this.$emit('close')
+      this.initDomain()
       this.step = 1
     },
-    selectType (value) {
-      this.$set(this.domain, 'type', value)
+    async goToNextStep (current, next) {
+      const valid = await this.$refs[`observer_${current}`].validate()
+      if (!valid) {
+        return
+      }
+      this.step = next
+    },
+    submit () {
+      this.$store.dispatch('domains/createDomain', this.domain).then(resp => {
+        this.close()
+      })
     }
   }
 }
@@ -141,6 +365,10 @@ export default {
 }
 .v-stepper {
   height: 100%;
-  width: 60%;
+  width: 70%;
+}
+.subtitle {
+  color: #000;
+  border-bottom: 1px solid #DBDDDF;
 }
 </style>

frontend/src/components/tools/ChoiceField.vue

@@ -7,7 +7,7 @@
          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>
+      <v-icon v-if="choice.icon" class="d-block mb-2" :color="iconColor(choice.value)" x-large>{{ choice.icon }}</v-icon>
       <translate class="grey--text text--darken-1">{{ choice.label }}</translate>
     </div>
   </div>
@@ -23,6 +23,9 @@ export default {
     }
   },
   methods: {
+    iconColor (value) {
+      return (value === this.currentChoice) ? 'primary' : ''
+    },
     selectChoice (value) {
       this.currentChoice = value
       this.$emit('input', value)

frontend/src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import './plugins/axios'
+import './plugins/vee-validate'
 import './plugins/vue-cookie'
 import './plugins/vue-gettext'
 import App from './App.vue'

frontend/src/plugins/vee-validate.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
+import { numeric, required } from 'vee-validate/dist/rules'
+import { translate } from 'vue-gettext'
+
+const { gettext: $gettext } = translate
+
+// Declare builtin rules here
+extend('numeric', {
+  ...numeric,
+  message: () => $gettext('This field must be a valid number')
+})
+extend('required', {
+  ...required,
+  message: () => $gettext('This field is required')
+})
+
+// Add custom rules here
+
+// Register components globally
+Vue.component('ValidationObserver', ValidationObserver)
+Vue.component('ValidationProvider', ValidationProvider)

frontend/src/plugins/vuetify.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
 
+import DomainIcon from '@/components/icons/DomainIcon'
+
 Vue.use(Vuetify)
 
 export default new Vuetify({
@@ -11,5 +13,12 @@ export default new Vuetify({
         secondary: '#F18429'
       }
     }
+  },
+  icons: {
+    values: {
+      domain: {
+        component: DomainIcon
+      }
+    }
   }
 })

frontend/yarn.lock

@@ -9588,6 +9588,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vee-validate@^3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-3.4.5.tgz#96a456c309f7bdb2cce62c3b554f96d893e9f6ae"
+  integrity sha512-ZEcLqOAZzSkMhDvPcTx0xcwVOijFnMW9J+BA20j+rDmo24T8RCCqVQyRwwrDrcWJZV2dRYl/yYNa2GB6UCoBvg==
+
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"