From 09a6fe1c5b8dd87147dd232dac393dbe272dde45 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Mon, 8 Feb 2021 17:02:02 +0100
Subject: [PATCH] Improved domain creation form.

---
 frontend/src/assets/Modoboa_RVB-BLEU-SANS.png | Bin 0 -> 6798 bytes
 .../src/assets/Modoboa_RVB-ORANGE-SANS.png    | Bin 6793 -> 0 bytes
 .../components/domains/DomainCreationForm.vue |  45 ++++++++---
 .../src/components/domains/DomainList.vue     |  19 +++--
 .../src/components/layout/ConfirmDialog.vue   |  74 ++++++++++++------
 frontend/src/components/tools/ChoiceField.vue |   8 +-
 6 files changed, 105 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/assets/Modoboa_RVB-BLEU-SANS.png
 delete mode 100644 frontend/src/assets/Modoboa_RVB-ORANGE-SANS.png

diff --git a/frontend/src/assets/Modoboa_RVB-BLEU-SANS.png b/frontend/src/assets/Modoboa_RVB-BLEU-SANS.png
new file mode 100644
index 0000000000000000000000000000000000000000..89462d7034afe8f31eb5c7a753f72a1cff70a479
GIT binary patch
literal 6798
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

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/Modoboa_RVB-ORANGE-SANS.png b/frontend/src/assets/Modoboa_RVB-ORANGE-SANS.png
deleted file mode 100644
index cfa51ede3203fd381a38102e291b1f3880ee7b4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6793
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

diff --git a/frontend/src/components/domains/DomainCreationForm.vue b/frontend/src/components/domains/DomainCreationForm.vue
index f1f7693ea..03a7c900a 100644
--- a/frontend/src/components/domains/DomainCreationForm.vue
+++ b/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;
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index 299317369..a7b1f7240 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/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') {
diff --git a/frontend/src/components/layout/ConfirmDialog.vue b/frontend/src/components/layout/ConfirmDialog.vue
index ed71a3c82..ca47183c9 100644
--- a/frontend/src/components/layout/ConfirmDialog.vue
+++ b/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
     }
   }
diff --git a/frontend/src/components/tools/ChoiceField.vue b/frontend/src/components/tools/ChoiceField.vue
index 00f6457f3..43b2621fe 100644
--- a/frontend/src/components/tools/ChoiceField.vue
+++ b/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>