diff --git a/src/resources/vue/Signup.vue b/src/resources/vue/Signup.vue
index 726725de..17b2a783 100644
--- a/src/resources/vue/Signup.vue
+++ b/src/resources/vue/Signup.vue
@@ -1,304 +1,304 @@
 <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">
                             <button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button>
                             <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>
                     <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
                     <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
                 </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>
                     <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
                     <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
                     <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>
+                                <option v-for="d in domains" :key="d" :value="d">{{ domain }}</option>
                             </select>
                         </div>
                     </div>
                     <div class="mb-3">
                         <label for="signup_password" class="visually-hidden">{{ $t('form.password') }}</label>
                         <input type="password" class="form-control" id="signup_password" :placeholder="$t('form.password')" required v-model="password">
                     </div>
                     <div class="mb-3">
                         <label for="signup_confirm" class="visually-hidden">{{ $t('form.password-confirm') }}</label>
                         <input type="password" class="form-control" id="signup_confirm" :placeholder="$t('form.password-confirm')" required v-model="password_confirmation">
                     </div>
                     <div class="mb-3 pt-2">
                         <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>
                     <button v-if="!invitation" class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
                     <button class="btn btn-primary" type="submit">
                         <svg-icon icon="check"></svg-icon> <span v-if="invitation">{{ $t('btn.signup') }}</span><span v-else>{{ $t('btn.submit') }}</span>
                     </button>
                 </form>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 email: '',
                 first_name: '',
                 last_name: '',
                 code: '',
                 short_code: '',
                 login: '',
                 password: '',
                 password_confirmation: '',
                 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
                 })
             },
             // 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
 
                     // 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.password,
                     password_confirmation: this.password_confirmation,
                     voucher: this.voucher
                 }
 
                 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 a0c3641d..46965d7b 100644
--- a/src/resources/vue/User/Info.vue
+++ b/src/resources/vue/User/Info.vue
@@ -1,484 +1,480 @@
 <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') }}
                     <button
                         class="btn btn-outline-danger button-delete float-end"
                         @click="showDeleteConfirmation()" type="button"
                     >
                         <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.delete') }}
                     </button>
                 </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>
+                            <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">
-                            <div class="card-body">
-                    <form @submit.prevent="submit">
-                        <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.userStatusClass(user) + ' form-control-plaintext'" id="status">{{ $root.userStatusText(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">
-                                <input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'">
-                            </div>
-                        </div>
-                        <div class="row mb-3">
-                            <label for="password_confirmaton" class="col-sm-4 col-form-label">{{ $t('form.password-confirm') }}</label>
-                            <div class="col-sm-8">
-                                <input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation" :required="user_id === 'new'">
-                            </div>
-                        </div>
-                        <div v-if="user_id === 'new'" id="user-packages" class="row mb-3">
-                            <label class="col-sm-4 col-form-label">Package</label>
-                            <div class="col-sm-8">
-                                <table class="table table-sm form-list">
-                                    <thead class="visually-hidden">
-                                        <tr>
-                                            <th scope="col"></th>
-                                            <th scope="col">{{ $t('user.package') }}</th>
-                                            <th scope="col">{{ $t('user.price') }}</th>
-                                            <th scope="col"></th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id">
-                                            <td class="selection">
-                                                <input type="checkbox" @click="selectPackage"
-                                                       :value="pkg.id"
-                                                       :checked="pkg.id == package_id"
-                                                       :id="'pkg-input-' + pkg.id"
-                                                >
-                                            </td>
-                                            <td class="name">
-                                                <label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label>
-                                            </td>
-                                            <td class="price text-nowrap">
-                                                {{ $root.priceLabel(pkg.cost, discount) }}
-                                            </td>
-                                            <td class="buttons">
-                                                <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="pkg.description">
-                                                    <svg-icon icon="info-circle"></svg-icon>
-                                                    <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
-                                                </button>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <small v-if="discount > 0" class="hint">
-                                    <hr class="m-0">
-                                    &sup1; {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
-                                </small>
-                            </div>
-                        </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>
-                            <div class="col-sm-8">
-                                <table class="table table-sm form-list">
-                                    <thead class="visually-hidden">
-                                        <tr>
-                                            <th scope="col"></th>
-                                            <th scope="col">{{ $t('user.subscription') }}</th>
-                                            <th scope="col">{{ $t('user.price') }}</th>
-                                            <th scope="col"></th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr v-for="sku in skus" :id="'s' + sku.id" :key="sku.id">
-                                            <td class="selection">
-                                                <input type="checkbox" @input="onInputSku"
-                                                       :value="sku.id"
-                                                       :disabled="sku.readonly"
-                                                       :checked="sku.enabled"
-                                                       :id="'sku-input-' + sku.title"
-                                                >
-                                            </td>
-                                            <td class="name">
-                                                <label :for="'sku-input-' + sku.title">{{ sku.name }}</label>
-                                                <div v-if="sku.range" class="range-input">
-                                                    <label class="text-nowrap">{{ sku.range.min }} {{ sku.range.unit }}</label>
-                                                    <input
-                                                        type="range" class="form-range" @input="rangeUpdate"
-                                                        :value="sku.value || sku.range.min"
-                                                        :min="sku.range.min"
-                                                        :max="sku.range.max"
-                                                    >
-                                                </div>
-                                            </td>
-                                            <td class="price text-nowrap">
-                                                {{ $root.priceLabel(sku.cost, discount) }}
-                                            </td>
-                                            <td class="buttons">
-                                                <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="sku.description">
-                                                    <svg-icon icon="info-circle"></svg-icon>
-                                                    <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
-                                                </button>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <small v-if="discount > 0" class="hint">
-                                    <hr class="m-0">
-                                    &sup1; {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
-                                </small>
-                            </div>
-                        </div>
-                        <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
-                    </form>
-                            </div>
+                            <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.userStatusClass(user) + ' form-control-plaintext'" id="status">{{ $root.userStatusText(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">
+                                        <input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'">
+                                    </div>
+                                </div>
+                                <div class="row mb-3">
+                                    <label for="password_confirmaton" class="col-sm-4 col-form-label">{{ $t('form.password-confirm') }}</label>
+                                    <div class="col-sm-8">
+                                        <input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation" :required="user_id === 'new'">
+                                    </div>
+                                </div>
+                                <div v-if="user_id === 'new'" id="user-packages" class="row mb-3">
+                                    <label class="col-sm-4 col-form-label">Package</label>
+                                    <div class="col-sm-8">
+                                        <table class="table table-sm form-list">
+                                            <thead class="visually-hidden">
+                                                <tr>
+                                                    <th scope="col"></th>
+                                                    <th scope="col">{{ $t('user.package') }}</th>
+                                                    <th scope="col">{{ $t('user.price') }}</th>
+                                                    <th scope="col"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id">
+                                                    <td class="selection">
+                                                        <input type="checkbox" @click="selectPackage"
+                                                               :value="pkg.id"
+                                                               :checked="pkg.id == package_id"
+                                                               :id="'pkg-input-' + pkg.id"
+                                                        >
+                                                    </td>
+                                                    <td class="name">
+                                                        <label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label>
+                                                    </td>
+                                                    <td class="price text-nowrap">
+                                                        {{ $root.priceLabel(pkg.cost, discount) }}
+                                                    </td>
+                                                    <td class="buttons">
+                                                        <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="pkg.description">
+                                                            <svg-icon icon="info-circle"></svg-icon>
+                                                            <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                        <small v-if="discount > 0" class="hint">
+                                            <hr class="m-0">
+                                            &sup1; {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
+                                        </small>
+                                    </div>
+                                </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>
+                                    <div class="col-sm-8">
+                                        <table class="table table-sm form-list">
+                                            <thead class="visually-hidden">
+                                                <tr>
+                                                    <th scope="col"></th>
+                                                    <th scope="col">{{ $t('user.subscription') }}</th>
+                                                    <th scope="col">{{ $t('user.price') }}</th>
+                                                    <th scope="col"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr v-for="sku in skus" :id="'s' + sku.id" :key="sku.id">
+                                                    <td class="selection">
+                                                        <input type="checkbox" @input="onInputSku"
+                                                               :value="sku.id"
+                                                               :disabled="sku.readonly"
+                                                               :checked="sku.enabled"
+                                                               :id="'sku-input-' + sku.title"
+                                                        >
+                                                    </td>
+                                                    <td class="name">
+                                                        <label :for="'sku-input-' + sku.title">{{ sku.name }}</label>
+                                                        <div v-if="sku.range" class="range-input">
+                                                            <label class="text-nowrap">{{ sku.range.min }} {{ sku.range.unit }}</label>
+                                                            <input
+                                                                type="range" class="form-range" @input="rangeUpdate"
+                                                                :value="sku.value || sku.range.min"
+                                                                :min="sku.range.min"
+                                                                :max="sku.range.max"
+                                                            >
+                                                        </div>
+                                                    </td>
+                                                    <td class="price text-nowrap">
+                                                        {{ $root.priceLabel(sku.cost, discount) }}
+                                                    </td>
+                                                    <td class="buttons">
+                                                        <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="sku.description">
+                                                            <svg-icon icon="info-circle"></svg-icon>
+                                                            <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                        <small v-if="discount > 0" class="hint">
+                                            <hr class="m-0">
+                                            &sup1; {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
+                                        </small>
+                                    </div>
+                                </div>
+                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                            </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
-                            <div class="card-body">
-                                <form @submit.prevent="submitSettings">
-                                    <div class="row checkbox mb-3">
-                                        <label for="greylisting" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label>
-                                        <div class="col-sm-8 pt-2">
-                                            <input type="checkbox" id="greylisting" name="greylisting" value="1" class="form-check-input d-block mb-2" :checked="user.config.greylisting">
-                                            <small id="greylisting-hint" class="text-muted">
-                                                {{ $t('user.greylisting-text') }}
-                                            </small>
-                                        </div>
+                            <form @submit.prevent="submitSettings" class="card-body">
+                                <div class="row checkbox mb-3">
+                                    <label for="greylisting" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label>
+                                    <div class="col-sm-8 pt-2">
+                                        <input type="checkbox" id="greylisting" name="greylisting" value="1" class="form-check-input d-block mb-2" :checked="user.config.greylisting">
+                                        <small id="greylisting-hint" class="text-muted">
+                                            {{ $t('user.greylisting-text') }}
+                                        </small>
                                     </div>
-                                    <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
-                                </form>
-                            </div>
+                                </div>
+                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                            </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>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('user.delete-text') }}</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
                         <button type="button" class="btn btn-danger modal-action" @click="deleteUser()">
                             <svg-icon icon="trash-alt"></svg-icon> {{ $t('btn.delete') }}
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
     import ListInput from '../Widgets/ListInput'
     import StatusComponent from '../Widgets/Status'
 
     export default {
         components: {
             ListInput,
             StatusComponent
         },
         data() {
             return {
                 discount: 0,
                 discount_description: '',
                 user_id: null,
                 user: { aliases: [], config: [] },
                 packages: [],
                 package_id: null,
                 skus: [],
                 status: {}
             }
         },
         created() {
             this.user_id = this.$route.params.user
 
             let wallet = this.$store.state.authInfo.accounts[0]
 
             if (!wallet) {
                 wallet = this.$store.state.authInfo.wallets[0]
             }
 
             if (wallet && wallet.discount) {
                 this.discount = wallet.discount
                 this.discount_description = wallet.discount_description
             }
 
             this.$root.startLoading()
 
             if (this.user_id === 'new') {
                 // do nothing (for now)
                 axios.get('/api/v4/packages')
                     .then(response => {
                         this.$root.stopLoading()
 
                         this.packages = response.data.filter(pkg => !pkg.isDomain)
                         this.package_id = this.packages[0].id
                     })
                     .catch(this.$root.errorHandler)
             }
             else {
                 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.discount = this.user.wallet.discount
                         this.discount_description = this.user.wallet.discount_description
                         this.status = response.data.statusInfo
 
                         axios.get('/api/v4/users/' + this.user_id + '/skus?type=user')
                             .then(response => {
                                 // "merge" SKUs with user entitlement-SKUs
                                 this.skus = response.data
                                     .map(sku => {
                                         const userSku = this.user.skus[sku.id]
                                         if (userSku) {
                                             sku.enabled = true
                                             sku.skuCost = sku.cost
                                             sku.cost = userSku.costs.reduce((sum, current) => sum + current)
                                             sku.value = userSku.count
                                             sku.costs = userSku.costs
                                         } else if (!sku.readonly) {
                                             sku.enabled = false
                                         }
 
                                         return sku
                                     })
 
                                 // Update all range inputs (and price)
                                 this.$nextTick(() => {
                                     $('#user-skus input[type=range]').each((idx, elem) => { this.rangeUpdate(elem) })
                                 })
                             })
                             .catch(this.$root.errorHandler)
                     })
                     .catch(this.$root.errorHandler)
             }
         },
         mounted() {
             $('#first_name').focus()
             $('#delete-warning')[0].addEventListener('shown.bs.modal', event => {
                 $(event.target).find('button.modal-cancel').focus()
             })
         },
         methods: {
             submit() {
                 this.$root.clearFormValidation($('#user-info form'))
 
                 let method = 'post'
                 let location = '/api/v4/users'
 
                 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
                     })
                     this.user.skus = skus
                 } else {
                     this.user.package = this.package_id
                 }
 
                 axios[method](location, this.user)
                     .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 = { greylisting: $('#greylisting').prop('checked') ? 1 : 0 }
 
                 axios.post('/api/v4/users/' + this.user_id + '/config', post)
                     .then(response => {
                         this.$toast.success(response.data.message)
                     })
             },
             onInputSku(e) {
                 let input = e.target
                 let sku = this.findSku(input.value)
                 let required = []
 
                 // We use 'readonly', not 'disabled', because we might want to handle
                 // input events. For example to display an error when someone clicks
                 // the locked input
                 if (input.readOnly) {
                     input.checked = !input.checked
                     // TODO: Display an alert explaining why it's locked
                     return
                 }
 
                 // TODO: Following code might not work if we change definition of forbidden/required
                 //       or we just need more sophisticated SKU dependency rules
 
                 if (input.checked) {
                     // Check if a required SKU is selected, alert the user if not
                     (sku.required || []).forEach(title => {
                         this.skus.forEach(item => {
                             let checkbox
                             if (item.handler == title && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) {
                                 if (!checkbox.checked) {
                                     required.push(item.name)
                                 }
                             }
                         })
                     })
 
                     if (required.length) {
                         input.checked = false
                         return alert(this.$t('user.skureq', { sku: sku.name, list: required.join(', ') }))
                     }
                 } else {
                     // Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync
                     // TODO: Should we display an alert instead?
                     this.skus.forEach(item => {
                         if (item.required && item.required.indexOf(sku.handler) > -1) {
                             $('#s' + item.id).find('input[type=checkbox]').prop('checked', false)
                         }
                     })
                 }
 
                 // Uncheck+lock/unlock conflicting SKUs
                 (sku.forbidden || []).forEach(title => {
                     this.skus.forEach(item => {
                         let checkbox
                         if (item.handler == title && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) {
                             if (input.checked) {
                                 checkbox.checked = false
                                 checkbox.readOnly = true
                             } else {
                                 checkbox.readOnly = false
                             }
                         }
                     })
                 })
             },
             selectPackage(e) {
                 // Make sure there always is only one package selected
                 $('#user-packages input').prop('checked', false)
                 this.package_id = $(e.target).prop('checked', false).val()
             },
             rangeUpdate(e) {
                 let input = $(e.target || e)
                 let value = input.val()
                 let record = input.parents('tr').first()
                 let sku_id = record.find('input[type=checkbox]').val()
                 let sku = this.findSku(sku_id)
                 let existing = sku.costs ? sku.costs.length : 0
                 let cost
 
                 // Calculate cost, considering both existing entitlement cost and sku cost
                 if (existing) {
                     cost = sku.costs
                         .sort((a, b) => a - b) // sort by cost ascending (free units first)
                         .slice(0, value)
                         .reduce((sum, current) => sum + current)
 
                     if (value > existing) {
                         cost += sku.skuCost * (value - existing)
                     }
                 } else {
                     cost = sku.cost * (value - sku.units_free)
                 }
 
                 // Update the label
                 input.prev().text(value + ' ' + sku.range.unit)
 
                 // Update the price
                 record.find('.price').text(this.$root.priceLabel(cost, this.discount))
             },
             findSku(id) {
                 for (let i = 0; i < this.skus.length; i++) {
                     if (this.skus[i].id == id) {
                         return this.skus[i];
                     }
                 }
             },
             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>