<NME> DomainCreationForm.vue
<BEF> <template>
<creation-form
  :title="'New domain'|translate"
  :steps="steps"
  :form-observer-getter="getObserver"
  :validate-object="validateDomain"
  :summary-sections="summarySections"
  @close="close"
  @create="submit"
  >
  <template v-slot:form.general="{ step }">
    <domain-general-form :ref="`form_${step}`" v-model="domain" />
  </template>
  <template v-slot:form.dns="{ step }">
    <domain-dns-form :ref="`form_${step}`" v-model="domain" />
  </template>
  <template v-slot:form.limitations="{ step }">
    <domain-limitations-form :ref="`form_${step}`" v-model="domain" />
  </template>
  <template v-slot:form.options="{ step }">
    <domain-options-form :ref="`form_${step}`" v-model="domain" @createAdmin="updateCreateAdmin" />
  </template>
  <template v-slot:form.transport="{ step }">
    <domain-transport-form :ref="`form_${step}`" v-model="domain.transport" />
  </template>
  <template v-slot:item.with_random_password="{ item }">
    <template v-if="item.value">
      <v-col cols="12" class="highligth white--text">
        <v-row>
          <v-col><span>{{ item.key }}</span></v-col>
          <v-col class="text-right">{{ item.value|yesno }}</v-col>
        </v-row>
        <v-row>
          <v-col class="text-right py-1">
            {{ domain.domain_admin.password }}
            <v-btn icon color="white" :title="'Copy to clipboard'|translate" @click="copyPassword">
              <v-icon>mdi-clipboard-multiple-outline</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-col>
    </template>
    <template v-else>
      <v-col><span class="grey--text">{{ item.key }}</span></v-col>
      <v-col class="text-right">{{ item.value|yesno }}</v-col>
    </template>
  </template>
</creation-form>
</template>

<script>
import { bus } from '@/main'
import CreationForm from '@/components/tools/CreationForm'
import DomainDNSForm from './DomainDNSForm'
import DomainGeneralForm from './DomainGeneralForm'
import DomainLimitationsForm from './DomainLimitationsForm'
import DomainOptionsForm from './DomainOptionsForm'
import DomainTransportForm from './DomainTransportForm'

export default {
  props: ['value'],
  components: {
    CreationForm,
    'domain-dns-form': DomainDNSForm,
    DomainGeneralForm,
    DomainLimitationsForm,
    DomainOptionsForm,
    DomainTransportForm
  },
  computed: {
    summarySections () {
      const result = [
        {
          title: this.$gettext('General'),
          items: [
            { key: this.$gettext('Name'), value: this.domain.name },
            { key: this.$gettext('Type'), value: this.domain.type },
            { key: this.$gettext('Enabled'), value: this.domain.enabled, type: 'yesno' }
          ]
        },
        {
          title: this.$gettext('DNS'),
          items: [
            { key: this.$gettext('Enable DNS checks'), value: this.domain.enable_dns_checks, type: 'yesno' },
            { key: this.$gettext('Enable DKIM signing'), value: this.domain.enable_dkim, type: 'yesno' }
          ]
        },
        {
          title: this.$gettext('Limitations'),
          items: [
            { key: this.$gettext('Quota'), value: this.domain.quota },
            { key: this.$gettext('Default mailbox quota'), value: this.domain.default_mailbox_quota },
            { key: this.$gettext('Message sending limit'), value: this.domain.message_sending_limit }
          ]
        }
      ]
      if (this.domain.enable_dkim) {
        result[1].items.push({ key: this.$gettext('DKIM key selector'), value: this.domain.dkim_key_selector })
        result[1].items.push({ key: this.$gettext('DKIM key length'), value: this.domain.dkim_key_length })
      }
      </v-stepper-content>
      <v-stepper-content step="5" class="flex-grow-0">
        <div class="text-center text-h3"><translate>Summary</translate></div>
        <div class="subtitle mt-4 d-flex">
          <translate class="text-h6">General</translate>
          <a href="#" class="edit-link ml-auto" @click="step = 1"><translate>Modify</translate></a>
        </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|yesno }}</v-col>
        </v-row>
        <div class="subtitle mt-4 d-flex">
          <translate class="text-h6">DNS</translate>
          <a href="#" class="edit-link ml-auto" @click="step = 2"><translate>Modify</translate></a>
        </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|yesno }}</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|yesno }}</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 mt-4 d-flex">
          <translate class="text-h6">Limitations</translate>
          <a href="#" class="edit-link ml-auto" @click="step = 3"><translate>Modify</translate></a>
        </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 mt-4 d-flex">
          <translate class="text-h6">Options</translate>
          <a href="#" class="edit-link ml-auto" @click="step = 4"><translate>Modify</translate></a>
        </div>
        <v-row dense>
          <v-col><translate class="grey--text">Create a domain administrator</translate></v-col>
          <v-col class="text-right">{{ createAdmin|yesno }}</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.domain_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.domain_admin.with_random_password|yesno }}</v-col>
          </v-row>
          <v-row dense>
            <v-col><translate class="grey--text">With mailbox</translate></v-col>
            <v-col class="text-right">{{ domain.domain_admin.with_mailbox|yesno }}</v-col>
          </v-row>
          <v-row dense>
            <v-col><translate class="grey--text">Create aliases</translate></v-col>
            <v-col class="text-right">{{ domain.domain_admin.with_aliases|yesno }}</v-col>
          </v-row>
        </div>
        <div class="d-flex justify-center mt-8">
          <v-btn
            color="primary"
              type: 'yesno'
            },
            {
              key: this.$gettext('With mailbox'),
              value: this.domain.domain_admin.with_mailbox,
              type: 'yesno'
            },
            {
              key: this.$gettext('Create aliases'),
              value: this.domain.domain_admin.with_aliases,
              type: 'yesno'
            }
          ]
<script>
import { bus } from '@/main'
import ConfirmDialog from '@/components/layout/ConfirmDialog'
import DomainDNSForm from './DomainDNSForm'
import DomainGeneralForm from './DomainGeneralForm'
import DomainLimitationsForm from './DomainLimitationsForm'
          ]
        }
        if (this.$refs.form_4.service) {
  props: ['value'],
  components: {
    ConfirmDialog,
    'domain-dns-form': DomainDNSForm,
    DomainGeneralForm,
    DomainLimitationsForm,
    DomainOptionsForm
  },
  data () {
    return {
      createAdmin: false,
    getObserver (step) {
      return this.$refs[`form_${step}`].$refs.observer
    },
    validateDomain () {

    },
    updateCreateAdmin (value) {
      this.createAdmin = value
    },
    submit () {
      const data = JSON.parse(JSON.stringify(this.domain))
      if (!this.createAdmin) {
        delete data.domain_admin
      }
      if (data.type === 'relaydomain') {
        this.$refs.form_4.checkSettingTypes(data)
      } else {
        delete data.transport
      }
      this.$store.dispatch('domains/createDomain', data).then(resp => {
        this.$router.push({ name: 'DomainDetail', params: { id: resp.data.pk } })
        bus.$emit('notification', { msg: this.$gettext('Domain created') })
        this.close()
      })
    }
  }
}
</script>

<style lang="scss">
.highligth {
  background-color: #515D78;
}
</style>

<MSG> Use summary-creation component in domain creation form.

<DFF> @@ -101,84 +101,10 @@
       </v-stepper-content>
       <v-stepper-content step="5" class="flex-grow-0">
         <div class="text-center text-h3"><translate>Summary</translate></div>
-        <div class="subtitle mt-4 d-flex">
-          <translate class="text-h6">General</translate>
-          <a href="#" class="edit-link ml-auto" @click="step = 1"><translate>Modify</translate></a>
-        </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|yesno }}</v-col>
-        </v-row>
-        <div class="subtitle mt-4 d-flex">
-          <translate class="text-h6">DNS</translate>
-          <a href="#" class="edit-link ml-auto" @click="step = 2"><translate>Modify</translate></a>
-        </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|yesno }}</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|yesno }}</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 mt-4 d-flex">
-          <translate class="text-h6">Limitations</translate>
-          <a href="#" class="edit-link ml-auto" @click="step = 3"><translate>Modify</translate></a>
-        </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 mt-4 d-flex">
-          <translate class="text-h6">Options</translate>
-          <a href="#" class="edit-link ml-auto" @click="step = 4"><translate>Modify</translate></a>
-        </div>
-        <v-row dense>
-          <v-col><translate class="grey--text">Create a domain administrator</translate></v-col>
-          <v-col class="text-right">{{ createAdmin|yesno }}</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.domain_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.domain_admin.with_random_password|yesno }}</v-col>
-          </v-row>
-          <v-row dense>
-            <v-col><translate class="grey--text">With mailbox</translate></v-col>
-            <v-col class="text-right">{{ domain.domain_admin.with_mailbox|yesno }}</v-col>
-          </v-row>
-          <v-row dense>
-            <v-col><translate class="grey--text">Create aliases</translate></v-col>
-            <v-col class="text-right">{{ domain.domain_admin.with_aliases|yesno }}</v-col>
-          </v-row>
-        </div>
+        <creation-summary
+          :sections="summarySections"
+          @modify-step="val => step = val"
+          />
         <div class="d-flex justify-center mt-8">
           <v-btn
             color="primary"
@@ -198,6 +124,7 @@
 <script>
 import { bus } from '@/main'
 import ConfirmDialog from '@/components/layout/ConfirmDialog'
+import CreationSummary from '@/components/tools/CreationSummary'
 import DomainDNSForm from './DomainDNSForm'
 import DomainGeneralForm from './DomainGeneralForm'
 import DomainLimitationsForm from './DomainLimitationsForm'
@@ -207,11 +134,70 @@ export default {
   props: ['value'],
   components: {
     ConfirmDialog,
+    CreationSummary,
     'domain-dns-form': DomainDNSForm,
     DomainGeneralForm,
     DomainLimitationsForm,
     DomainOptionsForm
   },
+  computed: {
+    summarySections () {
+      const result = [
+        {
+          title: this.$gettext('General'),
+          items: [
+            { key: this.$gettext('Name'), value: this.domain.name },
+            { key: this.$gettext('Type'), value: this.domain.type },
+            { key: this.$gettext('Enabled'), value: this.domain.enabled, type: 'yesno' }
+          ]
+        },
+        {
+          title: this.$gettext('DNS'),
+          items: [
+            { key: this.$gettext('Enable DNS checks'), value: this.domain.enable_dns_checks, type: 'yesno' },
+            { key: this.$gettext('Enable DKIM signing'), value: this.domain.enable_dkim, type: 'yesno' }
+          ]
+        },
+        {
+          title: this.$gettext('Limitations'),
+          items: [
+            { key: this.$gettext('Quota'), value: this.domain.quota },
+            { key: this.$gettext('Default mailbox quota'), value: this.domain.default_mailbox_quota },
+            { key: this.$gettext('Message sending limit'), value: this.domain.message_sending_limit }
+          ]
+        },
+        {
+          title: this.$gettext('Options'),
+          items: [
+            { key: this.$gettext('Create a domain administrator'), value: this.createAdmin, type: 'yesno' }
+          ]
+        }
+      ]
+      if (this.domain.enable_dkim) {
+        result[1].items.push({ key: this.$gettext('DKIM key selector'), value: this.domain.dkim_key_selector })
+        result[1].items.push({ key: this.$gettext('DKIM key length'), value: this.domain.dkim_key_length })
+      }
+      if (this.createAdmin) {
+        result[3].items.push({ key: this.$gettext('Administrator name'), value: this.domain.domain_admin.username })
+        result[3].items.push({
+          key: this.$gettext('Random password'),
+          value: this.domain.domain_admin.with_random_password,
+          type: 'yesno'
+        })
+        result[3].items.push({
+          key: this.$gettext('With mailbox'),
+          value: this.domain.domain_admin.with_mailbox,
+          type: 'yesno'
+        })
+        result[3].items.push({
+          key: this.$gettext('Create aliases'),
+          value: this.domain.domain_admin.with_aliases,
+          type: 'yesno'
+        })
+      }
+      return result
+    }
+  },
   data () {
     return {
       createAdmin: false,

Use summary-creation component in domain creation form.