From 794238bbdd812b7b76a5f12ba65cdcf57f54cd5b Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Fri, 21 Apr 2023 11:08:47 +0200
Subject: [PATCH] Few UI improvements.

fix #2928
---
 .../src/components/domains/DomainForm.vue     | 31 +++++++++++--------
 .../src/components/domains/DomainList.vue     |  4 ++-
 .../identities/AccountCreationForm.vue        |  5 ++-
 .../src/components/identities/AccountForm.vue | 12 ++++---
 .../src/components/identities/AliasForm.vue   | 10 ++++--
 .../identities/AliasGeneralForm.vue           | 13 ++++++--
 .../components/identities/IdentityList.vue    |  3 ++
 frontend/src/components/layout/Navbar.vue     |  5 +--
 .../src/components/tools/CreationForm.vue     | 11 +++++--
 frontend/src/store/modules/domains.js         |  1 +
 10 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/domains/DomainForm.vue b/frontend/src/components/domains/DomainForm.vue
index 3a42e3e98..35f4156ac 100644
--- a/frontend/src/components/domains/DomainForm.vue
+++ b/frontend/src/components/domains/DomainForm.vue
@@ -149,10 +149,10 @@
     </v-expansion-panel>
   </v-expansion-panels>
   <div class="mt-4 d-flex justify-end">
-    <v-btn @click="$router.go(-1)">
+    <v-btn @click="$router.go(-1)" :loading="working">
       <translate>Cancel</translate>
     </v-btn>
-    <v-btn class="ml-4" color="primary darken-1" @click="save">
+    <v-btn class="ml-4" color="primary darken-1" @click="save" :loading="working">
       <translate>Save</translate>
     </v-btn>
   </div>
@@ -187,7 +187,8 @@ export default {
     return {
       editedDomain: {},
       limitsConfig: {},
-      panel: 0
+      panel: 0,
+      working: false
     }
   },
   methods: {
@@ -204,16 +205,21 @@ export default {
           return
         }
       }
-      const data = { ...this.editedDomain }
-      if (data.transport === null) {
-        delete data.transport
+      this.working = true
+      try {
+        const data = { ...this.editedDomain }
+        if (data.transport === null) {
+          delete data.transport
+        }
+        if (data.type === 'relaydomain') {
+          this.$refs.transportForm.checkSettingTypes(data)
+        }
+        this.$store.dispatch('domains/updateDomain', data).then(() => {
+          bus.$emit('notification', { msg: this.$gettext('Domain updated') })
+        })
+      } finally {
+        this.working = false
       }
-      if (data.type === 'relaydomain') {
-        this.$refs.transportForm.checkSettingTypes(data)
-      }
-      this.$store.dispatch('domains/updateDomain', data).then(resp => {
-        bus.$emit('notification', { msg: this.$gettext('Domain updated') })
-      })
     }
   },
   created () {
@@ -226,7 +232,6 @@ export default {
       handler: function (val) {
         if (val) {
           this.editedDomain = JSON.parse(JSON.stringify(val))
-          console.log(this.editedDomain)
         }
       },
       immediate: true
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index 681346f0d..a72c98721 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/frontend/src/components/domains/DomainList.vue
@@ -32,6 +32,7 @@
                 :expanded.sync="expanded"
                 @item-expanded="loadAliases"
                 @click:row="showAliases"
+                :loading="!domainsLoaded"
                 >
     <template v-slot:item="{ item, isExpanded, expand }">
       <tr>
@@ -158,7 +159,8 @@ export default {
     MenuItems
   },
   computed: mapGetters({
-    domains: 'domains/domains'
+    domains: 'domains/domains',
+    domainsLoaded: 'domains/domainsLoaded'
   }),
   data () {
     return {
diff --git a/frontend/src/components/identities/AccountCreationForm.vue b/frontend/src/components/identities/AccountCreationForm.vue
index a1a2c3cf5..dcfcad41a 100644
--- a/frontend/src/components/identities/AccountCreationForm.vue
+++ b/frontend/src/components/identities/AccountCreationForm.vue
@@ -171,6 +171,9 @@ export default {
       return this.$refs[`form_${step}`].$refs.observer
     },
     validateAccount () {
+      if (this.account.mailbox.message_limit === '') {
+        this.$set(this.account.mailbox, 'message_limit', undefined)
+      }
       return accounts.validate(this.account)
     },
     close () {
@@ -183,7 +186,7 @@ export default {
       if (this.account.role === 'SuperAdmins' && this.account.username.indexOf('@') === -1) {
         delete data.mailbox
       }
-      accounts.create(data).then(resp => {
+      accounts.create(data).then(() => {
         bus.$emit('notification', { msg: this.$gettext('Account created') })
         this.$emit('created')
         this.close()
diff --git a/frontend/src/components/identities/AccountForm.vue b/frontend/src/components/identities/AccountForm.vue
index 3a234d853..480b5bb72 100644
--- a/frontend/src/components/identities/AccountForm.vue
+++ b/frontend/src/components/identities/AccountForm.vue
@@ -99,7 +99,7 @@
       </v-expansion-panel-content>
     </v-expansion-panel>
     <v-expansion-panel
-      v-if="limitsConfig.params.enable_admin_limits && account.role !== 'SimpleUsers' && account.role !== 'SuperAdmins'"
+      v-if="limitsConfig.params && limitsConfig.params.enable_admin_limits && account.role !== 'SimpleUsers' && account.role !== 'SuperAdmins'"
       >
       <v-expansion-panel-header>
         <v-row no-gutters>
@@ -114,10 +114,10 @@
     </v-expansion-panel>
   </v-expansion-panels>
   <div class="mt-4 d-flex justify-end">
-    <v-btn @click="$router.go(-1)">
+    <v-btn @click="$router.go(-1)" :loading="working">
       <translate>Cancel</translate>
     </v-btn>
-    <v-btn class="ml-4" color="primary darken-1" @click="save">
+    <v-btn class="ml-4" color="primary darken-1" @click="save" :loading="working">
       <translate>Save</translate>
     </v-btn>
   </div>
@@ -151,7 +151,8 @@ export default {
     return {
       editedAccount: {},
       limitsConfig: {},
-      panel: 0
+      panel: 0,
+      working: false
     }
   },
   methods: {
@@ -168,6 +169,7 @@ export default {
           return
         }
       }
+      this.working = true
       try {
         const data = JSON.parse(JSON.stringify(this.editedAccount))
         if (this.usernameIsEmail) {
@@ -201,6 +203,8 @@ export default {
         if (this.$refs.resourcesForm) {
           this.$refs.resourcesForm.$refs.observer.setErrors(error.response.data)
         }
+      } finally {
+        this.working = false
       }
     }
   },
diff --git a/frontend/src/components/identities/AliasForm.vue b/frontend/src/components/identities/AliasForm.vue
index 1cdb87fd1..8e065dd47 100644
--- a/frontend/src/components/identities/AliasForm.vue
+++ b/frontend/src/components/identities/AliasForm.vue
@@ -70,10 +70,10 @@
     </v-expansion-panel>
   </v-expansion-panels>
   <div class="mt-4 d-flex justify-end">
-    <v-btn @click="$router.go(-1)">
+    <v-btn @click="$router.go(-1)" :loading="working">
       <translate>Cancel</translate>
     </v-btn>
-    <v-btn class="ml-4" color="primary darken-1" @click="save">
+    <v-btn class="ml-4" color="primary darken-1" @click="save" :loading="working">
       <translate>Save</translate>
     </v-btn>
   </div>
@@ -95,7 +95,8 @@ export default {
   data () {
     return {
       editedAlias: {},
-      panel: 0
+      panel: 0,
+      working: false
     }
   },
   methods: {
@@ -106,6 +107,7 @@ export default {
           return
         }
       }
+      this.working = true
       try {
         await aliases.patch(this.editedAlias.pk, this.editedAlias).then(resp => {
           bus.$emit('notification', { msg: this.$gettext('Alias updated') })
@@ -114,6 +116,8 @@ export default {
         if (this.$refs.generalForm) {
           this.$refs.generalForm.$refs.observer.setErrors(error.response.data)
         }
+      } finally {
+        this.working = false
       }
     }
   },
diff --git a/frontend/src/components/identities/AliasGeneralForm.vue b/frontend/src/components/identities/AliasGeneralForm.vue
index 2ace60d49..a7d54d093 100644
--- a/frontend/src/components/identities/AliasGeneralForm.vue
+++ b/frontend/src/components/identities/AliasGeneralForm.vue
@@ -99,8 +99,17 @@ export default {
       this.$emit('input', this.form)
     }
   },
-  mounted () {
-    this.form = { ...this.value }
+  watch: {
+    value: {
+      handler (newValue) {
+        if (newValue) {
+          this.form = { ...newValue }
+        } else {
+          this.form = {}
+        }
+      },
+      immediate: true
+    }
   }
 }
 </script>
diff --git a/frontend/src/components/identities/IdentityList.vue b/frontend/src/components/identities/IdentityList.vue
index 910c8bf97..7d5231a52 100644
--- a/frontend/src/components/identities/IdentityList.vue
+++ b/frontend/src/components/identities/IdentityList.vue
@@ -28,6 +28,7 @@
     :headers="headers"
     :items="identities"
     :search="search"
+    :loading="loading"
     item-key="identity"
     class="elevation-1"
     show-select
@@ -102,6 +103,7 @@ export default {
       ],
       identities: [],
       keepAccountFolder: false,
+      loading: true,
       search: '',
       selected: []
     }
@@ -203,6 +205,7 @@ export default {
       identities.getAll().then(resp => {
         this.identities = resp.data
         this.selected = []
+        this.loading = false
       })
     },
     downloadFile (options) {
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index 953b73dd4..34629d03c 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -79,7 +79,7 @@
       </template>
     </v-list>
     <template v-slot:append>
-      <v-menu rounded="lg" offset-y top>
+      <v-menu rounded="lg" offset-y top v-if="isAuthenticated">
         <template v-slot:activator="{ attrs, on }">
           <div class="d-flex user-box justify-center align-center white--text py-2" v-bind="attrs" v-on="on">
             <v-avatar size="40" color="primary">
@@ -120,7 +120,8 @@ import { mapGetters } from 'vuex'
 export default {
   computed: {
     ...mapGetters({
-      authUser: 'auth/authUser'
+      authUser: 'auth/authUser',
+      isAuthenticated: 'auth/isAuthenticated'
     }),
     userInitials () {
       let initials = null
diff --git a/frontend/src/components/tools/CreationForm.vue b/frontend/src/components/tools/CreationForm.vue
index b57963216..ae84d0ed7 100644
--- a/frontend/src/components/tools/CreationForm.vue
+++ b/frontend/src/components/tools/CreationForm.vue
@@ -57,8 +57,9 @@
         <div class="d-flex justify-center mt-8">
           <v-btn
             color="primary"
-            @click="$emit('create')"
+            @click="create"
             large
+            :loading="working"
             >
             <translate>Confirm and create</translate>
           </v-btn>
@@ -89,12 +90,14 @@ export default {
   },
   data () {
     return {
-      currentStep: 1
+      currentStep: 1,
+      working: false
     }
   },
   methods: {
     resetForm () {
       this.currentStep = 1
+      this.working = false
       this.steps.forEach((item, index) => {
         const observer = this.formObserverGetter(index + 1)
         if (observer !== undefined) {
@@ -139,6 +142,10 @@ export default {
         }
       }
       this.currentStep = next
+    },
+    create () {
+      this.working = true
+      this.$emit('create')
     }
   }
 }
diff --git a/frontend/src/store/modules/domains.js b/frontend/src/store/modules/domains.js
index 80c70c56b..b5d0df93b 100644
--- a/frontend/src/store/modules/domains.js
+++ b/frontend/src/store/modules/domains.js
@@ -16,6 +16,7 @@ const state = {
 // getters
 const getters = {
   domains: state => state.domains,
+  domainsLoaded: state => state.domainsLoaded,
   getDomainByPk: state => pk => {
     for (const domain of state.domains) {
       if (domain.pk === parseInt(pk, 10)) {