diff --git a/src/resources/vue/Admin/Distlist.vue b/src/resources/vue/Admin/Distlist.vue
index 021c9bd7..acfe289c 100644
--- a/src/resources/vue/Admin/Distlist.vue
+++ b/src/resources/vue/Admin/Distlist.vue
@@ -1,116 +1,116 @@
 <template>
     <div v-if="list.id" class="container">
         <div class="card" id="distlist-info">
             <div class="card-body">
                 <div class="card-title">{{ list.email }}</div>
                 <div class="card-text">
                     <form class="read-only short">
                         <div class="row plaintext">
                             <label for="distlistid" class="col-sm-4 col-form-label">
                                 {{ $t('form.id') }} <span class="text-muted">({{ $t('form.created') }})</span>
                             </label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="distlistid">
                                     {{ list.id }} <span class="text-muted">({{ list.created_at }})</span>
                                 </span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                             <div class="col-sm-8">
                                 <span :class="$root.statusClass(list) + ' form-control-plaintext'" id="status">{{ $root.statusText(list) }}</span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="name" class="col-sm-4 col-form-label">{{ $t('distlist.name') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="name">{{ list.name }}</span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="members" class="col-sm-4 col-form-label">{{ $t('distlist.recipients') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="members">
                                     <span v-for="member in list.members" :key="member">{{ member }}<br></span>
                                 </span>
                             </div>
                         </div>
                     </form>
                     <div class="mt-2 buttons">
                         <button v-if="!list.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendList">
                             {{ $t('btn.suspend') }}
                         </button>
                         <button v-if="list.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendList">
                             {{ $t('btn.unsuspend') }}
                         </button>
                     </div>
                 </div>
             </div>
         </div>
         <ul class="nav nav-tabs mt-3" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="tab-settings" href="#distlist-settings" role="tab" aria-controls="distlist-settings" aria-selected="false" @click="$root.tab">
                     {{ $t('form.settings') }}
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane show active" id="distlist-settings" role="tabpanel" aria-labelledby="tab-settings">
                 <div class="card-body">
                     <div class="card-text">
                         <form class="read-only short">
                             <div class="row plaintext">
                                 <label for="sender_policy" class="col-sm-4 col-form-label">{{ $t('distlist.sender-policy') }}</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="sender_policy">
                                         {{ list.config.sender_policy && list.config.sender_policy.length ? list.config.sender_policy.join(', ') : $t('form.none') }}
                                     </span>
                                 </div>
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 list: { members: [], config: {} }
             }
         },
         created() {
             this.$root.startLoading()
 
             axios.get('/api/v4/groups/' + this.$route.params.list)
                 .then(response => {
                     this.$root.stopLoading()
                     this.list = response.data
                 })
                 .catch(this.$root.errorHandler)
         },
         methods: {
             suspendList() {
-                axios.post('/api/v4/groups/' + this.list.id + '/suspend', {})
+                axios.post('/api/v4/groups/' + this.list.id + '/suspend')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.list = Object.assign({}, this.list, { isSuspended: true })
                         }
                     })
             },
             unsuspendList() {
-                axios.post('/api/v4/groups/' + this.list.id + '/unsuspend', {})
+                axios.post('/api/v4/groups/' + this.list.id + '/unsuspend')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.list = Object.assign({}, this.list, { isSuspended: false })
                         }
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Admin/Domain.vue b/src/resources/vue/Admin/Domain.vue
index 74e9b749..5bdf8803 100644
--- a/src/resources/vue/Admin/Domain.vue
+++ b/src/resources/vue/Admin/Domain.vue
@@ -1,118 +1,118 @@
 <template>
     <div v-if="domain" class="container">
         <div class="card" id="domain-info">
             <div class="card-body">
                 <div class="card-title">{{ domain.namespace }}</div>
                 <div class="card-text">
                     <form class="read-only short">
                         <div class="row plaintext">
                             <label for="domainid" class="col-sm-4 col-form-label">
                                 {{ $t('form.id') }} <span class="text-muted">({{ $t('form.created') }})</span>
                             </label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="domainid">
                                     {{ domain.id }} <span class="text-muted">({{ domain.created_at }})</span>
                                 </span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="status">
                                     <span :class="$root.statusClass(domain)">{{ $root.statusText(domain) }}</span>
                                 </span>
                             </div>
                         </div>
                     </form>
                     <div class="mt-2 buttons">
                         <btn v-if="!domain.isSuspended" id="button-suspend" class="btn-warning" @click="suspendDomain">
                             {{ $t('btn.suspend') }}
                         </btn>
                         <btn v-if="domain.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendDomain">
                             {{ $t('btn.unsuspend') }}
                         </btn>
                     </div>
                 </div>
             </div>
         </div>
         <ul class="nav nav-tabs mt-3" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="tab-config" href="#domain-config" role="tab" aria-controls="domain-config" aria-selected="true" @click="$root.tab">
                     {{ $t('form.config') }}
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-settings" href="#domain-settings" role="tab" aria-controls="domain-settings" aria-selected="false" @click="$root.tab">
                     {{ $t('form.settings') }}
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane show active" id="domain-config" role="tabpanel" aria-labelledby="tab-config">
                 <div class="card-body">
                     <div class="card-text">
                         <p>{{ $t('domain.dns-verify') }}</p>
                         <p><pre id="dns-verify">{{ domain.dns.join("\n") }}</pre></p>
                         <p>{{ $t('domain.dns-config') }}</p>
                         <p><pre id="dns-config">{{ domain.mx.join("\n") }}</pre></p>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="domain-settings" role="tabpanel" aria-labelledby="tab-settings">
                 <div class="card-body">
                     <div class="card-text">
                         <form class="read-only short">
                             <div class="row plaintext">
                                 <label for="spf_whitelist" class="col-sm-4 col-form-label">{{ $t('domain.spf-whitelist') }}</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="spf_whitelist">
                                         {{ domain.config && domain.config.spf_whitelist.length ? domain.config.spf_whitelist.join(', ') : $t('form.none') }}
                                     </span>
                                 </div>
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 domain: null
             }
         },
         created() {
             const domain_id = this.$route.params.domain;
 
             axios.get('/api/v4/domains/' + domain_id)
                 .then(response => {
                     this.domain = response.data
                 })
                 .catch(this.$root.errorHandler)
         },
         methods: {
             suspendDomain() {
-                axios.post('/api/v4/domains/' + this.domain.id + '/suspend', {})
+                axios.post('/api/v4/domains/' + this.domain.id + '/suspend')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.domain = Object.assign({}, this.domain, { isSuspended: true })
                         }
                     })
             },
             unsuspendDomain() {
-                axios.post('/api/v4/domains/' + this.domain.id + '/unsuspend', {})
+                axios.post('/api/v4/domains/' + this.domain.id + '/unsuspend')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.domain = Object.assign({}, this.domain, { isSuspended: false })
                         }
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
index 0349d9fc..b4f99676 100644
--- a/src/resources/vue/Admin/User.vue
+++ b/src/resources/vue/Admin/User.vue
@@ -1,832 +1,832 @@
 <template>
     <div class="container">
         <div class="card" id="user-info">
             <div class="card-body">
                 <h1 class="card-title">{{ user.email }}</h1>
                 <div class="card-text">
                     <form class="read-only short">
                         <div v-if="user.wallet.user_id != user.id" class="row plaintext">
                             <label for="manager" class="col-sm-4 col-form-label">{{ $t('user.managed-by') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="manager">
                                     <router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link>
                                 </span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">({{ $t('form.created') }})</span></label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="userid">
                                     {{ user.id }} <span class="text-muted">({{ user.created_at }})</span>
                                 </span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="status">
                                     <span :class="$root.statusClass(user)">{{ $root.statusText(user) }}</span>
                                 </span>
                             </div>
                         </div>
                         <div class="row plaintext" v-if="user.first_name">
                             <label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span>
                             </div>
                         </div>
                         <div class="row plaintext" v-if="user.last_name">
                             <label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span>
                             </div>
                         </div>
                         <div class="row plaintext" v-if="user.organization">
                             <label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="organization">{{ user.organization }}</span>
                             </div>
                         </div>
                         <div class="row plaintext" v-if="user.phone">
                             <label for="phone" class="col-sm-4 col-form-label">{{ $t('form.phone') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="phone">{{ user.phone }}</span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="external_email" class="col-sm-4 col-form-label">{{ $t('user.ext-email') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="external_email">
                                     <a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a>
                                     <btn class="btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</btn>
                                 </span>
                             </div>
                         </div>
                         <div class="row plaintext" v-if="user.billing_address">
                             <label for="billing_address" class="col-sm-4 col-form-label">{{ $t('user.address') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span>
                             </div>
                         </div>
                         <div class="row plaintext">
                             <label for="country" class="col-sm-4 col-form-label">{{ $t('user.country') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="country">{{ user.country }}</span>
                             </div>
                         </div>
                     </form>
                     <div class="mt-2 buttons">
                         <btn v-if="!user.isSuspended" id="button-suspend" class="btn-warning" @click="suspendUser">
                             {{ $t('btn.suspend') }}
                         </btn>
                         <btn v-if="user.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendUser">
                             {{ $t('btn.unsuspend') }}
                         </btn>
                     </div>
                 </div>
             </div>
         </div>
         <ul class="nav nav-tabs mt-3" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="tab-finances" href="#user-finances" role="tab" aria-controls="user-finances" aria-selected="true">
                     {{ $t('user.finances') }}
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-aliases" href="#user-aliases" role="tab" aria-controls="user-aliases" aria-selected="false">
                     {{ $t('user.aliases') }} ({{ user.aliases.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-subscriptions" href="#user-subscriptions" role="tab" aria-controls="user-subscriptions" aria-selected="false">
                     {{ $t('user.subscriptions') }} ({{ skus.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-domains" href="#user-domains" role="tab" aria-controls="user-domains" aria-selected="false">
                     {{ $t('user.domains') }} ({{ domains.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-users" href="#user-users" role="tab" aria-controls="user-users" aria-selected="false">
                     {{ $t('user.users') }} ({{ users.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-distlists" href="#user-distlists" role="tab" aria-controls="user-distlists" aria-selected="false">
                     {{ $t('user.distlists') }} ({{ distlists.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-resources" href="#user-resources" role="tab" aria-controls="user-resources" aria-selected="false">
                     {{ $t('user.resources') }} ({{ resources.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-shared-folders" href="#user-shared-folders" role="tab" aria-controls="user-shared-folders" aria-selected="false">
                     {{ $t('dashboard.shared-folders') }} ({{ folders.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-settings" href="#user-settings" role="tab" aria-controls="user-settings" aria-selected="false">
                     {{ $t('form.settings') }}
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances">
                 <div class="card-body">
                     <h2 class="card-title">
                         {{ $t('wallet.title') }}
                         <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance, wallet.currency) }}</strong></span>
                     </h2>
                     <div class="card-text">
                         <form class="read-only short">
                             <div class="row">
                                 <label class="col-sm-4 col-form-label">{{ $t('user.discount') }}</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="discount">
                                         <span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span>
                                         <btn class="btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</btn>
                                     </span>
                                 </div>
                             </div>
                             <div class="row" v-if="wallet.mandate && wallet.mandate.id">
                                 <label class="col-sm-4 col-form-label">{{ $t('user.auto-payment') }}</label>
                                 <div class="col-sm-8">
                                     <span id="autopayment" :class="'form-control-plaintext' + (wallet.mandateState ? ' text-danger' : '')"
                                           v-html="$t('user.auto-payment-text', {
                                               amount: wallet.mandate.amount + ' ' + wallet.currency,
                                               balance: wallet.mandate.balance + ' ' + wallet.currency,
                                               method: wallet.mandate.method
                                           })"
                                     >
                                         <span v-if="wallet.mandateState">({{ wallet.mandateState }})</span>.
                                     </span>
                                 </div>
                             </div>
                             <div class="row" v-if="wallet.providerLink">
                                 <label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} {{ $t('form.id') }}</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" v-html="wallet.providerLink"></span>
                                 </div>
                             </div>
                         </form>
                         <div class="mt-2 buttons">
                             <btn id="button-award" class="btn-success" @click="awardDialog">{{ $t('user.add-bonus') }}</btn>
                             <btn id="button-penalty" class="btn-danger" @click="penalizeDialog">{{ $t('user.add-penalty') }}</btn>
                         </div>
                     </div>
                     <h2 class="card-title mt-4">{{ $t('wallet.transactions') }}</h2>
                     <transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log>
                 </div>
             </div>
             <div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead>
                                 <tr>
                                     <th scope="col">{{ $t('form.email') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="(alias, index) in user.aliases" :id="'alias' + index" :key="index">
                                     <td>{{ alias }}</td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>{{ $t('user.aliases-none') }}</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-subscriptions" role="tabpanel" aria-labelledby="tab-subscriptions">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead>
                                 <tr>
                                     <th scope="col">{{ $t('user.subscription') }}</th>
                                     <th scope="col">{{ $t('user.price') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="(sku, sku_id) in skus" :id="'sku' + sku.id" :key="sku_id">
                                     <td>{{ sku.name }}</td>
                                     <td class="price">{{ sku.price }}</td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td colspan="2">{{ $t('user.subscriptions-none') }}</td>
                                 </tr>
                             </tfoot>
                         </table>
                         <small v-if="discount > 0" class="hint">
                             <hr class="m-0">
                             &sup1; {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
                         </small>
                         <div class="mt-2 buttons">
                             <btn class="btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">{{ $t('user.reset-2fa') }}</btn>
                             <btn class="btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">{{ $t('user.add-beta') }}</btn>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead>
                                 <tr>
                                     <th scope="col">{{ $t('domain.namespace') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="globe" :class="$root.statusClass(domain)" :title="$root.statusText(domain)"></svg-icon>
                                         <router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>{{ $t('user.domains-none') }}</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead>
                                 <tr>
                                     <th scope="col">{{ $t('form.primary-email') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="item in users" :id="'user' + item.id" :key="item.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="user" :class="$root.statusClass(item)" :title="$root.statusText(item)"></svg-icon>
                                         <router-link v-if="item.id != user.id" :to="{ path: '/user/' + item.id }">{{ item.email }}</router-link>
                                         <span v-else>{{ item.email }}</span>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>{{ $t('user.users-none') }}</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-distlists" role="tabpanel" aria-labelledby="tab-distlists">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead>
                                 <tr>
                                     <th scope="col">{{ $t('distlist.name') }}</th>
                                     <th scope="col">{{ $t('form.email') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="list in distlists" :key="list.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="users" :class="$root.statusClass(list)" :title="$root.statusText(list)"></svg-icon>
                                         <router-link :to="{ path: '/distlist/' + list.id }">{{ list.name }}</router-link>
                                     </td>
                                     <td>
                                         <router-link :to="{ path: '/distlist/' + list.id }">{{ list.email }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td colspan="2">{{ $t('distlist.list-empty') }}</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-resources" role="tabpanel" aria-labelledby="tab-resources">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead>
                                 <tr>
                                     <th scope="col">{{ $t('form.name') }}</th>
                                     <th scope="col">{{ $t('form.email') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="resource in resources" :key="resource.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="cog" :class="$root.statusClass(resource)" :title="$root.statusText(resource)"></svg-icon>
                                         <router-link :to="{ path: '/resource/' + resource.id }">{{ resource.name }}</router-link>
                                     </td>
                                     <td>
                                         <router-link :to="{ path: '/resource/' + resource.id }">{{ resource.email }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td colspan="2">{{ $t('resource.list-empty') }}</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-shared-folders" role="tabpanel" aria-labelledby="tab-shared-folders">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead>
                                 <tr>
                                     <th scope="col">{{ $t('form.name') }}</th>
                                     <th scope="col">{{ $t('form.type') }}</th>
                                     <th scope="col">{{ $t('form.email') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="folder in folders" :key="folder.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="folder-open" :class="$root.statusClass(folder)" :title="$root.statusText(folder)"></svg-icon>
                                         <router-link :to="{ path: '/shared-folder/' + folder.id }">{{ folder.name }}</router-link>
                                     </td>
                                     <td>{{ $t('shf.type-' + folder.type) }}</td>
                                     <td><router-link :to="{ path: '/shared-folder/' + folder.id }">{{ folder.email }}</router-link></td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td colspan="3">{{ $t('shf.list-empty') }}</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-settings" role="tabpanel" aria-labelledby="tab-settings">
                 <div class="card-body">
                     <div class="card-text">
                         <form class="read-only short">
                             <div class="row plaintext">
                                 <label for="greylist_enabled" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="greylist_enabled">
                                         <span v-if="user.config.greylist_enabled" class="text-success">{{ $t('form.enabled') }}</span>
                                         <span v-else class="text-danger">{{ $t('form.disabled') }}</span>
                                     </span>
                                 </div>
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="discount-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.discount-title') }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>
                             <select v-model="wallet.discount_id" class="form-select">
                                 <option value="">- {{ $t('form.none') }} -</option>
                                 <option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option>
                             </select>
                         </p>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-primary modal-action" @click="submitDiscount()" icon="check">{{ $t('btn.submit') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="email-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.ext-email') }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>
                             <input v-model="external_email" name="external_email" class="form-control">
                         </p>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-primary modal-action" @click="submitEmail()" icon="check">{{ $t('btn.submit') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="oneoff-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title') }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <form data-validation-prefix="oneoff_">
                             <div class="row mb-3">
                                 <label for="oneoff_amount" class="col-form-label">{{ $t('form.amount') }}</label>
                                 <div class="input-group">
                                     <input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required>
                                     <span class="input-group-text">{{ wallet.currency }}</span>
                                 </div>
                             </div>
                             <div class="row">
                                 <label for="oneoff_description" class="col-form-label">{{ $t('form.description') }}</label>
                                 <input class="form-control" id="oneoff_description" v-model="oneoff_description" required>
                             </div>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-primary modal-action" @click="submitOneOff()" icon="check">{{ $t('btn.submit') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="reset-2fa-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.reset-2fa-title') }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('user.2fa-hint1') }}</p>
                         <p>{{ $t('user.2fa-hint2') }}</p>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
     import TransactionLog from '../Widgets/TransactionLog'
 
     export default {
         components: {
             TransactionLog
         },
         beforeRouteUpdate (to, from, next) {
             // An event called when the route that renders this component has changed,
             // but this component is reused in the new route.
             // Required to handle links from /user/XXX to /user/YYY
             next()
             this.$parent.routerReload()
         },
         data() {
             return {
                 oneoff_amount: '',
                 oneoff_description: '',
                 oneoff_negative: false,
                 discount: 0,
                 discount_description: '',
                 discounts: [],
                 external_email: '',
                 folders: [],
                 has2FA: false,
                 hasBeta: false,
                 wallet: {},
                 walletReload: false,
                 distlists: [],
                 domains: [],
                 resources: [],
                 skus: [],
                 sku2FA: null,
                 users: [],
                 user: {
                     aliases: [],
                     config: {},
                     wallet: {},
                     skus: {},
                 }
             }
         },
         created() {
             const user_id = this.$route.params.user
 
             this.$root.startLoading()
 
             axios.get('/api/v4/users/' + user_id)
                 .then(response => {
                     this.$root.stopLoading()
 
                     this.user = response.data
 
                     const financesTab = '#user-finances'
                     const keys = ['first_name', 'last_name', 'external_email', 'billing_address', 'phone', 'organization']
 
                     let country = this.user.settings.country
                     if (country && country in window.config.countries) {
                         country = window.config.countries[country][1]
                     }
 
                     this.user.country = country
 
                     keys.forEach(key => { this.user[key] = this.user.settings[key] })
 
                     this.discount = this.user.wallet.discount
                     this.discount_description = this.user.wallet.discount_description
 
                     // TODO: currencies, multi-wallets, accounts
                     // Get more info about the wallet (e.g. payment provider related)
                     this.$root.addLoader(financesTab)
                     axios.get('/api/v4/wallets/' + this.user.wallets[0].id)
                         .then(response => {
                             this.$root.removeLoader(financesTab)
                             this.wallet = response.data
                             this.setMandateState()
                         })
                         .catch(error => {
                             this.$root.removeLoader(financesTab)
                         })
 
                     // Create subscriptions list
                     axios.get('/api/v4/users/' + user_id + '/skus')
                         .then(response => {
                             // "merge" SKUs with user entitlement-SKUs
                             response.data.forEach(sku => {
                                 const userSku = this.user.skus[sku.id]
                                 if (userSku) {
                                     let cost = userSku.costs.reduce((sum, current) => sum + current)
                                     let item = {
                                         id: sku.id,
                                         name: sku.name,
                                         cost: cost,
                                         price: this.$root.priceLabel(cost, this.discount)
                                     }
 
                                     if (sku.range) {
                                         item.name += ' ' + userSku.count + ' ' + sku.range.unit
                                     }
 
                                     this.skus.push(item)
 
                                     if (sku.handler == 'Auth2F') {
                                         this.has2FA = true
                                         this.sku2FA = sku.id
                                     } else if (sku.handler == 'Beta') {
                                         this.hasBeta = true
                                     }
                                 }
                             })
                         })
 
                     // Fetch users
                     // TODO: Multiple wallets
                     axios.get('/api/v4/users?owner=' + user_id)
                         .then(response => {
                             this.users = response.data.list;
                         })
 
                     // Fetch domains
                     axios.get('/api/v4/domains?owner=' + user_id)
                         .then(response => {
                             this.domains = response.data.list
                         })
 
                     // Fetch distribution lists
                     axios.get('/api/v4/groups?owner=' + user_id)
                         .then(response => {
                             this.distlists = response.data.list
                         })
 
                     // Fetch resources lists
                     axios.get('/api/v4/resources?owner=' + user_id)
                         .then(response => {
                             this.resources = response.data.list
                         })
 
                     // Fetch shared folders lists
                     axios.get('/api/v4/shared-folders?owner=' + user_id)
                         .then(response => {
                             this.folders = response.data.list
                         })
                 })
                 .catch(this.$root.errorHandler)
         },
         mounted() {
             $(this.$el).find('ul.nav-tabs a').on('click', this.$root.tab)
         },
         methods: {
             addBetaSku() {
                 axios.post('/api/v4/users/' + this.user.id + '/skus/beta')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.hasBeta = true
                             const sku = response.data.sku
                             this.skus.push({
                                 id: sku.id,
                                 name: sku.name,
                                 cost: sku.cost,
                                 price: this.$root.priceLabel(sku.cost, this.discount)
                             })
                         }
                     })
             },
             capitalize(str) {
                 return str.charAt(0).toUpperCase() + str.slice(1)
             },
             awardDialog() {
                 this.oneOffDialog(false)
             },
             discountEdit() {
                 if (!this.discount_dialog) {
                     const dialog = $('#discount-dialog')[0]
 
                     dialog.addEventListener('shown.bs.modal', e => {
                         $(dialog).find('select').focus()
                         // Note: Vue v-model is strict, convert null to a string
                         this.wallet.discount_id = this.wallet_discount_id || ''
                     })
 
                     this.discount_dialog = new Modal(dialog)
                 }
 
                 this.discount_dialog.show()
 
                 if (!this.discounts.length) {
                     // Fetch discounts
                     axios.get('/api/v4/users/' + this.user.id + '/discounts')
                         .then(response => {
                             this.discounts = response.data.list
                         })
                 }
             },
             emailEdit() {
                 this.external_email = this.user.external_email
                 this.$root.clearFormValidation($('#email-dialog'))
 
                 if (!this.email_dialog) {
                     const dialog = $('#email-dialog')[0]
 
                     dialog.addEventListener('shown.bs.modal', e => {
                         $(dialog).find('input').focus()
                     })
 
                     this.email_dialog = new Modal(dialog)
                 }
 
                 this.email_dialog.show()
             },
             setMandateState() {
                 let mandate = this.wallet.mandate
                 if (mandate && mandate.id) {
                     if (!mandate.isValid) {
                         this.wallet.mandateState = mandate.isPending ? 'pending' : 'invalid'
                     } else if (mandate.isDisabled) {
                         this.wallet.mandateState = 'disabled'
                     }
                 }
             },
             oneOffDialog(negative) {
                 this.oneoff_negative = negative
 
                 if (!this.oneoff_dialog) {
                     const dialog = $('#oneoff-dialog')[0]
 
                     dialog.addEventListener('shown.bs.modal', () => {
                         this.$root.clearFormValidation(dialog)
                         $(dialog).find('#oneoff_amount').focus()
                     })
 
                     this.oneoff_dialog = new Modal(dialog)
                 }
 
                 this.oneoff_dialog.show()
             },
             penalizeDialog() {
                 this.oneOffDialog(true)
             },
             reload() {
                 // this is to reload transaction log
                 this.walletReload = true
                 this.$nextTick(() => { this.walletReload = false })
             },
             reset2FA() {
                 new Modal('#reset-2fa-dialog').hide()
                 axios.post('/api/v4/users/' + this.user.id + '/reset2FA')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.skus = this.skus.filter(sku => sku.id != this.sku2FA)
                             this.has2FA = false
                         }
                     })
             },
             reset2FADialog() {
                 new Modal('#reset-2fa-dialog').show()
             },
             submitDiscount() {
                 this.discount_dialog.hide()
 
                 axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id })
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.wallet = Object.assign({}, this.wallet, response.data)
 
                             // Update prices in Subscriptions tab
                             if (this.user.wallet.id == response.data.id) {
                                 this.discount = this.wallet.discount
                                 this.discount_description = this.wallet.discount_description
 
                                 this.skus.forEach(sku => {
                                     sku.price = this.$root.priceLabel(sku.cost, this.discount)
                                 })
                             }
                         }
                     })
             },
             submitEmail() {
                 axios.put('/api/v4/users/' + this.user.id, { external_email: this.external_email })
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.email_dialog.hide()
                             this.$toast.success(response.data.message)
                             this.user.external_email = this.external_email
                             this.external_email = null // required because of Vue
                         }
                     })
             },
             submitOneOff() {
                 let wallet_id = this.user.wallets[0].id
                 let post = {
                     amount: this.oneoff_amount,
                     description: this.oneoff_description
                 }
 
                 if (this.oneoff_negative && /^\d+(\.?\d+)?$/.test(post.amount)) {
                     post.amount *= -1
                 }
 
                 this.$root.clearFormValidation('#oneoff-dialog')
 
                 axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.oneoff_dialog.hide()
                             this.$toast.success(response.data.message)
                             this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance})
                             this.oneoff_amount = ''
                             this.oneoff_description = ''
                             this.reload()
                         }
                     })
             },
             suspendUser() {
-                axios.post('/api/v4/users/' + this.user.id + '/suspend', {})
+                axios.post('/api/v4/users/' + this.user.id + '/suspend')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.user = Object.assign({}, this.user, { isSuspended: true })
                         }
                     })
             },
             unsuspendUser() {
-                axios.post('/api/v4/users/' + this.user.id + '/unsuspend', {})
+                axios.post('/api/v4/users/' + this.user.id + '/unsuspend')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.user = Object.assign({}, this.user, { isSuspended: false })
                         }
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Domain/Info.vue b/src/resources/vue/Domain/Info.vue
index 58741c0d..3c831088 100644
--- a/src/resources/vue/Domain/Info.vue
+++ b/src/resources/vue/Domain/Info.vue
@@ -1,222 +1,221 @@
 <template>
     <div class="container">
         <status-component v-if="domain_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>
 
         <div class="card">
             <div class="card-body">
                 <div class="card-title" v-if="domain_id === 'new'">{{ $t('domain.new') }}</div>
                 <div class="card-title" v-else>{{ $t('form.domain') }}
                     <btn class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()" icon="trash-alt">{{ $t('domain.delete') }}</btn>
                 </div>
                 <div class="card-text">
                     <ul class="nav nav-tabs mt-3" role="tablist">
                         <li class="nav-item">
                             <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
                                 {{ $t('form.general') }}
                             </a>
                         </li>
                         <li class="nav-item" v-if="domain.id">
                             <a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
                                 {{ $t('form.settings') }}
                             </a>
                         </li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
                             <form @submit.prevent="submit" class="card-body">
                                 <div v-if="domain.id" class="row plaintext mb-3">
                                     <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                                     <div class="col-sm-8">
                                         <span :class="$root.statusClass(domain) + ' form-control-plaintext'" id="status">{{ $root.statusText(domain) }}</span>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="name" class="col-sm-4 col-form-label">{{ $t('domain.namespace') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="namespace" v-model="domain.namespace" :disabled="domain.id">
                                     </div>
                                 </div>
                                 <div v-if="!domain.id" id="domain-packages" class="row">
                                     <label class="col-sm-4 col-form-label">{{ $t('user.package') }}</label>
                                     <package-select class="col-sm-8 pt-sm-1" type="domain"></package-select>
                                 </div>
                                 <div v-if="domain.id" id="domain-skus" class="row">
                                     <label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
                                     <subscription-select v-if="domain.id" class="col-sm-8 pt-sm-1" type="domain" :object="domain" :readonly="true"></subscription-select>
                                 </div>
                                 <btn v-if="!domain.id" class="btn-primary mt-3" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                             <hr class="m-0" v-if="domain.id">
                             <div v-if="domain.id && !domain.isConfirmed" class="card-body" id="domain-verify">
                                 <h5 class="mb-3">{{ $t('domain.verify') }}</h5>
                                 <div class="card-text">
                                     <p>{{ $t('domain.verify-intro') }}</p>
                                     <p>
                                         <span v-html="$t('domain.verify-dns')"></span>
                                         <ul>
                                             <li>{{ $t('domain.verify-dns-txt') }} <code>{{ domain.hash_text }}</code></li>
                                             <li>{{ $t('domain.verify-dns-cname') }} <code>{{ domain.hash_cname }}.{{ domain.namespace }}. IN CNAME {{ domain.hash_code }}.{{ domain.namespace }}.</code></li>
                                         </ul>
                                         <span>{{ $t('domain.verify-outro') }}</span>
                                     </p>
                                     <p>{{ $t('domain.verify-sample') }} <pre>{{ domain.dns.join("\n") }}</pre></p>
                                     <btn class="btn-primary" @click="confirm" icon="sync-alt">{{ $t('btn.verify') }}</btn>
                                 </div>
                             </div>
                             <div v-if="domain.isConfirmed" class="card-body" id="domain-config">
                                 <h5 class="mb-3">{{ $t('domain.config') }}</h5>
                                 <div class="card-text">
                                     <p>{{ $t('domain.config-intro', { app: $root.appName }) }}</p>
                                     <p>{{ $t('domain.config-sample') }} <pre>{{ domain.mx.join("\n") }}</pre></p>
                                     <p>{{ $t('domain.config-hint') }}</p>
                                 </div>
                             </div>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
                             <div class="card-body">
                                 <form @submit.prevent="submitSettings">
                                     <div class="row mb-3">
                                         <label for="spf_whitelist" class="col-sm-4 col-form-label">{{ $t('domain.spf-whitelist') }}</label>
                                         <div class="col-sm-8">
                                             <list-input id="spf_whitelist" name="spf_whitelist" :list="spf_whitelist"></list-input>
                                             <small id="spf-hint" class="text-muted d-block mt-2">
                                                 {{ $t('domain.spf-whitelist-text') }}
                                                 <span class="d-block" v-html="$t('domain.spf-whitelist-ex')"></span>
                                             </small>
                                         </div>
                                     </div>
                                     <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                                 </form>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div id="delete-warning" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('domain.delete-domain', { domain: domain.namespace }) }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('domain.delete-text') }}</p>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-danger modal-action" @click="deleteDomain()" icon="trash-alt">{{ $t('btn.delete') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
     import ListInput from '../Widgets/ListInput'
     import PackageSelect from '../Widgets/PackageSelect'
     import StatusComponent from '../Widgets/Status'
     import SubscriptionSelect from '../Widgets/SubscriptionSelect'
 
     export default {
         components: {
             ListInput,
             PackageSelect,
             StatusComponent,
             SubscriptionSelect
         },
         data() {
             return {
                 domain_id: null,
                 domain: {},
                 spf_whitelist: [],
                 status: {}
             }
         },
         created() {
             this.domain_id = this.$route.params.domain
 
             if (this.domain_id !== 'new') {
                 this.$root.startLoading()
 
                 axios.get('/api/v4/domains/' + this.domain_id)
                     .then(response => {
                         this.$root.stopLoading()
                         this.domain = response.data
                         this.spf_whitelist = this.domain.config.spf_whitelist || []
 
                         if (!this.domain.isConfirmed) {
                             $('#domain-verify button').focus()
                         }
 
                         this.status = response.data.statusInfo
                     })
                     .catch(this.$root.errorHandler)
             }
         },
         mounted() {
             $('#namespace').focus()
             $('#delete-warning')[0].addEventListener('shown.bs.modal', event => {
                 $(event.target).find('button.modal-cancel').focus()
             })
         },
         methods: {
             confirm() {
                 axios.get('/api/v4/domains/' + this.domain_id + '/confirm')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.domain.isConfirmed = true
                             this.status = response.data.statusInfo
                         }
 
                         if (response.data.message) {
                             this.$toast[response.data.status](response.data.message)
                         }
                     })
             },
             deleteDomain() {
                 // Delete the domain from the confirm dialog
                 axios.delete('/api/v4/domains/' + this.domain_id)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.$router.push({ name: 'domains' })
                         }
                     })
             },
             showDeleteConfirmation() {
                 // Display the warning
                 new Modal('#delete-warning').show()
             },
             statusUpdate(domain) {
                 this.domain = Object.assign({}, this.domain, domain)
             },
             submit() {
                 this.$root.clearFormValidation($('#general form'))
 
-                let method = 'post'
-                let location = '/api/v4/domains'
+                let post = this.$root.pick(this.domain, ['namespace'])
 
-                this.domain.package = $('#domain-packages input:checked').val()
+                post.package = $('#domain-packages input:checked').val()
 
-                axios[method](location, this.domain)
+                axios.post('/api/v4/domains', post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                         this.$router.push({ name: 'domains' })
                     })
             },
             submitSettings() {
                 this.$root.clearFormValidation($('#settings form'))
 
-                let post = { spf_whitelist: this.spf_whitelist }
+                const post = this.$root.pick(this, ['spf_whitelist'])
 
                 axios.post('/api/v4/domains/' + this.domain_id + '/config', post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
index aca09338..c448c1c2 100644
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -1,667 +1,667 @@
 <template>
     <div id="meet-component">
         <div id="meet-session-toolbar" class="hidden">
             <span id="meet-counter" :title="$t('meet.partcnt')"><svg-icon icon="users"></svg-icon> <span></span></span>
             <span id="meet-session-logo" v-html="$root.logo()"></span>
             <div id="meet-session-menu">
                 <button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="$t('meet.menu-audio-' + (audioActive ? 'mute' : 'unmute'))">
                     <svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon>
                 </button>
                 <button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="$t('meet.menu-video-' + (videoActive ? 'mute' : 'unmute'))">
                     <svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon>
                 </button>
                 <button :class="'btn link-screen' + (screenActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" :title="$t('meet.menu-screen')">
                     <svg-icon icon="desktop"></svg-icon>
                 </button>
                 <button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="$t('meet.menu-hand-' + (handRaised ? 'lower' : 'raise'))">
                     <svg-icon icon="hand-paper"></svg-icon>
                 </button>
                 <span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown">
                     <button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-bs-toggle="dropdown"
                             :title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false"
                     >
                         <svg-icon icon="headphones"></svg-icon>
                         <span class="badge bg-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
                     </button>
                     <div class="dropdown-menu">
                         <a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- {{ $t('form.none') }} -</a>
                         <a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code"
                            :class="'dropdown-item' + (session.channel == code ? ' active' : '')"
                         >{{ $t('lang.' + code) }}</a>
                     </div>
                 </span>
                 <button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" :title="$t('meet.menu-chat')">
                     <svg-icon icon="comment"></svg-icon>
                 </button>
                 <button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')">
                     <svg-icon icon="expand"></svg-icon>
                 </button>
                 <button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')">
                     <svg-icon icon="compress"></svg-icon>
                 </button>
                 <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')">
                     <svg-icon icon="cog"></svg-icon>
                 </button>
                 <button class="btn link-logout" @click="logout" :title="$t('meet.menu-leave')">
                     <svg-icon icon="power-off"></svg-icon>
                 </button>
             </div>
         </div>
 
         <div id="meet-setup" class="card container mt-2 mt-md-5 mb-5">
             <div class="card-body">
                 <div class="card-title">{{ $t('meet.setup-title') }}</div>
                 <div class="card-text">
                     <form class="media-setup-form row" @submit.prevent="joinSession">
                         <div class="media-setup-preview col-sm-6 mb-3 mb-sm-0">
                             <video class="rounded"></video>
                             <div class="volume"><div class="bar"></div></div>
                         </div>
                         <div class="col-sm-6 align-self-center">
                             <div class="input-group mb-2">
                                 <label for="setup-microphone" class="input-group-text mb-0" :title="$t('meet.mic')">
                                     <svg-icon icon="microphone"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mb-2">
                                 <label for="setup-camera" class="input-group-text mb-0" :title="$t('meet.cam')">
                                     <svg-icon icon="video"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mb-2">
                                 <label for="setup-nickname" class="input-group-text mb-0" :title="$t('meet.nick')">
                                     <svg-icon icon="user"></svg-icon>
                                 </label>
                                 <input class="form-control" type="text" id="setup-nickname" v-model="nickname" :placeholder="$t('meet.nick-placeholder')">
                             </div>
                             <div class="input-group mt-2" v-if="session.config && session.config.requires_password">
                                 <label for="setup-password" class="input-group-text mb-0" :title="$t('form.password')">
                                     <svg-icon icon="key"></svg-icon>
                                 </label>
                                 <input type="password" class="form-control" id="setup-password" v-model="password" :placeholder="$t('form.password')">
                             </div>
                             <div class="mt-3">
                                 <button type="submit" id="join-button"
                                         :class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')"
                                 >
                                     <span v-if="isRoomReady()">{{ $t('meet.joinnow') }}</span>
                                     <span v-else-if="roomState == 323">{{ $t('meet.imaowner') }}</span>
                                     <span v-else>{{ $t('meet.join') }}</span>
                                 </button>
                             </div>
                         </div>
                         <div class="mt-4 col-sm-12">
                             <status-message :status="roomState" :status-labels="roomStateLabels"></status-message>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
 
         <div id="meet-session-layout" class="d-flex hidden">
             <div id="meet-queue">
                 <div class="head" :title="$t('meet.qa')"><svg-icon icon="microphone-alt"></svg-icon></div>
             </div>
             <div id="meet-session"></div>
             <div id="meet-chat">
                 <div class="chat"></div>
                 <div class="chat-input m-2">
                     <textarea class="form-control" rows="1"></textarea>
                 </div>
             </div>
         </div>
 
         <logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form>
 
         <div id="leave-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.leave-title') }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('meet.leave-body') }}</p>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="media-setup-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.media-title') }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <form class="media-setup-form">
                             <div class="media-setup-preview"></div>
                             <div class="input-group mt-2">
                                 <label for="setup-mic" class="input-group-text mb-0" :title="$t('meet.mic')">
                                     <svg-icon icon="microphone"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mt-2">
                                 <label for="setup-cam" class="input-group-text mb-0" :title="$t('meet.cam')">
                                     <svg-icon icon="video"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-cam" v-model="camera" @change="setupCameraChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
 
         <room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></room-options>
         <room-stats ref="roomStatsDialog" :stats="stats" :room="room"></room-stats>
     </div>
 </template>
 
 <script>
     import { Modal, Dropdown } from 'bootstrap'
     import { Media } from '../../js/meet/media.js'
     import { Room as Meet } from '../../js/meet/room.js'
     import { Roles } from '../../js/meet/constants.js'
     import StatusMessage from '../Widgets/StatusMessage'
     import LogonForm from '../Login'
     import RoomOptions from './RoomOptions'
     import RoomStats from './RoomStats'
 
     // Register additional icons
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     import {
         faComment,
         faCog,
         faCompress,
         faCrown,
         faDesktop,
         faExpand,
         faHandPaper,
         faHeadphones,
         faMicrophone,
         faMicrophoneSlash,
         faMicrophoneAlt,
         faPowerOff,
         faUser,
         faUsers,
         faVideo,
         faVideoSlash,
         faVolumeMute
     } from '@fortawesome/free-solid-svg-icons'
 
     // Register only these icons we need
     library.add(
         faComment,
         faCog,
         faCompress,
         faCrown,
         faDesktop,
         faExpand,
         faHandPaper,
         faHeadphones,
         faMicrophone,
         faMicrophoneSlash,
         faMicrophoneAlt,
         faPowerOff,
         faUser,
         faUsers,
         faVideo,
         faVideoSlash,
         faVolumeMute
     )
 
     let roomRequest
     let statsRequest
     const authHeader = 'X-Meet-Auth-Token'
 
     export default {
         components: {
             LogonForm,
             RoomOptions,
             RoomStats,
             StatusMessage
         },
         data() {
             return {
                 setup: {
                     cameras: [],
                     microphones: [],
                 },
                 canShareScreen: false,
                 camera: '',
                 channels: [],
                 languages: {
                     en: 'lang.en',
                     de: 'lang.de',
                     fr: 'lang.fr',
                     it: 'lang.it'
                 },
                 meet: null,
                 microphone: '',
                 nickname: '',
                 password: '',
                 room: null,
                 roomState: 'init',
                 roomStateLabels: {
                     init: 'meet.status-init',
                     323: 'meet.status-323',
                     324: 'meet.status-324',
                     325: 'meet.status-325',
                     326: 'meet.status-326',
                     327: 'meet.status-327',
                     404: 'meet.status-404',
                     429: 'meet.status-429',
                     500: 'meet.status-500'
                 },
                 session: {},
                 stats: {},
                 audioActive: false,
                 videoActive: false,
                 chatActive: false,
                 handRaised: false,
                 screenActive: false
             }
         },
         mounted() {
             this.room = this.$route.params.room
 
             // Initialize Meet client and do some basic checks
             this.meet = new Meet($('#meet-session')[0]);
             this.canShareScreen = this.meet.isScreenSharingSupported()
 
             // Check the room and init the session
             this.initSession()
 
             // Setup the room UI
             this.setupSession()
 
             // Configure dialog events
             $('#leave-dialog')[0].addEventListener('hide.bs.modal', () => {
                 // FIXME: Where exactly the user should land? Currently he'll land
                 //        on dashboard (if he's logged in) or login form (if he's not).
 
                 this.$router.push({ name: 'dashboard' })
             })
 
             const dialog = $('#media-setup-dialog')[0]
             dialog.addEventListener('show.bs.modal', () => { this.setupSession() })
             dialog.addEventListener('hide.bs.modal', () => { this.meet.setupStop() })
 
             this.roomStatsDialog = new Modal('#room-stats-dialog')
         },
         beforeDestroy() {
             clearTimeout(roomRequest)
             clearInterval(statsRequest)
 
             $('#app').removeClass('meet')
 
             if (this.meet) {
                 this.meet.leaveRoom()
             }
 
             delete axios.defaults.headers.common[authHeader]
 
             $(document.body).off('keydown.meet')
         },
         methods: {
             authSuccess() {
                 // The user authentication succeeded, we still don't know it's really the room owner
                 this.initSession()
 
                 $('#meet-setup').removeClass('hidden')
                 $('#meet-auth').addClass('hidden')
             },
             configUpdate(config) {
                 this.session.config = Object.assign({}, this.session.config, config)
             },
             async refreshStats() {
                 let stats = await this.meet.getStats()
                 this.stats = stats
             },
             initSession(init) {
                 const button = $('#join-button').prop('disabled', true)
 
-                this.post = {
+                const post = {
                     password: this.password,
                     nickname: this.nickname,
                     screenShare: this.canShareScreen ? 1 : 0,
                     init: init ? 1 : 0,
                     picture: init ? this.makePicture() : '',
                     requestId: this.requestId(),
                     canPublish: !!this.camera || !!this.microphone
                 }
 
                 $('#setup-password,#setup-nickname').removeClass('is-invalid')
 
-                axios.post('/api/v4/meet/rooms/' + this.room, this.post, { ignoreErrors: true })
+                axios.post('/api/v4/meet/rooms/' + this.room, post, { ignoreErrors: true })
                     .then(response => {
                         button.prop('disabled', false)
 
                         // We already have token, the response is redundant
                         if (this.roomState == 'ready' && this.session.token) {
                             return
                         }
 
                         this.roomState = 'ready'
                         this.session = response.data
 
                         if (init) {
                             this.joinSession()
                         }
                     })
                     .catch(error => {
                         if (!error.response) {
                             console.error(error)
                             return
                         }
 
                         const data = error.response.data || {}
 
                         if (data.code) {
                             this.roomState = data.code
                         } else {
                             this.roomState = error.response.status
                         }
 
                         button.prop('disabled', this.roomState == 'init' || this.roomState == 327 || this.roomState >= 400)
 
                         if (data.config) {
                             this.session.config = data.config
                         }
 
                         switch (this.roomState) {
                             case 323:
                                 // Waiting for the owner to open the room...
                                 // Update room state every 10 seconds
                                 roomRequest = setTimeout(() => { this.initSession() }, 10000)
                                 break;
 
                             case 324:
                                 // Room is ready for the owner, but the 'init' was not requested yet
                                 clearTimeout(roomRequest)
                                 break;
 
                             case 325:
                                 // Missing/invalid password
                                 if (init) {
                                     $('#setup-password').addClass('is-invalid').focus()
                                 }
                                 break;
 
                             case 326:
                                 // Locked room prerequisites error
                                 if (init && !$('#setup-nickname').val()) {
                                     $('#setup-nickname').addClass('is-invalid').focus()
                                 }
                                 break;
 
                             case 327:
                                 // Waiting for the owner's approval to join
                                 // Update room state every 10 seconds
                                 roomRequest = setTimeout(() => { this.initSession(true) }, 10000)
                                 break;
 
                             case 429:
                                 // Rate limited, wait and try again
                                 const waitTime = error.response.headers['retry-after'] || 10
                                 roomRequest = setTimeout(() => { this.initSession(init) }, waitTime * 1000)
                                 break;
 
                             default:
                                 if (this.roomState >= 400 && this.roomState != 404) {
                                     this.roomState = 500
                                 }
                         }
                     })
 
                 if (document.fullscreenEnabled) {
                     $('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden')
                 }
             },
             isModerator() {
                 return this.isRoomOwner() || (!!this.session.role && (this.session.role & Roles.MODERATOR) > 0)
             },
             isPublisher() {
                 return !!this.session.role && (this.session.role & Roles.PUBLISHER) > 0
             },
             isRoomOwner() {
                 return !!this.session.role && (this.session.role & Roles.OWNER) > 0
             },
             isRoomReady() {
                 return ['ready', 322, 324, 325, 326, 327].includes(this.roomState)
             },
             // Entering the room
             joinSession() {
                 // The form can be submitted not only via the submit button,
                 // make sure the submit is allowed
                 if ($('#meet-setup [type=submit]').prop('disabled')) {
                     return;
                 }
 
                 if (this.roomState == 323) {
                     $('#meet-setup').addClass('hidden')
                     $('#meet-auth').removeClass('hidden')
                     return
                 }
 
                 if (this.roomState != 'ready' && !this.session.token) {
                     this.initSession(true)
                     return
                 }
 
                 clearTimeout(roomRequest)
                 clearInterval(statsRequest)
 
                 this.session.nickname = this.nickname
                 this.session.languages = this.languages
                 this.session.menuElement = $('#meet-session-menu')[0]
                 this.session.chatElement = $('#meet-chat')[0]
                 this.session.queueElement = $('#meet-queue')[0]
                 this.session.counterElement = $('#meet-counter span')[0]
                 this.session.translate = (label, args) => this.$t(label, args)
                 this.session.toast = this.$toast
                 this.session.onSuccess = () => {
                     $('#app').addClass('meet')
                     $('#meet-setup').addClass('hidden')
                     $('#meet-session-toolbar,#meet-session-layout').removeClass('hidden')
                 }
                 this.session.onError = () => {
                     this.roomState = 500
                 }
                 this.session.onDestroy = event => {
                     // TODO: Display different message for every other reason
                     if (event.reason == 'session-closed' && !this.isRoomOwner()) {
                         new Modal('#leave-dialog').show()
                     }
                 }
                 this.session.onUpdate = data => { this.updateSession(data) }
                 this.session.onMediaSetup = () => { this.setupMedia() }
 
                 this.meet.joinRoom(this.session)
 
                 this.refreshStats()
 
                 this.keyboardShortcuts()
             },
             keyboardShortcuts() {
                 $(document.body).on('keydown.meet', e => {
                     if ($(e.target).is('select,input,textarea')) {
                         return
                     }
 
                     // Self-Mute with 'm' key
                     if (e.key == 'm' || e.key == 'M') {
                         if ($('#meet-session-menu').find('.link-audio:not(:disabled)').length) {
                             this.switchSound()
                         }
                     }
-                    //Show stats with '?' key
-                    if (e.key == '?' || e.key == '?') {
+                    // Show stats with '?' key
+                    if (e.key == '?') {
                         this.roomStats()
                     }
                 })
             },
             logout() {
                 this.meet.leaveRoom(true)
                 this.meet = null
                 this.$router.push({ name: 'dashboard' })
             },
             makePicture() {
-                return (new Media()).makePicture($("#meet-setup video")[0]) || '';
+                return (new Media()).makePicture($('#meet-setup video')[0]) || '';
             },
             requestId() {
                 const key = 'kolab-meet-uid'
 
                 if (!this.reqId) {
                     this.reqId = localStorage.getItem(key)
                 }
 
                 if (!this.reqId) {
                     // We store the identifier in the browser to make sure that it is the same after
                     // page refresh for the avg user. This will not prevent hackers from sending
                     // the new identifier on every request.
                     // If we're afraid of a room owner being spammed with join requests we might invent
                     // a way to silently ignore all join requests after the owner pressed some button
                     // stating "all attendees already joined, lock the room for good!".
 
                     // This will create max. 24-char numeric string
                     this.reqId = (String(Date.now()) + String(Math.random()).substring(2)).substring(0, 24)
                     localStorage.setItem(key, this.reqId)
                 }
 
                 return this.reqId
             },
             roomOptions() {
                 new Modal('#room-options-dialog').show()
             },
             roomStats() {
                 clearInterval(statsRequest)
                 if (this.roomStatsDialog.visible) {
                     this.roomStatsDialog.hide()
                 } else {
                     this.refreshStats()
                     statsRequest = setInterval(() => {
                         this.refreshStats()
                     }, 3000)
                     this.roomStatsDialog.show()
                 }
             },
             setupMedia() {
                 const dialog = $('#media-setup-dialog')[0]
 
                 if (!$('video', dialog).length) {
                     $('#meet-setup').find('video,div.volume').appendTo($('.media-setup-preview', dialog))
                 }
 
                 new Modal(dialog).show()
             },
             async setupSession() {
                 this.meet.setupStart({
                     videoElement: $('#meet-setup video')[0] || $('#media-setup-dialog video')[0],
                     volumeElement: $('#meet-setup .volume')[0] || $('#media-setup-dialog .volume')[0],
                     onSuccess: setup => {
                         this.setup = setup
                         this.microphone = setup.audioSource
                         this.camera = setup.videoSource
                         this.audioActive = setup.audioActive
                         this.videoActive = setup.videoActive
                     },
                     onError: error => {
                         console.warn("Media setup failed: ", error);
                         this.audioActive = false
                         this.videoActive = false
                     }
                 })
             },
             async setupCameraChange() {
                 this.videoActive = await this.meet.setupSetVideoDevice(this.camera)
             },
             async setupMicrophoneChange() {
                 this.audioActive = await this.meet.setupSetAudioDevice(this.microphone)
             },
             switchChannel(e) {
                 this.meet.switchChannel($(e.target).data('code'))
                 // FIXME: Why is the menu not closing by itself?
                 new Dropdown('#meet-session-menu .link-channel').hide()
             },
             switchChat() {
                 let chat = $('#meet-chat')
                 let enabled = chat.is('.open')
 
                 chat.toggleClass('open')
 
                 if (!enabled) {
                     chat.find('textarea').focus()
                 }
 
                 this.chatActive = !enabled
 
                 // Trigger resize, so participant matrix can update its layout
                 window.dispatchEvent(new Event('resize'));
             },
             switchFullscreen() {
                 const element = this.$el
 
                 $(element).off('fullscreenchange').on('fullscreenchange', (e) => {
                     let enabled = document.fullscreenElement == element
                     let buttons = $('#meet-session-menu').find('.link-fullscreen')
 
                     buttons.first()[enabled ? 'addClass' : 'removeClass']('hidden')
                     buttons.last()[!enabled ? 'addClass' : 'removeClass']('hidden')
                 })
 
                 if (document.fullscreenElement) {
                     document.exitFullscreen()
                 } else {
                     element.requestFullscreen()
                 }
             },
             async switchHand() {
                 this.handRaised = await this.meet.raiseHand(!this.handRaised)
             },
             async switchSound() {
                 this.audioActive = await this.meet.switchAudio()
             },
             async switchVideo() {
                 this.videoActive = await this.meet.switchVideo()
             },
             async switchScreen() {
                 this.screenActive = await this.meet.switchScreen()
             },
             updateSession(data) {
                 this.session = Object.assign({}, this.session, data)
                 this.channels = data.channels || []
 
                 const isPublisher = this.isPublisher()
 
                 this.videoActive = isPublisher ? data.videoActive : false
                 this.audioActive = isPublisher ? data.audioActive : false
                 this.handRaised = data.raisedHand
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Meet/RoomOptions.vue b/src/resources/vue/Meet/RoomOptions.vue
index dc6d3671..bbf5ff9c 100644
--- a/src/resources/vue/Meet/RoomOptions.vue
+++ b/src/resources/vue/Meet/RoomOptions.vue
@@ -1,113 +1,112 @@
 <template>
     <div v-if="config">
         <div id="room-options-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.options') }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <form id="room-options-password">
                             <div id="password-input" class="input-group input-group-activable mb-2">
                                 <span class="input-group-text label">{{ $t('meet.password') }}:</span>
                                 <span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span>
                                 <span v-else id="password-input-text" class="input-group-text text-muted">{{ $t('meet.password-none') }}</span>
                                 <input type="text" :value="config.password" name="password" class="form-control rounded-start activable">
                                 <btn @click="passwordSave" id="password-save-btn" class="btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</btn>
                                 <btn v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn-outline-danger rounded">{{ $t('meet.password-clear') }}</btn>
                                 <btn v-else @click="passwordSet" id="password-set-btn" class="btn-outline-primary rounded">{{ $t('meet.password-set') }}</btn>
                             </div>
                             <small class="text-muted">
                                 {{ $t('meet.password-text') }}
                             </small>
                         </form>
                         <hr>
                         <form id="room-options-lock">
                             <div id="room-lock" class="mb-2">
                                 <label for="room-lock-input">{{ $t('meet.lock') }}:</label>
                                 <input type="checkbox" id="room-lock-input" name="lock" value="1" :checked="config.locked" @click="lockSave">
                             </div>
                             <small class="text-muted">
                                 {{ $t('meet.lock-text') }}
                             </small>
                         </form>
                         <hr>
                         <form id="room-options-nomedia">
                             <div id="room-nomedia" class="mb-2">
                                 <label for="room-nomedia-input">{{ $t('meet.nomedia') }}:</label>
                                 <input type="checkbox" id="room-nomedia-input" name="lock" value="1" :checked="config.nomedia" @click="nomediaSave">
                             </div>
                             <small class="text-muted">
                                 {{ $t('meet.nomedia-text') }}
                             </small>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         props: {
             config: { type: Object, default: () => null },
             room: { type: String, default: () => null }
         },
         mounted() {
             $('#room-options-dialog')[0].addEventListener('show.bs.modal', e => {
                 $(e.target).find('.input-group-activable.active').removeClass('active')
             })
         },
         methods: {
             configSave(name, value, callback) {
-                const post = {}
-                post[name] = value
+                const post = { [name]: value }
 
                 axios.post('/api/v4/meet/rooms/' + this.room + '/config', post)
                     .then(response => {
                         this.$set(this.config, name, value)
                         if (callback) {
                             callback(response.data)
                         }
                         this.$emit('config-update', this.config)
                         this.$toast.success(response.data.message)
                     })
             },
             lockSave(e) {
                 this.configSave('locked', $(e.target).prop('checked') ? 1 : 0)
             },
             nomediaSave(e) {
                 this.configSave('nomedia', $(e.target).prop('checked') ? 1 : 0)
             },
             passwordClear() {
                 this.configSave('password', '')
             },
             passwordSave() {
                 this.configSave('password', $('#password-input input').val(), () => {
                     $('#password-input').removeClass('active')
                 })
             },
             passwordSet() {
                 $('#password-input').addClass('active').find('input')
                     .off('keydown.pass')
                     .on('keydown.pass', e => {
                         if (e.which == 13) {
                             // On ENTER save the password
                             this.passwordSave()
                             e.preventDefault()
                         } else if (e.which == 27) {
                             // On ESC escape from the input, but not the dialog
                             $('#password-input').removeClass('active')
                             e.stopPropagation()
                         }
                     })
                     .focus()
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Meet/RoomStats.vue b/src/resources/vue/Meet/RoomStats.vue
index 9df41dae..330951c1 100644
--- a/src/resources/vue/Meet/RoomStats.vue
+++ b/src/resources/vue/Meet/RoomStats.vue
@@ -1,91 +1,64 @@
-
 <template>
     <div id="room-stats-dialog" class="modal" tabindex="-1" role="dialog">
         <div class="modal-dialog" role="document">
-            <div class="modal-content">
+            <div class="modal-content" style="max-height: 90vh">
                 <div class="modal-header">
                     <h5 class="modal-title">Statistics</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
                 </div>
-                <div class="modal-body">
-                    <form>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Room Id:</span>
-                            <span class="input-group-text">{{ room }}</span>
-                        </div>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Mediaserver Room Id:</span>
-                            <span class="input-group-text">{{ stats.roomId }}</span>
-                        </div>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Send Transport state:</span>
-                            <span class="input-group-text">{{ stats.sendTransportState }}</span>
-                        </div>
-                        <pre class="text-muted">
-                            {{ JSON.stringify(stats.sendTransportStats, null, '\t') }}
-                        </pre>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Receive Transport state:</span>
-                            <span class="input-group-text">{{ stats.receiveTransportState }}</span>
-                        </div>
-                        <pre class="text-muted">
-                            {{ JSON.stringify(stats.receiveTransportStats, null, '\t') }}
-                        </pre>
-                    </form>
-                    <hr>
-                    <form>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Consumers:</span>
-                        </div>
-                        <pre class="text-muted">
-                            {{ JSON.stringify(stats.consumerStats, null, '\t') }}
-                        </pre>
-                    </form>
-                    <hr>
-                    <form>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Camera Producer:</span>
-                        </div>
-                        <pre class="text-muted">
-                            {{ JSON.stringify(stats.camProducerStats, null, '\t') }}
-                        </pre>
-                    </form>
-                    <hr>
-                    <form>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Mic Producer:</span>
-                        </div>
-                        <pre class="text-muted">
-                            {{ JSON.stringify(stats.micProducerStats, null, '\t') }}
-                        </pre>
-                    </form>
-                    <hr>
-                    <form>
-                        <div class="input-group input-group-activable mb-2">
-                            <span class="input-group-text label">Screen Producer:</span>
-                        </div>
-                        <pre class="text-muted">
-                            {{ JSON.stringify(stats.screenProducerStats, null, '\t') }}
-                        </pre>
-                    </form>
+                <div class="modal-body overflow-auto">
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                            <span class="fw-bold">Room Id:</span>
+                            <pre class="text-muted m-0">{{ room }}</pre>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="fw-bold">Mediaserver Room Id:</span>
+                            <pre class="text-muted m-0">{{ stats.roomId }}</pre>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="fw-bold">Send Transport state:</span>
+                            <pre class="text-muted m-0">{{ stats.sendTransportState }}</pre>
+                            <pre class="text-muted m-0">{{ toText(stats.sendTransportStats) }}</pre>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="fw-bold">Receive Transport state:</span>
+                            <pre class="text-muted m-0">{{ stats.receiveTransportState }}</pre>
+                            <pre class="text-muted m-0">{{ toText(stats.receiveTransportStats) }}</pre>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="fw-bold">Consumers:</span>
+                            <pre class="text-muted m-0">{{ toText(stats.consumerStats) }}</pre>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="fw-bold">Camera Producer:</span>
+                            <pre class="text-muted m-0">{{ toText(stats.camProducerStats) }}</pre>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="fw-bold">Mic Producer:</span>
+                            <pre class="text-muted m-0">{{ toText(stats.micProducerStats) }}</pre>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="fw-bold">Screen Producer:</span>
+                            <pre class="text-muted m-0">{{ toText(stats.screenProducerStats) }}</pre>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         props: {
             stats: { type: Object, default: () => null },
             room: { type: String, default: () => null }
         },
-        mounted() {
-            $('#room-stats-dialog')[0].addEventListener('show.bs.modal', e => {
-                $(e.target).find('.input-group-activable.active').removeClass('active')
-            })
-        },
         methods: {
+            toText(o) {
+                return JSON.stringify(o, null, '  ')
+            }
         }
     }
 </script>
diff --git a/src/resources/vue/PasswordReset.vue b/src/resources/vue/PasswordReset.vue
index a71d58bd..d3a45f78 100644
--- a/src/resources/vue/PasswordReset.vue
+++ b/src/resources/vue/PasswordReset.vue
@@ -1,173 +1,173 @@
 <template>
     <div class="container">
         <div class="card" id="step1">
             <div class="card-body">
                 <h4 class="card-title">{{ $t('password.reset') }} - {{ $t('nav.step', { i: 1, n: 3 }) }}</h4>
                 <p class="card-text">
                     {{ $t('password.reset-step1') }}
                     <span v-if="fromEmail">{{ $t('password.reset-step1-hint', { email: fromEmail }) }}</span>
                 </p>
                 <form @submit.prevent="submitStep1" data-validation-prefix="reset_">
                     <div class="mb-3">
                         <label for="reset_email" class="visually-hidden">{{ $t('form.email') }}</label>
                         <input type="text" class="form-control" id="reset_email" :placeholder="$t('form.email')" required v-model="email">
                     </div>
                     <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step2">
             <div class="card-body">
                 <h4 class="card-title">{{ $t('password.reset') }} - {{ $t('nav.step', { i: 2, n: 3 }) }}</h4>
                 <p class="card-text">
                     {{ $t('password.reset-step2') }}
                 </p>
                 <form @submit.prevent="submitStep2" data-validation-prefix="reset_">
                     <div class="mb-3">
                         <label for="reset_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
                         <input type="text" class="form-control" id="reset_short_code" :placeholder="$t('form.code')" required v-model="short_code">
                     </div>
                     <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
                     <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                     <input type="hidden" id="reset_code" v-model="code" />
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step3">
             <div class="card-body">
                 <h4 class="card-title">{{ $t('password.reset') }} - {{ $t('nav.step', { i: 3, n: 3 }) }}</h4>
                 <p class="card-text">
                 </p>
                 <form @submit.prevent="submitStep3" data-validation-prefix="reset_">
                     <password-input class="mb-3" v-model="pass" :user="userId" v-if="userId" :focus="true"></password-input>
                     <div class="form-group pt-1 mb-3">
-                        <label for="secondfactor" class="sr-only">2FA</label>
+                        <label for="secondfactor" class="visually-hidden">{{ $t('login.2fa') }}</label>
                         <div class="input-group">
                             <span class="input-group-text">
                                 <svg-icon icon="key"></svg-icon>
                             </span>
-                            <input type="text" id="secondfactor" class="form-control rounded-end" placeholder="Second factor code" v-model="secondFactor">
+                            <input type="text" id="secondfactor" class="form-control rounded-end" :placeholder="$t('login.2fa')" v-model="secondfactor">
                         </div>
-                        <small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
+                        <small class="form-text text-muted">{{ $t('login.2fa_desc') }}</small>
                     </div>
                     <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
                     <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                 </form>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import PasswordInput from './Widgets/PasswordInput'
 
     export default {
         components: {
             PasswordInput
         },
         data() {
             return {
                 email: '',
                 code: '',
                 short_code: '',
                 pass: {},
-                secondFactor: '',
+                secondfactor: '',
                 userId: null,
                 fromEmail: window.config['mail.from.address']
             }
         },
         created() {
             // Verification code provided, auto-submit Step 2
             if (this.$route.params.code) {
                 if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(this.$route.params.code)) {
                     this.short_code = RegExp.$1
                     this.code = RegExp.$2
                     this.submitStep2(true)
                 } else {
                     this.$root.errorPage(404)
                 }
             }
         },
         mounted() {
             // Focus the first input (autofocus does not work when using the menu/router)
             this.displayForm(1, true)
         },
         methods: {
             // Submits data to the API, validates and gets verification code
             submitStep1() {
                 this.$root.clearFormValidation($('#step1 form'))
 
                 axios.post('/api/auth/password-reset/init', {
                     email: this.email
                 }).then(response => {
                     this.displayForm(2, true)
                     this.code = response.data.code
                 })
             },
             // Submits the code to the API for verification
             submitStep2(bylink) {
                 let post = {
                     code: this.code,
                     short_code: this.short_code
                 }
 
                 let params = {}
 
                 if (bylink === true) {
                     this.$root.startLoading()
                     params.ignoreErrors = true
                 }
 
                 this.$root.clearFormValidation($('#step2 form'))
 
                 axios.post('/api/auth/password-reset/verify', post, params).then(response => {
                     this.$root.stopLoading()
                     this.userId = response.data.userId
                     this.displayForm(3, true)
                 }).catch(error => {
                     if (bylink === true) {
                         this.$root.stopLoading()
                         this.$root.errorPage(404, '', this.$t('password.link-invalid'))
                     }
                 })
             },
             // Submits the data to the API to reset the password
             submitStep3() {
                 this.$root.clearFormValidation($('#step3 form'))
 
-                axios.post('/api/auth/password-reset', {
-                    code: this.code,
-                    short_code: this.short_code,
-                    password: this.pass.password,
-                    password_confirmation: this.pass.password_confirmation,
-                    secondfactor: this.secondFactor
-                }).then(response => {
-                    // auto-login and goto dashboard
-                    this.$root.loginUser(response.data)
-                })
+                const post = {
+                    ...this.$root.pick(this, ['code', 'short_code', 'secondfactor']),
+                    ...this.pass
+                }
+
+                axios.post('/api/auth/password-reset', post)
+                    .then(response => {
+                        // auto-login and goto dashboard
+                        this.$root.loginUser(response.data)
+                    })
             },
             // Moves the user a step back in registration form
             stepBack(e) {
                 var card = $(e.target).closest('.card')
 
                 card.prev().removeClass('d-none').find('input').first().focus()
                 card.addClass('d-none').find('form')[0].reset()
 
                 this.userId = null
             },
             displayForm(step, focus) {
                 [1, 2, 3].filter(value => value != step).forEach(value => {
                     $('#step' + value).addClass('d-none')
                 })
 
                 $('#step' + step).removeClass('d-none')
 
                 if (focus) {
                     $('#step' + step).find('input').first().focus()
                 }
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Reseller/Dashboard.vue b/src/resources/vue/Reseller/Dashboard.vue
index 83ad2142..8c5f197e 100644
--- a/src/resources/vue/Reseller/Dashboard.vue
+++ b/src/resources/vue/Reseller/Dashboard.vue
@@ -1,51 +1,51 @@
 <template>
     <div class="container" dusk="dashboard-component">
         <user-search></user-search>
         <div id="dashboard-nav" class="mt-3">
             <router-link v-if="status.enableWallets" class="card link-wallet" :to="{ name: 'wallet' }">
-                <svg-icon icon="wallet"></svg-icon><span class="name">{{ $t('dashboard.wallet') }}</span>
+                <svg-icon icon="wallet"></svg-icon><span>{{ $t('dashboard.wallet') }}</span>
                 <span :class="'badge bg-' + (balance < 0 ? 'danger' : 'success')">{{ $root.price(balance) }}</span>
             </router-link>
             <router-link class="card link-invitations" :to="{ name: 'invitations' }">
-                <svg-icon icon="envelope-open-text"></svg-icon><span class="name">{{ $t('dashboard.invitations') }}</span>
+                <svg-icon icon="envelope-open-text"></svg-icon><span>{{ $t('dashboard.invitations') }}</span>
             </router-link>
             <router-link class="card link-stats" :to="{ name: 'stats' }">
-                <svg-icon icon="chart-line"></svg-icon><span class="name">{{ $t('dashboard.stats') }}</span>
+                <svg-icon icon="chart-line"></svg-icon><span>{{ $t('dashboard.stats') }}</span>
             </router-link>
         </div>
     </div>
 </template>
 
 <script>
     import UserSearch from '../Widgets/UserSearch'
     import { library } from '@fortawesome/fontawesome-svg-core'
     import { faChartLine, faEnvelopeOpenText, faWallet } from '@fortawesome/free-solid-svg-icons'
 
     library.add(faChartLine, faEnvelopeOpenText, faWallet)
 
     export default {
         components: {
             UserSearch
         },
         data() {
             return {
                 status: {},
                 balance: 0
             }
         },
         mounted() {
             const authInfo = this.$store.state.authInfo
             this.status = authInfo.statusInfo
             this.getBalance(authInfo)
         },
         methods: {
             getBalance(authInfo) {
                 this.balance = 0;
                 // TODO: currencies, multi-wallets, accounts
                 authInfo.wallets.forEach(wallet => {
                     this.balance += wallet.balance
                 })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Resource/Info.vue b/src/resources/vue/Resource/Info.vue
index eb420ccb..00cf6fc8 100644
--- a/src/resources/vue/Resource/Info.vue
+++ b/src/resources/vue/Resource/Info.vue
@@ -1,187 +1,188 @@
 <template>
     <div class="container">
         <status-component v-if="resource_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>
 
         <div class="card" id="resource-info">
             <div class="card-body">
                 <div class="card-title" v-if="resource_id !== 'new'">
                     {{ $tc('resource.list-title', 1) }}
                     <btn class="btn-outline-danger button-delete float-end" @click="deleteResource()" icon="trash-alt">{{ $t('resource.delete') }}</btn>
                 </div>
                 <div class="card-title" v-if="resource_id === 'new'">{{ $t('resource.new') }}</div>
                 <div class="card-text">
                     <ul class="nav nav-tabs mt-3" role="tablist">
                         <li class="nav-item">
                             <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
                                 {{ $t('form.general') }}
                             </a>
                         </li>
                         <li v-if="resource_id !== 'new'" class="nav-item">
                             <a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
                                 {{ $t('form.settings') }}
                             </a>
                         </li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
                             <form @submit.prevent="submit" class="card-body">
                                 <div v-if="resource_id !== 'new'" class="row plaintext mb-3">
                                     <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                                     <div class="col-sm-8">
                                         <span :class="$root.statusClass(resource) + ' form-control-plaintext'" id="status">{{ $root.statusText(resource) }}</span>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="name" v-model="resource.name">
                                     </div>
                                 </div>
                                 <div v-if="domains.length" class="row mb-3">
                                     <label for="domain" class="col-sm-4 col-form-label">{{ $t('form.domain') }}</label>
                                     <div class="col-sm-8">
                                         <select class="form-select" v-model="resource.domain">
                                             <option v-for="_domain in domains" :key="_domain.id" :value="_domain.namespace">{{ _domain.namespace }}</option>
                                         </select>
                                     </div>
                                 </div>
                                 <div v-if="resource.email" class="row mb-3">
                                     <label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="email" disabled v-model="resource.email">
                                     </div>
                                 </div>
                                 <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
                             <form @submit.prevent="submitSettings" class="card-body">
                                 <div class="row mb-3">
                                     <label for="invitation_policy" class="col-sm-4 col-form-label">{{ $t('resource.invitation-policy') }}</label>
                                     <div class="col-sm-8">
                                         <div class="input-group input-group-select mb-1">
                                             <select class="form-select" id="invitation_policy" v-model="resource.config.invitation_policy" @change="policyChange">
                                                 <option value="accept">{{ $t('resource.ipolicy-accept') }}</option>
                                                 <option value="manual">{{ $t('resource.ipolicy-manual') }}</option>
                                                 <option value="reject">{{ $t('resource.ipolicy-reject') }}</option>
                                             </select>
                                             <input type="text" class="form-control" id="owner" v-model="resource.config.owner" :placeholder="$t('form.email')">
                                         </div>
                                         <small id="invitation-policy-hint" class="text-muted">
                                             {{ $t('resource.invitation-policy-text') }}
                                         </small>
                                     </div>
                                 </div>
                                 <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import StatusComponent from '../Widgets/Status'
 
     export default {
         components: {
             StatusComponent
         },
         data() {
             return {
                 domains: [],
                 resource_id: null,
                 resource: { config: {} },
                 status: {}
             }
         },
         created() {
             this.resource_id = this.$route.params.resource
 
             if (this.resource_id != 'new') {
                 this.$root.startLoading()
 
                 axios.get('/api/v4/resources/' + this.resource_id)
                     .then(response => {
                         this.$root.stopLoading()
                         this.resource = response.data
                         this.status = response.data.statusInfo
 
                         if (this.resource.config.invitation_policy.match(/^manual:(.+)$/)) {
                             this.resource.config.owner = RegExp.$1
                             this.resource.config.invitation_policy = 'manual'
                         }
                         this.$nextTick().then(() => { this.policyChange() })
                     })
                     .catch(this.$root.errorHandler)
             } else {
                 this.$root.startLoading()
 
                 axios.get('/api/v4/domains')
                     .then(response => {
                         this.$root.stopLoading()
                         this.domains = response.data
                         this.resource.domain = this.domains[0].namespace
                     })
                     .catch(this.$root.errorHandler)
             }
         },
         mounted() {
             $('#name').focus()
         },
         methods: {
             deleteResource() {
                 axios.delete('/api/v4/resources/' + this.resource_id)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.$router.push({ name: 'resources' })
                         }
                     })
             },
             policyChange() {
                 let select = $('#invitation_policy')
                 select.parent()[select.val() == 'manual' ? 'addClass' : 'removeClass']('selected')
             },
             statusUpdate(resource) {
                 this.resource = Object.assign({}, this.resource, resource)
             },
             submit() {
                 this.$root.clearFormValidation($('#resource-info form'))
 
                 let method = 'post'
                 let location = '/api/v4/resources'
 
                 if (this.resource_id !== 'new') {
                     method = 'put'
                     location += '/' + this.resource_id
                 }
 
                 const post = this.$root.pick(this.resource, ['id', 'name', 'domain'])
 
                 axios[method](location, post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                         this.$router.push({ name: 'resources' })
                     })
             },
             submitSettings() {
                 this.$root.clearFormValidation($('#settings form'))
-                let post = {...this.resource.config}
+
+                let post = this.$root.pick(this.resource.config, ['invitation_policy', 'owner'])
 
                 if (post.invitation_policy == 'manual') {
                     post.invitation_policy += ':' + post.owner
                 }
 
                 delete post.owner
 
                 axios.post('/api/v4/resources/' + this.resource_id + '/config', post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/SharedFolder/Info.vue b/src/resources/vue/SharedFolder/Info.vue
index 737f5ff3..52e1a749 100644
--- a/src/resources/vue/SharedFolder/Info.vue
+++ b/src/resources/vue/SharedFolder/Info.vue
@@ -1,181 +1,182 @@
 <template>
     <div class="container">
         <status-component v-if="folder_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>
 
         <div class="card" id="folder-info">
             <div class="card-body">
                 <div class="card-title" v-if="folder_id !== 'new'">
                     {{ $tc('shf.list-title', 1) }}
                     <btn class="btn-outline-danger button-delete float-end" @click="deleteFolder()" icon="trash-alt">{{ $t('shf.delete') }}</btn>
                 </div>
                 <div class="card-title" v-if="folder_id === 'new'">{{ $t('shf.new') }}</div>
                 <div class="card-text">
                     <ul class="nav nav-tabs mt-3" role="tablist">
                         <li class="nav-item">
                             <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
                                 {{ $t('form.general') }}
                             </a>
                         </li>
                         <li v-if="folder_id !== 'new'" class="nav-item">
                             <a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
                                 {{ $t('form.settings') }}
                             </a>
                         </li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
                             <form @submit.prevent="submit" class="card-body">
                                 <div v-if="folder_id !== 'new'" class="row plaintext mb-3">
                                     <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                                     <div class="col-sm-8">
                                         <span :class="$root.statusClass(folder) + ' form-control-plaintext'" id="status">{{ $root.statusText(folder) }}</span>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="name" v-model="folder.name">
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="type" class="col-sm-4 col-form-label">{{ $t('form.type') }}</label>
                                     <div class="col-sm-8">
                                         <select id="type" class="form-select" v-model="folder.type" :disabled="folder_id !== 'new'">
                                             <option v-for="type in types" :key="type" :value="type">{{ $t('shf.type-' + type) }}</option>
                                         </select>
                                     </div>
                                 </div>
                                 <div v-if="domains.length" class="row mb-3">
                                     <label for="domain" class="col-sm-4 col-form-label">{{ $t('form.domain') }}</label>
                                     <div v-if="domains.length" class="col-sm-8">
                                         <select class="form-select" v-model="folder.domain">
                                             <option v-for="_domain in domains" :key="_domain.id" :value="_domain.namespace">{{ _domain.namespace }}</option>
                                         </select>
                                     </div>
                                 </div>
                                 <div class="row mb-3" v-if="folder.type == 'mail'">
                                     <label for="aliases-input" class="col-sm-4 col-form-label">{{ $t('form.emails') }}</label>
                                     <div class="col-sm-8">
                                         <list-input id="aliases" :list="folder.aliases"></list-input>
                                     </div>
                                 </div>
                                 <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
                             <form @submit.prevent="submitSettings" class="card-body">
                                 <div class="row mb-3">
                                     <label for="acl-input" class="col-sm-4 col-form-label">{{ $t('form.acl') }}</label>
                                     <div class="col-sm-8">
                                         <acl-input id="acl" v-model="folder.config.acl" :list="folder.config.acl" class="mb-1"></acl-input>
                                         <small id="acl-hint" class="text-muted">
                                             {{ $t('shf.acl-text') }}
                                         </small>
                                     </div>
                                 </div>
                                 <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import AclInput from '../Widgets/AclInput'
     import ListInput from '../Widgets/ListInput'
     import StatusComponent from '../Widgets/Status'
 
     export default {
         components: {
             AclInput,
             ListInput,
             StatusComponent
         },
         data() {
             return {
                 domains: [],
                 folder_id: null,
                 folder: { type: 'mail', config: {}, aliases: [] },
                 status: {},
                 types: [ 'mail', 'event', 'task', 'contact', 'note', 'file' ]
             }
         },
         created() {
             this.folder_id = this.$route.params.folder
 
             if (this.folder_id != 'new') {
                 this.$root.startLoading()
 
                 axios.get('/api/v4/shared-folders/' + this.folder_id)
                     .then(response => {
                         this.$root.stopLoading()
                         this.folder = response.data
                         this.status = response.data.statusInfo
                     })
                     .catch(this.$root.errorHandler)
             } else {
                 this.$root.startLoading()
 
                 axios.get('/api/v4/domains')
                     .then(response => {
                         this.$root.stopLoading()
                         this.domains = response.data
                         this.folder.domain = this.domains[0].namespace
                     })
                     .catch(this.$root.errorHandler)
             }
         },
         mounted() {
             $('#name').focus()
         },
         methods: {
             deleteFolder() {
                 axios.delete('/api/v4/shared-folders/' + this.folder_id)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.$router.push({ name: 'shared-folders' })
                         }
                     })
             },
             statusUpdate(folder) {
                 this.folder = Object.assign({}, this.folder, folder)
             },
             submit() {
                 this.$root.clearFormValidation($('#folder-info form'))
 
                 let method = 'post'
                 let location = '/api/v4/shared-folders'
 
                 if (this.folder_id !== 'new') {
                     method = 'put'
                     location += '/' + this.folder_id
                 }
 
                 const post = this.$root.pick(this.folder, ['id', 'name', 'domain', 'type', 'aliases'])
 
                 if (post.type != 'mail') {
                     delete post.aliases
                 }
 
                 axios[method](location, post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                         this.$router.push({ name: 'shared-folders' })
                     })
             },
             submitSettings() {
                 this.$root.clearFormValidation($('#settings form'))
-                let post = {...this.folder.config}
+
+                let post = this.$root.pick(this.folder.config, ['acl'])
 
                 axios.post('/api/v4/shared-folders/' + this.folder_id + '/config', post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Signup.vue b/src/resources/vue/Signup.vue
index 6bff675b..987a921c 100644
--- a/src/resources/vue/Signup.vue
+++ b/src/resources/vue/Signup.vue
@@ -1,302 +1,297 @@
 <template>
     <div class="container">
         <div id="step0" v-if="!invitation">
             <div class="plan-selector row row-cols-sm-2 g-3">
                 <div v-for="item in plans" :key="item.id">
                     <div :class="'card bg-light plan-' + item.title">
                         <div class="card-header plan-header">
                             <div class="plan-ico text-center">
                                 <svg-icon :icon="plan_icons[item.title]"></svg-icon>
                             </div>
                         </div>
                         <div class="card-body text-center">
                             <btn class="btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></btn>
                             <div class="plan-description text-start mt-3" v-html="item.description"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="card d-none" id="step1" v-if="!invitation">
             <div class="card-body">
                 <h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 1, n: 3 }) }}</h4>
                 <p class="card-text">
                     {{ $t('signup.step1') }}
                 </p>
                 <form @submit.prevent="submitStep1" data-validation-prefix="signup_">
                     <div class="mb-3">
                         <div class="input-group">
                             <input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name">
                             <input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name">
                         </div>
                     </div>
                     <div class="mb-3">
                         <label for="signup_email" class="visually-hidden">{{ $t('signup.email') }}</label>
                         <input type="text" class="form-control" id="signup_email" :placeholder="$t('signup.email')" required v-model="email">
                     </div>
                     <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
                     <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step2" v-if="!invitation">
             <div class="card-body">
                 <h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 2, n: 3 }) }}</h4>
                 <p class="card-text">
                     {{ $t('signup.step2') }}
                 </p>
                 <form @submit.prevent="submitStep2" data-validation-prefix="signup_">
                     <div class="mb-3">
                         <label for="signup_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
                         <input type="text" class="form-control" id="signup_short_code" :placeholder="$t('form.code')" required v-model="short_code">
                     </div>
                     <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
                     <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                     <input type="hidden" id="signup_code" v-model="code" />
                 </form>
             </div>
         </div>
 
         <div class="card d-none" id="step3">
             <div class="card-body">
                 <h4 v-if="!invitation" class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 3, n: 3 }) }}</h4>
                 <p class="card-text">
                     {{ $t('signup.step3') }}
                 </p>
                 <form @submit.prevent="submitStep3" data-validation-prefix="signup_">
                     <div class="mb-3" v-if="invitation">
                         <div class="input-group">
                             <input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name">
                             <input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name">
                         </div>
                     </div>
                     <div class="mb-3">
                         <label for="signup_login" class="visually-hidden"></label>
                         <div class="input-group">
                             <input type="text" class="form-control" id="signup_login" required v-model="login" :placeholder="$t('signup.login')">
                             <span class="input-group-text">@</span>
                             <input v-if="is_domain" type="text" class="form-control rounded-end" id="signup_domain" required v-model="domain" :placeholder="$t('form.domain')">
                             <select v-else class="form-select rounded-end" id="signup_domain" required v-model="domain">
                                 <option v-for="_domain in domains" :key="_domain" :value="_domain">{{ _domain }}</option>
                             </select>
                         </div>
                     </div>
                     <password-input class="mb-3" v-model="pass"></password-input>
                     <div class="mb-3">
                         <label for="signup_voucher" class="visually-hidden">{{ $t('signup.voucher') }}</label>
                         <input type="text" class="form-control" id="signup_voucher" :placeholder="$t('signup.voucher')" v-model="voucher">
                     </div>
                     <btn v-if="!invitation" class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn>
                     <btn class="btn-primary" type="submit" icon="check">
                         <span v-if="invitation">{{ $t('btn.signup') }}</span>
                         <span v-else>{{ $t('btn.submit') }}</span>
                     </btn>
                 </form>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import PasswordInput from './Widgets/PasswordInput'
 
     export default {
         components: {
             PasswordInput
         },
         data() {
             return {
                 email: '',
                 first_name: '',
                 last_name: '',
                 code: '',
                 short_code: '',
                 login: '',
                 pass: {},
                 domain: '',
                 domains: [],
                 invitation: null,
                 is_domain: false,
                 plan: null,
                 plan_icons: {
                     individual: 'user',
                     group: 'users'
                 },
                 plans: [],
                 voucher: ''
             }
         },
         mounted() {
             let param = this.$route.params.param;
 
             if (this.$route.name == 'signup-invite') {
                 this.$root.startLoading()
                 axios.get('/api/auth/signup/invitations/' + param)
                     .then(response => {
                         this.invitation = response.data
                         this.login = response.data.login
                         this.voucher = response.data.voucher
                         this.first_name = response.data.first_name
                         this.last_name = response.data.last_name
                         this.plan = response.data.plan
                         this.is_domain = response.data.is_domain
                         this.setDomain(response.data)
                         this.$root.stopLoading()
                         this.displayForm(3, true)
                     })
                     .catch(error => {
                         this.$root.errorHandler(error)
                     })
             } else if (param) {
                 if (this.$route.path.indexOf('/signup/voucher/') === 0) {
                     // Voucher (discount) code
                     this.voucher = param
                     this.displayForm(0)
                 } else if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(param)) {
                     // Verification code provided, auto-submit Step 2
                     this.short_code = RegExp.$1
                     this.code = RegExp.$2
                     this.submitStep2(true)
                 } else if (/^([a-zA-Z_]+)$/.test(param)) {
                     // Plan title provided, save it and display Step 1
                     this.plan = param
                     this.displayForm(1, true)
                 } else {
                     this.$root.errorPage(404)
                 }
             } else {
                 this.displayForm(0)
             }
         },
         methods: {
             selectPlan(plan) {
                 this.$router.push({path: '/signup/' + plan})
                 this.plan = plan
                 this.displayForm(1, true)
             },
             // Composes plan selection page
             step0() {
                 if (!this.plans.length) {
                     this.$root.startLoading()
                     axios.get('/api/auth/signup/plans').then(response => {
                         this.$root.stopLoading()
                         this.plans = response.data.plans
                     })
                     .catch(error => {
                         this.$root.errorHandler(error)
                     })
                 }
             },
             // Submits data to the API, validates and gets verification code
             submitStep1() {
                 this.$root.clearFormValidation($('#step1 form'))
 
-                axios.post('/api/auth/signup/init', {
-                    email: this.email,
-                    last_name: this.last_name,
-                    first_name: this.first_name,
-                    plan: this.plan,
-                    voucher: this.voucher
-                }).then(response => {
-                    this.displayForm(2, true)
-                    this.code = response.data.code
-                })
+                const post = this.$root.pick(this, ['email', 'last_name', 'first_name', 'plan', 'voucher'])
+
+                axios.post('/api/auth/signup/init', post)
+                    .then(response => {
+                        this.displayForm(2, true)
+                        this.code = response.data.code
+                    })
             },
             // Submits the code to the API for verification
             submitStep2(bylink) {
                 if (bylink === true) {
                     this.displayForm(2, false)
                 }
 
                 this.$root.clearFormValidation($('#step2 form'))
 
-                axios.post('/api/auth/signup/verify', {
-                    code: this.code,
-                    short_code: this.short_code
-                }).then(response => {
-                    this.displayForm(3, true)
-                    // Reset user name/email/plan, we don't have them if user used a verification link
-                    this.first_name = response.data.first_name
-                    this.last_name = response.data.last_name
-                    this.email = response.data.email
-                    this.is_domain = response.data.is_domain
-                    this.voucher = response.data.voucher
+                const post = this.$root.pick(this, ['code', 'short_code'])
 
-                    // Fill the domain selector with available domains
-                    if (!this.is_domain) {
-                        this.setDomain(response.data)
-                    }
-                }).catch(error => {
-                    if (bylink === true) {
-                        // FIXME: display step 1, user can do nothing about it anyway
-                        //        Maybe we should display 404 error page?
-                        this.displayForm(1, true)
-                    }
-                })
+                axios.post('/api/auth/signup/verify', post)
+                    .then(response => {
+                        this.displayForm(3, true)
+                        // Reset user name/email/plan, we don't have them if user used a verification link
+                        this.first_name = response.data.first_name
+                        this.last_name = response.data.last_name
+                        this.email = response.data.email
+                        this.is_domain = response.data.is_domain
+                        this.voucher = response.data.voucher
+
+                        // Fill the domain selector with available domains
+                        if (!this.is_domain) {
+                            this.setDomain(response.data)
+                        }
+                    })
+                    .catch(error => {
+                        if (bylink === true) {
+                            // FIXME: display step 1, user can do nothing about it anyway
+                            //        Maybe we should display 404 error page?
+                            this.displayForm(1, true)
+                        }
+                    })
             },
             // Submits the data to the API to create the user account
             submitStep3() {
                 this.$root.clearFormValidation($('#step3 form'))
 
                 let post = {
-                    login: this.login,
-                    domain: this.domain,
-                    password: this.pass.password,
-                    password_confirmation: this.pass.password_confirmation,
-                    voucher: this.voucher
+                    ...this.$root.pick(this, ['login', 'domain', 'voucher']),
+                    ...this.pass
                 }
 
                 if (this.invitation) {
                     post.invitation = this.invitation.id
                     post.plan = this.plan
                     post.first_name = this.first_name
                     post.last_name = this.last_name
                 } else {
                     post.code = this.code
                     post.short_code = this.short_code
                 }
 
                 axios.post('/api/auth/signup', post).then(response => {
                     // auto-login and goto dashboard
                     this.$root.loginUser(response.data)
                 })
             },
             // Moves the user a step back in registration form
             stepBack(e) {
                 var card = $(e.target).closest('.card')
 
                 card.prev().removeClass('d-none').find('input').first().focus()
                 card.addClass('d-none').find('form')[0].reset()
 
                 if (card.attr('id') == 'step1') {
                     this.step0()
                     this.$router.replace({path: '/signup'})
                 }
             },
             displayForm(step, focus) {
                 [0, 1, 2, 3].filter(value => value != step).forEach(value => {
                     $('#step' + value).addClass('d-none')
                 })
 
                 if (!step) {
                     return this.step0()
                 }
 
                 $('#step' + step).removeClass('d-none')
 
                 if (focus) {
                     $('#step' + step).find('input').first().focus()
                 }
             },
             setDomain(response) {
                 if (response.domains) {
                     this.domains = response.domains
                 }
 
                 this.domain = response.domain || window.config['app.domain']
             }
         }
     }
 </script>
diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
index a9a36b6a..9c7ddb61 100644
--- a/src/resources/vue/User/Info.vue
+++ b/src/resources/vue/User/Info.vue
@@ -1,326 +1,326 @@
 <template>
     <div class="container">
         <status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>
 
         <div class="card" id="user-info">
             <div class="card-body">
                 <div class="card-title" v-if="user_id !== 'new'">{{ $t('user.title') }}
                     <btn icon="trash-alt" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()">
                         {{ $t('user.delete') }}
                     </btn>
                 </div>
                 <div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div>
                 <div class="card-text">
                     <ul class="nav nav-tabs mt-3" role="tablist">
                         <li class="nav-item">
                             <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
                                 {{ $t('form.general') }}
                             </a>
                         </li>
                         <li v-if="user_id !== 'new'" class="nav-item">
                             <a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
                                 {{ $t('form.settings') }}
                             </a>
                         </li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
                             <form @submit.prevent="submit" class="card-body">
                                 <div v-if="user_id !== 'new'" class="row plaintext mb-3">
                                     <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                                     <div class="col-sm-8">
                                         <span :class="$root.statusClass(user) + ' form-control-plaintext'" id="status">{{ $root.statusText(user) }}</span>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="first_name" v-model="user.first_name">
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="last_name" v-model="user.last_name">
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="organization" v-model="user.organization">
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label>
                                     <div class="col-sm-8">
                                         <input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email">
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="aliases-input" class="col-sm-4 col-form-label">{{ $t('user.aliases-email') }}</label>
                                     <div class="col-sm-8">
                                         <list-input id="aliases" :list="user.aliases"></list-input>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="password" class="col-sm-4 col-form-label">{{ $t('form.password') }}</label>
                                     <div class="col-sm-8">
                                         <div v-if="!isSelf" class="btn-group w-100" role="group">
                                             <input type="checkbox" id="pass-mode-input" value="input" class="btn-check" @change="setPasswordMode" :checked="passwordMode == 'input'">
                                             <label class="btn btn-outline-secondary" for="pass-mode-input">{{ $t('user.pass-input') }}</label>
                                             <input type="checkbox" id="pass-mode-link" value="link" class="btn-check" @change="setPasswordMode">
                                             <label class="btn btn-outline-secondary" for="pass-mode-link">{{ $t('user.pass-link') }}</label>
                                         </div>
                                         <password-input v-if="passwordMode == 'input'" :class="isSelf ? '' : 'mt-2'" v-model="user"></password-input>
                                         <div id="password-link" v-if="passwordMode == 'link' || user.passwordLinkCode" class="mt-2">
                                             <span>{{ $t('user.pass-link-label') }}</span>&nbsp;<code>{{ passwordLink }}</code>
                                             <span class="d-inline-block">
                                                 <btn class="btn-link p-1" :icon="['far', 'clipboard']" :title="$t('btn.copy')" @click="passwordLinkCopy"></btn>
                                                 <btn v-if="user.passwordLinkCode" class="btn-link text-danger p-1" icon="trash-alt" :title="$t('btn.delete')" @click="passwordLinkDelete"></btn>
                                             </span>
                                             <div v-if="!user.passwordLinkCode" class="form-text m-0">{{ $t('user.pass-link-hint') }}</div>
                                         </div>
                                     </div>
                                 </div>
                                 <div v-if="user_id === 'new'" id="user-packages" class="row mb-3">
                                     <label class="col-sm-4 col-form-label">{{ $t('user.package') }}</label>
                                     <package-select class="col-sm-8 pt-sm-1"></package-select>
                                 </div>
                                 <div v-if="user_id !== 'new'" id="user-skus" class="row mb-3">
                                     <label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
                                     <subscription-select v-if="user.id" class="col-sm-8 pt-sm-1" :object="user"></subscription-select>
                                 </div>
                                 <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
                             <form @submit.prevent="submitSettings" class="card-body">
                                 <div class="row checkbox mb-3">
                                     <label for="greylist_enabled" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label>
                                     <div class="col-sm-8 pt-2">
                                         <input type="checkbox" id="greylist_enabled" name="greylist_enabled" value="1" class="form-check-input d-block mb-2" :checked="user.config.greylist_enabled">
                                         <small id="greylisting-hint" class="text-muted">
                                             {{ $t('user.greylisting-text') }}
                                         </small>
                                     </div>
                                 </div>
                                 <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div id="delete-warning" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.delete-email', { email: user.email }) }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('user.delete-text') }}</p>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-danger modal-action" icon="trash-alt" @click="deleteUser()">{{ $t('btn.delete') }}</btn>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
     import ListInput from '../Widgets/ListInput'
     import PackageSelect from '../Widgets/PackageSelect'
     import PasswordInput from '../Widgets/PasswordInput'
     import StatusComponent from '../Widgets/Status'
     import SubscriptionSelect from '../Widgets/SubscriptionSelect'
 
     export default {
         components: {
             ListInput,
             PackageSelect,
             PasswordInput,
             StatusComponent,
             SubscriptionSelect
         },
         data() {
             return {
                 passwordLinkCode: '',
                 passwordMode: '',
                 user_id: null,
                 user: { aliases: [], config: [] },
                 status: {}
             }
         },
         computed: {
             isSelf: function () {
                 return this.user_id == this.$store.state.authInfo.id
             },
             passwordLink: function () {
                 return this.$root.appUrl + '/password-reset/' + this.passwordLinkCode
             }
         },
         created() {
             this.user_id = this.$route.params.user
 
             if (this.user_id !== 'new') {
                 this.$root.startLoading()
 
                 axios.get('/api/v4/users/' + this.user_id)
                     .then(response => {
                         this.$root.stopLoading()
 
                         this.user = response.data
                         this.user.first_name = response.data.settings.first_name
                         this.user.last_name = response.data.settings.last_name
                         this.user.organization = response.data.settings.organization
                         this.status = response.data.statusInfo
 
                         this.passwordLinkCode = this.user.passwordLinkCode
                     })
                     .catch(this.$root.errorHandler)
 
                 if (this.isSelf) {
                     this.passwordMode = 'input'
                 }
             } else {
                 this.passwordMode = 'input'
             }
         },
         mounted() {
             $('#first_name').focus()
             $('#delete-warning')[0].addEventListener('shown.bs.modal', event => {
                 $(event.target).find('button.modal-cancel').focus()
             })
         },
         methods: {
             passwordLinkCopy() {
                 navigator.clipboard.writeText($('#password-link code').text());
             },
             passwordLinkDelete() {
                 this.passwordMode = ''
                 $('#pass-mode-link')[0].checked = false
 
                 // Delete the code for real
                 axios.delete('/api/v4/password-reset/code/' + this.passwordLinkCode)
                     .then(response => {
                         this.passwordLinkCode = ''
                         this.user.passwordLinkCode = ''
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                         }
                     })
             },
             setPasswordMode(event) {
                 const mode = event.target.checked ? event.target.value : ''
 
                 // In the "new user" mode the password mode cannot be unchecked
                 if (!mode && this.user_id === 'new') {
                     event.target.checked = true
                     return
                 }
 
                 this.passwordMode = mode
 
                 if (!event.target.checked) {
                     return
                 }
 
                 $('#pass-mode-' + (mode == 'link' ? 'input' : 'link'))[0].checked = false
 
-                // Note: we use $nextTick() becouse we have to wait for the HTML elements to exist
+                // Note: we use $nextTick() because we have to wait for the HTML elements to exist
                 this.$nextTick().then(() => {
                     if (mode == 'link' && !this.passwordLinkCode) {
                         const element = $('#password-link')
                         this.$root.addLoader(element)
-                        axios.post('/api/v4/password-reset/code', [])
+                        axios.post('/api/v4/password-reset/code')
                             .then(response => {
                                 this.$root.removeLoader(element)
                                 this.passwordLinkCode = response.data.short_code + '-' + response.data.code
                             })
                             .catch(error => {
                                 this.$root.removeLoader(element)
                             })
                     } else if (mode == 'input') {
                         $('#password').focus();
                     }
                 })
             },
             submit() {
                 this.$root.clearFormValidation($('#general form'))
 
                 let method = 'post'
                 let location = '/api/v4/users'
                 let post = this.$root.pick(this.user, ['aliases', 'email', 'first_name', 'last_name', 'organization'])
 
                 if (this.user_id !== 'new') {
                     method = 'put'
                     location += '/' + this.user_id
 
                     let skus = {}
                     $('#user-skus input[type=checkbox]:checked').each((idx, input) => {
                         let id = $(input).val()
                         let range = $(input).parents('tr').first().find('input[type=range]').val()
 
                         skus[id] = range || 1
                     })
                     post.skus = skus
                 } else {
                     post.package = $('#user-packages input:checked').val()
                 }
 
                 if (this.passwordMode == 'link' && this.passwordLinkCode) {
                     post.passwordLinkCode = this.passwordLinkCode
                 } else if (this.passwordMode == 'input') {
                     post.password = this.user.password
                     post.password_confirmation = this.user.password_confirmation
                 }
 
                 axios[method](location, post)
                     .then(response => {
                         if (response.data.statusInfo) {
                             this.$store.state.authInfo.statusInfo = response.data.statusInfo
                         }
 
                         this.$toast.success(response.data.message)
                         this.$router.push({ name: 'users' })
                     })
             },
             submitSettings() {
                 this.$root.clearFormValidation($('#settings form'))
                 let post = { greylist_enabled: $('#greylist_enabled').prop('checked') ? 1 : 0 }
 
                 axios.post('/api/v4/users/' + this.user_id + '/config', post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                     })
             },
             statusUpdate(user) {
                 this.user = Object.assign({}, this.user, user)
             },
             deleteUser() {
                 // Delete the user from the confirm dialog
                 axios.delete('/api/v4/users/' + this.user_id)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.$router.push({ name: 'users' })
                         }
                     })
             },
             showDeleteConfirmation() {
                 if (this.user_id == this.$store.state.authInfo.id) {
                     // Deleting self, redirect to /profile/delete page
                     this.$router.push({ name: 'profile-delete' })
                 } else {
                     // Display the warning
                     new Modal('#delete-warning').show()
                 }
             }
         }
     }
 </script>
diff --git a/src/resources/vue/User/Profile.vue b/src/resources/vue/User/Profile.vue
index 1f5171d7..36232f28 100644
--- a/src/resources/vue/User/Profile.vue
+++ b/src/resources/vue/User/Profile.vue
@@ -1,114 +1,114 @@
 <template>
     <div class="container">
         <div class="card" id="user-profile">
             <div class="card-body">
                 <div class="card-title">
                     {{ $t('user.profile-title') }}
                     <btn-router v-if="$root.isController(wallet.id)" to="profile/delete" class="btn-outline-danger float-end" icon="trash-alt">
                         {{ $t('user.profile-delete') }}
                     </btn-router>
                 </div>
                 <div class="card-text">
                     <form @submit.prevent="submit">
                         <div class="row mb-3 plaintext">
                             <label class="col-sm-4 col-form-label">{{ $t('user.custno') }}</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="userid">{{ user_id }}</span>
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="first_name" v-model="profile.first_name">
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="last_name" v-model="profile.last_name">
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="organization" v-model="profile.organization">
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="phone" class="col-sm-4 col-form-label">{{ $t('form.phone') }}</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="phone" v-model="profile.phone">
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="external_email" class="col-sm-4 col-form-label">{{ $t('user.ext-email') }}</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="external_email" v-model="profile.external_email">
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="billing_address" class="col-sm-4 col-form-label">{{ $t('user.address') }}</label>
                             <div class="col-sm-8">
                                 <textarea class="form-control" id="billing_address" rows="3" v-model="profile.billing_address"></textarea>
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="country" class="col-sm-4 col-form-label">{{ $t('user.country') }}</label>
                             <div class="col-sm-8">
                                 <select class="form-select" id="country" v-model="profile.country">
                                     <option value="">-</option>
                                     <option v-for="(item, code) in countries" :value="code" :key="code">{{ item[1] }}</option>
                                 </select>
                             </div>
                         </div>
                         <div class="row mb-3">
                             <label for="password" class="col-sm-4 col-form-label">{{ $t('form.password') }}</label>
                             <password-input class="col-sm-8" v-model="profile"></password-input>
                         </div>
                         <btn class="btn-primary button-submit mt-2" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                     </form>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import PasswordInput from '../Widgets/PasswordInput'
 
     export default {
         components: {
             PasswordInput
         },
         data() {
             return {
                 profile: {},
                 user_id: null,
                 wallet: {},
                 countries: window.config.countries
             }
         },
         created() {
             this.wallet = this.$store.state.authInfo.wallet
             this.profile = this.$store.state.authInfo.settings
             this.user_id = this.$store.state.authInfo.id
         },
         mounted() {
             $('#first_name').focus()
         },
         methods: {
             submit() {
                 this.$root.clearFormValidation($('#user-profile form'))
 
                 axios.put('/api/v4/users/' + this.user_id, this.profile)
                     .then(response => {
                         delete this.profile.password
-                        delete this.profile.password_confirm
+                        delete this.profile.password_confirmation
 
                         this.$toast.success(response.data.message)
                         this.$router.push({ name: 'dashboard' })
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
index 601bc83c..773e1b97 100644
--- a/src/resources/vue/Wallet.vue
+++ b/src/resources/vue/Wallet.vue
@@ -1,430 +1,438 @@
 <template>
     <div class="container" dusk="wallet-component">
         <div v-if="wallet.id" id="wallet" class="card">
             <div class="card-body">
                 <div class="card-title">{{ $t('wallet.title') }} <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div>
                 <div class="card-text">
                     <p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p>
 
                     <div v-if="showPendingPayments" class="alert alert-warning">
                         {{ $t('wallet.pending-payments-warning') }}
                     </div>
                     <p>
                         <btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn>
                     </p>
                     <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
                         <template v-if="mandate.id && !mandate.isValid">
                             <div class="alert alert-danger">
                                 {{ $t('wallet.auto-payment-failed') }}
                             </div>
                             <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
                         </template>
                         <btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn>
                     </div>
                     <div id="mandate-info" v-else>
                         <div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
                             {{ $t('wallet.auto-payment-disabled') }}
                         </div>
                         <template v-else>
                             <p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p>
                             <p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p>
                         </template>
                         <div v-if="mandate.isPending" class="alert alert-warning">
                             {{ $t('wallet.auto-payment-inprogress') }}
                         </div>
                         <p class="buttons">
                             <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
                             <btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn>
                         </p>
                     </div>
                 </div>
             </div>
         </div>
 
         <ul class="nav nav-tabs mt-3" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true">
                     {{ $t('wallet.receipts') }}
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false">
                     {{ $t('wallet.history') }}
                 </a>
             </li>
             <li v-if="showPendingPayments" class="nav-item">
                 <a class="nav-link" id="tab-payments" href="#wallet-payments" role="tab" aria-controls="wallet-payments" aria-selected="false">
                     {{ $t('wallet.pending-payments') }}
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts">
                 <div class="card-body">
                     <div class="card-text">
                         <p v-if="receipts.length">
                             {{ $t('wallet.receipts-hint') }}
                         </p>
                         <div v-if="receipts.length" class="input-group">
                             <select id="receipt-id" class="form-control">
                                 <option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>
                             </select>
                             <btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn>
                         </div>
                         <p v-if="!receipts.length">
                             {{ $t('wallet.receipts-none') }}
                         </p>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="wallet-history" role="tabpanel" aria-labelledby="tab-history">
                 <div class="card-body">
                     <transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log>
                 </div>
             </div>
             <div class="tab-pane" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments">
                 <div class="card-body">
                     <payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log>
                 </div>
             </div>
         </div>
 
         <div id="payment-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ paymentDialogTitle }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <div id="payment-method" v-if="paymentForm == 'method'">
                             <form data-validation-prefix="mandate_">
                                 <div id="payment-method-selection">
                                     <a :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" class="card link-profile">
                                         <svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />
                                         <img v-if="method.image" :src="method.image" />
                                         <span class="name">{{ method.name }}</span>
                                     </a>
                                 </div>
                             </form>
                         </div>
                         <div id="manual-payment" v-if="paymentForm == 'manual'">
                             <p v-if="wallet.currency != selectedPaymentMethod.currency">
                                 {{ $t('wallet.currency-conv', { wc: wallet.currency, pc: selectedPaymentMethod.currency }) }}
                             </p>
                             <p v-if="selectedPaymentMethod.id == 'banktransfer'">
                                 {{ $t('wallet.banktransfer-hint') }}
                             </p>
                             <p>
                                 {{ $t('wallet.payment-amount-hint') }}
                             </p>
                             <form id="payment-form" @submit.prevent="payment">
                                 <div class="input-group">
                                     <input type="text" class="form-control" id="amount" v-model="amount" required>
                                     <span class="input-group-text">{{ wallet.currency }}</span>
                                 </div>
                                 <div v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount)" class="alert alert-warning m-0 mt-3">
                                     {{ $t('wallet.payment-warning', { price: $root.price(amount * selectedPaymentMethod.exchangeRate * 100, selectedPaymentMethod.currency) }) }}
                                 </div>
                             </form>
                         </div>
                         <div id="auto-payment" v-if="paymentForm == 'auto'">
                             <form data-validation-prefix="mandate_">
                                 <p>
                                     {{ $t('wallet.auto-payment-hint') }}
                                 </p>
                                 <div class="row mb-3">
                                     <label for="mandate_amount" class="col-sm-6 col-form-label">{{ $t('wallet.fill-up') }}</label>
                                     <div class="col-sm-6">
                                         <div class="input-group">
                                             <input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required>
                                             <span class="input-group-text">{{ wallet.currency }}</span>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="mandate_balance" class="col-sm-6 col-form-label">{{ $t('wallet.when-below') }}</label>
                                     <div class="col-sm-6">
                                         <div class="input-group">
                                             <input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" required>
                                             <span class="input-group-text">{{ wallet.currency }}</span>
                                         </div>
                                     </div>
                                 </div>
                                 <p v-if="!mandate.isValid">
                                     {{ $t('wallet.auto-payment-next') }}
                                 </p>
                                 <div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0">
                                     {{ $t('wallet.auto-payment-disabled-next') }}
                                 </div>
                             </form>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-primary modal-action" icon="check" @click="autoPayment"
                              v-if="paymentForm == 'auto' && (mandate.isValid || mandate.isPending)"
                         >
                             {{ $t('btn.submit') }}
                         </btn>
                         <btn class="btn btn-primary modal-action" icon="check" @click="autoPayment"
                              v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
                         >
                             {{ $t('btn.continue') }}
                         </btn>
                         <btn class="btn-primary modal-action" icon="check" @click="payment"
                              v-if="paymentForm == 'manual'"
                         >
                             {{ $t('btn.continue') }}
                         </btn>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
     import TransactionLog from './Widgets/TransactionLog'
     import PaymentLog from './Widgets/PaymentLog'
 
     export default {
         components: {
             TransactionLog,
             PaymentLog
         },
         data() {
             return {
                 amount: '',
                 mandate: { amount: 10, balance: 0, method: null },
                 paymentDialogTitle: null,
                 paymentForm: null,
                 nextForm: null,
                 receipts: [],
                 stripe: null,
                 loadTransactions: false,
                 loadPayments: false,
                 showPendingPayments: false,
                 wallet: {},
                 walletId: null,
                 paymentMethods: [],
                 selectedPaymentMethod: null
             }
         },
         mounted() {
             $('#wallet button').focus()
 
             this.walletId = this.$store.state.authInfo.wallets[0].id
 
             this.$root.startLoading()
             axios.get('/api/v4/wallets/' + this.walletId)
                 .then(response => {
                     this.$root.stopLoading()
                     this.wallet = response.data
 
                     const receiptsTab = $('#wallet-receipts')
 
                     this.$root.addLoader(receiptsTab)
                     axios.get('/api/v4/wallets/' + this.walletId + '/receipts')
                         .then(response => {
                             this.$root.removeLoader(receiptsTab)
                             this.receipts = response.data.list
                         })
                         .catch(error => {
                             this.$root.removeLoader(receiptsTab)
                         })
 
                     if (this.wallet.provider == 'stripe') {
                         this.stripeInit()
                     }
                 })
                 .catch(this.$root.errorHandler)
 
             this.loadMandate()
 
             axios.get('/api/v4/payments/has-pending')
                 .then(response => {
                     this.showPendingPayments = response.data.hasPending
                 })
         },
         updated() {
             $(this.$el).find('ul.nav-tabs a').on('click', e => {
                 this.$root.tab(e)
 
                 if ($(e.target).is('#tab-history')) {
                     this.loadTransactions = true
                 } else if ($(e.target).is('#tab-payments')) {
                     this.loadPayments = true
                 }
             })
         },
         methods: {
             loadMandate() {
                 const mandate_form = $('#mandate-form')
 
                 this.$root.removeLoader(mandate_form)
 
                 if (!this.mandate.id || this.mandate.isPending) {
                     this.$root.addLoader(mandate_form)
                     axios.get('/api/v4/payments/mandate')
                         .then(response => {
                             this.$root.removeLoader(mandate_form)
                             this.mandate = response.data
                         })
                         .catch(error => {
                             this.$root.removeLoader(mandate_form)
                         })
                 }
             },
             selectPaymentMethod(method) {
                 this.formLock = false
                 this.selectedPaymentMethod = method
                 this.paymentForm = this.nextForm
 
                 setTimeout(() => { $('#payment-dialog').find('#amount,#mandate_amount').focus() }, 10)
             },
             payment() {
                 if (this.formLock) {
                     return
                 }
 
                 // Lock the form to prevent from double submission
                 this.formLock = true
                 let onFinish = () => { this.formLock = false }
 
                 this.$root.clearFormValidation($('#payment-form'))
 
-                axios.post('/api/v4/payments', {amount: this.amount, methodId: this.selectedPaymentMethod.id, currency: this.selectedPaymentMethod.currency}, { onFinish })
+                const post =  {
+                    amount: this.amount,
+                    methodId: this.selectedPaymentMethod.id,
+                    currency: this.selectedPaymentMethod.currency
+                }
+
+                axios.post('/api/v4/payments', post, { onFinish })
                     .then(response => {
                         if (response.data.redirectUrl) {
                             location.href = response.data.redirectUrl
                         } else {
                             this.stripeCheckout(response.data)
                         }
                     })
             },
             autoPayment() {
                 if (this.formLock) {
                     return
                 }
 
                 // Lock the form to prevent from double submission
                 this.formLock = true
                 let onFinish = () => { this.formLock = false }
 
                 const method = this.mandate.id && (this.mandate.isValid || this.mandate.isPending) ? 'put' : 'post'
                 let post = {
                     amount: this.mandate.amount,
                     balance: this.mandate.balance,
                 }
 
                 // Modifications can't change the method of payment
                 if (this.selectedPaymentMethod) {
-                    post['methodId'] = this.selectedPaymentMethod.id;
-                    post['currency'] = this.selectedPaymentMethod.currency;
+                    post.methodId = this.selectedPaymentMethod.id
+                    post.currency = this.selectedPaymentMethod.currency
                 }
 
                 this.$root.clearFormValidation($('#auto-payment form'))
 
                 axios[method]('/api/v4/payments/mandate', post, { onFinish })
                     .then(response => {
                         if (method == 'post') {
                             this.mandate.id = null
                             // a new mandate, redirect to the chackout page
                             if (response.data.redirectUrl) {
                                 location.href = response.data.redirectUrl
                             } else if (response.data.id) {
                                 this.stripeCheckout(response.data)
                             }
                         } else {
                             // an update
                             if (response.data.status == 'success') {
                                 this.dialog.hide();
                                 this.mandate = response.data
                                 this.$toast.success(response.data.message)
                             }
                         }
                     })
             },
             autoPaymentChange(event) {
                 this.autoPaymentForm(event, this.$t('wallet.auto-payment-update'))
             },
             autoPaymentDelete() {
                 axios.delete('/api/v4/payments/mandate')
                     .then(response => {
                         this.mandate = { amount: 10, balance: 0 }
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                         }
                     })
             },
             paymentMethodForm(nextForm) {
                 this.formLock = false
                 this.paymentMethods = []
                 this.paymentForm = 'method'
                 this.nextForm = nextForm
                 this.paymentDialogTitle = this.$t(nextForm == 'auto' ? 'wallet.auto-payment-setup' : 'wallet.top-up')
 
                 this.dialog = new Modal('#payment-dialog')
                 this.dialog.show()
 
                 this.$nextTick().then(() => {
                     const form = $('#payment-method')
-                    this.$root.addLoader(form, false, {'min-height': '10em'})
+                    const type = nextForm == 'manual' ? 'oneoff' : 'recurring'
+
+                    this.$root.addLoader(form, false, { 'min-height': '10em' })
 
-                    axios.get('/api/v4/payments/methods', {params: {type: nextForm == 'manual' ? 'oneoff' : 'recurring'}})
+                    axios.get('/api/v4/payments/methods', { params: { type } })
                         .then(response => {
                             this.$root.removeLoader(form)
                             this.paymentMethods = response.data
                         })
                 })
             },
             autoPaymentForm(event, title) {
                 this.paymentForm = 'auto'
                 this.paymentDialogTitle = title
                 this.formLock = false
 
                 this.dialog = new Modal('#payment-dialog')
                 this.dialog.show()
             },
             receiptDownload() {
                 const receipt = $('#receipt-id').val()
                 this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt)
             },
             stripeInit() {
                 let script = $('#stripe-script')
 
                 if (!script.length) {
                     script = document.createElement('script')
 
                     script.onload = () => {
                         this.stripe = Stripe(window.config.stripePK)
                     }
 
                     script.id = 'stripe-script'
                     script.src = 'https://js.stripe.com/v3/'
 
                     document.getElementsByTagName('head')[0].appendChild(script)
                 } else {
                     this.stripe = Stripe(window.config.stripePK)
                 }
             },
             stripeCheckout(data) {
                 if (!this.stripe) {
                     return
                 }
 
                 this.stripe.redirectToCheckout({
                     sessionId: data.id
                 }).then(result => {
                     // If it fails due to a browser or network error,
                     // display the localized error message to the user
                     if (result.error) {
                         this.$toast.error(result.error.message)
                     }
                 })
             }
         }
     }
 </script>
diff --git a/src/tests/Browser/Reseller/WalletTest.php b/src/tests/Browser/Reseller/WalletTest.php
index 2df1d124..e2f8ab85 100644
--- a/src/tests/Browser/Reseller/WalletTest.php
+++ b/src/tests/Browser/Reseller/WalletTest.php
@@ -1,248 +1,248 @@
 <?php
 
 namespace Tests\Browser\Reseller;
 
 use App\Payment;
 use App\Providers\PaymentProvider;
 use App\Transaction;
 use App\Wallet;
 use Carbon\Carbon;
 use Tests\Browser;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\Wallet as WalletPage;
 use Tests\TestCaseDusk;
 
 class WalletTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
         self::useResellerUrl();
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $reseller = $this->getTestUser('reseller@' . \config('app.domain'));
         $wallet = $reseller->wallets()->first();
         $wallet->balance = 0;
         $wallet->save();
         $wallet->payments()->delete();
         $wallet->transactions()->delete();
 
         parent::tearDown();
     }
 
     /**
      * Test wallet page (unauthenticated)
      */
     public function testWalletUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit('/wallet')->on(new Home());
         });
     }
 
     /**
      * Test wallet "box" on Dashboard
      */
     public function testDashboard(): void
     {
         $reseller = $this->getTestUser('reseller@' . \config('app.domain'));
         Wallet::where('user_id', $reseller->id)->update(['balance' => 125]);
 
         // Positive balance
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('reseller@' . \config('app.domain'), \App\Utils::generatePassphrase(), true)
                 ->on(new Dashboard())
-                ->assertSeeIn('@links .link-wallet .name', 'Wallet')
+                ->assertSeeIn('@links .link-wallet svg + span', 'Wallet')
                 ->assertSeeIn('@links .link-wallet .badge.bg-success', '1,25 CHF');
         });
 
         Wallet::where('user_id', $reseller->id)->update(['balance' => -1234]);
 
         // Negative balance
         $this->browse(function (Browser $browser) {
             $browser->visit(new Dashboard())
-                ->assertSeeIn('@links .link-wallet .name', 'Wallet')
+                ->assertSeeIn('@links .link-wallet svg + span', 'Wallet')
                 ->assertSeeIn('@links .link-wallet .badge.bg-danger', '-12,34 CHF');
         });
     }
 
     /**
      * Test wallet page
      *
      * @depends testDashboard
      */
     public function testWallet(): void
     {
         $reseller = $this->getTestUser('reseller@' . \config('app.domain'));
         Wallet::where('user_id', $reseller->id)->update(['balance' => -1234]);
 
         $this->browse(function (Browser $browser) {
             $browser->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('#wallet .card-title', 'Account balance -12,34 CHF')
                 ->assertSeeIn('#wallet .card-title .text-danger', '-12,34 CHF')
                 ->assertSeeIn('#wallet .card-text', 'You are out of credit');
         });
     }
 
     /**
      * Test Receipts tab
      *
      * @depends testWallet
      */
     public function testReceipts(): void
     {
         $user = $this->getTestUser('reseller@' . \config('app.domain'));
         $wallet = $user->wallets()->first();
         $wallet->payments()->delete();
 
         // Assert Receipts tab content when there's no receipts available
         $this->browse(function (Browser $browser) {
             $browser->visit(new WalletPage())
                 ->assertSeeIn('#wallet .card-title', 'Account balance 0,00 CHF')
                 ->assertSeeIn('#wallet .card-title .text-success', '0,00 CHF')
                 ->assertSeeIn('#wallet .card-text', 'You are in your free trial period.') // TODO
                 ->assertSeeIn('@nav #tab-receipts', 'Receipts')
                 ->with('@receipts-tab', function (Browser $browser) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertSeeIn('p', 'There are no receipts for payments')
                         ->assertDontSeeIn('p', 'Here you can download')
                         ->assertMissing('select')
                         ->assertMissing('button');
                 });
         });
 
         // Create some sample payments
         $receipts = [];
         $date = Carbon::create(intval(date('Y')) - 1, 3, 30);
         $payment = Payment::create([
                 'id' => 'AAA1',
                 'status' => PaymentProvider::STATUS_PAID,
                 'type' => PaymentProvider::TYPE_ONEOFF,
                 'description' => 'Paid in March',
                 'wallet_id' => $wallet->id,
                 'provider' => 'stripe',
                 'amount' => 1111,
                 'currency_amount' => 1111,
                 'currency' => 'CHF',
         ]);
         $payment->updated_at = $date;
         $payment->save();
         $receipts[] = $date->format('Y-m');
 
         $date = Carbon::create(intval(date('Y')) - 1, 4, 30);
         $payment = Payment::create([
                 'id' => 'AAA2',
                 'status' => PaymentProvider::STATUS_PAID,
                 'type' => PaymentProvider::TYPE_ONEOFF,
                 'description' => 'Paid in April',
                 'wallet_id' => $wallet->id,
                 'provider' => 'stripe',
                 'amount' => 1111,
                 'currency_amount' => 1111,
                 'currency' => 'CHF',
         ]);
         $payment->updated_at = $date;
         $payment->save();
         $receipts[] = $date->format('Y-m');
 
         // Assert Receipts tab with receipts available
         $this->browse(function (Browser $browser) use ($receipts) {
             $browser->refresh()
                 ->on(new WalletPage())
                 ->assertSeeIn('@nav #tab-receipts', 'Receipts')
                 ->with('@receipts-tab', function (Browser $browser) use ($receipts) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertDontSeeIn('p', 'There are no receipts for payments')
                         ->assertSeeIn('p', 'Here you can download')
                         ->assertSeeIn('button', 'Download')
                         ->assertElementsCount('select > option', 2)
                         ->assertSeeIn('select > option:nth-child(1)', $receipts[1])
                         ->assertSeeIn('select > option:nth-child(2)', $receipts[0]);
 
                     // Download a receipt file
                     $browser->select('select', $receipts[0])
                         ->click('button')
                         ->pause(2000);
 
                     $files = glob(__DIR__ . '/../downloads/*.pdf');
 
                     $filename = pathinfo($files[0], PATHINFO_BASENAME);
                     $this->assertTrue(strpos($filename, $receipts[0]) !== false);
 
                     $content = $browser->readDownloadedFile($filename, 0);
                     $this->assertStringStartsWith("%PDF-1.", $content);
 
                     $browser->removeDownloadedFile($filename);
                 });
         });
     }
 
     /**
      * Test History tab
      *
      * @depends testWallet
      */
     public function testHistory(): void
     {
         $user = $this->getTestUser('reseller@' . \config('app.domain'));
         $wallet = $user->wallets()->first();
         $wallet->transactions()->delete();
 
         // Create some sample transactions
         $transactions = $this->createTestTransactions($wallet);
         $transactions = array_reverse($transactions);
         $pages = array_chunk($transactions, 10 /* page size*/);
 
         $this->browse(function (Browser $browser) use ($pages) {
             $browser->on(new WalletPage())
                 ->assertSeeIn('@nav #tab-history', 'History')
                 ->click('@nav #tab-history')
                 ->with('@history-tab', function (Browser $browser) use ($pages) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertElementsCount('table tbody tr', 10)
                         ->assertMissing('table td.email')
                         ->assertSeeIn('.more-loader button', 'Load more');
 
                     foreach ($pages[0] as $idx => $transaction) {
                         $selector = 'table tbody tr:nth-child(' . ($idx + 1) . ')';
                         $priceStyle = $transaction->type == Transaction::WALLET_AWARD ? 'text-success' : 'text-danger';
                         $browser->assertSeeIn("$selector td.description", $transaction->shortDescription())
                             ->assertMissing("$selector td.selection button")
                             ->assertVisible("$selector td.price.{$priceStyle}");
                         // TODO: Test more transaction details
                     }
 
                     // Load the next page
                     $browser->click('.more-loader button')
                         ->waitUntilMissing('.app-loader')
                         ->assertElementsCount('table tbody tr', 12)
                         ->assertMissing('.more-loader button');
 
                     $debitEntry = null;
                     foreach ($pages[1] as $idx => $transaction) {
                         $selector = 'table tbody tr:nth-child(' . ($idx + 1 + 10) . ')';
                         $priceStyle = $transaction->type == Transaction::WALLET_CREDIT ? 'text-success' : 'text-danger';
                         $browser->assertSeeIn("$selector td.description", $transaction->shortDescription());
 
                         if ($transaction->type == Transaction::WALLET_DEBIT) {
                             $debitEntry = $selector;
                         } else {
                             $browser->assertMissing("$selector td.selection button");
                         }
                     }
                 });
         });
     }
 }
diff --git a/src/tests/Browser/SettingsTest.php b/src/tests/Browser/SettingsTest.php
index 98a1ddaf..25505bc4 100644
--- a/src/tests/Browser/SettingsTest.php
+++ b/src/tests/Browser/SettingsTest.php
@@ -1,120 +1,120 @@
 <?php
 
 namespace Tests\Browser;
 
 use Tests\Browser;
 use Tests\Browser\Components\Menu;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\Settings;
 use Tests\TestCaseDusk;
 
 class SettingsTest extends TestCaseDusk
 {
     /**
      * Test settings page (unauthenticated)
      */
     public function testSettingsUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit('/settings')->on(new Home());
         });
     }
 
     /**
      * Test settings "box" on Dashboard
      */
     public function testDashboard(): void
     {
         $this->browse(function (Browser $browser) {
             // Test a user that is not an account owner
             $browser->visit(new Home())
                 ->submitLogon('jack@kolab.org', 'simple123', true)
                 ->on(new Dashboard())
-                ->assertMissing('@links .link-settings .name')
+                ->assertMissing('@links .link-settings')
                 ->visit('/settings')
                 ->assertErrorPage(403)
                 ->within(new Menu(), function (Browser $browser) {
                     $browser->clickMenuItem('logout');
                 });
 
             // Test the account owner
             $browser->waitForLocation('/login')
                 ->on(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true)
                 ->on(new Dashboard())
-                ->assertSeeIn('@links .link-settings .name', 'Settings');
+                ->assertSeeIn('@links .link-settings svg + span', 'Settings');
         });
     }
 
     /**
      * Test Settings page
      *
      * @depends testDashboard
      */
     public function testSettings(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $john->setSetting('password_policy', 'min:5,max:100,lower');
         $john->setSetting('max_password_age', null);
 
         $this->browse(function (Browser $browser) {
             $browser->click('@links .link-settings')
                 ->on(new Settings())
                 ->assertSeeIn('#settings .card-title', 'Settings')
                 // Password policy
                 ->assertSeeIn('@form .row:nth-child(1) > label', 'Password Policy')
                 ->with('@form #password_policy', function (Browser $browser) {
                     $browser->assertElementsCount('li', 7)
                         ->assertSeeIn('li:nth-child(1) label', 'Minimum password length')
                         ->assertChecked('li:nth-child(1) input[type=checkbox]')
                         ->assertDisabled('li:nth-child(1) input[type=checkbox]')
                         ->assertValue('li:nth-child(1) input[type=text]', '5')
                         ->assertSeeIn('li:nth-child(2) label', 'Maximum password length')
                         ->assertChecked('li:nth-child(2) input[type=checkbox]')
                         ->assertDisabled('li:nth-child(2) input[type=checkbox]')
                         ->assertValue('li:nth-child(2) input[type=text]', '100')
                         ->assertSeeIn('li:nth-child(3) label', 'Password contains a lower-case character')
                         ->assertChecked('li:nth-child(3) input[type=checkbox]')
                         ->assertMissing('li:nth-child(3) input[type=text]')
                         ->assertSeeIn('li:nth-child(4) label', 'Password contains an upper-case character')
                         ->assertNotChecked('li:nth-child(4) input[type=checkbox]')
                         ->assertMissing('li:nth-child(4) input[type=text]')
                         ->assertSeeIn('li:nth-child(5) label', 'Password contains a digit')
                         ->assertNotChecked('li:nth-child(5) input[type=checkbox]')
                         ->assertMissing('li:nth-child(5) input[type=text]')
                         ->assertSeeIn('li:nth-child(6) label', 'Password contains a special character')
                         ->assertNotChecked('li:nth-child(6) input[type=checkbox]')
                         ->assertMissing('li:nth-child(6) input[type=text]')
                         ->assertSeeIn('li:nth-child(7) label', 'Password cannot be the same as the last')
                         ->assertNotChecked('li:nth-child(7) input[type=checkbox]')
                         ->assertMissing('li:nth-child(7) input[type=text]')
                         ->assertSelected('li:nth-child(7) select', 3)
                         ->assertSelectHasOptions('li:nth-child(7) select', [1,2,3,4,5,6])
                         // Change the policy
                         ->type('li:nth-child(1) input[type=text]', '11')
                         ->type('li:nth-child(2) input[type=text]', '120')
                         ->click('li:nth-child(3) input[type=checkbox]')
                         ->click('li:nth-child(4) input[type=checkbox]');
                 })
                 ->assertSeeIn('@form .row:nth-child(2) > label', 'Password Retention')
                 ->with('@form #password_retention', function (Browser $browser) {
                     $browser->assertElementsCount('li', 1)
                         ->assertSeeIn('li:nth-child(1) label', 'Require a password change every')
                         ->assertNotChecked('li:nth-child(1) input[type=checkbox]')
                         ->assertSelected('li:nth-child(1) select', 3)
                         ->assertSelectHasOptions('li:nth-child(1) select', [3, 6, 9, 12])
                         // change the policy
                         ->check('li:nth-child(1) input[type=checkbox]')
                         ->select('li:nth-child(1) select', 6);
                 })
                 ->click('button[type=submit]')
                 ->assertToast(Toast::TYPE_SUCCESS, 'User settings updated successfully.');
         });
 
         $this->assertSame('min:11,max:120,upper', $john->getSetting('password_policy'));
         $this->assertSame('6', $john->getSetting('max_password_age'));
     }
 }
diff --git a/src/tests/Browser/WalletTest.php b/src/tests/Browser/WalletTest.php
index df2149ee..bcf89dc0 100644
--- a/src/tests/Browser/WalletTest.php
+++ b/src/tests/Browser/WalletTest.php
@@ -1,275 +1,275 @@
 <?php
 
 namespace Tests\Browser;
 
 use App\Payment;
 use App\Providers\PaymentProvider;
 use App\Transaction;
 use App\Wallet;
 use Carbon\Carbon;
 use Tests\Browser;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\Wallet as WalletPage;
 use Tests\TestCaseDusk;
 
 class WalletTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
 
         $this->deleteTestUser('wallets-controller@kolabnow.com');
 
         $john = $this->getTestUser('john@kolab.org');
         Wallet::where('user_id', $john->id)->update(['balance' => -1234]);
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $this->deleteTestUser('wallets-controller@kolabnow.com');
 
         $john = $this->getTestUser('john@kolab.org');
         Wallet::where('user_id', $john->id)->update(['balance' => 0]);
 
         parent::tearDown();
     }
 
     /**
      * Test wallet page (unauthenticated)
      */
     public function testWalletUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit('/wallet')->on(new Home());
         });
     }
 
     /**
      * Test wallet "box" on Dashboard
      */
     public function testDashboard(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true)
                 ->on(new Dashboard())
-                ->assertSeeIn('@links .link-wallet .name', 'Wallet')
+                ->assertSeeIn('@links .link-wallet svg + span', 'Wallet')
                 ->assertSeeIn('@links .link-wallet .badge', '-12,34 CHF');
         });
     }
 
     /**
      * Test wallet page
      *
      * @depends testDashboard
      */
     public function testWallet(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('#wallet .card-title', 'Account balance -12,34 CHF')
                 ->assertSeeIn('#wallet .card-title .text-danger', '-12,34 CHF')
                 ->assertSeeIn('#wallet .card-text', 'You are out of credit');
         });
     }
 
     /**
      * Test Receipts tab
      */
     public function testReceipts(): void
     {
         $user = $this->getTestUser('wallets-controller@kolabnow.com', ['password' => 'simple123']);
         $wallet = $user->wallets()->first();
         $wallet->payments()->delete();
 
         // Log out John and log in the test user
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->waitForLocation('/login')
                 ->on(new Home())
                 ->submitLogon('wallets-controller@kolabnow.com', 'simple123', true);
         });
 
         // Assert Receipts tab content when there's no receipts available
         $this->browse(function (Browser $browser) {
             $browser->on(new Dashboard())
                 ->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('#wallet .card-title', 'Account balance 0,00 CHF')
                 ->assertSeeIn('#wallet .card-title .text-success', '0,00 CHF')
                 ->assertSeeIn('#wallet .card-text', 'You are in your free trial period.')
                 ->assertSeeIn('@nav #tab-receipts', 'Receipts')
                 ->with('@receipts-tab', function (Browser $browser) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertSeeIn('p', 'There are no receipts for payments')
                         ->assertDontSeeIn('p', 'Here you can download')
                         ->assertMissing('select')
                         ->assertMissing('button');
                 });
         });
 
         // Create some sample payments
         $receipts = [];
         $date = Carbon::create(intval(date('Y')) - 1, 3, 30);
         $payment = Payment::create([
                 'id' => 'AAA1',
                 'status' => PaymentProvider::STATUS_PAID,
                 'type' => PaymentProvider::TYPE_ONEOFF,
                 'description' => 'Paid in March',
                 'wallet_id' => $wallet->id,
                 'provider' => 'stripe',
                 'amount' => 1111,
                 'currency_amount' => 1111,
                 'currency' => 'CHF',
         ]);
         $payment->updated_at = $date;
         $payment->save();
         $receipts[] = $date->format('Y-m');
 
         $date = Carbon::create(intval(date('Y')) - 1, 4, 30);
         $payment = Payment::create([
                 'id' => 'AAA2',
                 'status' => PaymentProvider::STATUS_PAID,
                 'type' => PaymentProvider::TYPE_ONEOFF,
                 'description' => 'Paid in April',
                 'wallet_id' => $wallet->id,
                 'provider' => 'stripe',
                 'amount' => 1111,
                 'currency_amount' => 1111,
                 'currency' => 'CHF',
         ]);
         $payment->updated_at = $date;
         $payment->save();
         $receipts[] = $date->format('Y-m');
 
         // Assert Receipts tab with receipts available
         $this->browse(function (Browser $browser) use ($receipts) {
             $browser->refresh()
                 ->on(new WalletPage())
                 ->assertSeeIn('@nav #tab-receipts', 'Receipts')
                 ->with('@receipts-tab', function (Browser $browser) use ($receipts) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertDontSeeIn('p', 'There are no receipts for payments')
                         ->assertSeeIn('p', 'Here you can download')
                         ->assertSeeIn('button', 'Download')
                         ->assertElementsCount('select > option', 2)
                         ->assertSeeIn('select > option:nth-child(1)', $receipts[1])
                         ->assertSeeIn('select > option:nth-child(2)', $receipts[0]);
 
                     // Download a receipt file
                     $browser->select('select', $receipts[0])
                         ->click('button')
                         ->pause(2000);
 
                     $files = glob(__DIR__ . '/downloads/*.pdf');
 
                     $filename = pathinfo($files[0], PATHINFO_BASENAME);
                     $this->assertTrue(strpos($filename, $receipts[0]) !== false);
 
                     $content = $browser->readDownloadedFile($filename, 0);
                     $this->assertStringStartsWith("%PDF-1.", $content);
 
                     $browser->removeDownloadedFile($filename);
                 });
         });
     }
 
     /**
      * Test History tab
      */
     public function testHistory(): void
     {
         $user = $this->getTestUser('wallets-controller@kolabnow.com', ['password' => 'simple123']);
 
         // Log out John and log in the test user
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->waitForLocation('/login')
                 ->on(new Home())
                 ->submitLogon('wallets-controller@kolabnow.com', 'simple123', true);
         });
 
         $package_kolab = \App\Package::where('title', 'kolab')->first();
         $user->assignPackage($package_kolab);
         $wallet = $user->wallets()->first();
 
         // Create some sample transactions
         $transactions = $this->createTestTransactions($wallet);
         $transactions = array_reverse($transactions);
         $pages = array_chunk($transactions, 10 /* page size*/);
 
         $this->browse(function (Browser $browser) use ($pages) {
             $browser->on(new Dashboard())
                 ->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('@nav #tab-history', 'History')
                 ->click('@nav #tab-history')
                 ->with('@history-tab', function (Browser $browser) use ($pages) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertElementsCount('table tbody tr', 10)
                         ->assertMissing('table td.email')
                         ->assertSeeIn('.more-loader button', 'Load more');
 
                     foreach ($pages[0] as $idx => $transaction) {
                         $selector = 'table tbody tr:nth-child(' . ($idx + 1) . ')';
                         $priceStyle = $transaction->type == Transaction::WALLET_AWARD ? 'text-success' : 'text-danger';
                         $browser->assertSeeIn("$selector td.description", $transaction->shortDescription())
                             ->assertMissing("$selector td.selection button")
                             ->assertVisible("$selector td.price.{$priceStyle}");
                         // TODO: Test more transaction details
                     }
 
                     // Load the next page
                     $browser->click('.more-loader button')
                         ->waitUntilMissing('.app-loader')
                         ->assertElementsCount('table tbody tr', 12)
                         ->assertMissing('.more-loader button');
 
                     $debitEntry = null;
                     foreach ($pages[1] as $idx => $transaction) {
                         $selector = 'table tbody tr:nth-child(' . ($idx + 1 + 10) . ')';
                         $priceStyle = $transaction->type == Transaction::WALLET_CREDIT ? 'text-success' : 'text-danger';
                         $browser->assertSeeIn("$selector td.description", $transaction->shortDescription());
 
                         if ($transaction->type == Transaction::WALLET_DEBIT) {
                             $debitEntry = $selector;
                         } else {
                             $browser->assertMissing("$selector td.selection button");
                         }
                     }
 
                     // Load sub-transactions
                     $browser->click("$debitEntry td.selection button")
                         ->waitUntilMissing('.app-loader')
                         ->assertElementsCount("$debitEntry td.description ul li", 2)
                         ->assertMissing("$debitEntry td.selection button");
                 });
         });
     }
 
     /**
      * Test that non-controller user has no access to wallet
      */
     public function testAccessDenied(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->on(new Home())
                 ->submitLogon('jack@kolab.org', 'simple123', true)
                 ->on(new Dashboard())
                 ->assertMissing('@links .link-wallet')
                 ->visit('/wallet')
                 ->assertErrorPage(403, "Only account owners can access a wallet.");
         });
     }
 }