diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index cd6e4b94..b27fdb0c 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -1,525 +1,525 @@
 /**
  * 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/Widgets/Menu'
 import SupportForm from '../vue/Widgets/SupportForm'
 import store from './store'
 import { Tab } from 'bootstrap'
 import { loadLangAsync, i18n } from './locale'
 
 const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="visually-hidden">Loading</span></div></div>'
 
 let isLoading = 0
 
 // Lock the UI with the 'loading...' element
 const startLoading = () => {
     isLoading++
     let loading = $('#app > .app-loader').removeClass('fadeOut')
     if (!loading.length) {
         $('#app').append($(loader))
     }
 }
 
 // Hide "loading" overlay
 const stopLoading = () => {
     if (isLoading > 0) {
         $('#app > .app-loader').addClass('fadeOut')
         isLoading--;
     }
 }
 
 let loadingRoute
 
 // Note: This has to be before the app is created
 // Note: You cannot use app inside of the function
 window.router.beforeEach((to, from, next) => {
     // check if the route requires authentication and user is not logged in
     if (to.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
     }
 
     if (to.meta.loading) {
         startLoading()
         loadingRoute = to.name
     }
 
     next()
 })
 
 window.router.afterEach((to, from) => {
     if (to.name && loadingRoute === to.name) {
         stopLoading()
         loadingRoute = null
     }
 
     // When changing a page remove old:
     // - error page
     // - modal backdrop
     $('#error-page,.modal-backdrop.show').remove()
     $('body').css('padding', 0) // remove padding added by unclosed modal
 })
 
 const app = new Vue({
     components: {
         AppComponent,
         MenuComponent,
     },
     i18n,
     store,
     router: window.router,
     data() {
         return {
             isUser: !window.isAdmin && !window.isReseller,
             appName: window.config['app.name'],
             appUrl: window.config['app.url'],
             themeDir: '/themes/' + window.config['app.theme']
         }
     },
     methods: {
         // Clear (bootstrap) form validation state
         clearFormValidation(form) {
             $(form).find('.is-invalid').removeClass('is-invalid')
             $(form).find('.invalid-feedback').remove()
         },
         hasPermission(type) {
             const authInfo = store.state.authInfo
             const key = 'enable' + type.charAt(0).toUpperCase() + type.slice(1)
             return !!(authInfo && authInfo.statusInfo[key])
         },
         hasRoute(name) {
             return this.$router.resolve({ name: name }).resolved.matched.length > 0
         },
         hasSKU(name) {
             const authInfo = store.state.authInfo
             return authInfo.statusInfo.skus && authInfo.statusInfo.skus.indexOf(name) != -1
         },
         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(response, dashboard, update) {
             if (!update) {
                 store.commit('logoutUser') // destroy old state data
                 store.commit('loginUser')
             }
 
             localStorage.setItem('token', response.access_token)
             localStorage.setItem('refreshToken', response.refresh_token)
             axios.defaults.headers.common.Authorization = 'Bearer ' + response.access_token
 
             if (response.email) {
                 store.state.authInfo = response
             }
 
             if (dashboard !== false) {
                 this.$router.push(store.state.afterLogin || { name: 'dashboard' })
             }
 
             store.state.afterLogin = null
 
             // Refresh the token before it expires
             let timeout = response.expires_in || 0
 
             // We'll refresh 60 seconds before the token expires
             if (timeout > 60) {
                 timeout -= 60
             }
 
             // TODO: We probably should try a few times in case of an error
             // TODO: We probably should prevent axios from doing any requests
             //       while the token is being refreshed
 
             this.refreshTimeout = setTimeout(() => {
                 axios.post('/api/auth/refresh', {'refresh_token': response.refresh_token}).then(response => {
                     this.loginUser(response.data, false, true)
                 })
             }, timeout * 1000)
         },
         // Set user state to "not logged in"
         logoutUser(redirect) {
             store.commit('logoutUser')
             localStorage.setItem('token', '')
             localStorage.setItem('refreshToken', '')
             delete axios.defaults.headers.common.Authorization
 
             if (redirect !== false) {
                 this.$router.push({ name: 'login' })
             }
 
             clearTimeout(this.refreshTimeout)
         },
         logo(mode) {
             let src = this.appUrl + this.themeDir + '/images/logo_' + (mode || 'header') + '.png'
 
             return `<img src="${src}" alt="${this.appName}">`
         },
         // Display "loading" overlay inside of the specified element
         addLoader(elem, small = true, style = null) {
             if (style) {
                 $(elem).css(style)
             } else {
                 $(elem).css('position', 'relative')
             }
 
             $(elem).append(small ? $(loader).addClass('small') : $(loader))
         },
         // Remove loader element added in addLoader()
         removeLoader(elem) {
             $(elem).find('.app-loader').remove()
         },
         startLoading,
         stopLoading,
         isLoading() {
             return isLoading > 0
         },
         tab(e) {
             e.preventDefault()
             new Tab(e.target).show()
         },
         errorPage(code, msg, hint) {
             // 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".
 
             if (!msg) msg = this.$te('error.' + code) ? this.$t('error.' + code) : this.$t('error.unknown')
             if (!hint) hint = ''
 
             const error_page = '<div id="error-page" class="error-page">'
                 + `<div class="code">${code}</div><div class="message">${msg}</div><div class="hint">${hint}</div>`
                 + '</div>'
 
             $('#error-page').remove()
             $('#app').append(error_page)
 
             app.updateBodyClass('error')
         },
         errorHandler(error) {
             this.stopLoading()
 
             if (!error.response) {
                 // TODO: probably network connection error
             } else if (error.response.status === 401) {
                 // Remember requested route to come back to it after log in
                 if (this.$route.meta.requiresAuth) {
                     store.state.afterLogin = this.$route
                     this.logoutUser()
                 } else {
                     this.logoutUser(false)
                 }
             } else {
                 this.errorPage(error.response.status, error.response.statusText)
             }
         },
         downloadFile(url) {
             // TODO: This might not be a best way for big files as the content
             //       will be stored (temporarily) in browser memory
             // TODO: This method does not show the download progress in the browser
             //       but it could be implemented in the UI, axios has 'progress' property
             axios.get(url, { responseType: 'blob' })
                 .then(response => {
                     const link = document.createElement('a')
                     const contentDisposition = response.headers['content-disposition']
                     let filename = 'unknown'
 
                     if (contentDisposition) {
                         const match = contentDisposition.match(/filename="(.+)"/);
                         if (match.length === 2) {
                             filename = match[1];
                         }
                     }
 
                     link.href = window.URL.createObjectURL(response.data)
                     link.download = filename
                     link.click()
                 })
         },
         price(price, currency) {
             // TODO: Set locale argument according to the currently used locale
             return ((price || 0) / 100).toLocaleString('de-DE', { style: 'currency', currency: currency || 'CHF' })
         },
-        priceLabel(cost, discount) {
+        priceLabel(cost, discount, currency) {
             let index = ''
 
             if (discount) {
                 cost = Math.floor(cost * ((100 - discount) / 100))
                 index = '\u00B9'
             }
 
-            return this.price(cost) + '/' + this.$t('wallet.month') + index
+            return this.price(cost, currency) + '/' + this.$t('wallet.month') + index
         },
         clickRecord(event) {
             if (!/^(a|button|svg|path)$/i.test(event.target.nodeName)) {
                 $(event.target).closest('tr').find('a').trigger('click')
             }
         },
         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 this.$t('status.deleted')
             }
 
             if (domain.isSuspended) {
                 return this.$t('status.suspended')
             }
 
             if (!domain.isVerified || !domain.isLdapReady || !domain.isConfirmed) {
                 return this.$t('status.notready')
             }
 
             return this.$t('status.active')
         },
         distlistStatusClass(list) {
             if (list.isDeleted) {
                 return 'text-muted'
             }
 
             if (list.isSuspended) {
                 return 'text-warning'
             }
 
             if (!list.isLdapReady) {
                 return 'text-danger'
             }
 
             return 'text-success'
         },
         distlistStatusText(list) {
             if (list.isDeleted) {
                 return this.$t('status.deleted')
             }
 
             if (list.isSuspended) {
                 return this.$t('status.suspended')
             }
 
             if (!list.isLdapReady) {
                 return this.$t('status.notready')
             }
 
             return this.$t('status.active')
         },
         pageName(path) {
             let page = this.$route.path
 
             // check if it is a "menu page", find the page name
             // otherwise we'll use the real path as page name
             window.config.menu.every(item => {
                 if (item.location == page && item.page) {
                     page = item.page
                     return false
                 }
             })
 
             page = page.replace(/^\//, '')
 
             return page ? page : '404'
         },
         supportDialog(container) {
             let dialog = $('#support-dialog')[0]
 
             if (!dialog) {
                 // FIXME: Find a nicer way of doing this
                 SupportForm.i18n = i18n
                 let form = new Vue(SupportForm)
                 form.$mount($('<div>').appendTo(container)[0])
                 form.$root = this
                 form.$toast = this.$toast
                 dialog = form.$el
             }
 
             dialog.__vue__.showDialog()
         },
         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 this.$t('status.deleted')
             }
 
             if (user.isSuspended) {
                 return this.$t('status.suspended')
             }
 
             if (!user.isImapReady || !user.isLdapReady) {
                 return this.$t('status.notready')
             }
 
             return this.$t('status.active')
         },
         updateBodyClass(name) {
             // Add 'class' attribute to the body, different for each page
             // so, we can apply page-specific styles
             document.body.className = 'page-' + (name || this.pageName()).replace(/\/.*$/, '')
         }
     }
 })
 
 // Fetch the locale file and the start the app
 loadLangAsync().then(() => app.$mount('#app'))
 
 // Add a axios request interceptor
 window.axios.interceptors.request.use(
     config => {
         // This is the only way I found to change configuration options
         // on a running application. We need this for browser testing.
         config.headers['X-Test-Payment-Provider'] = window.config.paymentProvider
 
         return config
     },
     error => {
         // Do something with request error
         return Promise.reject(error)
     }
 )
 
 // Add a axios response interceptor for general/validation error handler
 window.axios.interceptors.response.use(
     response => {
         if (response.config.onFinish) {
             response.config.onFinish()
         }
 
         return response
     },
     error => {
         let error_msg
         let status = error.response ? error.response.status : 200
 
         // Do not display the error in a toast message, pass the error as-is
         if (error.config.ignoreErrors) {
             return Promise.reject(error)
         }
 
         if (error.config.onFinish) {
             error.config.onFinish()
         }
 
         if (error.response && status == 422) {
             error_msg = "Form validation error"
 
             const modal = $('div.modal.show')
 
             $(modal.length ? modal : 'form').each((i, form) => {
                 form = $(form)
 
                 $.each(error.response.data.errors || {}, (idx, msg) => {
                     const input_name = (form.data('validation-prefix') || form.find('form').first().data('validation-prefix') || '') + idx
                     let input = form.find('#' + input_name)
 
                     if (!input.length) {
                         input = form.find('[name="' + input_name + '"]');
                     }
 
                     if (input.length) {
                         // Create an error message
                         // API responses can use a string, array or object
                         let msg_text = ''
                         if (typeof(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
                             let controls = input.children(':not(:first-child)')
 
                             if (!controls.length && typeof msg == 'string') {
                                 // this is an empty list (the main input only)
                                 // and the error message is not an array
                                 input.find('.main-input').addClass('is-invalid')
                             } else {
                                 controls.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)
                         }
                     }
                 })
 
                 form.find('.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.$toast.error(error_msg || app.$t('error.server'))
 
         // Pass the error as-is
         return Promise.reject(error)
     }
 )
diff --git a/src/resources/js/meet/app.js b/src/resources/js/meet/app.js
index 1ce44d8b..91741595 100644
--- a/src/resources/js/meet/app.js
+++ b/src/resources/js/meet/app.js
@@ -1,1726 +1,1726 @@
 import anchorme from 'anchorme'
 import { Dropdown } from 'bootstrap'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { OpenVidu } from 'openvidu-browser'
 
 class Roles {
     static get SUBSCRIBER() { return 1 << 0; }
     static get PUBLISHER() { return 1 << 1; }
     static get MODERATOR() { return 1 << 2; }
     static get SCREEN() { return 1 << 3; }
     static get OWNER() { return 1 << 4; }
 }
 
 // Disable jsnlog's error handlers added in OpenVidu 2.18
 // https://github.com/OpenVidu/openvidu/issues/631
 window.onerror = () => { return false }
 window.onunhandledrejection = () => { return false }
 
 function Meet(container)
 {
     let OV                      // OpenVidu object to initialize a session
     let session                 // Session object where the user will connect
     let publisher               // Publisher object which the user will publish
     let audioActive = false     // True if the audio track of the publisher is active
     let videoActive = false     // True if the video track of the publisher is active
     let audioSource = ''        // Currently selected microphone
     let videoSource = ''        // Currently selected camera
     let sessionData             // Room session metadata
 
     let screenOV                // OpenVidu object to initialize a screen sharing session
     let screenSession           // Session object where the user will connect for screen sharing
     let screenPublisher         // Publisher object which the user will publish the screen sharing
 
     let publisherDefaults = {
         publishAudio: true,     // Whether to start publishing with your audio unmuted or not
         publishVideo: true,     // Whether to start publishing with your video enabled or not
         resolution: '640x480',  // The resolution of your video
         frameRate: 30,          // The frame rate of your video
         mirror: true            // Whether to mirror your local video or not
     }
 
     let cameras = []            // List of user video devices
     let microphones = []        // List of user audio devices
     let connections = {}        // Connected users in the session
 
     let chatCount = 0
     let volumeElement
     let publishersContainer
     let subscribersContainer
     let scrollStop
     let $t
 
     OV = ovInit()
 
     // Disconnect participant when browser's window close
     window.addEventListener('beforeunload', () => {
         leaveRoom()
     })
 
     window.addEventListener('resize', resize)
 
     // Public methods
     this.isScreenSharingSupported = isScreenSharingSupported
     this.joinRoom = joinRoom
     this.leaveRoom = leaveRoom
     this.setupStart = setupStart
     this.setupStop = setupStop
     this.setupSetAudioDevice = setupSetAudioDevice
     this.setupSetVideoDevice = setupSetVideoDevice
     this.switchAudio = switchAudio
     this.switchChannel = switchChannel
     this.switchScreen = switchScreen
     this.switchVideo = switchVideo
     this.updateSession = updateSession
 
     /**
      * Initialize OpenVidu instance
      */
     function ovInit()
     {
         let ov = new OpenVidu()
 
         // If there's anything to do, do it here.
         //ov.setAdvancedConfiguration(config)
 
         // Disable all logging except errors
         // ov.enableProdMode()
 
         return ov
     }
 
     /**
      * Join the room session
      *
      * @param data Session metadata and event handlers:
      *      token       - OpenVidu token for the main connection,
      *      shareToken  - OpenVidu token for screen-sharing connection,
      *      nickname    - Participant name,
      *      role        - connection (participant) role(s),
      *      connections - Optional metadata for other users connections (current state),
      *      channel     - Selected interpreted language channel (two-letter language code)
      *      languages   - Supported languages (code-to-label map)
      *      chatElement - DOM element for the chat widget,
      *      counterElement - DOM element for the participants counter,
      *      menuElement - DOM element of the room toolbar,
      *      queueElement - DOM element for the Q&A queue (users with a raised hand)
      *      onSuccess           - Callback for session connection (join) success
      *      onError             - Callback for session connection (join) error
      *      onDestroy           - Callback for session disconnection event,
      *      onDismiss           - Callback for Dismiss action,
      *      onJoinRequest       - Callback for join request,
      *      onConnectionChange  - Callback for participant changes, e.g. role update,
      *      onSessionDataUpdate - Callback for current user connection update,
      *      onMediaSetup        - Called when user clicks the Media setup button
      *      translate           - Translation function
      */
     function joinRoom(data) {
         // Create a container for subscribers and publishers
         publishersContainer = $('<div id="meet-publishers">').appendTo(container).get(0)
         subscribersContainer = $('<div id="meet-subscribers">').appendTo(container).get(0)
 
         resize();
         volumeMeterStop()
 
         data.params = {
             nickname: data.nickname, // user nickname
             // avatar: undefined        // avatar image
         }
 
         $t = data.translate
 
         // Make sure all supported callbacks exist, so we don't have to check
         // their existence everywhere anymore
         let events = ['Success', 'Error', 'Destroy', 'Dismiss', 'JoinRequest', 'ConnectionChange',
             'SessionDataUpdate', 'MediaSetup']
 
         events.map(event => 'on' + event).forEach(event => {
             if (!data[event]) {
                 data[event] = () => {}
             }
         })
 
         sessionData = data
 
         // Init a session
         session = OV.initSession()
 
         // Handle connection creation events
         session.on('connectionCreated', event => {
             // Ignore the current user connection
             if (event.connection.role) {
                 return
             }
 
             // This is the first event executed when a user joins in.
             // We'll create the video wrapper here, which can be re-used
             // in 'streamCreated' event handler.
 
             let metadata = connectionData(event.connection)
             const connId = metadata.connectionId
 
             // The connection metadata here is the initial metadata set on
             // connection initialization. There's no way to update it via OpenVidu API.
             // So, we merge the initial connection metadata with up-to-dated one that
             // we got from our database.
             if (sessionData.connections && connId in sessionData.connections) {
                 Object.assign(metadata, sessionData.connections[connId])
             }
 
             metadata.element = participantCreate(metadata)
 
             connections[connId] = metadata
         })
 
         session.on('connectionDestroyed', event => {
             let connectionId = event.connection.connectionId
             let conn = connections[connectionId]
 
             if (conn) {
                 // Remove elements related to the participant
                 connectionHandDown(connectionId)
                 $(conn.element).remove()
                 delete connections[connectionId]
             }
 
             resize()
         })
 
         // On every new Stream received...
         session.on('streamCreated', event => {
             let connectionId = event.stream.connection.connectionId
             let metadata = connections[connectionId]
             let props = {
                 // Prepend the video element so it is always before the watermark element
                 insertMode: 'PREPEND'
             }
 
             // Subscribe to the Stream to receive it
             let subscriber = session.subscribe(event.stream, metadata.element, props);
 
             Object.assign(metadata, {
                 audioActive: event.stream.audioActive,
                 videoActive: event.stream.videoActive,
                 videoDimensions: event.stream.videoDimensions
             })
 
             subscriber.on('videoElementCreated', event => {
                 $(event.element).prop({
                     tabindex: -1
                 })
 
                 resize()
             })
 
             // Update the wrapper controls/status
             participantUpdate(metadata.element, metadata)
 
             // Send the current user status to the connecting user
             // otherwise e.g. nickname might be not up to date
             signalUserUpdate(event.stream.connection)
         })
 
         // Stream properties changes e.g. audio/video muted/unmuted
         session.on('streamPropertyChanged', event => {
             let connectionId = event.stream.connection.connectionId
             let metadata = connections[connectionId]
 
             if (session.connection.connectionId == connectionId) {
                 metadata = sessionData
                 metadata.audioActive = audioActive
                 metadata.videoActive = videoActive
             }
 
             if (metadata) {
                 metadata[event.changedProperty] = event.newValue
 
                 if (event.changedProperty == 'videoDimensions') {
                     resize()
                 } else {
                     participantUpdate(metadata.element, metadata)
                 }
             }
         })
 
         // Handle session disconnection events
         session.on('sessionDisconnected', event => {
             data.onDestroy(event)
             session = null
             resize()
         })
 
         // Handle signals from all participants
         session.on('signal', signalEventHandler)
 
         // Connect with the token
         session.connect(data.token, data.params)
             .then(() => {
                 data.onSuccess()
 
                 let params = {
                     connectionId: session.connection.connectionId,
                     role: data.role,
                     audioActive,
                     videoActive
                 }
 
                 params = Object.assign({}, data.params, params)
 
                 publisher.on('videoElementCreated', event => {
                     $(event.element).prop({
                             muted: true, // Mute local video to avoid feedback
                             disablePictureInPicture: true, // this does not work in Firefox
                             tabindex: -1
                     })
                     resize()
                 })
 
                 let wrapper = participantCreate(params)
 
                 if (data.role & Roles.PUBLISHER) {
                     publisher.createVideoElement(wrapper, 'PREPEND')
                     session.publish(publisher)
                 }
 
                 sessionData.element = wrapper
 
                 // Create Q&A queue from the existing connections with rised hand.
                 // Here we expect connections in a proper queue order
                 Object.keys(data.connections || {}).forEach(key => {
                     let conn = data.connections[key]
 
                     if (conn.hand) {
                         conn.connectionId = key
                         connectionHandUp(conn)
                     }
                 })
 
                 sessionData.channels = getChannels(data.connections)
 
                 // Inform the vue component, so it can update some UI controls
                 if (sessionData.channels.length) {
                     sessionData.onSessionDataUpdate(sessionData)
                 }
             })
             .catch(error => {
                 console.error('There was an error connecting to the session: ', error.message);
                 data.onError(error)
             })
 
         // Prepare the chat
         setupChat()
     }
 
     /**
      * Leave the room (disconnect)
      */
     function leaveRoom() {
         if (publisher) {
             volumeMeterStop()
 
             // Release any media
             let mediaStream = publisher.stream.getMediaStream()
             if (mediaStream) {
                 mediaStream.getTracks().forEach(track => track.stop())
             }
 
             publisher = null
         }
 
         if (session) {
             session.disconnect();
             session = null
         }
 
         if (screenSession) {
             screenSession.disconnect();
             screenSession = null
         }
     }
 
     /**
      * Sets the audio and video devices for the session.
      * This will ask user for permission to access media devices.
      *
      * @param props Setup properties (videoElement, volumeElement, onSuccess, onError)
      */
     function setupStart(props) {
         // Note: After changing media permissions in Chrome/Firefox a page refresh is required.
         // That means that in a scenario where you first blocked access to media devices
         // and then allowed it we can't ask for devices list again and expect a different
         // result than before.
         // That's why we do not bother, and return ealy when we open the media setup dialog.
         if (publisher) {
             volumeMeterStart()
             return
         }
 
         publisher = OV.initPublisher(undefined, publisherDefaults)
 
         publisher.once('accessDenied', error => {
             props.onError(error)
         })
 
         publisher.once('accessAllowed', async () => {
             let mediaStream = publisher.stream.getMediaStream()
             let videoStream = mediaStream.getVideoTracks()[0]
             let audioStream = mediaStream.getAudioTracks()[0]
 
             audioActive = !!audioStream
             videoActive = !!videoStream
             volumeElement = props.volumeElement
 
             publisher.addVideoElement(props.videoElement)
 
             volumeMeterStart()
 
             const devices = await OV.getDevices()
 
             devices.forEach(device => {
                 // device's props: deviceId, kind, label
                 if (device.kind == 'videoinput') {
                     cameras.push(device)
                     if (videoStream && videoStream.label == device.label) {
                         videoSource = device.deviceId
                     }
                 } else if (device.kind == 'audioinput') {
                     microphones.push(device)
                     if (audioStream && audioStream.label == device.label) {
                         audioSource = device.deviceId
                     }
                 }
             })
 
             props.onSuccess({
                 microphones,
                 cameras,
                 audioSource,
                 videoSource,
                 audioActive,
                 videoActive
             })
         })
     }
 
     /**
      * Stop the setup "process", cleanup after it.
      */
     function setupStop() {
         volumeMeterStop()
     }
 
     /**
      * Change the publisher audio device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetAudioDevice(deviceId) {
         if (!deviceId) {
             publisher.publishAudio(false)
             volumeMeterStop()
             audioActive = false
         } else if (deviceId == audioSource) {
             publisher.publishAudio(true)
             volumeMeterStart()
             audioActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const properties = Object.assign({}, publisherDefaults, {
                 publishAudio: true,
                 publishVideo: videoActive,
                 audioSource: deviceId,
                 videoSource: videoSource
             })
 
             volumeMeterStop()
 
             // Stop and remove the old track, otherwise you get "Concurrent mic process limit." error
             mediaStream.getAudioTracks().forEach(track => {
                 track.stop()
                 mediaStream.removeTrack(track)
             })
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
                     await replaceTrack(newMediaStream.getAudioTracks()[0])
                     volumeMeterStart()
                     audioActive = true
                     audioSource = deviceId
                 })
         }
 
         return audioActive
     }
 
     /**
      * Change the publisher video device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetVideoDevice(deviceId) {
         if (!deviceId) {
             publisher.publishVideo(false)
             videoActive = false
         } else if (deviceId == videoSource) {
             publisher.publishVideo(true)
             videoActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const properties = Object.assign({}, publisherDefaults, {
                 publishAudio: audioActive,
                 publishVideo: true,
                 audioSource: audioSource,
                 videoSource: deviceId
             })
 
             volumeMeterStop()
 
             // Stop and remove the old track, otherwise you get "Concurrent mic process limit." error
             mediaStream.getVideoTracks().forEach(track => {
                 track.stop()
                 mediaStream.removeTrack(track)
             })
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
                     await replaceTrack(newMediaStream.getVideoTracks()[0])
                     volumeMeterStart()
                     videoActive = true
                     videoSource = deviceId
                 })
         }
 
         return videoActive
     }
 
     /**
      * A way to switch tracks in a stream.
      * Note: This is close to what publisher.replaceTrack() does but it does not
      * require the session.
      * Note: The old track needs to be removed before OV.getUserMedia() call,
      * otherwise we get "Concurrent mic process limit" error.
      */
     function replaceTrack(track) {
         const stream = publisher.stream
 
         const replaceMediaStreamTrack = () => {
             stream.mediaStream.addTrack(track);
 
             if (session) {
                 session.sendVideoData(publisher.stream.streamManager, 5, true, 5);
             }
         }
 
         // Fix a bug in Chrome where you would start hearing yourself after audio device change
         // https://github.com/OpenVidu/openvidu/issues/449
         publisher.videoReference.muted = true
 
         return new Promise((resolve, reject) => {
             if (stream.isLocalStreamPublished) {
                 // Only if the Publisher has been published it is necessary to call the native
                 // Web API RTCRtpSender.replaceTrack()
                 const senders = stream.getRTCPeerConnection().getSenders()
                 let sender
 
                 if (track.kind === 'video') {
                     sender = senders.find(s => !!s.track && s.track.kind === 'video')
                 } else {
                     sender = senders.find(s => !!s.track && s.track.kind === 'audio')
                 }
 
                 if (!sender) return
 
                 sender.replaceTrack(track).then(() => {
                     replaceMediaStreamTrack()
                     resolve()
                 }).catch(error => {
                     reject(error)
                 })
             } else {
                 // Publisher not published. Simply modify local MediaStream tracks
                 replaceMediaStreamTrack()
                 resolve()
             }
         })
     }
 
     /**
      * Setup the chat UI
      */
     function setupChat() {
         // The UI elements are created in the vue template
         // Here we add a logic for how they work
 
         const chat = $(sessionData.chatElement).find('.chat').get(0)
         const textarea = $(sessionData.chatElement).find('textarea')
         const button = $(sessionData.menuElement).find('.link-chat')
 
         textarea.on('keydown', e => {
             if (e.keyCode == 13 && !e.shiftKey) {
                 if (textarea.val().length) {
                     signalChat(textarea.val())
                     textarea.val('')
                 }
 
                 return false
             }
         })
 
         // Add an element for the count of unread messages on the chat button
-        button.append('<span class="badge badge-dark blinker">')
+        button.append('<span class="badge bg-dark blinker">')
             .on('click', () => {
                 button.find('.badge').text('')
                 chatCount = 0
                 // When opening the chat scroll it to the bottom, or we shouldn't?
                 scrollStop = false
                 chat.scrollTop = chat.scrollHeight
             })
 
         $(chat).on('scroll', event => {
             // Detect manual scrollbar moves, disable auto-scrolling until
             // the scrollbar is positioned on the element bottom again
             scrollStop = chat.scrollTop + chat.offsetHeight < chat.scrollHeight
         })
     }
 
     /**
      * Signal events handler
      */
     function signalEventHandler(signal) {
         let conn, data
         let connId = signal.from ? signal.from.connectionId : null
 
         switch (signal.type) {
             case 'signal:userChanged':
                 // TODO: Use 'signal:connectionUpdate' for nickname updates?
                 if (conn = connections[connId]) {
                     data = JSON.parse(signal.data)
 
                     conn.nickname = data.nickname
                     participantUpdate(conn.element, conn)
                     nicknameUpdate(data.nickname, connId)
                 }
                 break
 
             case 'signal:chat':
                 data = JSON.parse(signal.data)
                 data.id = connId
                 pushChatMessage(data)
                 break
 
             case 'signal:joinRequest':
                 // accept requests from the server only
                 if (!connId) {
                     sessionData.onJoinRequest(JSON.parse(signal.data))
                 }
                 break
 
             case 'signal:connectionUpdate':
                 // accept requests from the server only
                 if (!connId) {
                     data = JSON.parse(signal.data)
 
                     connectionUpdate(data)
                 }
                 break
         }
     }
 
     /**
      * Send the chat message to other participants
      *
      * @param message Message string
      */
     function signalChat(message) {
         let data = {
             nickname: sessionData.params.nickname,
             message
         }
 
         session.signal({
             data: JSON.stringify(data),
             type: 'chat'
         })
     }
 
     /**
      * Add a message to the chat
      *
      * @param data Object with a message, nickname, id (of the connection, empty for self)
      */
     function pushChatMessage(data) {
         let message = $('<span>').text(data.message).text() // make the message secure
 
         // Format the message, convert emails and urls to links
         message = anchorme({
             input: message,
             options: {
                 attributes: {
                     target: "_blank"
                 },
                 // any link above 20 characters will be truncated
                 // to 20 characters and ellipses at the end
                 truncate: 20,
                 // characters will be taken out of the middle
                 middleTruncation: true
             }
             // TODO: anchorme is extensible, we could support
             //       github/phabricator's markup e.g. backticks for code samples
         })
 
         message = message.replace(/\r?\n/, '<br>')
 
         // Display the message
         let isSelf = data.id == session.connectionId
         let chat = $(sessionData.chatElement).find('.chat')
         let box = chat.find('.message').last()
 
         message = $('<div>').html(message)
 
         message.find('a').attr('rel', 'noreferrer')
 
         if (box.length && box.data('id') == data.id) {
             // A message from the same user as the last message, no new box needed
             message.appendTo(box)
         } else {
             box = $('<div class="message">').data('id', data.id)
                 .append($('<div class="nickname">').text(data.nickname || ''))
                 .append(message)
                 .appendTo(chat)
 
             if (isSelf) {
                 box.addClass('self')
             }
         }
 
         // Count unread messages
         if (!$(sessionData.chatElement).is('.open')) {
             if (!isSelf) {
                 chatCount++
             }
         } else {
             chatCount = 0
         }
 
         $(sessionData.menuElement).find('.link-chat .badge').text(chatCount ? chatCount : '')
 
         // Scroll the chat element to the end
         if (!scrollStop) {
             chat.get(0).scrollTop = chat.get(0).scrollHeight
         }
     }
 
     /**
      * Send the user properties update signal to other participants
      *
      * @param connection Optional connection to which the signal will be sent
      *                   If not specified the signal is sent to all participants
      */
     function signalUserUpdate(connection) {
         let data = {
             nickname: sessionData.params.nickname
         }
 
         session.signal({
             data: JSON.stringify(data),
             type: 'userChanged',
             to: connection ? [connection] : undefined
         })
 
         // The same nickname for screen sharing session
         if (screenSession) {
             screenSession.signal({
                 data: JSON.stringify(data),
                 type: 'userChanged',
                 to: connection ? [connection] : undefined
             })
         }
     }
 
     /**
      * Switch interpreted language channel
      *
      * @param channel Two-letter language code
      */
     function switchChannel(channel) {
         sessionData.channel = channel
 
         // Mute/unmute all connections depending on the selected channel
         participantUpdateAll()
     }
 
     /**
      * Mute/Unmute audio for current session publisher
      */
     function switchAudio() {
         // TODO: If user has no devices or denied access to them in the setup,
         //       the button will just not work. Find a way to make it working
         //       after user unlocks his devices. For now he has to refresh
         //       the page and join the room again.
         if (microphones.length) {
             try {
                 publisher.publishAudio(!audioActive)
                 audioActive = !audioActive
             } catch (e) {
                 console.error(e)
             }
         }
 
         return audioActive
     }
 
     /**
      * Mute/Unmute video for current session publisher
      */
     function switchVideo() {
         // TODO: If user has no devices or denied access to them in the setup,
         //       the button will just not work. Find a way to make it working
         //       after user unlocks his devices. For now he has to refresh
         //       the page and join the room again.
         if (cameras.length) {
             try {
                 publisher.publishVideo(!videoActive)
                 videoActive = !videoActive
             } catch (e) {
                 console.error(e)
             }
         }
 
         return videoActive
     }
 
     /**
      * Switch on/off screen sharing
      */
     function switchScreen(callback) {
         if (screenPublisher) {
             // Note: This is what the original openvidu-call app does.
             // It is probably better for performance reasons to close the connection,
             // than to use unpublish() and keep the connection open.
             screenSession.disconnect()
             screenSession = null
             screenPublisher = null
 
             if (callback) {
                 // Note: Disconnecting invalidates the token, we have to inform the vue component
                 // to update UI state (and be prepared to request a new token).
                 callback(false)
             }
 
             return
         }
 
         screenConnect(callback)
     }
 
     /**
      * Detect if screen sharing is supported by the browser
      */
     function isScreenSharingSupported() {
         return !!OV.checkScreenSharingCapabilities();
     }
 
     /**
      * Update participant connection state
      */
     function connectionUpdate(data) {
         let conn = connections[data.connectionId]
         let refresh = false
         let handUpdate = conn => {
             if ('hand' in data && data.hand != conn.hand) {
                 if (data.hand) {
                     connectionHandUp(conn)
                 } else {
                     connectionHandDown(data.connectionId)
                 }
             }
         }
 
         // It's me
         if (session.connection.connectionId == data.connectionId) {
             const rolePublisher = data.role && data.role & Roles.PUBLISHER
             const roleModerator = data.role && data.role & Roles.MODERATOR
             const isPublisher = sessionData.role & Roles.PUBLISHER
             const isModerator = sessionData.role & Roles.MODERATOR
 
             // demoted to a subscriber
             if ('role' in data && isPublisher && !rolePublisher) {
                 session.unpublish(publisher)
                 // FIXME: There's a reference in OpenVidu to a video element that should not
                 // exist anymore. It causes issues when we try to do publish/unpublish
                 // sequence multiple times in a row. So, we're clearing the reference here.
                 let videos = publisher.stream.streamManager.videos
                 publisher.stream.streamManager.videos = videos.filter(video => video.video.parentNode != null)
             }
 
             handUpdate(sessionData)
 
             // merge the changed data into internal session metadata object
             sessionData = Object.assign({}, sessionData, data, { audioActive, videoActive })
 
             // update the participant element
             sessionData.element = participantUpdate(sessionData.element, sessionData)
 
             // promoted/demoted to/from a moderator
             if ('role' in data) {
                 // Update all participants, to enable/disable the popup menu
                 refresh = (!isModerator && roleModerator) || (isModerator && !roleModerator)
             }
 
             // promoted to a publisher
             if ('role' in data && !isPublisher && rolePublisher) {
                 publisher.createVideoElement(sessionData.element, 'PREPEND')
                 session.publish(publisher).then(() => {
                     sessionData.audioActive = publisher.stream.audioActive
                     sessionData.videoActive = publisher.stream.videoActive
 
                     sessionData.onSessionDataUpdate(sessionData)
                 })
 
                 // Open the media setup dialog
                 // Note: If user didn't give permission to media before joining the room
                 // he will not be able to use them now. Changing permissions requires
                 // a page refresh.
                 // Note: In Firefox I'm always being asked again for media permissions.
                 // It does not happen in Chrome. In Chrome the cam/mic will be just re-used.
                 // I.e. streaming starts automatically.
                 // It might make sense to not start streaming automatically in any cirmustances,
                 // display the dialog and wait until user closes it, but this would be
                 // a bigger refactoring.
                 sessionData.onMediaSetup()
             }
         } else if (conn) {
             handUpdate(conn)
 
             // merge the changed data into internal session metadata object
             Object.keys(data).forEach(key => { conn[key] = data[key] })
 
             conn.element = participantUpdate(conn.element, conn)
         }
 
         // Update channels list
         sessionData.channels = getChannels(connections)
 
         // The channel user was using has been removed (or rather the participant stopped being an interpreter)
         if (sessionData.channel && !sessionData.channels.includes(sessionData.channel)) {
             sessionData.channel = null
             refresh = true
         }
 
         if (refresh) {
             participantUpdateAll()
         }
 
         // Inform the vue component, so it can update some UI controls
         sessionData.onSessionDataUpdate(sessionData)
     }
 
     /**
      * Handler for Hand-Up "signal"
      */
     function connectionHandUp(connection) {
         connection.isSelf = session.connection.connectionId == connection.connectionId
 
         let element = $(nicknameWidget(connection))
 
         participantUpdate(element, connection)
 
         element.attr('id', 'qa' + connection.connectionId)
             .appendTo($(sessionData.queueElement).show())
 
         setTimeout(() => element.addClass('widdle'), 50)
     }
 
     /**
      * Handler for Hand-Down "signal"
      */
     function connectionHandDown(connectionId) {
         let list = $(sessionData.queueElement)
 
         list.find('#qa' + connectionId).remove();
 
         if (!list.find('.meet-nickname').length) {
             list.hide();
         }
     }
 
     /**
      * Update participant nickname in the UI
      *
      * @param nickname     Nickname
      * @param connectionId Connection identifier of the user
      */
     function nicknameUpdate(nickname, connectionId) {
         if (connectionId) {
             $(sessionData.chatElement).find('.chat').find('.message').each(function() {
                 let elem = $(this)
                 if (elem.data('id') == connectionId) {
                     elem.find('.nickname').text(nickname || '')
                 }
             })
 
             $(sessionData.queueElement).find('#qa' + connectionId + ' .content').text(nickname || '')
         }
     }
 
     /**
      * Create a participant element in the matrix. Depending on the connection role
      * parameter it will be a video element wrapper inside the matrix or a simple
      * tag-like element on the subscribers list.
      *
      * @param params  Connection metadata/params
      * @param content Optional content to prepend to the element
      *
      * @return The element
      */
     function participantCreate(params, content) {
         let element
 
         params.isSelf = params.isSelf || session.connection.connectionId == params.connectionId
 
         if ((!params.language && params.role & Roles.PUBLISHER) || params.role & Roles.SCREEN) {
             // publishers and shared screens
             element = publisherCreate(params, content)
         } else {
             // subscribers and language interpreters
             element = subscriberCreate(params, content)
         }
 
         setTimeout(resize, 50);
 
         return element
     }
 
     /**
      * Create a <video> element wrapper with controls
      *
      * @param params  Connection metadata/params
      * @param content Optional content to prepend to the element
      */
     function publisherCreate(params, content) {
         let isScreen = params.role & Roles.SCREEN
 
         // Create the element
         let wrapper = $(
             '<div class="meet-video">'
             + svgIcon('user', 'fas', 'watermark')
             + '<div class="controls">'
                 + '<button type="button" class="btn btn-link link-setup hidden" title="' + $t('meet.media-setup') + '">' + svgIcon('cog') + '</button>'
                 + '<div class="volume hidden"><input type="range" min="0" max="1" step="0.1" /></div>'
                 + '<button type="button" class="btn btn-link link-audio hidden" title="' + $t('meet.menu-audio-mute') + '">' + svgIcon('volume-mute') + '</button>'
                 + '<button type="button" class="btn btn-link link-fullscreen closed hidden" title="' + $t('meet.menu-fullscreen') + '">' + svgIcon('expand') + '</button>'
                 + '<button type="button" class="btn btn-link link-fullscreen open hidden" title="' + $t('meet.menu-fullscreen') + '">' + svgIcon('compress') + '</button>'
             + '</div>'
             + '<div class="status">'
                 + '<span class="bg-warning status-audio hidden">' + svgIcon('microphone-slash') + '</span>'
                 + '<span class="bg-warning status-video hidden">' + svgIcon('video-slash') + '</span>'
             + '</div>'
             + '</div>'
         )
 
         // Append the nickname widget
         wrapper.find('.controls').before(nicknameWidget(params))
 
         if (content) {
             wrapper.prepend(content)
         }
 
         if (isScreen) {
             wrapper.addClass('screen')
         }
 
         if (params.isSelf) {
             wrapper.find('.link-setup').removeClass('hidden').on('click', () => sessionData.onMediaSetup())
         } else {
             let volumeInput = wrapper.find('.volume input')
             let audioButton = wrapper.find('.link-audio')
             let inVolume = false
             let hideVolumeTimeout
             let hideVolume = () => {
                 if (inVolume) {
                     hideVolumeTimeout = setTimeout(hideVolume, 1000)
                 } else {
                     volumeInput.parent().addClass('hidden')
                 }
             }
 
             // Enable and set up the audio mute button
             audioButton.removeClass('hidden')
                 .on('click', e => {
                     let video = wrapper.find('video')[0]
 
                     video.muted = !video.muted
                     video.volume = video.muted ? 0 : 1
 
                     audioButton[video.muted ? 'addClass' : 'removeClass']('text-danger')
                     volumeInput.val(video.volume)
                 })
                 // Show the volume slider when mouse is over the audio mute/unmute button
                 .on('mouseenter', () => {
                     let video = wrapper.find('video')[0]
 
                     clearTimeout(hideVolumeTimeout)
                     volumeInput.parent().removeClass('hidden')
                     volumeInput.val(video.volume)
                 })
                 .on('mouseleave', () => {
                     hideVolumeTimeout = setTimeout(hideVolume, 1000)
                 })
 
             // Set up the audio volume control
             volumeInput
                 .on('mouseenter', () => { inVolume = true })
                 .on('mouseleave', () => { inVolume = false })
                 .on('change input', () => {
                     let video = wrapper.find('video')[0]
                     let volume = volumeInput.val()
 
                     video.volume = volume
                     video.muted = volume == 0
                     audioButton[video.muted ? 'addClass' : 'removeClass']('text-danger')
                 })
         }
 
         participantUpdate(wrapper, params, true)
 
         // Fullscreen control
         if (document.fullscreenEnabled) {
             wrapper.find('.link-fullscreen.closed').removeClass('hidden')
                 .on('click', () => {
                     wrapper.get(0).requestFullscreen()
                 })
 
             wrapper.find('.link-fullscreen.open')
                 .on('click', () => {
                     document.exitFullscreen()
                 })
 
             wrapper.on('fullscreenchange', () => {
                 // const enabled = document.fullscreenElement
                 wrapper.find('.link-fullscreen').toggleClass('hidden')
             })
         }
 
         // Remove the subscriber element, if exists
         $('#subscriber-' + params.connectionId).remove()
 
         let prio = params.isSelf || (isScreen && !$(publishersContainer).children('.screen').length)
 
         return wrapper[prio ? 'prependTo' : 'appendTo'](publishersContainer)
             .attr('id', 'publisher-' + params.connectionId)
             .get(0)
     }
 
     /**
      * Update the publisher/subscriber element controls
      *
      * @param wrapper The wrapper element
      * @param params  Connection metadata/params
      */
     function participantUpdate(wrapper, params, noupdate) {
         const element = $(wrapper)
         const isModerator = sessionData.role & Roles.MODERATOR
         const isSelf = session.connection.connectionId == params.connectionId
         const rolePublisher = params.role & Roles.PUBLISHER
         const roleModerator = params.role & Roles.MODERATOR
         const roleScreen = params.role & Roles.SCREEN
         const roleOwner = params.role & Roles.OWNER
         const roleInterpreter = rolePublisher && !!params.language
 
         if (!noupdate && !roleScreen) {
             const isPublisher = element.is('.meet-video')
 
             // Publisher-to-interpreter or vice-versa, move element to the subscribers list or vice-versa,
             // but keep the existing video element
             if (
                 !isSelf
                 && element.find('video').length
                 && ((roleInterpreter && isPublisher) || (!roleInterpreter && !isPublisher && rolePublisher))
             ) {
                 wrapper = participantCreate(params, element.find('video'))
                 element.remove()
                 return wrapper
             }
 
             // Handle publisher-to-subscriber and subscriber-to-publisher change
             if (
                 !roleInterpreter
                 && (rolePublisher && !isPublisher) || (!rolePublisher && isPublisher)
             ) {
                 element.remove()
                 return participantCreate(params)
             }
         }
 
         let muted = false
         let video = element.find('video')[0]
 
         // When a channel is selected - mute everyone except the interpreter of the language.
         // When a channel is not selected - mute language interpreters only
         if (sessionData.channel) {
             muted = !(roleInterpreter && params.language == sessionData.channel)
         } else {
             muted = roleInterpreter
         }
 
         if (muted && !isSelf) {
             element.find('.status-audio').removeClass('hidden')
             element.find('.link-audio').addClass('hidden')
         } else {
             element.find('.status-audio')[params.audioActive ? 'addClass' : 'removeClass']('hidden')
 
             if (!isSelf) {
                 element.find('.link-audio').removeClass('hidden')
             }
 
             muted = !params.audioActive || isSelf
         }
 
         element.find('.status-video')[params.videoActive ? 'addClass' : 'removeClass']('hidden')
 
         if (video) {
             video.muted = muted
         }
 
         if ('nickname' in params) {
             element.find('.meet-nickname > .content').text(params.nickname)
         }
 
         if (isSelf) {
             element.addClass('self')
         }
 
         if (isModerator) {
             element.addClass('moderated')
         }
 
         const withPerm = isModerator && !roleScreen && !(roleOwner && !isSelf);
         const withMenu = isSelf || (isModerator && !roleOwner)
 
         // TODO: This probably could be better done with css
         let elements = {
             '.dropdown-menu': withMenu,
             '.permissions': withPerm,
             '.interpreting': withPerm && rolePublisher,
             'svg.moderator': roleModerator,
             'svg.user': !roleModerator && !roleInterpreter,
             'svg.interpreter': !roleModerator && roleInterpreter
         }
 
         Object.keys(elements).forEach(key => {
             element.find(key)[elements[key] ? 'removeClass' : 'addClass']('hidden')
         })
 
         element.find('.action-role-publisher input').prop('checked', rolePublisher)
         element.find('.action-role-moderator input').prop('checked', roleModerator)
             .prop('disabled', roleOwner)
 
         element.find('.interpreting select').val(roleInterpreter ? params.language : '')
 
         return wrapper
     }
 
     /**
      * Update/refresh state of all participants' elements
      */
     function participantUpdateAll() {
         Object.keys(connections).forEach(key => {
             const conn = connections[key]
             participantUpdate(conn.element, conn)
         })
     }
 
     /**
      * Create a tag-like element for a subscriber participant
      *
      * @param params  Connection metadata/params
      * @param content Optional content to prepend to the element
      */
     function subscriberCreate(params, content) {
         // Create the element
         let wrapper = $('<div class="meet-subscriber">').append(nicknameWidget(params))
 
         if (content) {
             wrapper.prepend(content)
         }
 
         participantUpdate(wrapper, params, true)
 
         return wrapper[params.isSelf ? 'prependTo' : 'appendTo'](subscribersContainer)
             .attr('id', 'subscriber-' + params.connectionId)
             .get(0)
     }
 
     /**
      * Create a tag-like nickname widget
      *
      * @param object params Connection metadata/params
      */
     function nicknameWidget(params) {
         let languages = []
 
         // Append languages selection options
         Object.keys(sessionData.languages).forEach(code => {
             languages.push(`<option value="${code}">${$t(sessionData.languages[code])}</option>`)
         })
 
         // Create the element
         let element = $(
             '<div class="dropdown">'
                 + '<a href="#" class="meet-nickname btn" aria-haspopup="true" aria-expanded="false" role="button">'
                     + '<span class="content"></span>'
                     + '<span class="icon">'
                         + svgIcon('user', null, 'user')
                         + svgIcon('crown', null, 'moderator hidden')
                         + svgIcon('headphones', null, 'interpreter hidden')
                     + '</span>'
                 + '</a>'
                 + '<div class="dropdown-menu">'
                     + '<a class="dropdown-item action-nickname" href="#">Nickname</a>'
                     + '<a class="dropdown-item action-dismiss" href="#">Dismiss</a>'
                     + '<div class="dropdown-divider permissions"></div>'
                     + '<div class="permissions">'
                         + '<h6 class="dropdown-header">' + $t('meet.perm') + '</h6>'
                         + '<label class="dropdown-item action-role-publisher form-check form-switch">'
                             + '<input type="checkbox" class="form-check-input">'
                             + ' <span class="form-check-label">' + $t('meet.perm-av') + '</span>'
                         + '</label>'
                         + '<label class="dropdown-item action-role-moderator form-check form-switch">'
                             + '<input type="checkbox" class="form-check-input">'
                             + ' <span class="form-check-label">' + $t('meet.perm-mod') + '</span>'
                         + '</label>'
                     + '</div>'
                     + '<div class="dropdown-divider interpreting"></div>'
                     + '<div class="interpreting">'
                         + '<h6 class="dropdown-header">' + $t('meet.lang-int') + '</h6>'
                         + '<div class="ps-3 pe-3"><select class="form-select">'
                             + '<option value="">- ' + $t('form.none') + ' -</option>'
                             + languages.join('')
                         + '</select></div>'
                     + '</div>'
                 + '</div>'
             + '</div>'
         )
 
         let nickname = element.find('.meet-nickname')
             .addClass('btn btn-outline-' + (params.isSelf ? 'primary' : 'secondary'))
             .attr({title: $t('meet.menu-options'), 'data-bs-toggle': 'dropdown'})
 
         const dropdown = new Dropdown(nickname[0], {boundary: container.parentNode})
 
         if (params.isSelf) {
             // Add events for nickname change
             let editable = element.find('.content')[0]
             let editableEnable = () => {
                 editable.contentEditable = true
                 editable.focus()
             }
             let editableUpdate = () => {
                 editable.contentEditable = false
                 sessionData.params.nickname = editable.innerText
                 signalUserUpdate()
                 nicknameUpdate(editable.innerText, session.connection.connectionId)
             }
 
             element.find('.action-nickname').on('click', editableEnable)
             element.find('.action-dismiss').remove()
 
             $(editable).on('blur', editableUpdate)
                 .on('keydown', e => {
                     // Enter or Esc
                     if (e.keyCode == 13 || e.keyCode == 27) {
                         editableUpdate()
                         return false
                     }
 
                     // Do not propagate the event, so it does not interfere with our
                     // keyboard shortcuts
                     e.stopPropagation()
                 })
         } else {
             element.find('.action-nickname').remove()
 
             element.find('.action-dismiss').on('click', e => {
                 sessionData.onDismiss(params.connectionId)
             })
         }
 
         let connectionRole = () => {
             if (params.isSelf) {
                 return sessionData.role
             }
             if (params.connectionId in connections) {
                 return connections[params.connectionId].role
             }
             return 0
         }
 
         // Don't close the menu on permission change
         element.find('.dropdown-menu > label').on('click', e => { e.stopPropagation() })
 
         element.find('.action-role-publisher input').on('change', e => {
             const enabled = e.target.checked
             let role = connectionRole()
 
             if (enabled) {
                 role |= Roles.PUBLISHER
             } else {
                 role |= Roles.SUBSCRIBER
                 if (role & Roles.PUBLISHER) {
                     role ^= Roles.PUBLISHER
                 }
             }
 
             sessionData.onConnectionChange(params.connectionId, { role })
         })
 
         element.find('.action-role-moderator input').on('change', e => {
             const enabled = e.target.checked
             let role = connectionRole()
 
             if (enabled) {
                 role |= Roles.MODERATOR
             } else if (role & Roles.MODERATOR) {
                 role ^= Roles.MODERATOR
             }
 
             sessionData.onConnectionChange(params.connectionId, { role })
         })
 
         element.find('.interpreting select')
             .on('change', e => {
                 const language = $(e.target).val()
                 sessionData.onConnectionChange(params.connectionId, { language })
                 dropdown.hide()
             })
             .on('click', e => {
                 // Prevents from closing the dropdown menu on click
                 e.stopPropagation()
             })
 
         return element.get(0)
     }
 
     /**
      * Window onresize event handler (updates room layout)
      */
     function resize() {
         if (publishersContainer) {
             updateLayout()
         }
 
         $(container).parent()[window.screen.width <= 768 ? 'addClass' : 'removeClass']('mobile')
     }
 
     /**
      * Update the room "matrix" layout
      */
     function updateLayout() {
         let publishers = $(publishersContainer).find('.meet-video')
         let numOfVideos = publishers.length
 
         if (sessionData && sessionData.counterElement) {
             sessionData.counterElement.innerHTML = Object.keys(connections).length + 1
         }
 
         if (!numOfVideos) {
             subscribersContainer.style.minHeight = 'auto'
             return
         }
 
         // Note: offsetHeight/offsetWidth return rounded values, but for proper matrix
         // calculations we need more precision, therefore we use getBoundingClientRect()
 
         let allHeight = container.offsetHeight
         let scrollHeight = subscribersContainer.scrollHeight
         let bcr = publishersContainer.getBoundingClientRect()
         let containerWidth = bcr.width
         let containerHeight = bcr.height
         let limit = Math.ceil(allHeight * 0.25) // max subscribers list height
 
         // Fix subscribers list height
         if (subscribersContainer.offsetHeight <= scrollHeight) {
             limit = Math.min(scrollHeight, limit)
             subscribersContainer.style.minHeight = limit + 'px'
             containerHeight = allHeight - limit
         } else {
             subscribersContainer.style.minHeight = 'auto'
         }
 
         let css, rows, cols, height, padding = 0
 
         // Make the first screen sharing tile big
         let screenVideo = publishers.filter('.screen').find('video').get(0)
 
         if (screenVideo) {
             let element = screenVideo.parentNode
             let connId = element.id.replace(/^publisher-/, '')
             let connection = connections[connId]
 
             // We know the shared screen video dimensions, we can calculate
             // width/height of the tile in the matrix
             if (connection && connection.videoDimensions) {
                 let screenWidth = connection.videoDimensions.width
                 let screenHeight = containerHeight
 
                 // TODO: When the shared window is minimized the width/height is set to 1 (or 2)
                 //       - at least on my system. We might need to handle this case nicer. Right now
                 //       it create a 1-2px line on the left of the matrix - not a big issue.
                 // TODO: Make the 0.666 factor bigger for wide screen and small number of participants?
                 let maxWidth = Math.ceil(containerWidth * 0.666)
 
                 if (screenWidth > maxWidth) {
                     screenWidth = maxWidth
                 }
 
                 // Set the tile position and size
                 $(element).css({
                     width: screenWidth + 'px',
                     height: screenHeight + 'px',
                     position: 'absolute',
                     top: 0,
                     left: 0
                 })
 
                 padding = screenWidth + 'px'
 
                 // Now the estate for the rest of participants is what's left on the right side
                 containerWidth -= screenWidth
                 publishers = publishers.not(element)
                 numOfVideos -= 1
             }
         }
 
         // Compensate the shared screen estate with a padding
         $(publishersContainer).css('padding-left', padding)
 
         const factor = containerWidth / containerHeight
 
         if (factor >= 16/9) {
             if (numOfVideos <= 3) {
                 rows = 1
             } else if (numOfVideos <= 8) {
                 rows = 2
             } else if (numOfVideos <= 15) {
                 rows = 3
             } else if (numOfVideos <= 20) {
                 rows = 4
             } else {
                 rows = 5
             }
 
             cols = Math.ceil(numOfVideos / rows)
         } else {
             if (numOfVideos == 1) {
                 cols = 1
             } else if (numOfVideos <= 4) {
                 cols = 2
             } else if (numOfVideos <= 9) {
                 cols = 3
             } else if (numOfVideos <= 16) {
                 cols = 4
             } else if (numOfVideos <= 25) {
                 cols = 5
             } else {
                 cols = 6
             }
 
             rows = Math.ceil(numOfVideos / cols)
 
             if (rows < cols && containerWidth < containerHeight) {
                 cols = rows
                 rows = Math.ceil(numOfVideos / cols)
             }
         }
 
         // console.log('factor=' + factor, 'num=' + numOfVideos, 'cols = '+cols, 'rows=' + rows);
 
         // Update all tiles (except the main shared screen) in the matrix
         publishers.css({
             width: (containerWidth / cols) + 'px',
             // Height must be in pixels to make object-fit:cover working
             height:  (containerHeight / rows) + 'px'
         })
     }
 
     /**
      * Initialize screen sharing session/publisher
      */
     function screenConnect(callback) {
         if (!sessionData.shareToken) {
             return false
         }
 
         let gotSession = !!screenSession
 
         if (!screenOV) {
             screenOV = ovInit()
         }
 
         // Init screen sharing session
         if (!gotSession) {
             screenSession = screenOV.initSession();
         }
 
         let successFunc = function() {
             screenSession.publish(screenPublisher)
 
             screenSession.on('sessionDisconnected', event => {
                 callback(false)
                 screenSession = null
                 screenPublisher = null
             })
 
             if (callback) {
                 callback(true)
             }
         }
 
         let errorFunc = function() {
             screenPublisher = null
             if (callback) {
                 callback(false, true)
             }
         }
 
         // Init the publisher
         let params = {
             videoSource: 'screen',
             publishAudio: false
         }
 
         screenPublisher = screenOV.initPublisher(null, params)
 
         screenPublisher.once('accessAllowed', (event) => {
             if (gotSession) {
                 successFunc()
             } else {
                 screenSession.connect(sessionData.shareToken, sessionData.params)
                     .then(() => {
                         successFunc()
                     })
                     .catch(error => {
                         console.error('There was an error connecting to the session:', error.code, error.message);
                         errorFunc()
                     })
             }
         })
 
         screenPublisher.once('accessDenied', () => {
             console.info('ScreenShare: Access Denied')
             errorFunc()
         })
     }
 
     /**
      * Create an svg element (string) for a FontAwesome icon
      *
      * @todo Find if there's a "official" way to do this
      */
     function svgIcon(name, type, className) {
         // Note: the library will contain definitions for all icons registered elswhere
         const icon = library.definitions[type || 'fas'][name]
 
         let attrs = {
             'class': 'svg-inline--fa',
             'aria-hidden': true,
             focusable: false,
             role: 'img',
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: `0 0 ${icon[0]} ${icon[1]}`
         }
 
         if (className) {
             attrs['class'] += ' ' + className
         }
 
         return $(`<svg><path fill="currentColor" d="${icon[4]}"></path></svg>`)
             .attr(attrs)
             .get(0).outerHTML
     }
 
     /**
      * A way to update some session data, after you joined the room
      *
      * @param data Same input as for joinRoom()
      */
     function updateSession(data) {
         sessionData.shareToken = data.shareToken
     }
 
     /**
      * A handler for volume level change events
      */
     function volumeChangeHandler(event) {
         let value = 100 + Math.min(0, Math.max(-100, event.value.newValue))
         let color = 'lime'
         const bar = volumeElement.firstChild
 
         if (value >= 70) {
             color = '#ff3300'
         } else if (value >= 50) {
             color = '#ff9933'
         }
 
         bar.style.height = value + '%'
         bar.style.background = color
     }
 
     /**
      * Start the volume meter
      */
     function volumeMeterStart() {
         if (publisher && volumeElement) {
             publisher.on('streamAudioVolumeChange', volumeChangeHandler)
         }
     }
 
     /**
      * Stop the volume meter
      */
     function volumeMeterStop() {
         if (publisher && volumeElement) {
             publisher.off('streamAudioVolumeChange')
             volumeElement.firstChild.style.height = 0
         }
     }
 
     function connectionData(connection) {
         // Note: we're sending a json from two sources (server-side when
         // creating a token/connection, and client-side when joining the session)
         // OpenVidu is unable to merge these two objects into one, for it it is only
         // two strings, so it puts a "%/%" separator in between, we'll replace it with comma
         // to get one parseable json object
         let data = JSON.parse(connection.data.replace('}%/%{', ','))
 
         data.connectionId = connection.connectionId
 
         return data
     }
 
     /**
      * Get all existing language interpretation channels
      */
     function getChannels(connections) {
         let channels = []
 
         Object.keys(connections || {}).forEach(key => {
             let conn = connections[key]
 
             if (
                 conn.language
                 && !channels.includes(conn.language)
             ) {
                 channels.push(conn.language)
             }
         })
 
         return channels
     }
 }
 
 export { Meet, Roles }
diff --git a/src/resources/vue/Dashboard.vue b/src/resources/vue/Dashboard.vue
index d1975a07..7d116d97 100644
--- a/src/resources/vue/Dashboard.vue
+++ b/src/resources/vue/Dashboard.vue
@@ -1,68 +1,68 @@
 <template>
     <div class="container" dusk="dashboard-component">
         <status-component :status="status" @status-update="statusUpdate"></status-component>
 
         <div id="dashboard-nav">
             <router-link class="card link-profile" :to="{ name: 'profile' }">
                 <svg-icon icon="user-cog"></svg-icon><span class="name">{{ $t('dashboard.profile') }}</span>
             </router-link>
             <router-link v-if="status.enableDomains" class="card link-domains" :to="{ name: 'domains' }">
                 <svg-icon icon="globe"></svg-icon><span class="name">{{ $t('dashboard.domains') }}</span>
             </router-link>
             <router-link v-if="status.enableUsers" class="card link-users" :to="{ name: 'users' }">
                 <svg-icon icon="user-friends"></svg-icon><span class="name">{{ $t('dashboard.users') }}</span>
             </router-link>
             <router-link v-if="status.enableDistlists" class="card link-distlists" :to="{ name: 'distlists' }">
                 <svg-icon icon="users"></svg-icon><span class="name">{{ $t('dashboard.distlists') }}</span>
             </router-link>
             <router-link v-if="status.enableWallets" class="card link-wallet" :to="{ name: 'wallet' }">
                 <svg-icon icon="wallet"></svg-icon><span class="name">{{ $t('dashboard.wallet') }}</span>
-                <span v-if="balance < 0" class="badge badge-danger">{{ $root.price(balance, currency) }}</span>
+                <span v-if="balance < 0" class="badge bg-danger">{{ $root.price(balance, currency) }}</span>
             </router-link>
             <router-link v-if="$root.hasSKU('meet')" class="card link-chat" :to="{ name: 'rooms' }">
                 <svg-icon icon="comments"></svg-icon><span class="name">{{ $t('dashboard.chat') }}</span>
-                <span class="badge badge-primary">{{ $t('dashboard.beta') }}</span>
+                <span class="badge bg-primary">{{ $t('dashboard.beta') }}</span>
             </router-link>
             <a v-if="webmailURL" class="card link-webmail" :href="webmailURL">
                 <svg-icon icon="envelope"></svg-icon><span class="name">{{ $t('dashboard.webmail') }}</span>
             </a>
         </div>
     </div>
 </template>
 
 <script>
     import StatusComponent from './Widgets/Status'
 
     export default {
         components: {
             StatusComponent
         },
         data() {
             return {
                 status: {},
                 balance: 0,
                 currency: '',
                 webmailURL: window.config['app.webmail_url']
             }
         },
         mounted() {
             const authInfo = this.$store.state.authInfo
             this.status = authInfo.statusInfo
             this.getBalance(authInfo)
         },
         methods: {
             getBalance(authInfo) {
                 this.balance = 0;
                 // TODO: currencies, multi-wallets, accounts
                 authInfo.wallets.forEach(wallet => {
                     this.balance += wallet.balance
                     this.currency = wallet.currency
                 })
             },
             statusUpdate(user) {
                 this.status = Object.assign({}, this.status, user)
                 this.$store.state.authInfo.statusInfo = this.status
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
index f82feb1f..1c8b8a9e 100644
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -1,761 +1,761 @@
 <template>
     <div id="meet-component">
         <div id="meet-session-toolbar" class="hidden">
             <span id="meet-counter" :title="$t('meet.partcnt')"><svg-icon icon="users"></svg-icon> <span></span></span>
             <span id="meet-session-logo" v-html="$root.logo()"></span>
             <div id="meet-session-menu">
                 <button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="$t('meet.menu-audio-' + (audioActive ? 'mute' : 'unmute'))">
                     <svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon>
                 </button>
                 <button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="$t('meet.menu-video-' + (videoActive ? 'mute' : 'unmute'))">
                     <svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon>
                 </button>
                 <button :class="'btn link-screen' + (screenShareActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" :title="$t('meet.menu-screen')">
                     <svg-icon icon="desktop"></svg-icon>
                 </button>
                 <button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="$t('meet.menu-hand-' + (handRaised ? 'lower' : 'raise'))">
                     <svg-icon icon="hand-paper"></svg-icon>
                 </button>
                 <span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown">
                     <button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-bs-toggle="dropdown"
                             :title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false"
                     >
                         <svg-icon icon="headphones"></svg-icon>
-                        <span class="badge badge-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
+                        <span class="badge bg-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
                     </button>
                     <div class="dropdown-menu">
                         <a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- {{ $t('form.none') }} -</a>
                         <a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code"
                            :class="'dropdown-item' + (session.channel == code ? ' active' : '')"
                         >{{ $t('lang.' + code) }}</a>
                     </div>
                 </span>
                 <button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" :title="$t('meet.menu-chat')">
                     <svg-icon icon="comment"></svg-icon>
                 </button>
                 <button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')">
                     <svg-icon icon="expand"></svg-icon>
                 </button>
                 <button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')">
                     <svg-icon icon="compress"></svg-icon>
                 </button>
                 <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')">
                     <svg-icon icon="cog"></svg-icon>
                 </button>
                 <button class="btn link-logout" @click="logout" :title="$t('meet.menu-leave')">
                     <svg-icon icon="power-off"></svg-icon>
                 </button>
             </div>
         </div>
 
         <div id="meet-setup" class="card container mt-2 mt-md-5 mb-5">
             <div class="card-body">
                 <div class="card-title">{{ $t('meet.setup-title') }}</div>
                 <div class="card-text">
                     <form class="media-setup-form row" @submit.prevent="joinSession">
                         <div class="media-setup-preview col-sm-6 mb-3 mb-sm-0">
                             <video class="rounded"></video>
                             <div class="volume"><div class="bar"></div></div>
                         </div>
                         <div class="col-sm-6 align-self-center">
                             <div class="input-group mb-2">
                                 <label for="setup-microphone" class="input-group-text mb-0" :title="$t('meet.mic')">
                                     <svg-icon icon="microphone"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mb-2">
                                 <label for="setup-camera" class="input-group-text mb-0" :title="$t('meet.cam')">
                                     <svg-icon icon="video"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mb-2">
                                 <label for="setup-nickname" class="input-group-text mb-0" :title="$t('meet.nick')">
                                     <svg-icon icon="user"></svg-icon>
                                 </label>
                                 <input class="form-control" type="text" id="setup-nickname" v-model="nickname" :placeholder="$t('meet.nick-placeholder')">
                             </div>
                             <div class="input-group mt-2" v-if="session.config && session.config.requires_password">
                                 <label for="setup-password" class="input-group-text mb-0" :title="$t('form.password')">
                                     <svg-icon icon="key"></svg-icon>
                                 </label>
                                 <input type="password" class="form-control" id="setup-password" v-model="password" :placeholder="$t('form.password')">
                             </div>
                             <div class="mt-3">
                                 <button type="submit" id="join-button"
                                         :class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')"
                                 >
                                     <span v-if="isRoomReady()">{{ $t('meet.joinnow') }}</span>
                                     <span v-else-if="roomState == 323">{{ $t('meet.imaowner') }}</span>
                                     <span v-else>{{ $t('meet.join') }}</span>
                                 </button>
                             </div>
                         </div>
                         <div class="mt-4 col-sm-12">
                             <status-message :status="roomState" :status-labels="roomStateLabels"></status-message>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
 
         <div id="meet-session-layout" class="d-flex hidden">
             <div id="meet-queue">
                 <div class="head" :title="$t('meet.qa')"><svg-icon icon="microphone-alt"></svg-icon></div>
             </div>
             <div id="meet-session"></div>
             <div id="meet-chat">
                 <div class="chat"></div>
                 <div class="chat-input m-2">
                     <textarea class="form-control" rows="1"></textarea>
                 </div>
             </div>
         </div>
 
         <logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form>
 
         <div id="leave-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.leave-title') }}</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('meet.leave-body') }}</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="media-setup-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.media-title') }}</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
                     </div>
                     <div class="modal-body">
                         <form class="media-setup-form">
                             <div class="media-setup-preview"></div>
                             <div class="input-group mt-2">
                                 <label for="setup-mic" class="input-group-text mb-0" :title="$t('meet.mic')">
                                     <svg-icon icon="microphone"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mt-2">
                                 <label for="setup-cam" class="input-group-text mb-0" :title="$t('meet.cam')">
                                     <svg-icon icon="video"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-cam" v-model="camera" @change="setupCameraChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
                     </div>
                 </div>
             </div>
         </div>
 
         <room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></room-options>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
     import { Meet, Roles } from '../../js/meet/app.js'
     import StatusMessage from '../Widgets/StatusMessage'
     import LogonForm from '../Login'
     import RoomOptions from './RoomOptions'
 
     // Register additional icons
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     import {
         faComment,
         faCog,
         faCompress,
         faCrown,
         faDesktop,
         faExpand,
         faHandPaper,
         faHeadphones,
         faMicrophone,
         faMicrophoneSlash,
         faMicrophoneAlt,
         faPowerOff,
         faUser,
         faUsers,
         faVideo,
         faVideoSlash,
         faVolumeMute
     } from '@fortawesome/free-solid-svg-icons'
 
     // Register only these icons we need
     library.add(
         faComment,
         faCog,
         faCompress,
         faCrown,
         faDesktop,
         faExpand,
         faHandPaper,
         faHeadphones,
         faMicrophone,
         faMicrophoneSlash,
         faMicrophoneAlt,
         faPowerOff,
         faUser,
         faUsers,
         faVideo,
         faVideoSlash,
         faVolumeMute
     )
 
     let roomRequest
     const authHeader = 'X-Meet-Auth-Token'
 
     export default {
         components: {
             LogonForm,
             RoomOptions,
             StatusMessage
         },
         data() {
             return {
                 setup: {
                     cameras: [],
                     microphones: [],
                 },
                 canShareScreen: false,
                 camera: '',
                 channels: [],
                 languages: {
                     en: 'lang.en',
                     de: 'lang.de',
                     fr: 'lang.fr',
                     it: 'lang.it'
                 },
                 meet: null,
                 microphone: '',
                 nickname: '',
                 password: '',
                 room: null,
                 roomState: 'init',
                 roomStateLabels: {
                     init: 'meet.status-init',
                     323: 'meet.status-323',
                     324: 'meet.status-324',
                     325: 'meet.status-325',
                     326: 'meet.status-326',
                     327: 'meet.status-327',
                     404: 'meet.status-404',
                     429: 'meet.status-429',
                     500: 'meet.status-500'
                 },
                 session: {},
                 audioActive: false,
                 videoActive: false,
                 chatActive: false,
                 handRaised: false,
                 screenShareActive: false
             }
         },
         mounted() {
             this.room = this.$route.params.room
 
             // Initialize OpenVidu and do some basic checks
             this.meet = new Meet($('#meet-session')[0]);
             this.canShareScreen = this.meet.isScreenSharingSupported()
 
             // Check the room and init the session
             this.initSession()
 
             // Setup the room UI
             this.setupSession()
 
             // Configure dialog events
             $('#leave-dialog')[0].addEventListener('hide.bs.modal', () => {
                 // FIXME: Where exactly the user should land? Currently he'll land
                 //        on dashboard (if he's logged in) or login form (if he's not).
 
                 this.$router.push({ name: 'dashboard' })
             })
 
             const dialog = $('#media-setup-dialog')[0]
             dialog.addEventListener('show.bs.modal', () => { this.meet.setupStart() })
             dialog.addEventListener('hide.bs.modal', () => { this.meet.setupStop() })
         },
         beforeDestroy() {
             clearTimeout(roomRequest)
 
             $('#app').removeClass('meet')
 
             if (this.meet) {
                 this.meet.leaveRoom()
             }
 
             delete axios.defaults.headers.common[authHeader]
 
             $(document.body).off('keydown.meet')
         },
         methods: {
             authSuccess() {
                 // The user authentication succeeded, we still don't know it's really the room owner
                 this.initSession()
 
                 $('#meet-setup').removeClass('hidden')
                 $('#meet-auth').addClass('hidden')
             },
             configUpdate(config) {
                 this.session.config = Object.assign({}, this.session.config, config)
             },
             dismissParticipant(id) {
                 axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections/' + id + '/dismiss')
             },
             initSession(init) {
                 const button = $('#join-button').prop('disabled', true)
 
                 this.post = {
                     password: this.password,
                     nickname: this.nickname,
                     screenShare: this.canShareScreen ? 1 : 0,
                     init: init ? 1 : 0,
                     picture: init ? this.makePicture() : '',
                     requestId: this.requestId(),
                     canPublish: !!this.camera || !!this.microphone
                 }
 
                 $('#setup-password,#setup-nickname').removeClass('is-invalid')
 
                 axios.post('/api/v4/openvidu/rooms/' + this.room, this.post, { ignoreErrors: true })
                     .then(response => {
                         button.prop('disabled', false)
 
                         // We already have token, the response is redundant
                         if (this.roomState == 'ready' && this.session.token) {
                             return
                         }
 
                         this.roomState = 'ready'
                         this.session = response.data
 
                         if (init) {
                             this.joinSession()
                         }
 
                         if (this.session.authToken) {
                             axios.defaults.headers.common[authHeader] = this.session.authToken
                         }
                     })
                     .catch(error => {
                         if (!error.response) {
                             console.error(error)
                             return
                         }
 
                         const data = error.response.data || {}
 
                         if (data.code) {
                             this.roomState = data.code
                         } else {
                             this.roomState = error.response.status
                         }
 
                         button.prop('disabled', this.roomState == 'init' || this.roomState == 327 || this.roomState >= 400)
 
                         if (data.config) {
                             this.session.config = data.config
                         }
 
                         switch (this.roomState) {
                             case 323:
                                 // Waiting for the owner to open the room...
                                 // Update room state every 10 seconds
                                 roomRequest = setTimeout(() => { this.initSession() }, 10000)
                                 break;
 
                             case 324:
                                 // Room is ready for the owner, but the 'init' was not requested yet
                                 clearTimeout(roomRequest)
                                 break;
 
                             case 325:
                                 // Missing/invalid password
                                 if (init) {
                                     $('#setup-password').addClass('is-invalid').focus()
                                 }
                                 break;
 
                             case 326:
                                 // Locked room prerequisites error
                                 if (init && !$('#setup-nickname').val()) {
                                     $('#setup-nickname').addClass('is-invalid').focus()
                                 }
                                 break;
 
                             case 327:
                                 // Waiting for the owner's approval to join
                                 // Update room state every 10 seconds
                                 roomRequest = setTimeout(() => { this.initSession(true) }, 10000)
                                 break;
 
                             case 429:
                                 // Rate limited, wait and try again
                                 const waitTime = error.response.headers['retry-after'] || 10
                                 roomRequest = setTimeout(() => { this.initSession(init) }, waitTime * 1000)
                                 break;
 
                             default:
                                 if (this.roomState >= 400 && this.roomState != 404) {
                                     this.roomState = 500
                                 }
                         }
                     })
 
                 if (document.fullscreenEnabled) {
                     $('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden')
                 }
             },
             isModerator() {
                 return this.isRoomOwner() || (!!this.session.role && (this.session.role & Roles.MODERATOR) > 0)
             },
             isPublisher() {
                 return !!this.session.role && (this.session.role & Roles.PUBLISHER) > 0
             },
             isRoomOwner() {
                 return !!this.session.role && (this.session.role & Roles.OWNER) > 0
             },
             isRoomReady() {
                 return ['ready', 322, 324, 325, 326, 327].includes(this.roomState)
             },
             // An event received by the room owner when a participant is asking for a permission to join the room
             joinRequest(data) {
                 // The toast for this user request already exists, ignore
                 // It's not really needed as we do this on server-side already
                 if ($('#i' + data.requestId).length) {
                     return
                 }
 
                 // FIXME: Should the message close button act as the Deny button? Do we need the Deny button?
 
                 let body = $(
                     `<div>`
                     + `<div class="picture"><img src="${data.picture}"></div>`
                     + `<div class="content">`
                         + `<p class="mb-2"></p>`
                         + `<div class="text-end">`
                             + `<button type="button" class="btn btn-sm btn-success accept">${this.$t('btn.accept')}</button>`
                             + `<button type="button" class="btn btn-sm btn-danger deny ms-2">${this.$t('btn.deny')}</button>`
                 )
 
                 this.$toast.message({
                     className: 'join-request',
                     icon: 'user',
                     timeout: 0,
                     title: this.$t('meet.join-request'),
                     // titleClassName: '',
                     body: body.html(),
                     onShow: element => {
                         const id = data.requestId
 
                         $(element).find('p').text(this.$t('meet.join-requested', { user: data.nickname || '' }))
 
                         // add id attribute, so we can identify it
                         $(element).attr('id', 'i' + id)
                             // add action to the buttons
                             .find('button.accept,button.deny').on('click', e => {
                                 const action = $(e.target).is('.accept') ? 'accept' : 'deny'
                                 axios.post('/api/v4/openvidu/rooms/' + this.room + '/request/' + id + '/' + action)
                                     .then(response => {
                                         $('#i' + id).remove()
                                     })
                             })
                     }
                 })
             },
             // Entering the room
             joinSession() {
                 // The form can be submitted not only via the submit button,
                 // make sure the submit is allowed
                 if ($('#meet-setup [type=submit]').prop('disabled')) {
                     return;
                 }
 
                 if (this.roomState == 323) {
                     $('#meet-setup').addClass('hidden')
                     $('#meet-auth').removeClass('hidden')
                     return
                 }
 
                 if (this.roomState != 'ready' && !this.session.token) {
                     this.initSession(true)
                     return
                 }
 
                 clearTimeout(roomRequest)
 
                 this.session.nickname = this.nickname
                 this.session.languages = this.languages
                 this.session.menuElement = $('#meet-session-menu')[0]
                 this.session.chatElement = $('#meet-chat')[0]
                 this.session.queueElement = $('#meet-queue')[0]
                 this.session.counterElement = $('#meet-counter span')[0]
                 this.session.translate = (label, args) => this.$t(label, args)
                 this.session.onSuccess = () => {
                     $('#app').addClass('meet')
                     $('#meet-setup').addClass('hidden')
                     $('#meet-session-toolbar,#meet-session-layout').removeClass('hidden')
                 }
                 this.session.onError = () => {
                     this.roomState = 500
                 }
                 this.session.onDestroy = event => {
                     // TODO: Display different message for each reason: forceDisconnectByUser,
                     //       forceDisconnectByServer, sessionClosedByServer?
                     if (event.reason != 'disconnect' && event.reason != 'networkDisconnect' && !this.isRoomOwner()) {
                         new Modal('#leave-dialog').show()
                     }
                 }
                 this.session.onDismiss = connId => { this.dismissParticipant(connId) }
                 this.session.onSessionDataUpdate = data => { this.updateSession(data) }
                 this.session.onConnectionChange = (connId, data) => { this.updateParticipant(connId, data) }
                 this.session.onJoinRequest = data => { this.joinRequest(data) }
                 this.session.onMediaSetup = () => { this.setupMedia() }
 
                 this.meet.joinRoom(this.session)
 
                 this.keyboardShortcuts()
             },
             keyboardShortcuts() {
                 $(document.body).on('keydown.meet', e => {
                     if ($(e.target).is('select,input,textarea')) {
                         return
                     }
 
                     // Self-Mute with 'm' key
                     if (e.key == 'm' || e.key == 'M') {
                         if ($('#meet-session-menu').find('.link-audio:not(:disabled)').length) {
                             this.switchSound()
                         }
                     }
                 })
             },
             logout() {
                 const logout = () => {
                     this.meet.leaveRoom()
                     this.meet = null
                     this.$router.push({ name: 'dashboard' })
                 }
 
                 if (this.isRoomOwner()) {
                     axios.post('/api/v4/openvidu/rooms/' + this.room + '/close').then(logout)
                 } else {
                     logout()
                 }
             },
             makePicture() {
                 const video = $("#meet-setup video")[0];
 
                 // Skip if video is not "playing"
                 if (!video.videoWidth || !this.camera) {
                     return ''
                 }
 
                 // we're going to crop a square from the video and resize it
                 const maxSize = 64
 
                 // Calculate sizing
                 let sh = Math.floor(video.videoHeight / 1.5)
                 let sw = sh
                 let sx = (video.videoWidth - sw) / 2
                 let sy = (video.videoHeight - sh) / 2
 
                 let dh = Math.min(sh, maxSize)
                 let dw = sh < maxSize ? sw : Math.floor(sw * dh/sh)
 
                 const canvas = $("<canvas>")[0];
                 canvas.width = dw;
                 canvas.height = dh;
 
                 // draw the image on the canvas (square cropped and resized)
                 canvas.getContext('2d').drawImage(video, sx, sy, sw, sh, 0, 0, dw, dh);
 
                 // convert it to a usable data URL (png format)
                 return canvas.toDataURL();
             },
             requestId() {
                 const key = 'kolab-meet-uid'
 
                 if (!this.reqId) {
                     this.reqId = localStorage.getItem(key)
                 }
 
                 if (!this.reqId) {
                     // We store the identifier in the browser to make sure that it is the same after
                     // page refresh for the avg user. This will not prevent hackers from sending
                     // the new identifier on every request.
                     // If we're afraid of a room owner being spammed with join requests we might invent
                     // a way to silently ignore all join requests after the owner pressed some button
                     // stating "all attendees already joined, lock the room for good!".
 
                     // This will create max. 24-char numeric string
                     this.reqId = (String(Date.now()) + String(Math.random()).substring(2)).substring(0, 24)
                     localStorage.setItem(key, this.reqId)
                 }
 
                 return this.reqId
             },
             roomOptions() {
                 new Modal('#room-options-dialog').show()
             },
             setupMedia() {
                 const dialog = $('#media-setup-dialog')[0]
 
                 if (!$('video', dialog).length) {
                     $('#meet-setup').find('video,div.volume').appendTo($('.media-setup-preview', dialog))
                 }
 
                 new Modal(dialog).show()
             },
             setupSession() {
                 this.meet.setupStart({
                     videoElement: $('#meet-setup video')[0],
                     volumeElement: $('#meet-setup .volume')[0],
                     onSuccess: setup => {
                         this.setup = setup
                         this.microphone = setup.audioSource
                         this.camera = setup.videoSource
 
                         this.audioActive = setup.audioActive
                         this.videoActive = setup.videoActive
                     },
                     onError: error => {
                         this.audioActive = false
                         this.videoActive = false
                     }
                 })
             },
             setupCameraChange() {
                 this.meet.setupSetVideoDevice(this.camera).then(enabled => {
                     this.videoActive = enabled
                 })
             },
             setupMicrophoneChange() {
                 this.meet.setupSetAudioDevice(this.microphone).then(enabled => {
                     this.audioActive = enabled
                 })
             },
             switchChannel(e) {
                 let channel = $(e.target).data('code')
 
                 this.$set(this.session, 'channel', channel)
                 this.meet.switchChannel(channel)
             },
             switchChat() {
                 let chat = $('#meet-chat')
                 let enabled = chat.is('.open')
 
                 chat.toggleClass('open')
 
                 if (!enabled) {
                     chat.find('textarea').focus()
                 }
 
                 this.chatActive = !enabled
 
                 // Trigger resize, so participant matrix can update its layout
                 window.dispatchEvent(new Event('resize'));
             },
             switchFullscreen() {
                 const element = this.$el
 
                 $(element).off('fullscreenchange').on('fullscreenchange', (e) => {
                     let enabled = document.fullscreenElement == element
                     let buttons = $('#meet-session-menu').find('.link-fullscreen')
 
                     buttons.first()[enabled ? 'addClass' : 'removeClass']('hidden')
                     buttons.last()[!enabled ? 'addClass' : 'removeClass']('hidden')
                 })
 
                 if (document.fullscreenElement) {
                     document.exitFullscreen()
                 } else {
                     element.requestFullscreen()
                 }
             },
             switchHand() {
                 this.updateSelf({ hand: !this.handRaised })
             },
             switchSound() {
                 this.audioActive = this.meet.switchAudio()
             },
             switchVideo() {
                 this.videoActive = this.meet.switchVideo()
             },
             switchScreen() {
                 const switchScreenAction = () => {
                     this.meet.switchScreen((enabled, error) => {
                         this.screenShareActive = enabled
                         if (!enabled && !error) {
                             // Closing a screen sharing connection invalidates the token
                             delete this.session.shareToken
                         }
                     })
                 }
 
                 if (this.session.shareToken || this.screenShareActive) {
                     switchScreenAction()
                 } else {
                     axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections')
                         .then(response => {
                             this.session.shareToken = response.data.token
                             this.meet.updateSession(this.session)
                             switchScreenAction()
                         })
                 }
             },
             updateParticipant(connId, params) {
                 if (this.isModerator()) {
                     axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + connId, params)
                 }
             },
             updateSelf(params, onSuccess) {
                 axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + this.session.connectionId, params)
                     .then(response => {
                         if (onSuccess) {
                             onSuccess(response)
                         }
                     })
             },
             updateSession(data) {
                 this.session = data
                 this.channels = data.channels || []
 
                 const isPublisher = this.isPublisher()
 
                 this.videoActive = isPublisher ? data.videoActive : false
                 this.audioActive = isPublisher ? data.audioActive : false
                 this.handRaised = data.hand
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Reseller/Dashboard.vue b/src/resources/vue/Reseller/Dashboard.vue
index 76019d8e..83ad2142 100644
--- a/src/resources/vue/Reseller/Dashboard.vue
+++ b/src/resources/vue/Reseller/Dashboard.vue
@@ -1,51 +1,51 @@
 <template>
     <div class="container" dusk="dashboard-component">
         <user-search></user-search>
         <div id="dashboard-nav" class="mt-3">
             <router-link v-if="status.enableWallets" class="card link-wallet" :to="{ name: 'wallet' }">
                 <svg-icon icon="wallet"></svg-icon><span class="name">{{ $t('dashboard.wallet') }}</span>
-                <span :class="'badge badge-' + (balance < 0 ? 'danger' : 'success')">{{ $root.price(balance) }}</span>
+                <span :class="'badge bg-' + (balance < 0 ? 'danger' : 'success')">{{ $root.price(balance) }}</span>
             </router-link>
             <router-link class="card link-invitations" :to="{ name: 'invitations' }">
                 <svg-icon icon="envelope-open-text"></svg-icon><span class="name">{{ $t('dashboard.invitations') }}</span>
             </router-link>
             <router-link class="card link-stats" :to="{ name: 'stats' }">
                 <svg-icon icon="chart-line"></svg-icon><span class="name">{{ $t('dashboard.stats') }}</span>
             </router-link>
         </div>
     </div>
 </template>
 
 <script>
     import UserSearch from '../Widgets/UserSearch'
     import { library } from '@fortawesome/fontawesome-svg-core'
     import { faChartLine, faEnvelopeOpenText, faWallet } from '@fortawesome/free-solid-svg-icons'
 
     library.add(faChartLine, faEnvelopeOpenText, faWallet)
 
     export default {
         components: {
             UserSearch
         },
         data() {
             return {
                 status: {},
                 balance: 0
             }
         },
         mounted() {
             const authInfo = this.$store.state.authInfo
             this.status = authInfo.statusInfo
             this.getBalance(authInfo)
         },
         methods: {
             getBalance(authInfo) {
                 this.balance = 0;
                 // TODO: currencies, multi-wallets, accounts
                 authInfo.wallets.forEach(wallet => {
                     this.balance += wallet.balance
                 })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Rooms.vue b/src/resources/vue/Rooms.vue
index 42f0aacb..c0a32f5e 100644
--- a/src/resources/vue/Rooms.vue
+++ b/src/resources/vue/Rooms.vue
@@ -1,64 +1,64 @@
 <template>
     <div class="container" dusk="rooms-component">
         <div id="meet-rooms" class="card">
             <div class="card-body">
-                <div class="card-title">{{ $t('meet.title') }} <small><sup class="badge badge-primary">{{ $t('dashboard.beta') }}</sup></small></div>
+                <div class="card-title">{{ $t('meet.title') }} <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small></div>
                 <div class="card-text">
                     <p>{{ $t('meet.welcome') }}</p>
                     <p>{{ $t('meet.url') }}</p>
                     <p><router-link v-if="href" :to="roomRoute">{{ href }}</router-link></p>
                     <p>{{ $t('meet.notice') }}</p>
                     <dl>
                         <dt>{{ $t('meet.sharing') }}</dt>
                         <dd>{{ $t('meet.sharing-text') }}</dd>
                         <dt>{{ $t('meet.security') }}</dt>
                         <dd>{{ $t('meet.security-text') }}</dd>
                         <dt>{{ $t('meet.qa') }}</dt>
                         <dd>{{ $t('meet.qa-text') }}</dd>
                         <dt>{{ $t('meet.moderation') }}</dt>
                         <dd>{{ $t('meet.moderation-text') }}</dd>
                         <dt>{{ $t('meet.eject') }}</dt>
                         <dd>{{ $t('meet.eject-text') }}</dd>
                         <dt>{{ $t('meet.silent') }}</dt>
                         <dd>{{ $t('meet.silent-text') }}</dd>
                         <dt>{{ $t('meet.interpreters') }}</dt>
                         <dd>{{ $t('meet.interpreters-text') }}</dd>
                     </dl>
                     <p>{{ $t('meet.beta-notice') }}</p>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 rooms: [],
                 href: '',
                 roomRoute: ''
             }
         },
         mounted() {
             if (!this.$root.hasSKU('meet')) {
                 this.$root.errorPage(403)
                 return
             }
 
             this.$root.startLoading()
 
             axios.get('/api/v4/openvidu/rooms')
                 .then(response => {
                     this.$root.stopLoading()
 
                     this.rooms = response.data.list
                     if (response.data.count) {
                         this.roomRoute = '/meet/' + encodeURI(this.rooms[0].name)
                         this.href = window.config['app.url'] + this.roomRoute
                     }
                 })
                 .catch(this.$root.errorHandler)
         }
     }
 </script>
diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
index 46965d7b..dcc1a770 100644
--- a/src/resources/vue/User/Info.vue
+++ b/src/resources/vue/User/Info.vue
@@ -1,480 +1,484 @@
 <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>
                         </li>
                         <li v-if="user_id !== 'new'" class="nav-item">
                             <a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
                                 {{ $t('form.settings') }}
                             </a>
                         </li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
                             <form @submit.prevent="submit" class="card-body">
                                 <div v-if="user_id !== 'new'" class="row plaintext mb-3">
                                     <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
                                     <div class="col-sm-8">
                                         <span :class="$root.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) }}
+                                                        {{ $root.priceLabel(pkg.cost, discount, currency) }}
                                                     </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) }}
+                                                        {{ $root.priceLabel(sku.cost, discount, currency) }}
                                                     </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">
                             <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>
                                 </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 {
+                currency: '',
                 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
+            if (wallet) {
+                this.currency = wallet.currency
+                if (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))
+                record.find('.price').text(this.$root.priceLabel(cost, this.discount, this.currency))
             },
             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>
diff --git a/src/tests/Browser/Reseller/WalletTest.php b/src/tests/Browser/Reseller/WalletTest.php
index 9478d913..5f67f3c8 100644
--- a/src/tests/Browser/Reseller/WalletTest.php
+++ b/src/tests/Browser/Reseller/WalletTest.php
@@ -1,248 +1,248 @@
 <?php
 
 namespace Tests\Browser\Reseller;
 
 use App\Payment;
 use App\Providers\PaymentProvider;
 use App\Transaction;
 use App\Wallet;
 use Carbon\Carbon;
 use Tests\Browser;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\Wallet as WalletPage;
 use Tests\TestCaseDusk;
 
 class WalletTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
         self::useResellerUrl();
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $reseller = $this->getTestUser('reseller@' . \config('app.domain'));
         $wallet = $reseller->wallets()->first();
         $wallet->balance = 0;
         $wallet->save();
         $wallet->payments()->delete();
         $wallet->transactions()->delete();
 
         parent::tearDown();
     }
 
     /**
      * Test wallet page (unauthenticated)
      */
     public function testWalletUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit('/wallet')->on(new Home());
         });
     }
 
     /**
      * Test wallet "box" on Dashboard
      */
     public function testDashboard(): void
     {
         $reseller = $this->getTestUser('reseller@' . \config('app.domain'));
         Wallet::where('user_id', $reseller->id)->update(['balance' => 125]);
 
         // Positive balance
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('reseller@' . \config('app.domain'), \App\Utils::generatePassphrase(), true)
                 ->on(new Dashboard())
                 ->assertSeeIn('@links .link-wallet .name', 'Wallet')
-                ->assertSeeIn('@links .link-wallet .badge-success', '1,25 CHF');
+                ->assertSeeIn('@links .link-wallet .badge.bg-success', '1,25 CHF');
         });
 
         Wallet::where('user_id', $reseller->id)->update(['balance' => -1234]);
 
         // Negative balance
         $this->browse(function (Browser $browser) {
             $browser->visit(new Dashboard())
                 ->assertSeeIn('@links .link-wallet .name', 'Wallet')
-                ->assertSeeIn('@links .link-wallet .badge-danger', '-12,34 CHF');
+                ->assertSeeIn('@links .link-wallet .badge.bg-danger', '-12,34 CHF');
         });
     }
 
     /**
      * Test wallet page
      *
      * @depends testDashboard
      */
     public function testWallet(): void
     {
         $reseller = $this->getTestUser('reseller@' . \config('app.domain'));
         Wallet::where('user_id', $reseller->id)->update(['balance' => -1234]);
 
         $this->browse(function (Browser $browser) {
             $browser->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('#wallet .card-title', 'Account balance -12,34 CHF')
                 ->assertSeeIn('#wallet .card-title .text-danger', '-12,34 CHF')
                 ->assertSeeIn('#wallet .card-text', 'You are out of credit');
         });
     }
 
     /**
      * Test Receipts tab
      *
      * @depends testWallet
      */
     public function testReceipts(): void
     {
         $user = $this->getTestUser('reseller@' . \config('app.domain'));
         $wallet = $user->wallets()->first();
         $wallet->payments()->delete();
 
         // Assert Receipts tab content when there's no receipts available
         $this->browse(function (Browser $browser) {
             $browser->visit(new WalletPage())
                 ->assertSeeIn('#wallet .card-title', 'Account balance 0,00 CHF')
                 ->assertSeeIn('#wallet .card-title .text-success', '0,00 CHF')
                 ->assertSeeIn('#wallet .card-text', 'You are in your free trial period.') // TODO
                 ->assertSeeIn('@nav #tab-receipts', 'Receipts')
                 ->with('@receipts-tab', function (Browser $browser) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertSeeIn('p', 'There are no receipts for payments')
                         ->assertDontSeeIn('p', 'Here you can download')
                         ->assertMissing('select')
                         ->assertMissing('button');
                 });
         });
 
         // Create some sample payments
         $receipts = [];
         $date = Carbon::create(intval(date('Y')) - 1, 3, 30);
         $payment = Payment::create([
                 'id' => 'AAA1',
                 'status' => PaymentProvider::STATUS_PAID,
                 'type' => PaymentProvider::TYPE_ONEOFF,
                 'description' => 'Paid in March',
                 'wallet_id' => $wallet->id,
                 'provider' => 'stripe',
                 'amount' => 1111,
                 'currency_amount' => 1111,
                 'currency' => 'CHF',
         ]);
         $payment->updated_at = $date;
         $payment->save();
         $receipts[] = $date->format('Y-m');
 
         $date = Carbon::create(intval(date('Y')) - 1, 4, 30);
         $payment = Payment::create([
                 'id' => 'AAA2',
                 'status' => PaymentProvider::STATUS_PAID,
                 'type' => PaymentProvider::TYPE_ONEOFF,
                 'description' => 'Paid in April',
                 'wallet_id' => $wallet->id,
                 'provider' => 'stripe',
                 'amount' => 1111,
                 'currency_amount' => 1111,
                 'currency' => 'CHF',
         ]);
         $payment->updated_at = $date;
         $payment->save();
         $receipts[] = $date->format('Y-m');
 
         // Assert Receipts tab with receipts available
         $this->browse(function (Browser $browser) use ($receipts) {
             $browser->refresh()
                 ->on(new WalletPage())
                 ->assertSeeIn('@nav #tab-receipts', 'Receipts')
                 ->with('@receipts-tab', function (Browser $browser) use ($receipts) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertDontSeeIn('p', 'There are no receipts for payments')
                         ->assertSeeIn('p', 'Here you can download')
                         ->assertSeeIn('button', 'Download')
                         ->assertElementsCount('select > option', 2)
                         ->assertSeeIn('select > option:nth-child(1)', $receipts[1])
                         ->assertSeeIn('select > option:nth-child(2)', $receipts[0]);
 
                     // Download a receipt file
                     $browser->select('select', $receipts[0])
                         ->click('button')
                         ->pause(2000);
 
                     $files = glob(__DIR__ . '/../downloads/*.pdf');
 
                     $filename = pathinfo($files[0], PATHINFO_BASENAME);
                     $this->assertTrue(strpos($filename, $receipts[0]) !== false);
 
                     $content = $browser->readDownloadedFile($filename, 0);
                     $this->assertStringStartsWith("%PDF-1.", $content);
 
                     $browser->removeDownloadedFile($filename);
                 });
         });
     }
 
     /**
      * Test History tab
      *
      * @depends testWallet
      */
     public function testHistory(): void
     {
         $user = $this->getTestUser('reseller@' . \config('app.domain'));
         $wallet = $user->wallets()->first();
         $wallet->transactions()->delete();
 
         // Create some sample transactions
         $transactions = $this->createTestTransactions($wallet);
         $transactions = array_reverse($transactions);
         $pages = array_chunk($transactions, 10 /* page size*/);
 
         $this->browse(function (Browser $browser) use ($pages) {
             $browser->on(new WalletPage())
                 ->assertSeeIn('@nav #tab-history', 'History')
                 ->click('@nav #tab-history')
                 ->with('@history-tab', function (Browser $browser) use ($pages) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertElementsCount('table tbody tr', 10)
                         ->assertMissing('table td.email')
                         ->assertSeeIn('#transactions-loader button', 'Load more');
 
                     foreach ($pages[0] as $idx => $transaction) {
                         $selector = 'table tbody tr:nth-child(' . ($idx + 1) . ')';
                         $priceStyle = $transaction->type == Transaction::WALLET_AWARD ? 'text-success' : 'text-danger';
                         $browser->assertSeeIn("$selector td.description", $transaction->shortDescription())
                             ->assertMissing("$selector td.selection button")
                             ->assertVisible("$selector td.price.{$priceStyle}");
                         // TODO: Test more transaction details
                     }
 
                     // Load the next page
                     $browser->click('#transactions-loader button')
                         ->waitUntilMissing('.app-loader')
                         ->assertElementsCount('table tbody tr', 12)
                         ->assertMissing('#transactions-loader button');
 
                     $debitEntry = null;
                     foreach ($pages[1] as $idx => $transaction) {
                         $selector = 'table tbody tr:nth-child(' . ($idx + 1 + 10) . ')';
                         $priceStyle = $transaction->type == Transaction::WALLET_CREDIT ? 'text-success' : 'text-danger';
                         $browser->assertSeeIn("$selector td.description", $transaction->shortDescription());
 
                         if ($transaction->type == Transaction::WALLET_DEBIT) {
                             $debitEntry = $selector;
                         } else {
                             $browser->assertMissing("$selector td.selection button");
                         }
                     }
                 });
         });
     }
 }
diff --git a/src/tests/Browser/UsersTest.php b/src/tests/Browser/UsersTest.php
index 533b96f1..d64f1dd5 100644
--- a/src/tests/Browser/UsersTest.php
+++ b/src/tests/Browser/UsersTest.php
@@ -1,771 +1,835 @@
 <?php
 
 namespace Tests\Browser;
 
 use App\Discount;
 use App\Entitlement;
 use App\Sku;
 use App\User;
 use App\UserAlias;
 use Tests\Browser;
 use Tests\Browser\Components\Dialog;
 use Tests\Browser\Components\ListInput;
 use Tests\Browser\Components\QuotaInput;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\UserInfo;
 use Tests\Browser\Pages\UserList;
+use Tests\Browser\Pages\Wallet as WalletPage;
 use Tests\TestCaseDusk;
 use Illuminate\Foundation\Testing\DatabaseMigrations;
 
 class UsersTest extends TestCaseDusk
 {
     private $profile = [
         'first_name' => 'John',
         'last_name' => 'Doe',
         'organization' => 'Kolab Developers',
     ];
 
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
 
         $this->deleteTestUser('julia.roberts@kolab.org');
 
         $john = User::where('email', 'john@kolab.org')->first();
         $john->setSettings($this->profile);
         UserAlias::where('user_id', $john->id)
             ->where('alias', 'john.test@kolab.org')->delete();
 
         $activesync_sku = Sku::withEnvTenantContext()->where('title', 'activesync')->first();
         $storage_sku = Sku::withEnvTenantContext()->where('title', 'storage')->first();
 
         Entitlement::where('entitleable_id', $john->id)->where('sku_id', $activesync_sku->id)->delete();
         Entitlement::where('cost', '>=', 5000)->delete();
         Entitlement::where('cost', '=', 25)->where('sku_id', $storage_sku->id)->delete();
 
         $wallet = $john->wallets()->first();
         $wallet->discount()->dissociate();
+        $wallet->currency = 'CHF';
         $wallet->save();
 
         $this->clearBetaEntitlements();
         $this->clearMeetEntitlements();
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $this->deleteTestUser('julia.roberts@kolab.org');
 
         $john = User::where('email', 'john@kolab.org')->first();
         $john->setSettings($this->profile);
         UserAlias::where('user_id', $john->id)
             ->where('alias', 'john.test@kolab.org')->delete();
 
         $activesync_sku = Sku::withEnvTenantContext()->where('title', 'activesync')->first();
         $storage_sku = Sku::withEnvTenantContext()->where('title', 'storage')->first();
 
         Entitlement::where('entitleable_id', $john->id)->where('sku_id', $activesync_sku->id)->delete();
         Entitlement::where('cost', '>=', 5000)->delete();
         Entitlement::where('cost', '=', 25)->where('sku_id', $storage_sku->id)->delete();
 
         $wallet = $john->wallets()->first();
         $wallet->discount()->dissociate();
         $wallet->save();
 
         $this->clearBetaEntitlements();
         $this->clearMeetEntitlements();
 
         parent::tearDown();
     }
 
     /**
      * Test user info page (unauthenticated)
      */
     public function testInfoUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $user = User::where('email', 'john@kolab.org')->first();
 
             $browser->visit('/user/' . $user->id)->on(new Home());
         });
     }
 
     /**
      * Test users list page (unauthenticated)
      */
     public function testListUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit('/users')->on(new Home());
         });
     }
 
     /**
      * Test users list page
      */
     public function testList(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true)
                 ->on(new Dashboard())
                 ->assertSeeIn('@links .link-users', 'User accounts')
                 ->click('@links .link-users')
                 ->on(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->waitFor('tbody tr')
                         ->assertElementsCount('tbody tr', 4)
                         ->assertSeeIn('tbody tr:nth-child(1) a', 'jack@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(2) a', 'joe@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(3) a', 'john@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(4) a', 'ned@kolab.org')
                         ->assertMissing('tfoot');
                 });
         });
     }
 
     /**
      * Test user account editing page (not profile page)
      *
      * @depends testList
      */
     public function testInfo(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->on(new UserList())
                 ->click('@table tr:nth-child(3) a')
                 ->on(new UserInfo())
                 ->assertSeeIn('#user-info .card-title', 'User account')
                 ->with('@general', function (Browser $browser) {
                     // Assert form content
                     $browser->assertSeeIn('div.row:nth-child(1) label', 'Status')
                         ->assertSeeIn('div.row:nth-child(1) #status', 'Active')
                         ->assertFocused('div.row:nth-child(2) input')
                         ->assertSeeIn('div.row:nth-child(2) label', 'First Name')
                         ->assertValue('div.row:nth-child(2) input[type=text]', $this->profile['first_name'])
                         ->assertSeeIn('div.row:nth-child(3) label', 'Last Name')
                         ->assertValue('div.row:nth-child(3) input[type=text]', $this->profile['last_name'])
                         ->assertSeeIn('div.row:nth-child(4) label', 'Organization')
                         ->assertValue('div.row:nth-child(4) input[type=text]', $this->profile['organization'])
                         ->assertSeeIn('div.row:nth-child(5) label', 'Email')
                         ->assertValue('div.row:nth-child(5) input[type=text]', 'john@kolab.org')
                         ->assertDisabled('div.row:nth-child(5) input[type=text]')
                         ->assertSeeIn('div.row:nth-child(6) label', 'Email Aliases')
                         ->assertVisible('div.row:nth-child(6) .list-input')
                         ->with(new ListInput('#aliases'), function (Browser $browser) {
                             $browser->assertListInputValue(['john.doe@kolab.org'])
                                 ->assertValue('@input', '');
                         })
                         ->assertSeeIn('div.row:nth-child(7) label', 'Password')
                         ->assertValue('div.row:nth-child(7) input[type=password]', '')
                         ->assertSeeIn('div.row:nth-child(8) label', 'Confirm Password')
                         ->assertValue('div.row:nth-child(8) input[type=password]', '')
                         ->assertSeeIn('button[type=submit]', 'Submit')
                         // Clear some fields and submit
                         ->vueClear('#first_name')
                         ->vueClear('#last_name')
                         ->click('button[type=submit]');
                 })
                 ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.')
                 ->on(new UserList())
                 ->click('@table tr:nth-child(3) a')
                 ->on(new UserInfo())
                 ->assertSeeIn('#user-info .card-title', 'User account')
                 ->with('@general', function (Browser $browser) {
                     // Test error handling (password)
                     $browser->type('#password', 'aaaaaa')
                         ->vueClear('#password_confirmation')
                         ->click('button[type=submit]')
                         ->waitFor('#password + .invalid-feedback')
                         ->assertSeeIn('#password + .invalid-feedback', 'The password confirmation does not match.')
                         ->assertFocused('#password')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
 
                     // TODO: Test password change
 
                     // Test form error handling (aliases)
                     $browser->vueClear('#password')
                         ->vueClear('#password_confirmation')
                         ->with(new ListInput('#aliases'), function (Browser $browser) {
                             $browser->addListEntry('invalid address');
                         })
                         ->click('button[type=submit]')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error');
 
                     $browser->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->assertFormError(2, 'The specified alias is invalid.', false);
                     });
 
                     // Test adding aliases
                     $browser->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->removeListEntry(2)
                             ->addListEntry('john.test@kolab.org');
                     })
                         ->click('button[type=submit]')
                         ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
                 })
                 ->on(new UserList())
                 ->click('@table tr:nth-child(3) a')
                 ->on(new UserInfo());
 
             $john = User::where('email', 'john@kolab.org')->first();
             $alias = UserAlias::where('user_id', $john->id)->where('alias', 'john.test@kolab.org')->first();
             $this->assertTrue(!empty($alias));
 
             // Test subscriptions
             $browser->with('@general', function (Browser $browser) {
                 $browser->assertSeeIn('div.row:nth-child(9) label', 'Subscriptions')
                     ->assertVisible('@skus.row:nth-child(9)')
                     ->with('@skus', function ($browser) {
                         $browser->assertElementsCount('tbody tr', 6)
                             // Mailbox SKU
                             ->assertSeeIn('tbody tr:nth-child(1) td.name', 'User Mailbox')
                             ->assertSeeIn('tbody tr:nth-child(1) td.price', '5,00 CHF/month')
                             ->assertChecked('tbody tr:nth-child(1) td.selection input')
                             ->assertDisabled('tbody tr:nth-child(1) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(1) td.buttons button',
                                 'Just a mailbox'
                             )
                             // Storage SKU
                             ->assertSeeIn('tbody tr:nth-child(2) td.name', 'Storage Quota')
                             ->assertSeeIn('tr:nth-child(2) td.price', '0,00 CHF/month')
                             ->assertChecked('tbody tr:nth-child(2) td.selection input')
                             ->assertDisabled('tbody tr:nth-child(2) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(2) td.buttons button',
                                 'Some wiggle room'
                             )
                             ->with(new QuotaInput('tbody tr:nth-child(2) .range-input'), function ($browser) {
                                 $browser->assertQuotaValue(5)->setQuotaValue(6);
                             })
                             ->assertSeeIn('tr:nth-child(2) td.price', '0,25 CHF/month')
                             // groupware SKU
                             ->assertSeeIn('tbody tr:nth-child(3) td.name', 'Groupware Features')
                             ->assertSeeIn('tbody tr:nth-child(3) td.price', '4,90 CHF/month')
                             ->assertChecked('tbody tr:nth-child(3) td.selection input')
                             ->assertEnabled('tbody tr:nth-child(3) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(3) td.buttons button',
                                 'Groupware functions like Calendar, Tasks, Notes, etc.'
                             )
                             // ActiveSync SKU
                             ->assertSeeIn('tbody tr:nth-child(4) td.name', 'Activesync')
                             ->assertSeeIn('tbody tr:nth-child(4) td.price', '0,00 CHF/month')
                             ->assertNotChecked('tbody tr:nth-child(4) td.selection input')
                             ->assertEnabled('tbody tr:nth-child(4) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(4) td.buttons button',
                                 'Mobile synchronization'
                             )
                             // 2FA SKU
                             ->assertSeeIn('tbody tr:nth-child(5) td.name', '2-Factor Authentication')
                             ->assertSeeIn('tbody tr:nth-child(5) td.price', '0,00 CHF/month')
                             ->assertNotChecked('tbody tr:nth-child(5) td.selection input')
                             ->assertEnabled('tbody tr:nth-child(5) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(5) td.buttons button',
                                 'Two factor authentication for webmail and administration panel'
                             )
                             // Meet SKU
                             ->assertSeeIn('tbody tr:nth-child(6) td.name', 'Voice & Video Conferencing (public beta)')
                             ->assertSeeIn('tbody tr:nth-child(6) td.price', '0,00 CHF/month')
                             ->assertNotChecked('tbody tr:nth-child(6) td.selection input')
                             ->assertEnabled('tbody tr:nth-child(6) td.selection input')
                             ->assertTip(
                                 'tbody tr:nth-child(6) td.buttons button',
                                 'Video conferencing tool'
                             )
                             ->click('tbody tr:nth-child(4) td.selection input');
                     })
                     ->assertMissing('@skus table + .hint')
                     ->click('button[type=submit]')
                     ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
             })
                 ->on(new UserList())
                 ->click('@table tr:nth-child(3) a')
                 ->on(new UserInfo());
 
             $expected = ['activesync', 'groupware', 'mailbox',
                 'storage', 'storage', 'storage', 'storage', 'storage', 'storage'];
             $this->assertUserEntitlements($john, $expected);
 
             // Test subscriptions interaction
             $browser->with('@general', function (Browser $browser) {
                 $browser->with('@skus', function ($browser) {
                     // Uncheck 'groupware', expect activesync unchecked
                     $browser->click('#sku-input-groupware')
                         ->assertNotChecked('#sku-input-groupware')
                         ->assertNotChecked('#sku-input-activesync')
                         ->assertEnabled('#sku-input-activesync')
                         ->assertNotReadonly('#sku-input-activesync')
                         // Check 'activesync', expect an alert
                         ->click('#sku-input-activesync')
                         ->assertDialogOpened('Activesync requires Groupware Features.')
                         ->acceptDialog()
                         ->assertNotChecked('#sku-input-activesync')
                         // Check 'meet', expect an alert
                         ->click('#sku-input-meet')
                         ->assertDialogOpened('Voice & Video Conferencing (public beta) requires Groupware Features.')
                         ->acceptDialog()
                         ->assertNotChecked('#sku-input-meet')
                         // Check '2FA', expect 'activesync' unchecked and readonly
                         ->click('#sku-input-2fa')
                         ->assertChecked('#sku-input-2fa')
                         ->assertNotChecked('#sku-input-activesync')
                         ->assertReadonly('#sku-input-activesync')
                         // Uncheck '2FA'
                         ->click('#sku-input-2fa')
                         ->assertNotChecked('#sku-input-2fa')
                         ->assertNotReadonly('#sku-input-activesync');
                 });
             });
         });
     }
 
     /**
      * Test user settings tab
      *
      * @depends testInfo
      */
     public function testUserSettings(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $john->setSetting('greylist_enabled', null);
 
         $this->browse(function (Browser $browser) use ($john) {
             $browser->visit('/user/' . $john->id)
                 ->on(new UserInfo())
                 ->assertElementsCount('@nav a', 2)
                 ->assertSeeIn('@nav #tab-general', 'General')
                 ->assertSeeIn('@nav #tab-settings', 'Settings')
                 ->click('@nav #tab-settings')
                 ->with('#settings form', function (Browser $browser) {
                     $browser->assertSeeIn('div.row:nth-child(1) label', 'Greylisting')
                         ->click('div.row:nth-child(1) input[type=checkbox]:checked')
                         ->click('button[type=submit]')
                         ->assertToast(Toast::TYPE_SUCCESS, 'User settings updated successfully.');
                 });
         });
 
         $this->assertSame('false', $john->fresh()->getSetting('greylist_enabled'));
     }
 
     /**
      * Test user adding page
      *
      * @depends testList
      */
     public function testNewUser(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
                 ->assertSeeIn('button.create-user', 'Create user')
                 ->click('button.create-user')
                 ->on(new UserInfo())
                 ->assertSeeIn('#user-info .card-title', 'New user account')
                 ->with('@general', function (Browser $browser) {
                     // Assert form content
                     $browser->assertFocused('div.row:nth-child(1) input')
                         ->assertSeeIn('div.row:nth-child(1) label', 'First Name')
                         ->assertValue('div.row:nth-child(1) input[type=text]', '')
                         ->assertSeeIn('div.row:nth-child(2) label', 'Last Name')
                         ->assertValue('div.row:nth-child(2) input[type=text]', '')
                         ->assertSeeIn('div.row:nth-child(3) label', 'Organization')
                         ->assertValue('div.row:nth-child(3) input[type=text]', '')
                         ->assertSeeIn('div.row:nth-child(4) label', 'Email')
                         ->assertValue('div.row:nth-child(4) input[type=text]', '')
                         ->assertEnabled('div.row:nth-child(4) input[type=text]')
                         ->assertSeeIn('div.row:nth-child(5) label', 'Email Aliases')
                         ->assertVisible('div.row:nth-child(5) .list-input')
                         ->with(new ListInput('#aliases'), function (Browser $browser) {
                             $browser->assertListInputValue([])
                                 ->assertValue('@input', '');
                         })
                         ->assertSeeIn('div.row:nth-child(6) label', 'Password')
                         ->assertValue('div.row:nth-child(6) input[type=password]', '')
                         ->assertSeeIn('div.row:nth-child(7) label', 'Confirm Password')
                         ->assertValue('div.row:nth-child(7) input[type=password]', '')
                         ->assertSeeIn('div.row:nth-child(8) label', 'Package')
                         // assert packages list widget, select "Lite Account"
                         ->with('@packages', function ($browser) {
                             $browser->assertElementsCount('tbody tr', 2)
                                 ->assertSeeIn('tbody tr:nth-child(1)', 'Groupware Account')
                                 ->assertSeeIn('tbody tr:nth-child(2)', 'Lite Account')
                                 ->assertSeeIn('tbody tr:nth-child(1) .price', '9,90 CHF/month')
                                 ->assertSeeIn('tbody tr:nth-child(2) .price', '5,00 CHF/month')
                                 ->assertChecked('tbody tr:nth-child(1) input')
                                 ->click('tbody tr:nth-child(2) input')
                                 ->assertNotChecked('tbody tr:nth-child(1) input')
                                 ->assertChecked('tbody tr:nth-child(2) input');
                         })
                         ->assertMissing('@packages table + .hint')
                         ->assertSeeIn('button[type=submit]', 'Submit');
 
                     // Test browser-side required fields and error handling
                     $browser->click('button[type=submit]')
                         ->assertFocused('#email')
                         ->type('#email', 'invalid email')
                         ->click('button[type=submit]')
                         ->assertFocused('#password')
                         ->type('#password', 'simple123')
                         ->click('button[type=submit]')
                         ->assertFocused('#password_confirmation')
                         ->type('#password_confirmation', 'simple')
                         ->click('button[type=submit]')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertSeeIn('#email + .invalid-feedback', 'The specified email is invalid.')
                         ->assertSeeIn('#password + .invalid-feedback', 'The password confirmation does not match.');
                 });
 
             // Test form error handling (aliases)
             $browser->with('@general', function (Browser $browser) {
                 $browser->type('#email', 'julia.roberts@kolab.org')
                     ->type('#password_confirmation', 'simple123')
                     ->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->addListEntry('invalid address');
                     })
                     ->click('button[type=submit]')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                     ->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->assertFormError(1, 'The specified alias is invalid.', false);
                     });
             });
 
             // Successful account creation
             $browser->with('@general', function (Browser $browser) {
                 $browser->type('#first_name', 'Julia')
                     ->type('#last_name', 'Roberts')
                     ->type('#organization', 'Test Org')
                     ->with(new ListInput('#aliases'), function (Browser $browser) {
                         $browser->removeListEntry(1)
                             ->addListEntry('julia.roberts2@kolab.org');
                     })
                     ->click('button[type=submit]');
             })
             ->assertToast(Toast::TYPE_SUCCESS, 'User created successfully.')
             // check redirection to users list
             ->on(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 5)
                         ->assertSeeIn('tbody tr:nth-child(4) a', 'julia.roberts@kolab.org');
                 });
 
             $julia = User::where('email', 'julia.roberts@kolab.org')->first();
             $alias = UserAlias::where('user_id', $julia->id)->where('alias', 'julia.roberts2@kolab.org')->first();
 
             $this->assertTrue(!empty($alias));
             $this->assertUserEntitlements($julia, ['mailbox', 'storage', 'storage', 'storage', 'storage', 'storage']);
             $this->assertSame('Julia', $julia->getSetting('first_name'));
             $this->assertSame('Roberts', $julia->getSetting('last_name'));
             $this->assertSame('Test Org', $julia->getSetting('organization'));
 
             // Some additional tests for the list input widget
             $browser->click('@table tbody tr:nth-child(4) a')
                 ->on(new UserInfo())
                 ->with(new ListInput('#aliases'), function (Browser $browser) {
                     $browser->assertListInputValue(['julia.roberts2@kolab.org'])
                         ->addListEntry('invalid address')
                         ->type('.input-group:nth-child(2) input', '@kolab.org')
                         ->keys('.input-group:nth-child(2) input', '{enter}');
                 })
                 // TODO: Investigate why this click does not work, for now we
                 // submit the form with Enter key above
                 //->click('@general button[type=submit]')
                 ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                 ->with(new ListInput('#aliases'), function (Browser $browser) {
                     $browser->assertVisible('.input-group:nth-child(2) input.is-invalid')
                         ->assertVisible('.input-group:nth-child(3) input.is-invalid')
                         ->type('.input-group:nth-child(2) input', 'julia.roberts3@kolab.org')
                         ->type('.input-group:nth-child(3) input', 'julia.roberts4@kolab.org')
                         ->keys('.input-group:nth-child(3) input', '{enter}');
                 })
                 // TODO: Investigate why this click does not work, for now we
                 // submit the form with Enter key above
                 //->click('@general button[type=submit]')
                 ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
 
             $julia = User::where('email', 'julia.roberts@kolab.org')->first();
             $aliases = $julia->aliases()->orderBy('alias')->get()->pluck('alias')->all();
 
             $this->assertSame(['julia.roberts3@kolab.org', 'julia.roberts4@kolab.org'], $aliases);
         });
     }
 
     /**
      * Test user delete
      *
      * @depends testNewUser
      */
     public function testDeleteUser(): void
     {
         // First create a new user
         $john = $this->getTestUser('john@kolab.org');
         $julia = $this->getTestUser('julia.roberts@kolab.org');
         $package_kolab = \App\Package::where('title', 'kolab')->first();
         $john->assignPackage($package_kolab, $julia);
 
         // Test deleting non-controller user
         $this->browse(function (Browser $browser) use ($julia) {
             $browser->visit('/user/' . $julia->id)
                 ->on(new UserInfo())
                 ->assertSeeIn('button.button-delete', 'Delete user')
                 ->click('button.button-delete')
                 ->with(new Dialog('#delete-warning'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Delete julia.roberts@kolab.org')
                         ->assertFocused('@button-cancel')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Delete')
                         ->click('@button-cancel');
                 })
                 ->waitUntilMissing('#delete-warning')
                 ->click('button.button-delete')
                 ->with(new Dialog('#delete-warning'), function (Browser $browser) {
                     $browser->click('@button-action');
                 })
                 ->waitUntilMissing('#delete-warning')
                 ->assertToast(Toast::TYPE_SUCCESS, 'User deleted successfully.')
                 ->on(new UserList())
                 ->with('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 4)
                         ->assertSeeIn('tbody tr:nth-child(1) a', 'jack@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(2) a', 'joe@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(3) a', 'john@kolab.org')
                         ->assertSeeIn('tbody tr:nth-child(4) a', 'ned@kolab.org');
                 });
 
             $julia = User::where('email', 'julia.roberts@kolab.org')->first();
             $this->assertTrue(empty($julia));
         });
 
         // Test that non-controller user cannot see/delete himself on the users list
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->on(new Home())
                 ->submitLogon('jack@kolab.org', 'simple123', true)
                 ->visit('/users')
                 ->assertErrorPage(403);
         });
 
         // Test that controller user (Ned) can see all the users
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->on(new Home())
                 ->submitLogon('ned@kolab.org', 'simple123', true)
                 ->visit(new UserList())
                 ->whenAvailable('@table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 4);
                 });
 
                 // TODO: Test the delete action in details
         });
 
         // TODO: Test what happens with the logged in user session after he's been deleted by another user
     }
 
     /**
      * Test discounted sku/package prices in the UI
      */
     public function testDiscountedPrices(): void
     {
         // Add 10% discount
         $discount = Discount::where('code', 'TEST')->first();
         $john = User::where('email', 'john@kolab.org')->first();
         $wallet = $john->wallet();
         $wallet->discount()->associate($discount);
         $wallet->save();
 
         // SKUs on user edit page
         $this->browse(function (Browser $browser) {
             $browser->visit('/logout')
                 ->on(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true)
                 ->visit(new UserList())
                 ->waitFor('@table tr:nth-child(2)')
                 ->click('@table tr:nth-child(2) a') // joe@kolab.org
                 ->on(new UserInfo())
                 ->with('@general', function (Browser $browser) {
                     $browser->whenAvailable('@skus', function (Browser $browser) {
                         $quota_input = new QuotaInput('tbody tr:nth-child(2) .range-input');
                         $browser->waitFor('tbody tr')
                             ->assertElementsCount('tbody tr', 6)
                             // Mailbox SKU
                             ->assertSeeIn('tbody tr:nth-child(1) td.price', '4,50 CHF/month¹')
                             // Storage SKU
                             ->assertSeeIn('tr:nth-child(2) td.price', '0,00 CHF/month¹')
                             ->with($quota_input, function (Browser $browser) {
                                 $browser->setQuotaValue(100);
                             })
                             ->assertSeeIn('tr:nth-child(2) td.price', '21,37 CHF/month¹')
                             // groupware SKU
                             ->assertSeeIn('tbody tr:nth-child(3) td.price', '4,41 CHF/month¹')
                             // ActiveSync SKU
                             ->assertSeeIn('tbody tr:nth-child(4) td.price', '0,00 CHF/month¹')
                             // 2FA SKU
                             ->assertSeeIn('tbody tr:nth-child(5) td.price', '0,00 CHF/month¹');
                     })
                     ->assertSeeIn('@skus table + .hint', '¹ applied discount: 10% - Test voucher');
                 });
         });
 
         // Packages on new user page
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
                 ->click('button.create-user')
                 ->on(new UserInfo())
                 ->with('@general', function (Browser $browser) {
                     $browser->whenAvailable('@packages', function (Browser $browser) {
                         $browser->assertElementsCount('tbody tr', 2)
                             ->assertSeeIn('tbody tr:nth-child(1) .price', '8,91 CHF/month¹') // Groupware
                             ->assertSeeIn('tbody tr:nth-child(2) .price', '4,50 CHF/month¹'); // Lite
                     })
                     ->assertSeeIn('@packages table + .hint', '¹ applied discount: 10% - Test voucher');
                 });
         });
 
         // Test using entitlement cost instead of the SKU cost
         $this->browse(function (Browser $browser) use ($wallet) {
             $joe = User::where('email', 'joe@kolab.org')->first();
             $beta_sku = Sku::withEnvTenantContext()->where('title', 'beta')->first();
             $storage_sku = Sku::withEnvTenantContext()->where('title', 'storage')->first();
 
             // Add an extra storage and beta entitlement with different prices
             Entitlement::create([
                     'wallet_id' => $wallet->id,
                     'sku_id' => $beta_sku->id,
                     'cost' => 5010,
                     'entitleable_id' => $joe->id,
                     'entitleable_type' => User::class
             ]);
             Entitlement::create([
                     'wallet_id' => $wallet->id,
                     'sku_id' => $storage_sku->id,
                     'cost' => 5000,
                     'entitleable_id' => $joe->id,
                     'entitleable_type' => User::class
             ]);
 
             $browser->visit('/user/' . $joe->id)
                 ->on(new UserInfo())
                 ->with('@general', function (Browser $browser) {
                     $browser->whenAvailable('@skus', function (Browser $browser) {
                         $quota_input = new QuotaInput('tbody tr:nth-child(2) .range-input');
                         $browser->waitFor('tbody tr')
                             // Beta SKU
                             ->assertSeeIn('tbody tr:nth-child(7) td.price', '45,09 CHF/month¹')
                             // Storage SKU
                             ->assertSeeIn('tr:nth-child(2) td.price', '45,00 CHF/month¹')
                             ->with($quota_input, function (Browser $browser) {
                                 $browser->setQuotaValue(7);
                             })
                             ->assertSeeIn('tr:nth-child(2) td.price', '45,22 CHF/month¹')
                             ->with($quota_input, function (Browser $browser) {
                                 $browser->setQuotaValue(5);
                             })
                             ->assertSeeIn('tr:nth-child(2) td.price', '0,00 CHF/month¹');
                     })
                     ->assertSeeIn('@skus table + .hint', '¹ applied discount: 10% - Test voucher');
                 });
         });
     }
 
+    /**
+     * Test non-default currency in the UI
+     */
+    public function testCurrency(): void
+    {
+        // Add 10% discount
+        $john = User::where('email', 'john@kolab.org')->first();
+        $wallet = $john->wallet();
+        $wallet->balance = -1000;
+        $wallet->currency = 'EUR';
+        $wallet->save();
+
+        // On Dashboard and the wallet page
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/logout')
+                ->on(new Home())
+                ->submitLogon('john@kolab.org', 'simple123', true)
+                ->on(new Dashboard())
+                ->assertSeeIn('@links .link-wallet .badge', '-10,00 €')
+                ->click('@links .link-wallet')
+                ->on(new WalletPage())
+                ->assertSeeIn('#wallet .card-title', 'Account balance -10,00 €');
+        });
+
+        // SKUs on user edit page
+        $this->browse(function (Browser $browser) {
+            $browser->visit(new UserList())
+                ->waitFor('@table tr:nth-child(2)')
+                ->click('@table tr:nth-child(2) a') // joe@kolab.org
+                ->on(new UserInfo())
+                ->with('@general', function (Browser $browser) {
+                    $browser->whenAvailable('@skus', function (Browser $browser) {
+                        $quota_input = new QuotaInput('tbody tr:nth-child(2) .range-input');
+                        $browser->waitFor('tbody tr')
+                            ->assertElementsCount('tbody tr', 6)
+                            // Mailbox SKU
+                            ->assertSeeIn('tbody tr:nth-child(1) td.price', '5,00 €/month')
+                            // Storage SKU
+                            ->assertSeeIn('tr:nth-child(2) td.price', '0,00 €/month')
+                            ->with($quota_input, function (Browser $browser) {
+                                $browser->setQuotaValue(100);
+                            })
+                            ->assertSeeIn('tr:nth-child(2) td.price', '23,75 €/month');
+                    });
+                });
+        });
+
+        // Packages on new user page
+        $this->browse(function (Browser $browser) {
+            $browser->visit(new UserList())
+                ->click('button.create-user')
+                ->on(new UserInfo())
+                ->with('@general', function (Browser $browser) {
+                    $browser->whenAvailable('@packages', function (Browser $browser) {
+                        $browser->assertElementsCount('tbody tr', 2)
+                            ->assertSeeIn('tbody tr:nth-child(1) .price', '9,90 €/month') // Groupware
+                            ->assertSeeIn('tbody tr:nth-child(2) .price', '5,00 €/month'); // Lite
+                    });
+                });
+        });
+    }
+
     /**
      * Test beta entitlements
      *
      * @depends testList
      */
     public function testBetaEntitlements(): void
     {
         $this->browse(function (Browser $browser) {
             $john = User::where('email', 'john@kolab.org')->first();
             $sku = Sku::withEnvTenantContext()->where('title', 'beta')->first();
             $john->assignSku($sku);
 
             $browser->visit('/user/' . $john->id)
                 ->on(new UserInfo())
                 ->with('@skus', function ($browser) {
                     $browser->assertElementsCount('tbody tr', 8)
                         // Meet SKU
                         ->assertSeeIn('tbody tr:nth-child(6) td.name', 'Voice & Video Conferencing (public beta)')
                         ->assertSeeIn('tr:nth-child(6) td.price', '0,00 CHF/month')
                         ->assertNotChecked('tbody tr:nth-child(6) td.selection input')
                         ->assertEnabled('tbody tr:nth-child(6) td.selection input')
                         ->assertTip(
                             'tbody tr:nth-child(6) td.buttons button',
                             'Video conferencing tool'
                         )
                         // Beta SKU
                         ->assertSeeIn('tbody tr:nth-child(7) td.name', 'Private Beta (invitation only)')
                         ->assertSeeIn('tbody tr:nth-child(7) td.price', '0,00 CHF/month')
                         ->assertChecked('tbody tr:nth-child(7) td.selection input')
                         ->assertEnabled('tbody tr:nth-child(7) td.selection input')
                         ->assertTip(
                             'tbody tr:nth-child(7) td.buttons button',
                             'Access to the private beta program subscriptions'
                         )
                         // Distlist SKU
                         ->assertSeeIn('tbody tr:nth-child(8) td.name', 'Distribution lists')
                         ->assertSeeIn('tr:nth-child(8) td.price', '0,00 CHF/month')
                         ->assertNotChecked('tbody tr:nth-child(8) td.selection input')
                         ->assertEnabled('tbody tr:nth-child(8) td.selection input')
                         ->assertTip(
                             'tbody tr:nth-child(8) td.buttons button',
                             'Access to mail distribution lists'
                         )
                         // Check Distlist, Uncheck Beta, expect Distlist unchecked
                         ->click('#sku-input-distlist')
                         ->click('#sku-input-beta')
                         ->assertNotChecked('#sku-input-beta')
                         ->assertNotChecked('#sku-input-distlist')
                         // Click Distlist expect an alert
                         ->click('#sku-input-distlist')
                         ->assertDialogOpened('Distribution lists requires Private Beta (invitation only).')
                         ->acceptDialog()
                         // Enable Beta and Distlist and submit
                         ->click('#sku-input-beta')
                         ->click('#sku-input-distlist');
                 })
                 ->click('@general button[type=submit]')
                 ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
 
             $expected = [
                 'beta',
                 'distlist',
                 'groupware',
                 'mailbox',
                 'storage', 'storage', 'storage', 'storage', 'storage'
             ];
 
             $this->assertUserEntitlements($john, $expected);
 
             $browser->visit('/user/' . $john->id)
                 ->on(new UserInfo())
                 ->waitFor('#sku-input-beta')
                 ->click('#sku-input-beta')
                 ->click('@general button[type=submit]')
                 ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.');
 
             $expected = [
                 'groupware',
                 'mailbox',
                 'storage', 'storage', 'storage', 'storage', 'storage'
             ];
 
             $this->assertUserEntitlements($john, $expected);
         });
 
         // TODO: Test that the Distlist SKU is not available for users that aren't a group account owners
         // TODO: Test that entitlements change has immediate effect on the available items in dashboard
         //       i.e. does not require a page reload nor re-login.
     }
 }