Improved domain creation form.

frontend/src/components/domains/DomainCreationForm.vue

@@ -3,7 +3,7 @@
   <v-stepper v-model="step">
     <v-stepper-header class="align-center px-10">
       <v-img
-        src="../../assets/Modoboa_RVB-ORANGE-SANS.png"
+        src="../../assets/Modoboa_RVB-BLEU-SANS.png"
         max-width="190"
         />
       <v-stepper-step :complete="step > 1" step="1">
@@ -37,7 +37,7 @@
             rules="required"
             >
             <v-text-field
-              :label="'Name' | translate"
+              :label="'Domain name (ex: domain.tld)' | translate"
               v-model="domain.name"
               :error-messages="errors"
               outlined
@@ -53,9 +53,14 @@
                           :error-messages="errors"
                           />
           </validation-provider>
-          <v-switch :label="'Enabled' | translate" v-model="domain.enabled" />
+          <v-switch
+            :label="'Enabled' | translate"
+            v-model="domain.enabled"
+            :hint="'Control if this domain will be allowed to send and receive messages' | translate"
+            persistent-hint
+            />
         </validation-observer>
-        <div class="d-flex justify-center">
+        <div class="d-flex justify-end">
           <v-btn
             color="primary"
             @click="goToNextStep(1, 2)"
@@ -90,7 +95,7 @@
           :choices="dkimKeyLengths"
           :disabled="!domain.enable_dkim"
           />
-        <div class="d-flex justify-center mt-8">
+        <div class="d-flex justify-end mt-8">
           <v-btn @click="step = 1" class="mr-10" text>
             <translate>Back</translate>
           </v-btn>
@@ -151,7 +156,7 @@
               />
           </validation-provider>
         </validation-observer>
-        <div class="d-flex justify-center mt-8">
+        <div class="d-flex justify-end mt-8">
           <v-btn @click="step = 2" class="mr-10" text>
             <translate>Back</translate>
           </v-btn>
@@ -208,7 +213,7 @@
                     />
 
         </validation-observer>
-        <div class="d-flex justify-center mt-8">
+        <div class="d-flex justify-end mt-8">
           <v-btn @click="step = 3" class="mr-10" text>
             <translate>Back</translate>
           </v-btn>
@@ -313,17 +318,20 @@
       </v-stepper-content>
     </v-stepper-items>
   </v-stepper>
+  <confirm-dialog ref="confirm" />
 </div>
 </template>
 
 <script>
 import { bus } from '@/main'
 import ChoiceField from '@/components/tools/ChoiceField'
+import ConfirmDialog from '@/components/layout/ConfirmDialog'
 
 export default {
   props: ['value'],
   components: {
-    ChoiceField
+    ChoiceField,
+    ConfirmDialog
   },
   data () {
     return {
@@ -383,10 +391,25 @@ export default {
         }
       }
     },
-    close () {
+    async close (withConfirm) {
+      if (withConfirm) {
+        const confirm = await this.$refs.confirm.open(
+          this.$gettext('Warning'),
+          this.$gettext('If you close this form now, your modifications won\'t be saved. Do you confirm?'),
+          {
+            color: 'error'
+          }
+        )
+        if (!confirm) {
+          return
+        }
+      }
       this.$emit('close')
       this.initDomain()
       this.step = 1
+      this.$refs.observer_1.reset()
+      this.$refs.observer_3.reset()
+      this.$refs.observer_4.reset()
     },
     async goToNextStep (current, next) {
       const valid = await this.$refs[`observer_${current}`].validate()
@@ -424,6 +447,10 @@ export default {
   &__items {
     overflow-y: auto;
   }
+
+  &__wrapper {
+    padding: 0 10px;
+  }
 }
 .subtitle {
   color: #000;

frontend/src/components/domains/DomainList.vue

@@ -91,7 +91,7 @@
                   <v-list-item-title><translate>Edit</translate></v-list-item-title>
                 </v-list-item-content>
               </v-list-item>
-              <v-list-item @click="confirmDelete(item)" color="red">
+              <v-list-item @click="deleteDomain(item)" color="red">
                 <v-list-item-icon>
                   <v-icon color="red">mdi-delete-outline</v-icon>
                 </v-list-item-icon>
@@ -111,10 +111,7 @@
         </td>
       </template>
     </v-data-table>
-
-  <confirm-dialog v-model="showConfirmDialog"
-                  :message="deleteDomainMsg"
-                  @confirm="deleteDomain" />
+  <confirm-dialog ref="confirm" />
 </v-card>
 </template>
 
@@ -156,8 +153,16 @@ export default {
       this.selectedDomain = domain
       this.showConfirmDialog = true
     },
-    deleteDomain () {
-
+    async deleteDomain (domain) {
+      await this.$refs.confirm.open(
+        this.$gettext('Warning'),
+        this.$gettext(`Do you really want to delete the domain ${domain.name}?`),
+        {
+          color: 'error',
+          cancelLabel: this.$gettext('No'),
+          agreeLabel: this.$gettext('Yes')
+        }
+      )
     },
     getDNSTagType (value) {
       if (value === 'unknown') {

frontend/src/components/layout/ConfirmDialog.vue

@@ -1,24 +1,33 @@
 <template>
-<v-dialog v-model="dialog" max-width="290">
+<v-dialog
+  v-model="dialog"
+  :max-width="options.width"
+  :style="{ zIndex: options.zIndex }"
+  @keydown.esc="cancel"
+  >
   <v-card>
-    <v-card-title class="headline">
-      {{ message }}
-    </v-card-title>
-    <v-card-actions>
+    <v-toolbar dark :color="options.color" dense flat>
+      <v-toolbar-title class="text-body-2 font-weight-bold">
+        {{ title }}
+      </v-toolbar-title>
+    </v-toolbar>
+    <v-card-text
+      v-show="!!message"
+      class="pa-4"
+      v-html="message"
+      ></v-card-text>
+    <v-card-actions class="pt-3">
       <v-spacer></v-spacer>
-
       <v-btn
-        text
-        @click="cancel"
+        v-if="!options.noconfirm"
+        :color="this.options.color"
+        @click.native="cancel"
         >
-        <translate>No</translate>
+        {{ options.cancelLabel }}
       </v-btn>
       <v-btn
-        color="primary"
-        text
-        @click="confirm"
-        >
-        <translate>Yes</translate>
+        @click.native="agree">
+        {{ options.agreeLabel }}
       </v-btn>
     </v-card-actions>
   </v-card>
@@ -27,23 +36,40 @@
 
 <script>
 export default {
-  props: ['value', 'message'],
-  computed: {
-    dialog: {
-      get () {
-        return this.value
-      },
-      set (newValue) {
-        this.$emit('input', newValue)
+  data () {
+    return {
+      dialog: false,
+      resolve: null,
+      reject: null,
+      message: null,
+      title: null,
+      options: {
+        color: 'primary',
+        width: 400,
+        zIndex: 200,
+        noconfirm: false,
+        cancelLabel: this.$gettext('Cancel'),
+        agreeLabel: this.$gettext('OK')
       }
     }
   },
   methods: {
-    confirm () {
-      this.$emit('confirm')
+    open (title, message, options) {
+      this.dialog = true
+      this.title = title
+      this.message = message
+      this.options = Object.assign(this.options, options)
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    agree () {
+      this.resolve(true)
       this.dialog = false
     },
     cancel () {
+      this.resolve(false)
       this.dialog = false
     }
   }

frontend/src/components/tools/ChoiceField.vue

@@ -1,6 +1,8 @@
 <template>
 <div>
-  <div class="text-subtitle-1 grey--text text--darken-1 mb-4"><translate>{{ label }}</translate></div>
+  <div class="text-subtitle-1 grey--text text--darken-1 mb-4" :class="{ 'label--disabled': disabled }">
+    <translate>{{ label }}</translate>
+  </div>
   <div class="d-flex">
     <div v-for="(choice, index) in choices"
          :key="index"
@@ -66,6 +68,10 @@ export default {
 
   &--disabled {
     cursor: unset;
+    opacity: .5;
   }
 }
+.label--disabled {
+  opacity: .5;
+}
 </style>