diff --git a/src/app/Utils.php b/src/app/Utils.php
index 50fa6341..3eb059f2 100644
--- a/src/app/Utils.php
+++ b/src/app/Utils.php
@@ -1,164 +1,164 @@
 <?php
 
 namespace App;
 
 use App\Rules\UserEmailLocal;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Support\Str;
 use Ramsey\Uuid\Uuid;
 
 /**
  * Small utility functions for App.
  */
 class Utils
 {
     /**
      * Provide all unique combinations of elements in $input, with order and duplicates irrelevant.
      *
      * @param array $input The input array of elements.
      *
      * @return array[]
      */
     public static function powerSet(array $input): array
     {
         $output = [];
 
         for ($x = 0; $x < count($input); $x++) {
             self::combine($input, $x + 1, 0, [], 0, $output);
         }
 
         return $output;
     }
 
     /**
      * Returns a UUID in the form of an integer.
      *
      * @return integer
      */
     public static function uuidInt(): int
     {
         $hex = Uuid::uuid4();
         $bin = pack('h*', str_replace('-', '', $hex));
         $ids = unpack('L', $bin);
         $id = array_shift($ids);
 
         return $id;
     }
 
     /**
      * Returns a UUID in the form of a string.
      *
      * @return string
      */
     public static function uuidStr(): string
     {
         return Uuid::uuid4()->toString();
     }
 
     private static function combine($input, $r, $index, $data, $i, &$output): void
     {
         $n = count($input);
 
         // Current cobination is ready
         if ($index == $r) {
             $output[] = array_slice($data, 0, $r);
             return;
         }
 
         // When no more elements are there to put in data[]
         if ($i >= $n) {
             return;
         }
 
         // current is included, put next at next location
         $data[$index] = $input[$i];
         self::combine($input, $r, $index + 1, $data, $i + 1, $output);
 
         // current is excluded, replace it with next (Note that i+1
         // is passed, but index is not changed)
         self::combine($input, $r, $index, $data, $i + 1, $output);
     }
 
     /**
      * Create a configuration/environment data to be passed to
      * the UI
      *
      * @todo For a lack of better place this is put here for now
      *
      * @return array Configuration data
      */
     public static function uiEnv(): array
     {
         $opts = ['app.name', 'app.url', 'app.domain'];
         $env = \app('config')->getMany($opts);
 
         $countries = include resource_path('countries.php');
         $env['countries'] = $countries ?: [];
 
-        $env['isAdmin'] = strpos(request()->getHttpHost(), 'admin.') === 0;
-        $env['jsapp'] = $env['isAdmin'] ? 'admin.js' : 'user.js';
+        $isAdmin = strpos(request()->getHttpHost(), 'admin.') === 0;
+        $env['jsapp'] = $isAdmin ? 'admin.js' : 'user.js';
 
         return $env;
     }
 
     /**
      * Email address (login or alias) validation
      *
      * @param string    $email    Email address
      * @param \App\User $user     The account owner
      * @param bool      $is_alias The email is an alias
      *
      * @return string Error message on validation error
      */
     public static function validateEmail(
         string $email,
         \App\User $user,
         bool $is_alias = false
     ): ?string {
         $attribute = $is_alias ? 'alias' : 'email';
 
         if (strpos($email, '@') === false) {
             return \trans('validation.entryinvalid', ['attribute' => $attribute]);
         }
 
         list($login, $domain) = explode('@', $email);
 
         // Check if domain exists
         $domain = Domain::where('namespace', Str::lower($domain))->first();
 
         if (empty($domain)) {
             return \trans('validation.domaininvalid');
         }
 
         // Validate login part alone
         $v = Validator::make(
             [$attribute => $login],
             [$attribute => ['required', new UserEmailLocal(!$domain->isPublic())]]
         );
 
         if ($v->fails()) {
             return $v->errors()->toArray()[$attribute][0];
         }
 
         // Check if it is one of domains available to the user
         // TODO: We should have a helper that returns "flat" array with domain names
         //       I guess we could use pluck() somehow
         $domains = array_map(
             function ($domain) {
                 return $domain->namespace;
             },
             $user->domains()
         );
 
         if (!in_array($domain->namespace, $domains)) {
             return \trans('validation.entryexists', ['attribute' => 'domain']);
         }
 
         // Check if user with specified address already exists
         if (User::findByEmail($email)) {
             return \trans('validation.entryexists', ['attribute' => $attribute]);
         }
 
         return null;
     }
 }
diff --git a/src/resources/js/admin.js b/src/resources/js/admin.js
index caf680dc..2ef6047d 100644
--- a/src/resources/js/admin.js
+++ b/src/resources/js/admin.js
@@ -1,9 +1,10 @@
 /**
  * Application code for the admin UI
  */
 
-import router from './routes-admin'
+import routes from './routes-admin.js'
 
-window.router = router
+window.routes = routes
+window.isAdmin = true
 
 require('./app')
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index 951cc640..e03c518b 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -1,289 +1,266 @@
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
  * building robust, powerful web applications using Vue and Laravel.
  */
 
 require('./bootstrap')
 
 import AppComponent from '../vue/App'
 import MenuComponent from '../vue/Menu'
 import store from './store'
-import FontAwesomeIcon from './fontawesome'
-import VueToastr from '@deveodk/vue-toastr'
-
-window.Vue = require('vue')
-
-Vue.component('svg-icon', FontAwesomeIcon)
-
-Vue.use(VueToastr, {
-    defaultPosition: 'toast-bottom-right',
-    defaultTimeout: 5000
-})
-
-const vTooltip = (el, binding) => {
-    const t = []
-
-    if (binding.modifiers.focus) t.push('focus')
-    if (binding.modifiers.hover) t.push('hover')
-    if (binding.modifiers.click) t.push('click')
-    if (!t.length) t.push('hover')
-
-    $(el).tooltip({
-        title: binding.value,
-        placement: binding.arg || 'top',
-        trigger: t.join(' '),
-        html: !!binding.modifiers.html,
-    });
-}
-
-Vue.directive('tooltip', {
-    bind: vTooltip,
-    update: vTooltip,
-    unbind (el) {
-        $(el).tooltip('dispose')
-    }
-})
-
-// Add a response interceptor for general/validation error handler
-// This have to be before Vue and Router setup. Otherwise we would
-// not be able to handle axios responses initiated from inside
-// components created/mounted handlers (e.g. signup code verification link)
-window.axios.interceptors.response.use(
-    response => {
-        // Do nothing
-        return response
-    },
-    error => {
-        let error_msg
-        let status = error.response ? error.response.status : 200
-
-        if (error.response && status == 422) {
-            error_msg = "Form validation error"
-
-            $.each(error.response.data.errors || {}, (idx, msg) => {
-                $('form').each((i, form) => {
-                    const input_name = ($(form).data('validation-prefix') || '') + idx
-                    const input = $('#' + input_name)
-
-                    if (input.length) {
-                        // Create an error message\
-                        // API responses can use a string, array or object
-                        let msg_text = ''
-                        if ($.type(msg) !== 'string') {
-                            $.each(msg, (index, str) => {
-                                msg_text += str + ' '
-                            })
-                        }
-                        else {
-                            msg_text = msg
-                        }
-
-                        let feedback = $('<div class="invalid-feedback">').text(msg_text)
-
-                        if (input.is('.list-input')) {
-                            // List input widget
-                            input.children(':not(:first-child)').each((index, element) => {
-                                if (msg[index]) {
-                                    $(element).find('input').addClass('is-invalid')
-                                }
-                            })
-
-                            input.addClass('is-invalid').next('.invalid-feedback').remove()
-                            input.after(feedback)
-                        }
-                        else {
-                            // Standard form element
-                            input.addClass('is-invalid')
-                            input.parent().find('.invalid-feedback').remove()
-                            input.parent().append(feedback)
-                        }
-
-                        return false
-                    }
-                });
-            })
-
-            $('form .is-invalid:not(.listinput-widget)').first().focus()
-        }
-        else if (error.response && error.response.data) {
-            error_msg = error.response.data.message
-        }
-        else {
-            error_msg = error.request ? error.request.statusText : error.message
-        }
-
-        app.$toastr('error', error_msg || "Server Error", 'Error')
-
-        // Pass the error as-is
-        return Promise.reject(error)
-    }
-)
 
 const app = new Vue({
     el: '#app',
     components: {
         'app-component': AppComponent,
         'menu-component': MenuComponent
     },
     store,
     router: window.router,
     data() {
         return {
-            isLoading: true
+            isLoading: true,
+            isAdmin: window.isAdmin
         }
     },
     methods: {
         // Clear (bootstrap) form validation state
         clearFormValidation(form) {
             $(form).find('.is-invalid').removeClass('is-invalid')
             $(form).find('.invalid-feedback').remove()
         },
         isController(wallet_id) {
             if (wallet_id && store.state.authInfo) {
                 let i
                 for (i = 0; i < store.state.authInfo.wallets.length; i++) {
                     if (wallet_id == store.state.authInfo.wallets[i].id) {
                         return true
                     }
                 }
                 for (i = 0; i < store.state.authInfo.accounts.length; i++) {
                     if (wallet_id == store.state.authInfo.accounts[i].id) {
                         return true
                     }
                 }
             }
 
             return false
         },
         // Set user state to "logged in"
         loginUser(token, dashboard) {
             store.commit('logoutUser') // destroy old state data
             store.commit('loginUser')
             localStorage.setItem('token', token)
             axios.defaults.headers.common.Authorization = 'Bearer ' + token
 
             if (dashboard !== false) {
                 this.$router.push(store.state.afterLogin || { name: 'dashboard' })
             }
 
             store.state.afterLogin = null
         },
         // Set user state to "not logged in"
         logoutUser() {
             store.commit('logoutUser')
             localStorage.setItem('token', '')
             delete axios.defaults.headers.common.Authorization
             this.$router.push({ name: 'login' })
         },
         // Display "loading" overlay (to be used by route components)
         startLoading() {
             this.isLoading = true
             // Lock the UI with the 'loading...' element
             let loading = $('#app > .app-loader').show()
             if (!loading.length) {
                 $('#app').append($('<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>'))
             }
         },
         // Hide "loading" overlay
         stopLoading() {
             $('#app > .app-loader').fadeOut()
             this.isLoading = false
         },
         errorPage(code, msg) {
             // Until https://github.com/vuejs/vue-router/issues/977 is implemented
             // we can't really use router to display error page as it has two side
             // effects: it changes the URL and adds the error page to browser history.
             // For now we'll be replacing current view with error page "manually".
             const map = {
                 400: "Bad request",
                 401: "Unauthorized",
                 403: "Access denied",
                 404: "Not found",
                 405: "Method not allowed",
                 500: "Internal server error"
             }
 
             if (!msg) msg = map[code] || "Unknown Error"
 
             const error_page = `<div id="error-page"><div class="code">${code}</div><div class="message">${msg}</div></div>`
 
             $('#app').children(':not(nav)').remove()
             $('#app').append(error_page)
         },
         errorHandler(error) {
             this.stopLoading()
 
             if (!error.response) {
                 // TODO: probably network connection error
             } else if (error.response.status === 401) {
                 this.logoutUser()
             } else {
                 this.errorPage(error.response.status, error.response.statusText)
             }
         },
         price(price) {
             return (price/100).toLocaleString('de-DE', { style: 'currency', currency: 'CHF' })
         },
+        priceLabel(cost, units = 1, discount) {
+            let index = ''
+
+            if (units < 0) {
+                units = 1
+            }
+
+            if (discount) {
+                cost = Math.floor(cost * ((100 - discount) / 100))
+                index = '\u00B9'
+            }
+
+            return this.price(cost * units) + '/month' + index
+        },
         domainStatusClass(domain) {
             if (domain.isDeleted) {
                 return 'text-muted'
             }
 
             if (domain.isSuspended) {
                 return 'text-warning'
             }
 
             if (!domain.isVerified || !domain.isLdapReady || !domain.isConfirmed) {
                 return 'text-danger'
             }
 
             return 'text-success'
         },
         domainStatusText(domain) {
             if (domain.isDeleted) {
                 return 'Deleted'
             }
 
             if (domain.isSuspended) {
                 return 'Suspended'
             }
 
             if (!domain.isVerified || !domain.isLdapReady || !domain.isConfirmed) {
                 return 'Not Ready'
             }
 
             return 'Active'
         },
         userStatusClass(user) {
             if (user.isDeleted) {
                 return 'text-muted'
             }
 
             if (user.isSuspended) {
                 return 'text-warning'
             }
 
             if (!user.isImapReady || !user.isLdapReady) {
                 return 'text-danger'
             }
 
             return 'text-success'
         },
         userStatusText(user) {
             if (user.isDeleted) {
                 return 'Deleted'
             }
 
             if (user.isSuspended) {
                 return 'Suspended'
             }
 
             if (!user.isImapReady || !user.isLdapReady) {
                 return 'Not Ready'
             }
 
             return 'Active'
         }
     }
 })
+
+// Add a axios response interceptor for general/validation error handler
+window.axios.interceptors.response.use(
+    response => {
+        // Do nothing
+        return response
+    },
+    error => {
+        let error_msg
+        let status = error.response ? error.response.status : 200
+
+        if (error.response && status == 422) {
+            error_msg = "Form validation error"
+
+            $.each(error.response.data.errors || {}, (idx, msg) => {
+                $('form').each((i, form) => {
+                    const input_name = ($(form).data('validation-prefix') || '') + idx
+                    const input = $('#' + input_name)
+
+                    if (input.length) {
+                        // Create an error message\
+                        // API responses can use a string, array or object
+                        let msg_text = ''
+                        if ($.type(msg) !== 'string') {
+                            $.each(msg, (index, str) => {
+                                msg_text += str + ' '
+                            })
+                        }
+                        else {
+                            msg_text = msg
+                        }
+
+                        let feedback = $('<div class="invalid-feedback">').text(msg_text)
+
+                        if (input.is('.list-input')) {
+                            // List input widget
+                            input.children(':not(:first-child)').each((index, element) => {
+                                if (msg[index]) {
+                                    $(element).find('input').addClass('is-invalid')
+                                }
+                            })
+
+                            input.addClass('is-invalid').next('.invalid-feedback').remove()
+                            input.after(feedback)
+                        }
+                        else {
+                            // Standard form element
+                            input.addClass('is-invalid')
+                            input.parent().find('.invalid-feedback').remove()
+                            input.parent().append(feedback)
+                        }
+
+                        return false
+                    }
+                });
+            })
+
+            $('form .is-invalid:not(.listinput-widget)').first().focus()
+        }
+        else if (error.response && error.response.data) {
+            error_msg = error.response.data.message
+        }
+        else {
+            error_msg = error.request ? error.request.statusText : error.message
+        }
+
+        app.$toastr('error', error_msg || "Server Error", 'Error')
+
+        // Pass the error as-is
+        return Promise.reject(error)
+    }
+)
diff --git a/src/resources/js/bootstrap.js b/src/resources/js/bootstrap.js
index a1b0631d..f5648f25 100644
--- a/src/resources/js/bootstrap.js
+++ b/src/resources/js/bootstrap.js
@@ -1,41 +1,89 @@
 window._ = require('lodash')
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
  * for JavaScript based Bootstrap features such as modals and tabs. This
  * code may be modified to fit the specific needs of your application.
  */
 
 try {
     window.Popper = require('popper.js').default
     window.$ = window.jQuery = require('jquery')
 
     require('bootstrap')
 } catch (e) {}
 
 /**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
+ * We'll load Vue, VueRouter and global components
  */
 
-window.axios = require('axios')
+import FontAwesomeIcon from './fontawesome'
+import VueRouter from 'vue-router'
+import VueToastr from '@deveodk/vue-toastr'
+import store from './store'
+
+window.Vue = require('vue')
+
+Vue.component('svg-icon', FontAwesomeIcon)
+
+Vue.use(VueToastr, {
+    defaultPosition: 'toast-bottom-right',
+    defaultTimeout: 5000
+})
+
+const vTooltip = (el, binding) => {
+    const t = []
+
+    if (binding.modifiers.focus) t.push('focus')
+    if (binding.modifiers.hover) t.push('hover')
+    if (binding.modifiers.click) t.push('click')
+    if (!t.length) t.push('hover')
+
+    $(el).tooltip({
+        title: binding.value,
+        placement: binding.arg || 'top',
+        trigger: t.join(' '),
+        html: !!binding.modifiers.html,
+    });
+}
+
+Vue.directive('tooltip', {
+    bind: vTooltip,
+    update: vTooltip,
+    unbind (el) {
+        $(el).tooltip('dispose')
+    }
+})
 
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
+
+Vue.use(VueRouter)
+
+window.router = new VueRouter({
+    mode: 'history',
+    routes: window.routes
+})
+
+router.beforeEach((to, from, next) => {
+    // check if the route requires authentication and user is not logged in
+    if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
+        // remember the original request, to use after login
+        store.state.afterLogin = to;
+
+        // redirect to login page
+        next({ name: 'login' })
+
+        return
+    }
+
+    next()
+})
 
 /**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-// import Echo from 'laravel-echo';
-
-// window.Pusher = require('pusher-js');
+window.axios = require('axios')
 
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     encrypted: true
-// });
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
diff --git a/src/resources/js/routes-admin.js b/src/resources/js/routes-admin.js
index 6ee3ce4b..27665db2 100644
--- a/src/resources/js/routes-admin.js
+++ b/src/resources/js/routes-admin.js
@@ -1,75 +1,48 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-Vue.use(VueRouter)
-
 import DashboardComponent from '../vue/Admin/Dashboard'
 import DomainComponent from '../vue/Admin/Domain'
 import Error404Component from '../vue/404'
 import LoginComponent from '../vue/Login'
 import LogoutComponent from '../vue/Logout'
 import UserComponent from '../vue/Admin/User'
 
-import store from './store'
-
 const routes = [
     {
         path: '/',
         redirect: { name: 'dashboard' }
     },
     {
         path: '/dashboard',
         name: 'dashboard',
         component: DashboardComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/domain/:domain',
         name: 'domain',
         component: DomainComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/login',
         name: 'login',
         component: LoginComponent
     },
     {
         path: '/logout',
         name: 'logout',
         component: LogoutComponent
     },
     {
         path: '/user/:user',
         name: 'user',
         component: UserComponent,
         meta: { requiresAuth: true }
     },
     {
         name: '404',
         path: '*',
         component: Error404Component
     }
 ]
 
-const router = new VueRouter({
-    mode: 'history',
-    routes
-})
-
-router.beforeEach((to, from, next) => {
-    // check if the route requires authentication and user is not logged in
-    if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
-        // remember the original request, to use after login
-        store.state.afterLogin = to;
-
-        // redirect to login page
-        next({ name: 'login' })
-
-        return
-    }
-
-    next()
-})
-
-export default router
+export default routes
diff --git a/src/resources/js/routes-user.js b/src/resources/js/routes-user.js
index a9935b11..1612aaac 100644
--- a/src/resources/js/routes-user.js
+++ b/src/resources/js/routes-user.js
@@ -1,123 +1,96 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-Vue.use(VueRouter)
-
 import DashboardComponent from '../vue/Dashboard'
 import DomainInfoComponent from '../vue/Domain/Info'
 import DomainListComponent from '../vue/Domain/List'
 import Error404Component from '../vue/404'
 import LoginComponent from '../vue/Login'
 import LogoutComponent from '../vue/Logout'
 import PasswordResetComponent from '../vue/PasswordReset'
 import SignupComponent from '../vue/Signup'
 import UserInfoComponent from '../vue/User/Info'
 import UserListComponent from '../vue/User/List'
 import UserProfileComponent from '../vue/User/Profile'
 import UserProfileDeleteComponent from '../vue/User/ProfileDelete'
 import WalletComponent from '../vue/Wallet'
 
-import store from './store'
-
 const routes = [
     {
         path: '/',
         redirect: { name: 'dashboard' }
     },
     {
         path: '/dashboard',
         name: 'dashboard',
         component: DashboardComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/domain/:domain',
         name: 'domain',
         component: DomainInfoComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/domains',
         name: 'domains',
         component: DomainListComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/login',
         name: 'login',
         component: LoginComponent
     },
     {
         path: '/logout',
         name: 'logout',
         component: LogoutComponent
     },
     {
         path: '/password-reset/:code?',
         name: 'password-reset',
         component: PasswordResetComponent
     },
     {
         path: '/profile',
         name: 'profile',
         component: UserProfileComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/profile/delete',
         name: 'profile-delete',
         component: UserProfileDeleteComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/signup/:param?',
         alias: '/signup/voucher/:param',
         name: 'signup',
         component: SignupComponent
     },
     {
         path: '/user/:user',
         name: 'user',
         component: UserInfoComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/users',
         name: 'users',
         component: UserListComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/wallet',
         name: 'wallet',
         component: WalletComponent,
         meta: { requiresAuth: true }
     },
     {
         name: '404',
         path: '*',
         component: Error404Component
     }
 ]
 
-const router = new VueRouter({
-    mode: 'history',
-    routes
-})
-
-router.beforeEach((to, from, next) => {
-    // check if the route requires authentication and user is not logged in
-    if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
-        // remember the original request, to use after login
-        store.state.afterLogin = to;
-
-        // redirect to login page
-        next({ name: 'login' })
-
-        return
-    }
-
-    next()
-})
-
-export default router
+export default routes
diff --git a/src/resources/js/user.js b/src/resources/js/user.js
index d99e318d..99bf191a 100644
--- a/src/resources/js/user.js
+++ b/src/resources/js/user.js
@@ -1,9 +1,10 @@
 /**
  * Application code for the user UI
  */
 
-import router from './routes-user'
+import routes from './routes-user.js'
 
-window.router = router
+window.routes = routes
+window.isAdmin = false
 
 require('./app')
diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
index 2a3ae14b..b6fd1423 100644
--- a/src/resources/vue/Admin/User.vue
+++ b/src/resources/vue/Admin/User.vue
@@ -1,418 +1,404 @@
 <template>
     <div class="container">
         <div class="card" id="user-info">
             <div class="card-body">
                 <div class="card-title">{{ user.email }}</div>
                 <div class="card-text">
                     <form>
                         <div v-if="user.wallet.user_id != user.id" class="form-group row mb-0">
                             <label for="manager" class="col-sm-4 col-form-label">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="form-group row mb-0">
                             <label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">(Created at)</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="form-group row mb-0">
                             <label for="status" class="col-sm-4 col-form-label">Status</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="status">
                                     <span :class="$root.userStatusClass(user)">{{ $root.userStatusText(user) }}</span>
                                 </span>
                             </div>
                         </div>
                         <div class="form-group row mb-0" v-if="user.first_name">
                             <label for="first_name" class="col-sm-4 col-form-label">First name</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span>
                             </div>
                         </div>
                         <div class="form-group row mb-0" v-if="user.last_name">
                             <label for="last_name" class="col-sm-4 col-form-label">Last name</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span>
                             </div>
                         </div>
                         <div class="form-group row mb-0" v-if="user.phone">
                             <label for="phone" class="col-sm-4 col-form-label">Phone</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="phone">{{ user.phone }}</span>
                             </div>
                         </div>
                         <div class="form-group row mb-0">
                             <label for="external_email" class="col-sm-4 col-form-label">External 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>
                                     <button type="button" class="btn btn-secondary btn-sm">Edit</button>
                                 </span>
                             </div>
                         </div>
                         <div class="form-group row mb-0" v-if="user.billing_address">
                             <label for="billing_address" class="col-sm-4 col-form-label">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="form-group row mb-0">
                             <label for="country" class="col-sm-4 col-form-label">Country</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="country">{{ user.country }}</span>
                             </div>
                         </div>
                     </form>
                 </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">
                     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">
                     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">
                     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">
                     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">
                     Users ({{ users.length }})
                 </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">
                     <div class="card-title">Account balance <span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span></div>
                     <div class="card-text">
                         <form>
                             <div class="form-group row mb-0">
                                 <label for="first_name" class="col-sm-2 col-form-label">Discount:</label>
                                 <div class="col-sm-10">
                                     <span class="form-control-plaintext" id="discount">
                                         <span>{{ wallet_discount ? (wallet_discount + '% - ' + wallet_discount_description) : 'none' }}</span>
                                         <button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">Edit</button>
                                     </span>
                                 </div>
                             </div>
                         </form>
                     </div>
                 </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">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Email address</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>This user has no email aliases.</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">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Subscription</th>
                                     <th scope="col">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>{{ sku.price }}</td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td colspan="2">This user has no subscriptions.</td>
                                 </tr>
                             </tfoot>
                         </table>
                         <small v-if="discount > 0" class="hint">
                             <hr class="m-0">
                             &sup1; applied discount: {{ discount }}% - {{ discount_description }}
                         </small>
                     </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">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Name</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id">
                                     <td>
                                         <svg-icon icon="globe" :class="$root.domainStatusClass(domain)" :title="$root.domainStatusText(domain)"></svg-icon>
                                         <router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>There are no domains in this account.</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">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Primary Email</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="item in users" :id="'user' + item.id" :key="item.id">
                                     <td>
                                         <svg-icon icon="user" :class="$root.userStatusClass(item)" :title="$root.userStatusText(item)"></svg-icon>
                                         <router-link :to="{ path: '/user/' + item.id }">{{ item.email }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>There are no users in this account.</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </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">Account discount</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p class="form-group">
                             <select v-model="wallet_discount_id" class="custom-select">
                                 <option value="">- none -</option>
                                 <option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option>
                             </select>
                         </p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary modal-action" @click="submitDiscount()">
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         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 {
                 balance: 0,
                 discount: 0,
                 discount_description: '',
                 discounts: [],
                 wallet_discount: 0,
                 wallet_discount_description: '',
                 wallet_discount_id: '',
                 domains: [],
                 skus: [],
                 users: [],
                 user: {
                     aliases: [],
                     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
 
                     let keys = ['first_name', 'last_name', 'external_email', 'billing_address', 'phone']
                     let country = this.user.settings.country
 
                     if (country) {
                         this.user.country = window.config.countries[country][1]
                     }
 
                     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
                     this.user.wallets.forEach(wallet => {
                         this.balance += wallet.balance
                     })
 
                     this.wallet_discount = this.user.wallets[0].discount
                     this.wallet_discount_id = this.user.wallets[0].discount_id || ''
                     this.wallet_discount_description = this.user.wallets[0].discount_description
 
                     // Create subscriptions list
                     axios.get('/api/v4/skus')
                         .then(response => {
                             // "merge" SKUs with user entitlement-SKUs
                             response.data.forEach(sku => {
                                 if (sku.id in this.user.skus) {
                                     let count = this.user.skus[sku.id].count
                                     let item = {
                                         id: sku.id,
                                         name: sku.name,
                                         cost: sku.cost,
                                         units: count - sku.units_free,
-                                        price: this.price(sku.cost, count - sku.units_free)
+                                        price: this.$root.priceLabel(sku.cost, count - sku.units_free, this.discount)
                                     }
 
                                     if (sku.range) {
                                         item.name += ' ' + count + ' ' + sku.range.unit
                                     }
 
                                     this.skus.push(item)
                                 }
                             })
                         })
 
                     // Fetch users
                     // TODO: Multiple wallets
                     axios.get('/api/v4/users?owner=' + user_id)
                         .then(response => {
                             this.users = response.data.list.filter(user => {
                                 return user.id != user_id;
                             })
                         })
 
                     // Fetch domains
                     axios.get('/api/v4/domains?owner=' + user_id)
                         .then(response => {
                             this.domains = response.data.list
                         })
                 })
                 .catch(this.$root.errorHandler)
         },
         mounted() {
             $(this.$el).find('ul.nav-tabs a').on('click', e => {
                 e.preventDefault()
                 $(e.target).tab('show')
             })
         },
         methods: {
             discountEdit() {
                 $('#discount-dialog')
                     .on('shown.bs.modal', (e, a) => {
                         $(e.target).find('select').focus()
                     })
                     .modal()
 
                 if (!this.discounts.length) {
                     // Fetch discounts
                     axios.get('/api/v4/discounts')
                         .then(response => {
                             this.discounts = response.data.list
                         })
                 }
             },
-            price(cost, units = 1) {
-                let index = ''
-
-                if (units < 0) {
-                    units = 1
-                }
-
-                if (this.discount) {
-                    cost = Math.floor(cost * ((100 - this.discount) / 100))
-                    index = '\u00B9'
-                }
-
-                return this.$root.price(cost * units) + '/month' + index
-            },
             submitDiscount() {
                 let dialog = $('#discount-dialog').modal('hide')
 
                 axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet_discount_id })
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toastr('success', response.data.message)
                             this.wallet_discount = response.data.discount
                             this.wallet_discount_id = response.data.discount_id || ''
                             this.wallet_discount_description = response.data.discount_description
 
                             // 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.price(sku.cost, sku.units)
+                                    sku.price = this.$root.priceLabel(sku.cost, sku.units, this.discount)
                                 })
                             }
                         }
                     })
             },
         }
     }
 </script>
diff --git a/src/resources/vue/Login.vue b/src/resources/vue/Login.vue
index 8e1cc965..00014a78 100644
--- a/src/resources/vue/Login.vue
+++ b/src/resources/vue/Login.vue
@@ -1,81 +1,80 @@
 <template>
     <div class="container d-flex flex-column align-items-center">
         <div class="card col-sm-8 col-lg-6">
             <div class="card-body">
                 <h1 class="card-title text-center mb-3">Please sign in</h1>
                 <div class="card-text">
                     <form class="form-signin" @submit.prevent="submitLogin">
                         <div class="form-group">
                             <label for="inputEmail" class="sr-only">Email address</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="user"></svg-icon></span>
                                 </span>
                                 <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus v-model="email">
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="inputPassword" class="sr-only">Password</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="lock"></svg-icon></span>
                                 </span>
                                 <input type="password" id="inputPassword" class="form-control" placeholder="Password" required v-model="password">
                             </div>
                         </div>
-                        <div class="form-group pt-3" v-if="!isAdmin">
+                        <div class="form-group pt-3" v-if="!$root.isAdmin">
                             <label for="secondfactor" class="sr-only">2FA</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="key"></svg-icon></span>
                                 </span>
                                 <input type="text" id="secondfactor" class="form-control rounded-right" placeholder="Second factor code" v-model="secondFactor">
                             </div>
                             <small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
                         </div>
                         <div class="text-center">
                             <button class="btn btn-primary" type="submit">
                                 <svg-icon icon="sign-in-alt"></svg-icon> Sign in
                             </button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
         <div class="mt-1">
-            <router-link v-if="!isAdmin" :to="{ name: 'password-reset' }" id="forgot-password">Forgot password?</router-link>
+            <router-link v-if="!$root.isAdmin" :to="{ name: 'password-reset' }" id="forgot-password">Forgot password?</router-link>
         </div>
     </div>
 </template>
 
 
 <script>
     export default {
         data() {
             return {
                 email: '',
                 password: '',
                 secondFactor: '',
-                isAdmin: window.config.isAdmin,
                 loginError: false
             }
         },
         methods: {
             submitLogin() {
                 this.loginError = false
                 this.$root.clearFormValidation($('form.form-signin'))
 
                 axios.post('/api/auth/login', {
                     email: this.email,
                     password: this.password,
                     secondfactor: this.secondFactor
                 }).then(response => {
                     // login user and redirect to dashboard
                     this.$root.loginUser(response.data.access_token)
                 }).catch(error => {
                     this.loginError = true
                 });
             }
         }
     }
 </script>
diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
index fe807cf9..4692117c 100644
--- a/src/resources/vue/User/Info.vue
+++ b/src/resources/vue/User/Info.vue
@@ -1,360 +1,350 @@
 <template>
     <div class="container">
         <div class="card" id="user-info">
             <div class="card-body">
                 <div class="card-title" v-if="user_id !== 'new'">User account</div>
                 <div class="card-title" v-if="user_id === 'new'">New user account</div>
                 <div class="card-text">
                     <form @submit.prevent="submit">
                         <div v-if="user_id !== 'new'" class="form-group row">
                             <label for="first_name" class="col-sm-4 col-form-label">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="form-group row">
                             <label for="first_name" class="col-sm-4 col-form-label">First name</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="first_name" v-model="user.first_name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="last_name" class="col-sm-4 col-form-label">Last name</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="last_name" v-model="user.last_name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="email" class="col-sm-4 col-form-label">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="form-group row">
                             <label for="aliases-input" class="col-sm-4 col-form-label">Email aliases</label>
                             <div class="col-sm-8">
                                 <list-input id="aliases" :list="user.aliases"></list-input>
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="password" class="col-sm-4 col-form-label">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="form-group row">
                             <label for="password_confirmaton" class="col-sm-4 col-form-label">Confirm password</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="form-group row">
                             <label class="col-sm-4 col-form-label">Package</label>
                             <div class="col-sm-8">
                                 <table class="table form-list">
                                     <thead class="thead-light sr-only">
                                         <tr>
                                             <th scope="col"></th>
                                             <th scope="col">Package</th>
                                             <th scope="col">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" :value="pkg.id" @click="selectPackage" :checked="pkg.id == package_id">
                                             </td>
                                             <td class="name">
                                                 {{ pkg.name }}
                                             </td>
                                             <td class="price text-nowrap">
-                                                {{ price(pkg.cost) }}
+                                                {{ $root.priceLabel(pkg.cost, 1, discount) }}
                                             </td>
                                             <td class="buttons">
                                                 <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="pkg.description">
                                                     <svg-icon icon="info-circle"></svg-icon>
                                                     <span class="sr-only">More information</span>
                                                 </button>
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
                                 <small v-if="discount > 0" class="hint">
                                     <hr class="m-0">
                                     &sup1; applied discount: {{ discount }}% - {{ discount_description }}
                                 </small>
                             </div>
                         </div>
                         <div v-if="user_id !== 'new'" id="user-skus" class="form-group row">
                             <label class="col-sm-4 col-form-label">Subscriptions</label>
                             <div class="col-sm-8">
                                 <table class="table form-list">
                                     <thead class="thead-light sr-only">
                                         <tr>
                                             <th scope="col"></th>
                                             <th scope="col">Subscription</th>
                                             <th scope="col">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"
                                                        :dusk="'sku-input-' + sku.title"
                                                 >
                                             </td>
                                             <td class="name">
                                                 <span class="name">{{ sku.name }}</span>
                                                 <div v-if="sku.range" class="range-input">
                                                     <label class="text-nowrap">{{ sku.range.min }} {{ sku.range.unit }}</label>
                                                     <input
                                                         type="range" class="custom-range" @input="rangeUpdate"
                                                         :value="sku.value || sku.range.min"
                                                         :min="sku.range.min"
                                                         :max="sku.range.max"
                                                     >
                                                 </div>
                                             </td>
                                             <td class="price text-nowrap">
-                                                {{ price(sku.cost) }}
+                                                {{ $root.priceLabel(sku.cost, 1, discount) }}
                                             </td>
                                             <td class="buttons">
                                                 <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="sku.description">
                                                     <svg-icon icon="info-circle"></svg-icon>
                                                     <span class="sr-only">More information</span>
                                                 </button>
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
                                 <small v-if="discount > 0" class="hint">
                                     <hr class="m-0">
                                     &sup1; applied discount: {{ discount }}% - {{ discount_description }}
                                 </small>
                             </div>
                         </div>
                         <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
                     </form>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import ListInput from '../Widgets/ListInput'
 
     export default {
         components: {
             ListInput,
         },
         data() {
             return {
                 discount: 0,
                 discount_description: '',
                 user_id: null,
                 user: { aliases: [] },
                 packages: [],
                 package_id: null,
                 skus: []
             }
         },
         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
             }
 
             if (this.user_id === 'new') {
                 // do nothing (for now)
                 axios.get('/api/v4/packages')
                     .then(response => {
                         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.user = response.data
                         this.user.first_name = response.data.settings.first_name
                         this.user.last_name = response.data.settings.last_name
                         this.discount = this.user.wallet.discount
                         this.discount_description = this.user.wallet.discount_description
 
                         axios.get('/api/v4/skus')
                             .then(response => {
                                 // "merge" SKUs with user entitlement-SKUs
                                 this.skus = response.data
                                     .filter(sku => sku.type == 'user')
                                     .map(sku => {
                                         if (sku.id in this.user.skus) {
                                             sku.enabled = true
                                             sku.value = this.user.skus[sku.id].count
                                         } 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()
         },
         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.status == 'success') {
                             this.$toastr('success', response.data.message)
                         }
 
                         // on new user redirect to users list
                         if (this.user_id === 'new') {
                             this.$router.push({ name: 'users' })
                         }
                     })
             },
             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(sku.name + ' requires ' + 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 cost = sku.cost
 
                 // Update the label
                 input.prev().text(value + ' ' + sku.range.unit)
 
                 // Update the price
-                record.find('.price').text(this.price(cost, value - sku.units_free))
+                record.find('.price').text(this.$root.priceLabel(cost, value - sku.units_free, this.discount))
             },
             findSku(id) {
                 for (let i = 0; i < this.skus.length; i++) {
                     if (this.skus[i].id == id) {
                         return this.skus[i];
                     }
                 }
             },
-            price(cost, units = 1) {
-                let index = ''
-
-                if (this.discount) {
-                    cost = Math.floor(cost * ((100 - this.discount) / 100))
-                    index = '\u00B9'
-                }
-
-                return this.$root.price(cost * units) + '/month' + index
-            }
         }
     }
 </script>