No OneTemporary
Actions

Size

217 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/resources/js/app.js b/src/resources/js/app.js
	index be2af755..390d542f 100644
	--- a/src/resources/js/app.js
	+++ b/src/resources/js/app.js
	@@ -1,455 +1,455 @@
	/**
	* 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 { Tab } from 'bootstrap'
	import { loadLangAsync, i18n } from './locale'
	import { clearFormValidation, pick, startLoading, stopLoading } from './utils'

	const routerState = {
	afterLogin: null,
	isLoggedIn: !!localStorage.getItem('token')
	}

	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 && !routerState.isLoggedIn) {
	// remember the original request, to use after login
	routerState.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

	// Close the mobile menu
	if ($('#header-menu .navbar-collapse.show').length) {
	$('#header-menu .navbar-toggler').click();
	}
	})

	const app = new Vue({
	components: {
	AppComponent,
	MenuComponent,
	},
	i18n,
	router: window.router,
	data() {
	return {
	authInfo: null,
	isUser: !window.isAdmin && !window.isReseller,
	appName: window.config['app.name'],
	appUrl: window.config['app.url'],
	themeDir: '/themes/' + window.config['app.theme']
	}
	},
	methods: {
	clearFormValidation,
	hasPermission(type) {
	const key = 'enable' + type.charAt(0).toUpperCase() + type.slice(1)
	return !!(this.authInfo && this.authInfo.statusInfo[key])
	},
	hasRoute(name) {
	return this.$router.resolve({ name: name }).resolved.matched.length > 0
	},
	hasSKU(name) {
	return this.authInfo.statusInfo.skus && this.authInfo.statusInfo.skus.indexOf(name) != -1
	},
	isController(wallet_id) {
	if (wallet_id && this.authInfo) {
	let i
	for (i = 0; i < this.authInfo.wallets.length; i++) {
	if (wallet_id == this.authInfo.wallets[i].id) {
	return true
	}
	}
	for (i = 0; i < this.authInfo.accounts.length; i++) {
	if (wallet_id == this.authInfo.accounts[i].id) {
	return true
	}
	}
	}

	return false
	},
	isDegraded() {
	return this.authInfo && this.authInfo.isAccountDegraded
	},
	// Set user state to "logged in"
	loginUser(response, dashboard, update) {
	if (!update) {
	routerState.isLoggedIn = true
	this.authInfo = null
	}

	localStorage.setItem('token', response.access_token)
	localStorage.setItem('refreshToken', response.refresh_token)
	axios.defaults.headers.common.Authorization = 'Bearer ' + response.access_token

	if (response.email) {
	this.authInfo = response
	}

	if (dashboard !== false) {
	this.$router.push(routerState.afterLogin \|\| { name: 'dashboard' })
	}

	routerState.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) {
	routerState.isLoggedIn = true
	this.authInfo = null
	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}">`
	},
	pick,
	startLoading,
	stopLoading,
	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) {
	stopLoading()

	const status = error.response ? error.response.status : 500
	const message = error.response ? error.response.statusText : ''

	if (status == 401) {
	// Remember requested route to come back to it after log in
	if (this.$route.meta.requiresAuth) {
	routerState.afterLogin = this.$route
	this.logoutUser()
	} else {
	this.logoutUser(false)
	}
	} else {
	this.errorPage(status, message)
	}
	},
	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, currency) {
	let index = ''

	if (discount) {
	cost = Math.floor(cost * ((100 - discount) / 100))
	index = '\u00B9'
	}

	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')
	}
	},
	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()
	+ dialog.__vue__.show()
	},
	statusClass(obj) {
	if (obj.isDeleted) {
	return 'text-muted'
	}

	if (obj.isDegraded \|\| obj.isAccountDegraded \|\| obj.isSuspended) {
	return 'text-warning'
	}

	if (obj.isImapReady === false \|\| obj.isLdapReady === false \|\| obj.isVerified === false \|\| obj.isConfirmed === false) {
	return 'text-danger'
	}

	return 'text-success'
	},
	statusText(obj) {
	if (obj.isDeleted) {
	return this.$t('status.deleted')
	}

	if (obj.isDegraded \|\| obj.isAccountDegraded) {
	return this.$t('status.degraded')
	}

	if (obj.isSuspended) {
	return this.$t('status.suspended')
	}

	if (obj.isImapReady === false \|\| obj.isLdapReady === false \|\| obj.isVerified === false \|\| obj.isConfirmed === false) {
	return this.$t('status.notready')
	}

	return this.$t('status.active')
	},
	// Append some wallet properties to the object
	userWalletProps(object) {
	let wallet = this.authInfo.accounts[0]

	if (!wallet) {
	wallet = this.authInfo.wallets[0]
	}

	if (wallet) {
	object.currency = wallet.currency
	if (wallet.discount) {
	object.discount = wallet.discount
	object.discount_description = wallet.discount_description
	}
	}
	},
	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
	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

	let loader = config.loader
	if (loader) {
	startLoading(loader)
	}

	return config
	},
	error => {
	// Do something with request error
	return Promise.reject(error)
	}
	)

	// Add a axios response interceptor for general/validation error handler
	axios.interceptors.response.use(
	response => {
	if (response.config.onFinish) {
	response.config.onFinish()
	}

	let loader = response.config.loader
	if (loader) {
	stopLoading(loader)
	}

	return response
	},
	error => {
	let loader = error.config.loader
	if (loader) {
	stopLoading(loader)
	}

	// Do not display the error in a toast message, pass the error as-is
	if (axios.isCancel(error) \|\| error.config.ignoreErrors) {
	return Promise.reject(error)
	}

	if (error.config.onFinish) {
	error.config.onFinish()
	}

	let error_msg

	const status = error.response ? error.response.status : 200
	const data = error.response ? error.response.data : {}

	if (status == 422 && data.errors) {
	error_msg = app.$t('error.form')

	const modal = $('div.modal.show')

	$(modal.length ? modal : 'form').each((i, form) => {
	form = $(form)

	$.each(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 {
	// a special case, e.g. the invitation policy widget
	if (input.is('select') && input.parent().is('.input-group-select.selected')) {
	input = input.next()
	}

	// Standard form element
	input.addClass('is-invalid')
	input.parent().find('.invalid-feedback').remove()
	input.parent().append(feedback)
	}
	}
	})

	form.find('.is-invalid:not(.list-input)').first().focus()
	})
	}
	else if (data.status == 'error') {
	error_msg = 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/themes/app.scss b/src/resources/themes/app.scss
	index 29635e97..e7ce776e 100644
	--- a/src/resources/themes/app.scss
	+++ b/src/resources/themes/app.scss
	@@ -1,507 +1,518 @@
	html,
	body,
	body > .outer-container {
	height: 100%;
	}

	#app {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;

	& > nav {
	flex-shrink: 0;
	z-index: 12;
	}

	& > div.container {
	flex-grow: 1;
	margin-top: 2rem;
	margin-bottom: 2rem;
	}

	& > .filler {
	flex-grow: 1;
	}

	& > div.container + .filler {
	display: none;
	}
	}

	.error-page {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	align-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #636b6f;
	z-index: 10;
	background: white;

	.code {
	text-align: right;
	border-right: 2px solid;
	font-size: 26px;
	padding: 0 15px;
	}

	.message {
	font-size: 18px;
	padding: 0 15px;
	}

	.hint {
	margin-top: 3em;
	text-align: center;
	width: 100%;
	}
	}

	.app-loader {
	background-color: $body-bg;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 8;

	.spinner-border {
	width: 120px;
	height: 120px;
	border-width: 15px;
	color: #b2aa99;
	}

	&.small .spinner-border {
	width: 25px;
	height: 25px;
	border-width: 3px;
	}

	&.fadeOut {
	visibility: hidden;
	opacity: 0;
	transition: visibility 300ms linear, opacity 300ms linear;
	}
	}

	pre {
	margin: 1rem 0;
	padding: 1rem;
	background-color: $menu-bg-color;
	}

	.card-title {
	font-size: 1.2rem;
	font-weight: bold;
	}

	tfoot.table-fake-body {
	background-color: #f8f8f8;
	color: grey;
	text-align: center;

	td {
	vertical-align: middle;
	height: 8em;
	border: 0;
	}

	tbody:not(:empty) + & {
	display: none;
	}
	}

	table {
	th {
	white-space: nowrap;
	}

	td.email,
	td.price,
	td.datetime,
	td.selection {
	width: 1%;
	white-space: nowrap;
	}

	td.buttons,
	th.price,
	td.price,
	th.size,
	td.size {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	}

	&.form-list {
	margin: 0;

	td {
	border: 0;

	&:first-child {
	padding-left: 0;
	}

	&:last-child {
	padding-right: 0;
	}
	}

	button {
	line-height: 1;
	}
	}

	.btn-action {
	line-height: 1;
	padding: 0;
	}

	&.files {
	table-layout: fixed;

	td {
	white-space: nowrap;
	}

	td.name {
	overflow: hidden;
	text-overflow: ellipsis;
	}
	/*
	td.size,
	th.size {
	width: 80px;
	}

	td.mtime,
	th.mtime {
	width: 140px;

	@include media-breakpoint-down(sm) {
	display: none;
	}
	}
	*/
	td.buttons,
	th.buttons {
	width: 50px;
	}
	}
	}

	.table > :not(:first-child) {
	// Remove Bootstrap's 2px border
	border-width: 0;
	}

	.list-details {
	min-height: 1em;

	& > ul {
	margin: 0;
	padding-left: 1.2em;
	}
	}

	.plan-selector {
	.plan-header {
	display: flex;
	}

	.plan-ico {
	margin:auto;
	font-size: 3.8rem;
	color: #f1a539;
	border: 3px solid #f1a539;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	}
	}

	.status-message {
	display: flex;
	align-items: center;
	justify-content: center;

	.app-loader {
	width: auto;
	position: initial;

	.spinner-border {
	color: $body-color;
	}
	}

	svg {
	font-size: 1.5em;
	}

	:first-child {
	margin-right: 0.4em;
	}
	}

	.form-separator {
	position: relative;
	margin: 1em 0;
	display: flex;
	justify-content: center;

	hr {
	border-color: #999;
	margin: 0;
	position: absolute;
	top: 0.75em;
	width: 100%;
	}

	span {
	background: #fff;
	padding: 0 1em;
	z-index: 1;
	}
	}

	+.modal {
	+ .modal-dialog,
	+ .modal-content {
	+ max-height: calc(100vh - 3.5rem);
	+ }
	+
	+ .modal-body {
	+ overflow: auto !important;
	+ }
	+}
	+
	#status-box {
	background-color: lighten($green, 35);

	.progress {
	background-color: #fff;
	height: 10px;
	}

	.progress-label {
	font-size: 0.9em;
	}

	.progress-bar {
	background-color: $green;
	}

	&.process-failed {
	background-color: lighten($orange, 30);

	.progress-bar {
	background-color: $red;
	}
	}
	}

	@keyframes blinker {
	50% {
	opacity: 0;
	}
	}

	.blinker {
	animation: blinker 750ms step-start infinite;
	}

	#dashboard-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	& > a {
	padding: 1rem;
	text-align: center;
	white-space: nowrap;
	margin: 0.25rem;
	text-decoration: none;
	width: 150px;

	&.disabled {
	pointer-events: none;
	opacity: 0.6;
	}

	// Some icons are too big, scale them down
	&.link-companionapp,
	&.link-domains,
	&.link-resources,
	&.link-settings,
	&.link-wallet,
	&.link-invitations {
	svg {
	transform: scale(0.8);
	}
	}

	&.link-distlists,
	&.link-files,
	&.link-shared-folders {
	svg {
	transform: scale(0.9);
	}
	}

	.badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	}
	}

	svg {
	width: 6rem;
	height: 6rem;
	margin: auto;
	}
	}

	#payment-method-selection {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	& > a {
	padding: 1rem;
	text-align: center;
	white-space: nowrap;
	margin: 0.25rem;
	text-decoration: none;
	width: 150px;
	}

	svg {
	width: 6rem;
	height: 6rem;
	margin: auto;
	}

	.link-banktransfer svg {
	transform: scale(.8);
	}
	}

	#logon-form {
	flex-basis: auto; // Bootstrap issue? See logon page with width < 992
	}

	#logon-form-footer {
	a:not(:first-child) {
	margin-left: 2em;
	}
	}

	// Various improvements for mobile
	@include media-breakpoint-down(sm) {
	.card,
	.card-footer {
	border: 0;
	}

	.card-body {
	padding: 0.5rem 0;
	}

	.nav-tabs {
	flex-wrap: nowrap;

	.nav-link {
	white-space: nowrap;
	padding: 0.5rem 0.75rem;
	}
	}

	#app > div.container {
	margin-bottom: 1rem;
	margin-top: 1rem;
	max-width: 100%;
	}

	#header-menu-navbar {
	padding: 0;
	}

	#dashboard-nav > a {
	width: 135px;
	}

	.table-sm:not(.form-list) {
	tbody td {
	padding: 0.75rem 0.5rem;

	svg {
	vertical-align: -0.175em;
	}

	& > svg {
	font-size: 125%;
	margin-right: 0.25rem;
	}
	}
	}

	.table.transactions {
	thead {
	display: none;
	}

	tbody {
	tr {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	}

	td {
	width: auto;
	border: 0;
	padding: 0.5rem;

	&.datetime {
	width: 50%;
	padding-left: 0;
	}

	&.description {
	order: 3;
	width: 100%;
	border-bottom: 1px solid $border-color;
	color: $secondary;
	padding: 0 1.5em 0.5rem 0;
	margin-top: -0.25em;
	}

	&.selection {
	position: absolute;
	right: 0;
	border: 0;
	top: 1.7em;
	padding-right: 0;
	}

	&.price {
	width: 50%;
	padding-right: 0;
	}

	&.email {
	display: none;
	}
	}
	}
	}
	}

	@include media-breakpoint-down(sm) {
	.tab-pane > .card-body {
	padding: 0.5rem;
	}
	}
	diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
	index 2d299e22..75c160f1 100644
	--- a/src/resources/vue/Admin/User.vue
	+++ b/src/resources/vue/Admin/User.vue
	@@ -1,726 +1,644 @@
	<template>
	<div class="container">
	<div class="card" id="user-info">
	<div class="card-body">
	<h1 class="card-title">{{ user.email }}</h1>
	<div class="card-text">
	<form class="read-only short">
	<div v-if="user.wallet.user_id != user.id" class="row plaintext">
	<label for="manager" class="col-sm-4 col-form-label">{{ $t('user.managed-by') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="manager">
	<router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">({{ $t('form.created') }})</span></label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="userid">
	{{ user.id }} <span class="text-muted">({{ user.created_at }})</span>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="status">
	<span :class="$root.statusClass(user)">{{ $root.statusText(user) }}</span>
	</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.first_name">
	<label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.last_name">
	<label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.organization">
	<label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="organization">{{ user.organization }}</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.phone">
	<label for="phone" class="col-sm-4 col-form-label">{{ $t('form.phone') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="phone">{{ user.phone }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="external_email" class="col-sm-4 col-form-label">{{ $t('user.ext-email') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="external_email">
	<a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a>
	<btn class="btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</btn>
	</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.billing_address">
	<label for="billing_address" class="col-sm-4 col-form-label">{{ $t('user.address') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="country" class="col-sm-4 col-form-label">{{ $t('user.country') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="country">{{ user.country }}</span>
	</div>
	</div>
	</form>
	<div class="mt-2 buttons">
	<btn v-if="!user.isSuspended" id="button-suspend" class="btn-warning" @click="suspendUser">
	{{ $t('btn.suspend') }}
	</btn>
	<btn v-if="user.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendUser">
	{{ $t('btn.unsuspend') }}
	</btn>
	</div>
	</div>
	</div>
	</div>
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-finances" href="#user-finances" role="tab" aria-controls="user-finances" aria-selected="true">
	{{ $t('user.finances') }}
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-aliases" href="#user-aliases" role="tab" aria-controls="user-aliases" aria-selected="false">
	{{ $t('user.aliases') }} ({{ user.aliases.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-subscriptions" href="#user-subscriptions" role="tab" aria-controls="user-subscriptions" aria-selected="false">
	{{ $t('user.subscriptions') }} ({{ skus.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-domains" href="#user-domains" role="tab" aria-controls="user-domains" aria-selected="false">
	{{ $t('user.domains') }} ({{ domains.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-users" href="#user-users" role="tab" aria-controls="user-users" aria-selected="false">
	{{ $t('user.users') }} ({{ users.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-distlists" href="#user-distlists" role="tab" aria-controls="user-distlists" aria-selected="false">
	{{ $t('user.distlists') }} ({{ distlists.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-resources" href="#user-resources" role="tab" aria-controls="user-resources" aria-selected="false">
	{{ $t('user.resources') }} ({{ resources.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-shared-folders" href="#user-shared-folders" role="tab" aria-controls="user-shared-folders" aria-selected="false">
	{{ $t('dashboard.shared-folders') }} ({{ folders.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-settings" href="#user-settings" role="tab" aria-controls="user-settings" aria-selected="false">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances">
	<div class="card-body">
	<h2 class="card-title">
	{{ $t('wallet.title') }}
	<span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance, wallet.currency) }}</strong></span>
	</h2>
	<div class="card-text">
	<form class="read-only short">
	<div class="row">
	<label class="col-sm-4 col-form-label">{{ $t('user.discount') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="discount">
	<span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span>
	<btn class="btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</btn>
	</span>
	</div>
	</div>
	<div class="row" v-if="wallet.mandate && wallet.mandate.id">
	<label class="col-sm-4 col-form-label">{{ $t('user.auto-payment') }}</label>
	<div class="col-sm-8">
	<span id="autopayment" :class="'form-control-plaintext' + (wallet.mandateState ? ' text-danger' : '')"
	v-html="$t('user.auto-payment-text', {
	amount: wallet.mandate.amount + ' ' + wallet.currency,
	balance: wallet.mandate.balance + ' ' + wallet.currency,
	method: wallet.mandate.method
	})"
	>
	<span v-if="wallet.mandateState">({{ wallet.mandateState }})</span>.
	</span>
	</div>
	</div>
	<div class="row" v-if="wallet.providerLink">
	<label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} {{ $t('form.id') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" v-html="wallet.providerLink"></span>
	</div>
	</div>
	</form>
	<div class="mt-2 buttons">
	<btn id="button-award" class="btn-success" @click="awardDialog">{{ $t('user.add-bonus') }}</btn>
	<btn id="button-penalty" class="btn-danger" @click="penalizeDialog">{{ $t('user.add-penalty') }}</btn>
	</div>
	</div>
	<h2 class="card-title mt-4">{{ $t('wallet.transactions') }}</h2>
	<transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log>
	</div>
	</div>
	<div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases">
	<div class="card-body">
	<div class="card-text">
	<list-table :list="user.aliases" :setup="aliasesListSetup" class="mb-0"></list-table>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-subscriptions" role="tabpanel" aria-labelledby="tab-subscriptions">
	<div class="card-body">
	<div class="card-text">
	<list-table :list="skus" :setup="skusListSetup" class="mb-0"></list-table>
	<small v-if="discount > 0" class="hint">
	<hr class="m-0">
	¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
	</small>
	<div class="mt-2 buttons">
	- <btn class="btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">{{ $t('user.reset-2fa') }}</btn>
	+ <btn class="btn-danger" id="reset2fa" v-if="has2FA" @click="$refs.reset2faDialog.show()">{{ $t('user.reset-2fa') }}</btn>
	<btn class="btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">{{ $t('user.add-beta') }}</btn>
	</div>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains">
	<div class="card-body">
	<div class="card-text">
	<domain-list :list="domains" class="mb-0"></domain-list>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users">
	<div class="card-body">
	<div class="card-text">
	<user-list :list="users" :current="user" class="mb-0"></user-list>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-distlists" role="tabpanel" aria-labelledby="tab-distlists">
	<div class="card-body">
	<div class="card-text">
	<distlist-list :list="distlists" class="mb-0"></distlist-list>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-resources" role="tabpanel" aria-labelledby="tab-resources">
	<div class="card-body">
	<div class="card-text">
	<resource-list :list="resources" class="mb-0"></resource-list>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-shared-folders" role="tabpanel" aria-labelledby="tab-shared-folders">
	<div class="card-body">
	<div class="card-text">
	<shared-folder-list :list="folders" :with-email="true" class="mb-0"></shared-folder-list>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-settings" role="tabpanel" aria-labelledby="tab-settings">
	<div class="card-body">
	<div class="card-text">
	<form class="read-only short">
	<div class="row plaintext">
	<label for="greylist_enabled" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="greylist_enabled">
	<span v-if="user.config.greylist_enabled" class="text-success">{{ $t('form.enabled') }}</span>
	<span v-else class="text-danger">{{ $t('form.disabled') }}</span>
	</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>

	- <div id="discount-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('user.discount-title') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <p>
	- <select v-model="wallet.discount_id" class="form-select">
	- <option value="">- {{ $t('form.none') }} -</option>
	- <option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option>
	- </select>
	- </p>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-primary modal-action" @click="submitDiscount()" icon="check">{{ $t('btn.submit') }}</btn>
	- </div>
	- </div>
	+ <modal-dialog id="discount-dialog" ref="discountDialog" :title="$t('user.discount-title')" @click="submitDiscount()" :buttons="['submit']">
	+ <div>
	+ <select v-model="wallet.discount_id" class="form-select">
	+ <option value="">- {{ $t('form.none') }} -</option>
	+ <option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option>
	+ </select>
	</div>
	- </div>
	+ </modal-dialog>

	- <div id="email-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('user.ext-email') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <p>
	- <input v-model="external_email" name="external_email" class="form-control">
	- </p>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-primary modal-action" @click="submitEmail()" icon="check">{{ $t('btn.submit') }}</btn>
	- </div>
	- </div>
	+ <modal-dialog id="email-dialog" ref="emailDialog" :title="$t('user.ext-email')" @click="submitEmail()" :buttons="['submit']">
	+ <div>
	+ <input v-model="external_email" name="external_email" class="form-control">
	</div>
	- </div>
	-
	- <div id="oneoff-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <form data-validation-prefix="oneoff_">
	- <div class="row mb-3">
	- <label for="oneoff_amount" class="col-form-label">{{ $t('form.amount') }}</label>
	- <div class="input-group">
	- <input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required>
	- <span class="input-group-text">{{ wallet.currency }}</span>
	- </div>
	- </div>
	- <div class="row">
	- <label for="oneoff_description" class="col-form-label">{{ $t('form.description') }}</label>
	- <input class="form-control" id="oneoff_description" v-model="oneoff_description" required>
	- </div>
	- </form>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-primary modal-action" @click="submitOneOff()" icon="check">{{ $t('btn.submit') }}</btn>
	+ </modal-dialog>
	+
	+ <modal-dialog id="oneoff-dialog" ref="oneoffDialog" @click="submitOneOff()" :buttons="['submit']"
	+ :title="$t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title')"
	+ >
	+ <form data-validation-prefix="oneoff_">
	+ <div class="mb-3">
	+ <label for="oneoff_amount" class="form-label">{{ $t('form.amount') }}</label>
	+ <div class="input-group">
	+ <input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required>
	+ <span class="input-group-text">{{ wallet.currency }}</span>
	</div>
	</div>
	- </div>
	- </div>
	-
	- <div id="reset-2fa-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('user.reset-2fa-title') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <p>{{ $t('user.2fa-hint1') }}</p>
	- <p>{{ $t('user.2fa-hint2') }}</p>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</btn>
	- </div>
	+ <div>
	+ <label for="oneoff_description" class="form-label">{{ $t('form.description') }}</label>
	+ <input class="form-control" id="oneoff_description" v-model="oneoff_description" required>
	</div>
	- </div>
	- </div>
	+ </form>
	+ </modal-dialog>
	+
	+ <modal-dialog id="reset-2fa-dialog" ref="reset2faDialog" :title="$t('user.reset-2fa-title')" @click="reset2FA()"
	+ :buttons="[{className: 'btn-danger modal-action', label: 'btn.reset'}]"
	+ >
	+ <p>{{ $t('user.2fa-hint1') }}</p>
	+ <p>{{ $t('user.2fa-hint2') }}</p>
	+ </modal-dialog>
	</div>
	</template>

	<script>
	- import { Modal } from 'bootstrap'
	+ import ModalDialog from '../Widgets/ModalDialog'
	import TransactionLog from '../Widgets/TransactionLog'
	import { ListTable } from '../Widgets/ListTools'
	import { default as DistlistList } from '../Distlist/ListWidget'
	import { default as DomainList } from '../Domain/ListWidget'
	import { default as ResourceList } from '../Resource/ListWidget'
	import { default as SharedFolderList } from '../SharedFolder/ListWidget'
	import { default as UserList } from '../User/ListWidget'

	import { library } from '@fortawesome/fontawesome-svg-core'

	library.add(
	require('@fortawesome/free-solid-svg-icons/faFolderOpen').definition,
	require('@fortawesome/free-solid-svg-icons/faGear').definition,
	require('@fortawesome/free-solid-svg-icons/faGlobe').definition,
	require('@fortawesome/free-solid-svg-icons/faUsers').definition,
	)

	export default {
	components: {
	DistlistList,
	DomainList,
	ListTable,
	+ ModalDialog,
	ResourceList,
	SharedFolderList,
	TransactionLog,
	UserList
	},
	beforeRouteUpdate (to, from, next) {
	// An event called when the route that renders this component has changed,
	// but this component is reused in the new route.
	// Required to handle links from /user/XXX to /user/YYY
	next()
	this.$parent.routerReload()
	},
	data() {
	return {
	aliasesListSetup: {
	columns: [
	{
	prop: 'email',
	content: item => item
	},
	],
	footLabel: 'user.aliases-none'
	},
	oneoff_amount: '',
	oneoff_description: '',
	oneoff_negative: false,
	discount: 0,
	discount_description: '',
	discounts: [],
	external_email: '',
	folders: [],
	has2FA: false,
	hasBeta: false,
	wallet: {},
	walletReload: false,
	distlists: [],
	domains: [],
	resources: [],
	sku2FA: null,
	skus: [],
	skusListSetup: {
	columns: [
	{
	prop: 'name',
	label: 'user.subscription'
	},
	{
	prop: 'price',
	className: 'price',
	label: 'user.price'
	}
	],
	footLabel: 'user.subscriptions-none',
	model: 'sku'
	},
	users: [],
	user: {
	aliases: [],
	config: {},
	wallet: {},
	skus: {},
	}
	}
	},
	created() {
	const user_id = this.$route.params.user

	axios.get('/api/v4/users/' + user_id, { loader: true })
	.then(response => {
	this.user = response.data

	const loader = '#user-finances'
	const keys = ['first_name', 'last_name', 'external_email', 'billing_address', 'phone', 'organization']

	let country = this.user.settings.country
	if (country && country in window.config.countries) {
	country = window.config.countries[country][1]
	}

	this.user.country = country

	keys.forEach(key => { this.user[key] = this.user.settings[key] })

	this.discount = this.user.wallet.discount
	this.discount_description = this.user.wallet.discount_description

	// TODO: currencies, multi-wallets, accounts
	// Get more info about the wallet (e.g. payment provider related)
	axios.get('/api/v4/wallets/' + this.user.wallets[0].id, { loader })
	.then(response => {
	this.wallet = response.data
	this.setMandateState()
	})

	// Create subscriptions list
	axios.get('/api/v4/users/' + user_id + '/skus')
	.then(response => {
	// "merge" SKUs with user entitlement-SKUs
	response.data.forEach(sku => {
	const userSku = this.user.skus[sku.id]
	if (userSku) {
	let cost = userSku.costs.reduce((sum, current) => sum + current)
	let item = {
	id: sku.id,
	name: sku.name,
	cost: cost,
	price: this.$root.priceLabel(cost, this.discount)
	}

	if (sku.range) {
	item.name += ' ' + userSku.count + ' ' + sku.range.unit
	}

	this.skus.push(item)

	if (sku.handler == 'Auth2F') {
	this.has2FA = true
	this.sku2FA = sku.id
	} else if (sku.handler == 'Beta') {
	this.hasBeta = true
	}
	}
	})
	})

	// Fetch users
	// TODO: Multiple wallets
	axios.get('/api/v4/users?owner=' + user_id)
	.then(response => {
	this.users = response.data.list;
	})

	// Fetch domains
	axios.get('/api/v4/domains?owner=' + user_id)
	.then(response => {
	this.domains = response.data.list
	})

	// Fetch distribution lists
	axios.get('/api/v4/groups?owner=' + user_id)
	.then(response => {
	this.distlists = response.data.list
	})

	// Fetch resources lists
	axios.get('/api/v4/resources?owner=' + user_id)
	.then(response => {
	this.resources = response.data.list
	})

	// Fetch shared folders lists
	axios.get('/api/v4/shared-folders?owner=' + user_id)
	.then(response => {
	this.folders = response.data.list
	})
	})
	.catch(this.$root.errorHandler)
	},
	mounted() {
	$(this.$el).find('ul.nav-tabs a').on('click', this.$root.tab)
	+
	+ this.$refs.discountDialog.events({
	+ shown: () => {
	+ // Note: Vue v-model is strict, convert null to a string
	+ this.wallet.discount_id = this.wallet.discount_id \|\| ''
	+ }
	+ })
	},
	methods: {
	addBetaSku() {
	axios.post('/api/v4/users/' + this.user.id + '/skus/beta')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.hasBeta = true
	const sku = response.data.sku
	this.skus.push({
	id: sku.id,
	name: sku.name,
	cost: sku.cost,
	price: this.$root.priceLabel(sku.cost, this.discount)
	})
	}
	})
	},
	capitalize(str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	},
	awardDialog() {
	this.oneOffDialog(false)
	},
	discountEdit() {
	- if (!this.discount_dialog) {
	- const dialog = $('#discount-dialog')[0]
	-
	- dialog.addEventListener('shown.bs.modal', e => {
	- $(dialog).find('select').focus()
	- // Note: Vue v-model is strict, convert null to a string
	- this.wallet.discount_id = this.wallet_discount_id \|\| ''
	- })
	-
	- this.discount_dialog = new Modal(dialog)
	- }
	-
	- this.discount_dialog.show()
	+ this.$refs.discountDialog.show()

	if (!this.discounts.length) {
	// Fetch discounts
	axios.get('/api/v4/users/' + this.user.id + '/discounts')
	.then(response => {
	this.discounts = response.data.list
	})
	}
	},
	emailEdit() {
	this.external_email = this.user.external_email
	this.$root.clearFormValidation($('#email-dialog'))
	-
	- if (!this.email_dialog) {
	- const dialog = $('#email-dialog')[0]
	-
	- dialog.addEventListener('shown.bs.modal', e => {
	- $(dialog).find('input').focus()
	- })
	-
	- this.email_dialog = new Modal(dialog)
	- }
	-
	- this.email_dialog.show()
	+ this.$refs.emailDialog.show()
	},
	setMandateState() {
	let mandate = this.wallet.mandate
	if (mandate && mandate.id) {
	if (!mandate.isValid) {
	this.wallet.mandateState = mandate.isPending ? 'pending' : 'invalid'
	} else if (mandate.isDisabled) {
	this.wallet.mandateState = 'disabled'
	}
	}
	},
	oneOffDialog(negative) {
	this.oneoff_negative = negative
	-
	- if (!this.oneoff_dialog) {
	- const dialog = $('#oneoff-dialog')[0]
	-
	- dialog.addEventListener('shown.bs.modal', () => {
	- this.$root.clearFormValidation(dialog)
	- $(dialog).find('#oneoff_amount').focus()
	- })
	-
	- this.oneoff_dialog = new Modal(dialog)
	- }
	-
	- this.oneoff_dialog.show()
	+ this.$refs.oneoffDialog.show()
	},
	penalizeDialog() {
	this.oneOffDialog(true)
	},
	reload() {
	// this is to reload transaction log
	this.walletReload = true
	this.$nextTick(() => { this.walletReload = false })
	},
	reset2FA() {
	- new Modal('#reset-2fa-dialog').hide()
	+ this.$refs.reset2faDialog.hide()
	axios.post('/api/v4/users/' + this.user.id + '/reset2FA')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.skus = this.skus.filter(sku => sku.id != this.sku2FA)
	this.has2FA = false
	}
	})
	},
	- reset2FADialog() {
	- new Modal('#reset-2fa-dialog').show()
	- },
	submitDiscount() {
	- this.discount_dialog.hide()
	+ this.$refs.discountDialog.hide()

	axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id })
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.wallet = Object.assign({}, this.wallet, response.data)

	// Update prices in Subscriptions tab
	if (this.user.wallet.id == response.data.id) {
	this.discount = this.wallet.discount
	this.discount_description = this.wallet.discount_description

	this.skus.forEach(sku => {
	sku.price = this.$root.priceLabel(sku.cost, this.discount)
	})
	}
	}
	})
	},
	submitEmail() {
	axios.put('/api/v4/users/' + this.user.id, { external_email: this.external_email })
	.then(response => {
	if (response.data.status == 'success') {
	- this.email_dialog.hide()
	+ this.$refs.emailDialog.hide()
	this.$toast.success(response.data.message)
	this.user.external_email = this.external_email
	this.external_email = null // required because of Vue
	}
	})
	},
	submitOneOff() {
	let wallet_id = this.user.wallets[0].id
	let post = {
	amount: this.oneoff_amount,
	description: this.oneoff_description
	}

	if (this.oneoff_negative && /^\d+(\.?\d+)?$/.test(post.amount)) {
	post.amount *= -1
	}

	this.$root.clearFormValidation('#oneoff-dialog')

	axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post)
	.then(response => {
	if (response.data.status == 'success') {
	- this.oneoff_dialog.hide()
	+ this.$refs.oneoffDialog.hide()
	this.$toast.success(response.data.message)
	this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance})
	this.oneoff_amount = ''
	this.oneoff_description = ''
	this.reload()
	}
	})
	},
	suspendUser() {
	axios.post('/api/v4/users/' + this.user.id + '/suspend')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.user = Object.assign({}, this.user, { isSuspended: true })
	}
	})
	},
	unsuspendUser() {
	axios.post('/api/v4/users/' + this.user.id + '/unsuspend')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.user = Object.assign({}, this.user, { isSuspended: false })
	}
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Domain/Info.vue b/src/resources/vue/Domain/Info.vue
	index 7916c6c5..1fa54420 100644
	--- a/src/resources/vue/Domain/Info.vue
	+++ b/src/resources/vue/Domain/Info.vue
	@@ -1,224 +1,207 @@
	<template>
	<div class="container">
	<status-component v-if="domain_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>

	<div class="card">
	<div class="card-body">
	<div class="card-title" v-if="domain_id === 'new'">{{ $t('domain.new') }}</div>
	<div class="card-title" v-else>{{ $t('form.domain') }}
	- <btn class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()" icon="trash-can">{{ $t('domain.delete') }}</btn>
	+ <btn class="btn-outline-danger button-delete float-end" @click="$refs.deleteDialog.show()" icon="trash-can">{{ $t('domain.delete') }}</btn>
	</div>
	<div class="card-text">
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
	{{ $t('form.general') }}
	</a>
	</li>
	<li class="nav-item" v-if="domain.id">
	<a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
	<form @submit.prevent="submit" class="card-body">
	<div v-if="domain.id" class="row plaintext mb-3">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.statusClass(domain) + ' form-control-plaintext'" id="status">{{ $root.statusText(domain) }}</span>
	</div>
	</div>
	<div class="row mb-3">
	<label for="name" class="col-sm-4 col-form-label">{{ $t('domain.namespace') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="namespace" v-model="domain.namespace" :disabled="domain.id">
	</div>
	</div>
	<div v-if="!domain.id" id="domain-packages" class="row">
	<label class="col-sm-4 col-form-label">{{ $t('user.package') }}</label>
	<package-select class="col-sm-8 pt-sm-1" type="domain"></package-select>
	</div>
	<div v-if="domain.id" id="domain-skus" class="row">
	<label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
	<subscription-select v-if="domain.id" class="col-sm-8 pt-sm-1" type="domain" :object="domain" :readonly="true"></subscription-select>
	</div>
	<btn v-if="!domain.id" class="btn-primary mt-3" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	<hr class="m-0" v-if="domain.id">
	<div v-if="domain.id && !domain.isConfirmed" class="card-body" id="domain-verify">
	<h5 class="mb-3">{{ $t('domain.verify') }}</h5>
	<div class="card-text">
	<p>{{ $t('domain.verify-intro') }}</p>
	<p>
	<span v-html="$t('domain.verify-dns')"></span>
	<ul>
	<li>{{ $t('domain.verify-dns-txt') }} <code>{{ domain.hash_text }}</code></li>
	<li>{{ $t('domain.verify-dns-cname') }} <code>{{ domain.hash_cname }}.{{ domain.namespace }}. IN CNAME {{ domain.hash_code }}.{{ domain.namespace }}.</code></li>
	</ul>
	<span>{{ $t('domain.verify-outro') }}</span>
	</p>
	<p>{{ $t('domain.verify-sample') }} <pre>{{ domain.dns.join("\n") }}</pre></p>
	<btn class="btn-primary" @click="confirm" icon="rotate">{{ $t('btn.verify') }}</btn>
	</div>
	</div>
	<div v-if="domain.isConfirmed" class="card-body" id="domain-config">
	<h5 class="mb-3">{{ $t('domain.config') }}</h5>
	<div class="card-text">
	<p>{{ $t('domain.config-intro', { app: $root.appName }) }}</p>
	<p>{{ $t('domain.config-sample') }} <pre>{{ domain.mx.join("\n") }}</pre></p>
	<p>{{ $t('domain.config-hint') }}</p>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	<div class="card-body">
	<form @submit.prevent="submitSettings">
	<div class="row mb-3">
	<label for="spf_whitelist" class="col-sm-4 col-form-label">{{ $t('domain.spf-whitelist') }}</label>
	<div class="col-sm-8">
	<list-input id="spf_whitelist" name="spf_whitelist" :list="spf_whitelist"></list-input>
	<small id="spf-hint" class="text-muted d-block mt-2">
	{{ $t('domain.spf-whitelist-text') }}
	<span class="d-block" v-html="$t('domain.spf-whitelist-ex')"></span>
	</small>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	- <div id="delete-warning" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('domain.delete-domain', { domain: domain.namespace }) }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <p>{{ $t('domain.delete-text') }}</p>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-danger modal-action" @click="deleteDomain()" icon="trash-can">{{ $t('btn.delete') }}</btn>
	- </div>
	- </div>
	- </div>
	- </div>
	+
	+ <modal-dialog id="delete-warning" ref="deleteDialog" @click="deleteDomain()" :buttons="['delete']" :cancel-focus="true"
	+ :title="$t('domain.delete-domain', { domain: domain.namespace })"
	+ >
	+ <p>{{ $t('domain.delete-text') }}</p>
	+ </modal-dialog>
	</div>
	</template>

	<script>
	- import { Modal } from 'bootstrap'
	import ListInput from '../Widgets/ListInput'
	+ import ModalDialog from '../Widgets/ModalDialog'
	import PackageSelect from '../Widgets/PackageSelect'
	import StatusComponent from '../Widgets/Status'
	import SubscriptionSelect from '../Widgets/SubscriptionSelect'

	import { library } from '@fortawesome/fontawesome-svg-core'

	library.add(
	require('@fortawesome/free-solid-svg-icons/faRotate').definition,
	)

	export default {
	components: {
	ListInput,
	+ ModalDialog,
	PackageSelect,
	StatusComponent,
	SubscriptionSelect
	},
	data() {
	return {
	domain_id: null,
	domain: {},
	spf_whitelist: [],
	status: {}
	}
	},
	created() {
	this.domain_id = this.$route.params.domain

	if (this.domain_id !== 'new') {
	axios.get('/api/v4/domains/' + this.domain_id, { loader: true })
	.then(response => {
	this.domain = response.data
	this.spf_whitelist = this.domain.config.spf_whitelist \|\| []

	if (!this.domain.isConfirmed) {
	$('#domain-verify button').focus()
	}

	this.status = response.data.statusInfo
	})
	.catch(this.$root.errorHandler)
	}
	},
	mounted() {
	$('#namespace').focus()
	- $('#delete-warning')[0].addEventListener('shown.bs.modal', event => {
	- $(event.target).find('button.modal-cancel').focus()
	- })
	},
	methods: {
	confirm() {
	axios.get('/api/v4/domains/' + this.domain_id + '/confirm')
	.then(response => {
	if (response.data.status == 'success') {
	this.domain.isConfirmed = true
	this.status = response.data.statusInfo
	}

	if (response.data.message) {
	this.$toast[response.data.status](response.data.message)
	}
	})
	},
	deleteDomain() {
	// Delete the domain from the confirm dialog
	axios.delete('/api/v4/domains/' + this.domain_id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'domains' })
	}
	})
	},
	- showDeleteConfirmation() {
	- // Display the warning
	- new Modal('#delete-warning').show()
	- },
	statusUpdate(domain) {
	this.domain = Object.assign({}, this.domain, domain)
	},
	submit() {
	this.$root.clearFormValidation($('#general form'))

	let post = this.$root.pick(this.domain, ['namespace'])

	post.package = $('#domain-packages input:checked').val()

	axios.post('/api/v4/domains', post)
	.then(response => {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'domains' })
	})
	},
	submitSettings() {
	this.$root.clearFormValidation($('#settings form'))

	const post = this.$root.pick(this, ['spf_whitelist'])

	axios.post('/api/v4/domains/' + this.domain_id + '/config', post)
	.then(response => {
	this.$toast.success(response.data.message)
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
	index bc75a813..2bfd5379 100644
	--- a/src/resources/vue/Meet/Room.vue
	+++ b/src/resources/vue/Meet/Room.vue
	@@ -1,646 +1,600 @@
	<template>
	<div id="meet-component">
	<div id="meet-session-toolbar" class="hidden">
	<span id="meet-counter" :title="$t('meet.partcnt')"><svg-icon icon="users"></svg-icon> <span></span></span>
	<span id="meet-session-logo" v-html="$root.logo()"></span>
	<div id="meet-session-menu">
	<button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="$t('meet.menu-audio-' + (audioActive ? 'mute' : 'unmute'))">
	<svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon>
	</button>
	<button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="$t('meet.menu-video-' + (videoActive ? 'mute' : 'unmute'))">
	<svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon>
	</button>
	<button :class="'btn link-screen' + (screenActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen \|\| !isPublisher()" :title="$t('meet.menu-screen')">
	<svg-icon icon="desktop"></svg-icon>
	</button>
	<button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="$t('meet.menu-hand-' + (handRaised ? 'lower' : 'raise'))">
	<svg-icon icon="hand"></svg-icon>
	</button>
	<span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown">
	<button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-bs-toggle="dropdown"
	:title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false"
	>
	<svg-icon icon="headphones"></svg-icon>
	<span class="badge bg-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
	</button>
	<div class="dropdown-menu">
	<a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- {{ $t('form.none') }} -</a>
	<a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code"
	:class="'dropdown-item' + (session.channel == code ? ' active' : '')"
	>{{ $t('lang.' + code) }}</a>
	</div>
	</span>
	<button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" :title="$t('meet.menu-chat')">
	<svg-icon icon="comment"></svg-icon>
	</button>
	<button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')">
	<svg-icon icon="expand"></svg-icon>
	</button>
	<button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')">
	<svg-icon icon="compress"></svg-icon>
	</button>
	- <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')">
	+ <button class="btn link-options" v-if="isRoomOwner()" @click="$refs.optionsDialog.show()" :title="$t('meet.options')">
	<svg-icon icon="gear"></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-lines"></svg-icon></div>
	</div>
	<div id="meet-session"></div>
	<div id="meet-chat">
	<div class="chat"></div>
	<div class="chat-input m-2">
	<textarea class="form-control" rows="1"></textarea>
	</div>
	</div>
	</div>

	<logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form>

	- <div id="leave-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('meet.leave-title') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <p>{{ $t('meet.leave-body') }}</p>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
	- </div>
	+ <modal-dialog id="leave-dialog" ref="leaveDialog" :title="$t('meet.leave-title')">
	+ <p>{{ $t('meet.leave-body') }}</p>
	+ </modal-dialog>
	+
	+ <modal-dialog id="media-setup-dialog" ref="setupDialog" :title="$t('meet.media-title')">
	+ <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>
	- </div>
	-
	- <div id="media-setup-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('meet.media-title') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <form class="media-setup-form">
	- <div class="media-setup-preview"></div>
	- <div class="input-group mt-2">
	- <label for="setup-mic" class="input-group-text mb-0" :title="$t('meet.mic')">
	- <svg-icon icon="microphone"></svg-icon>
	- </label>
	- <select class="form-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange">
	- <option value="">{{ $t('form.none') }}</option>
	- <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
	- </select>
	- </div>
	- <div class="input-group mt-2">
	- <label for="setup-cam" class="input-group-text mb-0" :title="$t('meet.cam')">
	- <svg-icon icon="video"></svg-icon>
	- </label>
	- <select class="form-select" id="setup-cam" v-model="camera" @change="setupCameraChange">
	- <option value="">{{ $t('form.none') }}</option>
	- <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
	- </select>
	- </div>
	- </form>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
	- </div>
	+ <div 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>
	- </div>
	- </div>
	+ </form>
	+ </modal-dialog>

	- <room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></room-options>
	- <room-stats ref="roomStatsDialog" :stats="stats" :room="room"></room-stats>
	+ <room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate" ref="optionsDialog"></room-options>
	+ <room-stats ref="statsDialog" :room="room"></room-stats>
	</div>
	</template>

	<script>
	- import { Modal, Dropdown } from 'bootstrap'
	+ import { Dropdown } from 'bootstrap'
	import { Media } from '../../js/meet/media.js'
	import { Room as Meet } from '../../js/meet/room.js'
	import { Roles } from '../../js/meet/constants.js'
	+ import ModalDialog from '../Widgets/ModalDialog'
	import StatusMessage from '../Widgets/StatusMessage'
	import LogonForm from '../Login'
	import RoomOptions from './RoomOptions'
	import RoomStats from './RoomStats'

	import { library } from '@fortawesome/fontawesome-svg-core'

	library.add(
	require('@fortawesome/free-solid-svg-icons/faComment').definition,
	require('@fortawesome/free-solid-svg-icons/faCompress').definition,
	require('@fortawesome/free-solid-svg-icons/faCrown').definition,
	require('@fortawesome/free-solid-svg-icons/faDesktop').definition,
	require('@fortawesome/free-solid-svg-icons/faExpand').definition,
	require('@fortawesome/free-solid-svg-icons/faHand').definition,
	require('@fortawesome/free-solid-svg-icons/faHeadphones').definition,
	require('@fortawesome/free-solid-svg-icons/faGear').definition,
	require('@fortawesome/free-solid-svg-icons/faKey').definition,
	require('@fortawesome/free-solid-svg-icons/faMicrophone').definition,
	require('@fortawesome/free-solid-svg-icons/faMicrophoneLines').definition,
	require('@fortawesome/free-solid-svg-icons/faMicrophoneSlash').definition,
	require('@fortawesome/free-solid-svg-icons/faPowerOff').definition,
	require('@fortawesome/free-solid-svg-icons/faUser').definition,
	require('@fortawesome/free-solid-svg-icons/faUsers').definition,
	require('@fortawesome/free-solid-svg-icons/faVideo').definition,
	require('@fortawesome/free-solid-svg-icons/faVideoSlash').definition,
	require('@fortawesome/free-solid-svg-icons/faVolumeMute').definition,
	)

	let roomRequest
	- let statsRequest
	const authHeader = 'X-Meet-Auth-Token'

	export default {
	components: {
	LogonForm,
	+ ModalDialog,
	RoomOptions,
	RoomStats,
	StatusMessage
	},
	data() {
	return {
	setup: {
	cameras: [],
	microphones: [],
	},
	canShareScreen: false,
	camera: '',
	channels: [],
	languages: {
	en: 'lang.en',
	de: 'lang.de',
	fr: 'lang.fr',
	it: 'lang.it'
	},
	meet: null,
	microphone: '',
	nickname: '',
	password: '',
	room: null,
	roomState: 'init',
	roomStateLabels: {
	init: 'meet.status-init',
	323: 'meet.status-323',
	324: 'meet.status-324',
	325: 'meet.status-325',
	326: 'meet.status-326',
	327: 'meet.status-327',
	404: 'meet.status-404',
	429: 'meet.status-429',
	500: 'meet.status-500'
	},
	session: {},
	- stats: {},
	audioActive: false,
	videoActive: false,
	chatActive: false,
	handRaised: false,
	screenActive: false
	}
	},
	mounted() {
	this.room = this.$route.params.room

	// Initialize Meet client and do some basic checks
	this.meet = new Meet($('#meet-session')[0]);
	this.canShareScreen = this.meet.isScreenSharingSupported()

	// Check the room and init the session
	this.initSession()

	// Setup the room UI
	this.setupSession()

	// Configure dialog events
	- $('#leave-dialog')[0].addEventListener('hide.bs.modal', () => {
	- // FIXME: Where exactly the user should land? Currently he'll land
	- // on dashboard (if he's logged in) or login form (if he's not).
	-
	- this.$router.push({ name: 'dashboard' })
	+ this.$refs.leaveDialog.events({
	+ hide: () => {
	+ // FIXME: Where exactly the user should land? Currently he'll land
	+ // on dashboard (if he's logged in) or login form (if he's not).
	+ this.$router.push({ name: 'dashboard' })
	+ }
	})

	- const dialog = $('#media-setup-dialog')[0]
	- dialog.addEventListener('show.bs.modal', () => { this.setupSession() })
	- dialog.addEventListener('hide.bs.modal', () => { this.meet.setupStop() })
	-
	- this.roomStatsDialog = new Modal('#room-stats-dialog')
	+ this.$refs.setupDialog.events({
	+ show: () => { this.setupSession() },
	+ hide: () => { this.meet.setupStop() }
	+ })
	},
	beforeDestroy() {
	clearTimeout(roomRequest)
	- clearInterval(statsRequest)

	$('#app').removeClass('meet')

	if (this.meet) {
	this.meet.leaveRoom()
	}

	delete axios.defaults.headers.common[authHeader]

	$(document.body).off('keydown.meet')
	},
	methods: {
	authSuccess() {
	// The user authentication succeeded, we still don't know it's really the room owner
	this.initSession()

	$('#meet-setup').removeClass('hidden')
	$('#meet-auth').addClass('hidden')
	},
	configUpdate(config) {
	this.session.config = Object.assign({}, this.session.config, config)
	},
	- async refreshStats() {
	- let stats = await this.meet.getStats()
	- this.stats = stats
	- },
	initSession(init) {
	const button = $('#join-button').prop('disabled', true)

	const post = {
	password: this.password,
	nickname: this.nickname,
	screenShare: this.canShareScreen ? 1 : 0,
	init: init ? 1 : 0,
	picture: init ? this.makePicture() : '',
	requestId: this.requestId(),
	canPublish: !!this.camera \|\| !!this.microphone
	}

	$('#setup-password,#setup-nickname').removeClass('is-invalid')

	axios.post('/api/v4/meet/rooms/' + this.room, post, { ignoreErrors: true })
	.then(response => {
	button.prop('disabled', false)

	// We already have token, the response is redundant
	if (this.roomState == 'ready' && this.session.token) {
	return
	}

	this.roomState = 'ready'
	this.session = response.data

	if (init) {
	this.joinSession()
	}
	})
	.catch(error => {
	if (!error.response) {
	console.error(error)
	return
	}

	const data = error.response.data \|\| {}

	if (data.code) {
	this.roomState = data.code
	} else {
	this.roomState = error.response.status
	}

	button.prop('disabled', this.roomState == 'init' \|\| this.roomState == 327 \|\| this.roomState >= 400)

	if (data.config) {
	this.session.config = data.config
	}

	switch (this.roomState) {
	case 323:
	// Waiting for the owner to open the room...
	// Update room state every 10 seconds
	roomRequest = setTimeout(() => { this.initSession() }, 10000)
	break;

	case 324:
	// Room is ready for the owner, but the 'init' was not requested yet
	clearTimeout(roomRequest)
	break;

	case 325:
	// Missing/invalid password
	if (init) {
	$('#setup-password').addClass('is-invalid').focus()
	}
	break;

	case 326:
	// Locked room prerequisites error
	if (init && !$('#setup-nickname').val()) {
	$('#setup-nickname').addClass('is-invalid').focus()
	}
	break;

	case 327:
	// Waiting for the owner's approval to join
	// Update room state every 10 seconds
	roomRequest = setTimeout(() => { this.initSession(true) }, 10000)
	break;

	case 429:
	// Rate limited, wait and try again
	const waitTime = error.response.headers['retry-after'] \|\| 10
	roomRequest = setTimeout(() => { this.initSession(init) }, waitTime * 1000)
	break;

	default:
	if (this.roomState >= 400 && this.roomState != 404) {
	this.roomState = 500
	}
	}
	})

	if (document.fullscreenEnabled) {
	$('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden')
	}
	},
	isModerator() {
	return this.isRoomOwner() \|\| (!!this.session.role && (this.session.role & Roles.MODERATOR) > 0)
	},
	isPublisher() {
	return !!this.session.role && (this.session.role & Roles.PUBLISHER) > 0
	},
	isRoomOwner() {
	return !!this.session.role && (this.session.role & Roles.OWNER) > 0
	},
	isRoomReady() {
	return ['ready', 322, 324, 325, 326, 327].includes(this.roomState)
	},
	// Entering the room
	joinSession() {
	// The form can be submitted not only via the submit button,
	// make sure the submit is allowed
	if ($('#meet-setup [type=submit]').prop('disabled')) {
	return;
	}

	if (this.roomState == 323) {
	$('#meet-setup').addClass('hidden')
	$('#meet-auth').removeClass('hidden')
	return
	}

	if (this.roomState != 'ready' && !this.session.token) {
	this.initSession(true)
	return
	}

	clearTimeout(roomRequest)
	- clearInterval(statsRequest)

	this.session.nickname = this.nickname
	this.session.languages = this.languages
	this.session.menuElement = $('#meet-session-menu')[0]
	this.session.chatElement = $('#meet-chat')[0]
	this.session.queueElement = $('#meet-queue')[0]
	this.session.counterElement = $('#meet-counter span')[0]
	this.session.translate = (label, args) => this.$t(label, args)
	this.session.toast = this.$toast
	this.session.onSuccess = () => {
	$('#app').addClass('meet')
	$('#meet-setup').addClass('hidden')
	$('#meet-session-toolbar,#meet-session-layout').removeClass('hidden')
	}
	this.session.onError = () => {
	this.roomState = 500
	}
	this.session.onDestroy = event => {
	// TODO: Display different message for every other reason
	if (event.reason == 'session-closed' && !this.isRoomOwner()) {
	- new Modal('#leave-dialog').show()
	+ this.$refs.leaveDialog.show()
	}
	}
	this.session.onUpdate = data => { this.updateSession(data) }
	this.session.onMediaSetup = () => { this.setupMedia() }

	this.meet.joinRoom(this.session)

	- this.refreshStats()
	-
	this.keyboardShortcuts()
	},
	keyboardShortcuts() {
	$(document.body).on('keydown.meet', e => {
	if ($(e.target).is('select,input,textarea')) {
	return
	}

	// Self-Mute with 'm' key
	if (e.key == 'm' \|\| e.key == 'M') {
	if ($('#meet-session-menu').find('.link-audio:not(:disabled)').length) {
	this.switchSound()
	}
	}
	// Show stats with '?' key
	if (e.key == '?') {
	- this.roomStats()
	+ this.$refs.statsDialog.toggle(this.meet)
	}
	})
	},
	logout() {
	this.meet.leaveRoom(true)
	this.meet = null
	this.$router.push({ name: 'dashboard' })
	},
	makePicture() {
	return (new Media()).makePicture($('#meet-setup video')[0]) \|\| '';
	},
	requestId() {
	const key = 'kolab-meet-uid'

	if (!this.reqId) {
	this.reqId = localStorage.getItem(key)
	}

	if (!this.reqId) {
	// We store the identifier in the browser to make sure that it is the same after
	// page refresh for the avg user. This will not prevent hackers from sending
	// the new identifier on every request.
	// If we're afraid of a room owner being spammed with join requests we might invent
	// a way to silently ignore all join requests after the owner pressed some button
	// stating "all attendees already joined, lock the room for good!".

	// This will create max. 24-char numeric string
	this.reqId = (String(Date.now()) + String(Math.random()).substring(2)).substring(0, 24)
	localStorage.setItem(key, this.reqId)
	}

	return this.reqId
	},
	roomOptions() {
	new Modal('#room-options-dialog').show()
	},
	- roomStats() {
	- clearInterval(statsRequest)
	- if (this.roomStatsDialog.visible) {
	- this.roomStatsDialog.hide()
	- } else {
	- this.refreshStats()
	- statsRequest = setInterval(() => {
	- this.refreshStats()
	- }, 3000)
	- this.roomStatsDialog.show()
	- }
	- },
	setupMedia() {
	const dialog = $('#media-setup-dialog')[0]

	if (!$('video', dialog).length) {
	$('#meet-setup').find('video,div.volume').appendTo($('.media-setup-preview', dialog))
	}

	- new Modal(dialog).show()
	+ this.$refs.setupDialog.show()
	},
	async setupSession() {
	this.meet.setupStart({
	videoElement: $('#meet-setup video')[0] \|\| $('#media-setup-dialog video')[0],
	volumeElement: $('#meet-setup .volume')[0] \|\| $('#media-setup-dialog .volume')[0],
	onSuccess: setup => {
	this.setup = setup
	this.microphone = setup.audioSource
	this.camera = setup.videoSource
	this.audioActive = setup.audioActive
	this.videoActive = setup.videoActive
	},
	onError: error => {
	console.warn("Media setup failed: ", error);
	this.audioActive = false
	this.videoActive = false
	}
	})
	},
	async setupCameraChange() {
	this.videoActive = await this.meet.setupSetVideoDevice(this.camera)
	},
	async setupMicrophoneChange() {
	this.audioActive = await this.meet.setupSetAudioDevice(this.microphone)
	},
	switchChannel(e) {
	this.meet.switchChannel($(e.target).data('code'))
	// FIXME: Why is the menu not closing by itself?
	new Dropdown('#meet-session-menu .link-channel').hide()
	},
	switchChat() {
	let chat = $('#meet-chat')
	let enabled = chat.is('.open')

	chat.toggleClass('open')

	if (!enabled) {
	chat.find('textarea').focus()
	}

	this.chatActive = !enabled

	// Trigger resize, so participant matrix can update its layout
	window.dispatchEvent(new Event('resize'));
	},
	switchFullscreen() {
	const element = this.$el

	$(element).off('fullscreenchange').on('fullscreenchange', (e) => {
	let enabled = document.fullscreenElement == element
	let buttons = $('#meet-session-menu').find('.link-fullscreen')

	buttons.first()[enabled ? 'addClass' : 'removeClass']('hidden')
	buttons.last()[!enabled ? 'addClass' : 'removeClass']('hidden')
	})

	if (document.fullscreenElement) {
	document.exitFullscreen()
	} else {
	element.requestFullscreen()
	}
	},
	async switchHand() {
	this.handRaised = await this.meet.raiseHand(!this.handRaised)
	},
	async switchSound() {
	this.audioActive = await this.meet.switchAudio()
	},
	async switchVideo() {
	this.videoActive = await this.meet.switchVideo()
	},
	async switchScreen() {
	this.screenActive = await this.meet.switchScreen()
	},
	updateSession(data) {
	this.session = Object.assign({}, this.session, data)
	this.channels = data.channels \|\| []

	const isPublisher = this.isPublisher()

	this.videoActive = isPublisher ? data.videoActive : false
	this.audioActive = isPublisher ? data.audioActive : false
	this.handRaised = data.raisedHand
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Meet/RoomOptions.vue b/src/resources/vue/Meet/RoomOptions.vue
	index bbf5ff9c..0dd81d2c 100644
	--- a/src/resources/vue/Meet/RoomOptions.vue
	+++ b/src/resources/vue/Meet/RoomOptions.vue
	@@ -1,112 +1,105 @@
	<template>
	- <div v-if="config">
	- <div id="room-options-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('meet.options') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <form id="room-options-password">
	- <div id="password-input" class="input-group input-group-activable mb-2">
	- <span class="input-group-text label">{{ $t('meet.password') }}:</span>
	- <span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span>
	- <span v-else id="password-input-text" class="input-group-text text-muted">{{ $t('meet.password-none') }}</span>
	- <input type="text" :value="config.password" name="password" class="form-control rounded-start activable">
	- <btn @click="passwordSave" id="password-save-btn" class="btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</btn>
	- <btn v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn-outline-danger rounded">{{ $t('meet.password-clear') }}</btn>
	- <btn v-else @click="passwordSet" id="password-set-btn" class="btn-outline-primary rounded">{{ $t('meet.password-set') }}</btn>
	- </div>
	- <small class="text-muted">
	- {{ $t('meet.password-text') }}
	- </small>
	- </form>
	- <hr>
	- <form id="room-options-lock">
	- <div id="room-lock" class="mb-2">
	- <label for="room-lock-input">{{ $t('meet.lock') }}:</label>
	- <input type="checkbox" id="room-lock-input" name="lock" value="1" :checked="config.locked" @click="lockSave">
	- </div>
	- <small class="text-muted">
	- {{ $t('meet.lock-text') }}
	- </small>
	- </form>
	- <hr>
	- <form id="room-options-nomedia">
	- <div id="room-nomedia" class="mb-2">
	- <label for="room-nomedia-input">{{ $t('meet.nomedia') }}:</label>
	- <input type="checkbox" id="room-nomedia-input" name="lock" value="1" :checked="config.nomedia" @click="nomediaSave">
	- </div>
	- <small class="text-muted">
	- {{ $t('meet.nomedia-text') }}
	- </small>
	- </form>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
	- </div>
	- </div>
	+ <modal-dialog v-if="config" id="room-options-dialog" ref="dialog" :title="$t('meet.options')">
	+ <form id="room-options-password">
	+ <div id="password-input" class="input-group input-group-activable mb-2">
	+ <span class="input-group-text label">{{ $t('meet.password') }}:</span>
	+ <span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span>
	+ <span v-else id="password-input-text" class="input-group-text text-muted">{{ $t('meet.password-none') }}</span>
	+ <input type="text" :value="config.password" name="password" class="form-control rounded-start activable">
	+ <btn @click="passwordSave" id="password-save-btn" class="btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</btn>
	+ <btn v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn-outline-danger rounded">{{ $t('meet.password-clear') }}</btn>
	+ <btn v-else @click="passwordSet" id="password-set-btn" class="btn-outline-primary rounded">{{ $t('meet.password-set') }}</btn>
	</div>
	- </div>
	- </div>
	+ <small class="text-muted">
	+ {{ $t('meet.password-text') }}
	+ </small>
	+ </form>
	+ <hr>
	+ <form id="room-options-lock">
	+ <div id="room-lock" class="mb-2">
	+ <label for="room-lock-input">{{ $t('meet.lock') }}:</label>
	+ <input type="checkbox" id="room-lock-input" name="lock" value="1" :checked="config.locked" @click="lockSave">
	+ </div>
	+ <small class="text-muted">
	+ {{ $t('meet.lock-text') }}
	+ </small>
	+ </form>
	+ <hr>
	+ <form id="room-options-nomedia">
	+ <div id="room-nomedia" class="mb-2">
	+ <label for="room-nomedia-input">{{ $t('meet.nomedia') }}:</label>
	+ <input type="checkbox" id="room-nomedia-input" name="lock" value="1" :checked="config.nomedia" @click="nomediaSave">
	+ </div>
	+ <small class="text-muted">
	+ {{ $t('meet.nomedia-text') }}
	+ </small>
	+ </form>
	+ </modal-dialog>
	</template>

	<script>
	+ import ModalDialog from '../Widgets/ModalDialog'
	+
	export default {
	+ components: {
	+ ModalDialog
	+ },
	props: {
	config: { type: Object, default: () => null },
	room: { type: String, default: () => null }
	},
	mounted() {
	$('#room-options-dialog')[0].addEventListener('show.bs.modal', e => {
	$(e.target).find('.input-group-activable.active').removeClass('active')
	})
	},
	methods: {
	configSave(name, value, callback) {
	const post = { [name]: value }

	axios.post('/api/v4/meet/rooms/' + this.room + '/config', post)
	.then(response => {
	this.$set(this.config, name, value)
	if (callback) {
	callback(response.data)
	}
	this.$emit('config-update', this.config)
	this.$toast.success(response.data.message)
	})
	},
	lockSave(e) {
	this.configSave('locked', $(e.target).prop('checked') ? 1 : 0)
	},
	nomediaSave(e) {
	this.configSave('nomedia', $(e.target).prop('checked') ? 1 : 0)
	},
	passwordClear() {
	this.configSave('password', '')
	},
	passwordSave() {
	this.configSave('password', $('#password-input input').val(), () => {
	$('#password-input').removeClass('active')
	})
	},
	passwordSet() {
	$('#password-input').addClass('active').find('input')
	.off('keydown.pass')
	.on('keydown.pass', e => {
	if (e.which == 13) {
	// On ENTER save the password
	this.passwordSave()
	e.preventDefault()
	} else if (e.which == 27) {
	// On ESC escape from the input, but not the dialog
	$('#password-input').removeClass('active')
	e.stopPropagation()
	}
	})
	.focus()
	+ },
	+ show() {
	+ this.$refs.dialog.show()
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Meet/RoomStats.vue b/src/resources/vue/Meet/RoomStats.vue
	index 330951c1..a2fb4f9d 100644
	--- a/src/resources/vue/Meet/RoomStats.vue
	+++ b/src/resources/vue/Meet/RoomStats.vue
	@@ -1,64 +1,81 @@
	<template>
	- <div id="room-stats-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content" style="max-height: 90vh">
	- <div class="modal-header">
	- <h5 class="modal-title">Statistics</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	- </div>
	- <div class="modal-body overflow-auto">
	- <ul class="list-group list-group-flush">
	- <li class="list-group-item">
	- <span class="fw-bold">Room Id:</span>
	- <pre class="text-muted m-0">{{ room }}</pre>
	- </li>
	- <li class="list-group-item">
	- <span class="fw-bold">Mediaserver Room Id:</span>
	- <pre class="text-muted m-0">{{ stats.roomId }}</pre>
	- </li>
	- <li class="list-group-item">
	- <span class="fw-bold">Send Transport state:</span>
	- <pre class="text-muted m-0">{{ stats.sendTransportState }}</pre>
	- <pre class="text-muted m-0">{{ toText(stats.sendTransportStats) }}</pre>
	- </li>
	- <li class="list-group-item">
	- <span class="fw-bold">Receive Transport state:</span>
	- <pre class="text-muted m-0">{{ stats.receiveTransportState }}</pre>
	- <pre class="text-muted m-0">{{ toText(stats.receiveTransportStats) }}</pre>
	- </li>
	- <li class="list-group-item">
	- <span class="fw-bold">Consumers:</span>
	- <pre class="text-muted m-0">{{ toText(stats.consumerStats) }}</pre>
	- </li>
	- <li class="list-group-item">
	- <span class="fw-bold">Camera Producer:</span>
	- <pre class="text-muted m-0">{{ toText(stats.camProducerStats) }}</pre>
	- </li>
	- <li class="list-group-item">
	- <span class="fw-bold">Mic Producer:</span>
	- <pre class="text-muted m-0">{{ toText(stats.micProducerStats) }}</pre>
	- </li>
	- <li class="list-group-item">
	- <span class="fw-bold">Screen Producer:</span>
	- <pre class="text-muted m-0">{{ toText(stats.screenProducerStats) }}</pre>
	- </li>
	- </ul>
	- </div>
	- </div>
	- </div>
	- </div>
	+ <modal-dialog id="room-stats-dialog" ref="dialog" title="Statistics">
	+ <p>
	+ <span class="fw-bold">Room Id:</span>
	+ <pre class="text-muted m-0">{{ room }}</pre>
	+ </p>
	+ <p>
	+ <span class="fw-bold">Mediaserver Room Id:</span>
	+ <pre class="text-muted m-0">{{ stats.roomId }}</pre>
	+ </p>
	+ <p>
	+ <span class="fw-bold">Sender Transport:</span>
	+ <pre class="text-muted m-0">{{ stats.sendTransportState }}</pre>
	+ <pre class="text-muted m-0">{{ toText(stats.sendTransportStats) }}</pre>
	+ </p>
	+ <p>
	+ <span class="fw-bold">Receiver Transport:</span>
	+ <pre class="text-muted m-0">{{ stats.receiveTransportState }}</pre>
	+ <pre class="text-muted m-0">{{ toText(stats.receiveTransportStats) }}</pre>
	+ </p>
	+ <p>
	+ <span class="fw-bold">Consumers:</span>
	+ <pre class="text-muted m-0">{{ toText(stats.consumerStats) }}</pre>
	+ </p>
	+ <p>
	+ <span class="fw-bold">Camera Producer:</span>
	+ <pre class="text-muted m-0">{{ toText(stats.camProducerStats) }}</pre>
	+ </p>
	+ <p>
	+ <span class="fw-bold">Mic Producer:</span>
	+ <pre class="text-muted m-0">{{ toText(stats.micProducerStats) }}</pre>
	+ </p>
	+ <p>
	+ <span class="fw-bold">Screen Producer:</span>
	+ <pre class="text-muted m-0">{{ toText(stats.screenProducerStats) }}</pre>
	+ </p>
	+ </modal-dialog>
	</template>

	<script>
	+ import ModalDialog from '../Widgets/ModalDialog'
	+
	export default {
	+ components: {
	+ ModalDialog
	+ },
	props: {
	- stats: { type: Object, default: () => null },
	room: { type: String, default: () => null }
	},
	+ data() {
	+ return {
	+ stats: {}
	+ }
	+ },
	+ mounted() {
	+ this.$refs.dialog.events({
	+ show: () => {
	+ clearInterval(this.statsRequest)
	+ this.refreshStats()
	+ this.statsRequest = setInterval(() => { this.refreshStats() }, 3000)
	+ },
	+ hide: () => {
	+ clearInterval(this.statsRequest)
	+ }
	+ })
	+ },
	methods: {
	+ async refreshStats() {
	+ let stats = await this.meet.getStats()
	+ this.stats = stats
	+ },
	+ toggle(meet) {
	+ this.meet = meet
	+ this.$refs.dialog[this.statsRequest ? 'hide' : 'show']()
	+ },
	toText(o) {
	return JSON.stringify(o, null, ' ')
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Reseller/Invitations.vue b/src/resources/vue/Reseller/Invitations.vue
	index 63cbe7c3..3a32086a 100644
	--- a/src/resources/vue/Reseller/Invitations.vue
	+++ b/src/resources/vue/Reseller/Invitations.vue
	@@ -1,220 +1,204 @@
	<template>
	<div class="container">
	<div class="card" id="invitations">
	<div class="card-body">
	<div class="card-title">
	{{ $t('invitation.title') }}
	</div>
	<div class="card-text">
	<div class="mb-2 d-flex">
	<list-search :placeholder="$t('invitation.search')" :on-search="searchInvitations"></list-search>
	- <btn class="btn-success create-invite ms-1" @click="inviteUserDialog" icon="envelope-open-text">{{ $t('invitation.create') }}</btn>
	+ <btn class="btn-success create-invite ms-1" @click="$refs.createDialog.show()" icon="envelope-open-text">{{ $t('invitation.create') }}</btn>
	</div>

	<list-table id="invitations-list" :list="invitations" :setup="setup">
	<template #email="{ item }">
	<svg-icon icon="envelope-open-text" :class="statusClass(item)" :title="$t('invitation.status-' + statusLabel(item))"></svg-icon>
	<span>{{ item.email }}</span>
	</template>
	<template #buttons="{ item }">
	<btn class="text-danger button-delete p-0 ms-1" @click="deleteInvite(item.id)" icon="trash-can">
	<span class="btn-label">{{ $t('btn.delete') }}</span>
	</btn>
	<btn class="button-resend p-0 ms-1" :disabled="item.isNew \|\| item.isCompleted" @click="resendInvite(item.id)" icon="rotate-left">
	<span class="btn-label">{{ $t('btn.resend') }}</span>
	</btn>
	</template>
	</list-table>
	<list-more v-if="hasMore" :on-click="loadInvitations"></list-more>
	</div>
	</div>
	</div>

	- <div id="invite-create" 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('invitation.create-title') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <form>
	- <p>{{ $t('invitation.create-email') }}</p>
	- <div>
	- <input id="email" type="text" class="form-control" name="email">
	- </div>
	- <div class="form-separator"><hr><span>{{ $t('form.or') }}</span></div>
	- <p>{{ $t('invitation.create-csv') }}</p>
	- <div>
	- <input id="file" type="file" class="form-control" name="csv">
	- </div>
	- </form>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-primary modal-action" icon="paper-plane" @click="inviteUser()">{{ $t('invitation.send') }}</btn>
	- </div>
	+ <modal-dialog id="invite-create" ref="createDialog" :title="$t('invitation.create-title')" @click="inviteUser()"
	+ :buttons="[{ className: 'btn-primary modal-action', icon: 'paper-plane', label: 'invitation.send' }]"
	+ >
	+ <form>
	+ <p>{{ $t('invitation.create-email') }}</p>
	+ <div>
	+ <input id="email" type="text" class="form-control" name="email">
	</div>
	- </div>
	- </div>
	+ <div class="form-separator"><hr><span>{{ $t('form.or') }}</span></div>
	+ <p>{{ $t('invitation.create-csv') }}</p>
	+ <div>
	+ <input id="file" type="file" class="form-control" name="csv">
	+ </div>
	+ </form>
	+ </modal-dialog>
	</div>
	</template>

	<script>
	- import { Modal } from 'bootstrap'
	import ListTools from '../Widgets/ListTools'
	+ import ModalDialog from '../Widgets/ModalDialog'

	import { library } from '@fortawesome/fontawesome-svg-core'

	library.add(
	require('@fortawesome/free-solid-svg-icons/faEnvelopeOpenText').definition,
	require('@fortawesome/free-solid-svg-icons/faPaperPlane').definition,
	require('@fortawesome/free-solid-svg-icons/faRotateLeft').definition,
	)

	export default {
	+ components: {
	+ ModalDialog
	+ },
	mixins: [ ListTools ],
	data() {
	return {
	invitations: [],
	setup: {
	buttons: true,
	model: 'invitation',
	columns: [
	{
	prop: 'email',
	label: 'user.ext-email',
	className: 'email',
	contentSlot: 'email'
	},
	{
	prop: 'created',
	className: 'datetime'
	}
	]
	}
	}
	},
	mounted() {
	this.loadInvitations({ init: true })

	- $('#invite-create')[0].addEventListener('shown.bs.modal', event => {
	- $('input', event.target).first().focus()
	+ this.$refs.createDialog.events({
	+ show: (event) => {
	+ const form = $(event.target).find('form')
	+ form.get(0).reset()
	+ this.fileChange({ target: form.find('#file')[0] }) // resets file input label
	+ }
	})
	},
	methods: {
	deleteInvite(id) {
	axios.delete('/api/v4/invitations/' + id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)

	// Remove the invitation record from the list
	const index = this.invitations.findIndex(item => item.id == id)
	this.invitations.splice(index, 1)
	}
	})
	},
	fileChange(e) {
	let label = this.$t('btn.file')
	let files = e.target.files

	if (files.length) {
	label = files[0].name
	if (files.length > 1) {
	label += ', ...'
	}
	}

	$(e.target).next().text(label)
	},
	inviteUser() {
	let dialog = $('#invite-create')
	let post = new FormData()
	let params = { headers: { 'Content-Type': 'multipart/form-data' } }

	post.append('email', dialog.find('#email').val())

	this.$root.clearFormValidation(dialog.find('form'))

	// Append the file to POST data
	let files = dialog.find('#file').get(0).files
	if (files.length) {
	post.append('file', files[0])
	}

	axios.post('/api/v4/invitations', post, params)
	.then(response => {
	if (response.data.status == 'success') {
	- this.dialog.hide()
	+ this.$refs.createDialog.hide()
	this.$toast.success(response.data.message)
	if (response.data.count) {
	this.loadInvitations({ reset: true })
	}
	}
	})
	},
	- inviteUserDialog() {
	- const dialog = $('#invite-create')[0]
	- const form = $('form', dialog)
	-
	- form.get(0).reset()
	- this.fileChange({ target: form.find('#file')[0] }) // resets file input label
	- this.$root.clearFormValidation(form)
	-
	- this.dialog = new Modal(dialog)
	- this.dialog.show()
	- },
	loadInvitations(params) {
	this.listSearch('invitations', '/api/v4/invitations', params)
	},
	resendInvite(id) {
	axios.post('/api/v4/invitations/' + id + '/resend')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)

	// Update the invitation record
	const index = this.invitations.findIndex(item => item.id == id)
	if (index > -1) {
	this.$set(this.invitations, index, response.data.invitation)
	}
	}
	})
	},
	searchInvitations(search) {
	this.loadInvitations({ reset: true, search })
	},
	statusClass(invitation) {
	if (invitation.isCompleted) {
	return 'text-success'
	}

	if (invitation.isFailed) {
	return 'text-danger'
	}

	if (invitation.isSent) {
	return 'text-primary'
	}

	return ''
	},
	statusLabel(invitation) {
	if (invitation.isCompleted) {
	return 'completed'
	}

	if (invitation.isFailed) {
	return 'failed'
	}

	if (invitation.isSent) {
	return 'sent'
	}

	return 'new'
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
	index ec989702..1ea85ed6 100644
	--- a/src/resources/vue/User/Info.vue
	+++ b/src/resources/vue/User/Info.vue
	@@ -1,322 +1,308 @@
	<template>
	<div class="container">
	<status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>

	<div class="card" id="user-info">
	<div class="card-body">
	<div class="card-title" v-if="user_id !== 'new'">{{ $t('user.title') }}
	<btn icon="trash-can" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()">
	{{ $t('user.delete') }}
	</btn>
	</div>
	<div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div>
	<div class="card-text">
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
	{{ $t('form.general') }}
	</a>
	</li>
	<li v-if="user_id !== 'new'" class="nav-item">
	<a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
	<form @submit.prevent="submit" class="card-body">
	<div v-if="user_id !== 'new'" class="row plaintext mb-3">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.statusClass(user) + ' form-control-plaintext'" id="status">{{ $root.statusText(user) }}</span>
	</div>
	</div>
	<div class="row mb-3">
	<label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="first_name" v-model="user.first_name">
	</div>
	</div>
	<div class="row mb-3">
	<label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="last_name" v-model="user.last_name">
	</div>
	</div>
	<div class="row mb-3">
	<label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="organization" v-model="user.organization">
	</div>
	</div>
	<div class="row mb-3">
	<label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email">
	</div>
	</div>
	<div class="row mb-3">
	<label for="aliases-input" class="col-sm-4 col-form-label">{{ $t('user.aliases-email') }}</label>
	<div class="col-sm-8">
	<list-input id="aliases" :list="user.aliases"></list-input>
	</div>
	</div>
	<div class="row mb-3">
	<label for="password" class="col-sm-4 col-form-label">{{ $t('form.password') }}</label>
	<div class="col-sm-8">
	<div v-if="!isSelf" class="btn-group w-100" role="group">
	<input type="checkbox" id="pass-mode-input" value="input" class="btn-check" @change="setPasswordMode" :checked="passwordMode == 'input'">
	<label class="btn btn-outline-secondary" for="pass-mode-input">{{ $t('user.pass-input') }}</label>
	<input type="checkbox" id="pass-mode-link" value="link" class="btn-check" @change="setPasswordMode">
	<label class="btn btn-outline-secondary" for="pass-mode-link">{{ $t('user.pass-link') }}</label>
	</div>
	<password-input v-if="passwordMode == 'input'" :class="isSelf ? '' : 'mt-2'" v-model="user"></password-input>
	<div id="password-link" v-if="passwordMode == 'link' \|\| user.passwordLinkCode" class="mt-2">
	<span>{{ $t('user.pass-link-label') }}</span> <code>{{ passwordLink }}</code>
	<span class="d-inline-block">
	<btn class="btn-link p-1" :icon="['far', 'clipboard']" :title="$t('btn.copy')" @click="passwordLinkCopy"></btn>
	<btn v-if="user.passwordLinkCode" class="btn-link text-danger p-1" icon="trash-can" :title="$t('btn.delete')" @click="passwordLinkDelete"></btn>
	</span>
	<div v-if="!user.passwordLinkCode" class="form-text m-0">{{ $t('user.pass-link-hint') }}</div>
	</div>
	</div>
	</div>
	<div v-if="user_id === 'new'" id="user-packages" class="row mb-3">
	<label class="col-sm-4 col-form-label">{{ $t('user.package') }}</label>
	<package-select class="col-sm-8 pt-sm-1"></package-select>
	</div>
	<div v-if="user_id !== 'new'" id="user-skus" class="row mb-3">
	<label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
	<subscription-select v-if="user.id" class="col-sm-8 pt-sm-1" :object="user"></subscription-select>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	<form @submit.prevent="submitSettings" class="card-body">
	<div class="row checkbox mb-3">
	<label for="greylist_enabled" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label>
	<div class="col-sm-8 pt-2">
	<input type="checkbox" id="greylist_enabled" name="greylist_enabled" value="1" class="form-check-input d-block mb-2" :checked="user.config.greylist_enabled">
	<small id="greylisting-hint" class="text-muted">
	{{ $t('user.greylisting-text') }}
	</small>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	- <div id="delete-warning" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('user.delete-email', { email: user.email }) }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <p>{{ $t('user.delete-text') }}</p>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-danger modal-action" icon="trash-can" @click="deleteUser()">{{ $t('btn.delete') }}</btn>
	- </div>
	- </div>
	- </div>
	- </div>
	+ <modal-dialog id="delete-warning" ref="deleteWarning" :buttons="['delete']" :cancel-focus="true" @click="deleteUser()"
	+ :title="$t('user.delete-email', { email: user.email })"
	+ >
	+ <p>{{ $t('user.delete-text') }}</p>
	+ </modal-dialog>
	</div>
	</template>

	<script>
	- import { Modal } from 'bootstrap'
	import ListInput from '../Widgets/ListInput'
	+ import ModalDialog from '../Widgets/ModalDialog'
	import PackageSelect from '../Widgets/PackageSelect'
	import PasswordInput from '../Widgets/PasswordInput'
	import StatusComponent from '../Widgets/Status'
	import SubscriptionSelect from '../Widgets/SubscriptionSelect'

	import { library } from '@fortawesome/fontawesome-svg-core'

	library.add(
	require('@fortawesome/free-regular-svg-icons/faClipboard').definition,
	)

	export default {
	components: {
	ListInput,
	+ ModalDialog,
	PackageSelect,
	PasswordInput,
	StatusComponent,
	SubscriptionSelect
	},
	data() {
	return {
	passwordLinkCode: '',
	passwordMode: '',
	user_id: null,
	user: { aliases: [], config: [] },
	status: {}
	}
	},
	computed: {
	isSelf: function () {
	return this.user_id == this.$root.authInfo.id
	},
	passwordLink: function () {
	return this.$root.appUrl + '/password-reset/' + this.passwordLinkCode
	}
	},
	created() {
	this.user_id = this.$route.params.user

	if (this.user_id !== 'new') {
	axios.get('/api/v4/users/' + this.user_id, { loader: true })
	.then(response => {
	this.user = response.data
	this.user.first_name = response.data.settings.first_name
	this.user.last_name = response.data.settings.last_name
	this.user.organization = response.data.settings.organization
	this.status = response.data.statusInfo

	this.passwordLinkCode = this.user.passwordLinkCode
	})
	.catch(this.$root.errorHandler)

	if (this.isSelf) {
	this.passwordMode = 'input'
	}
	} else {
	this.passwordMode = 'input'
	}
	},
	mounted() {
	$('#first_name').focus()
	- $('#delete-warning')[0].addEventListener('shown.bs.modal', event => {
	- $(event.target).find('button.modal-cancel').focus()
	- })
	},
	methods: {
	passwordLinkCopy() {
	navigator.clipboard.writeText($('#password-link code').text());
	},
	passwordLinkDelete() {
	this.passwordMode = ''
	$('#pass-mode-link')[0].checked = false

	// Delete the code for real
	axios.delete('/api/v4/password-reset/code/' + this.passwordLinkCode)
	.then(response => {
	this.passwordLinkCode = ''
	this.user.passwordLinkCode = ''
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	}
	})
	},
	setPasswordMode(event) {
	const mode = event.target.checked ? event.target.value : ''

	// In the "new user" mode the password mode cannot be unchecked
	if (!mode && this.user_id === 'new') {
	event.target.checked = true
	return
	}

	this.passwordMode = mode

	if (!event.target.checked) {
	return
	}

	$('#pass-mode-' + (mode == 'link' ? 'input' : 'link'))[0].checked = false

	// Note: we use $nextTick() because we have to wait for the HTML elements to exist
	this.$nextTick().then(() => {
	if (mode == 'link' && !this.passwordLinkCode) {
	axios.post('/api/v4/password-reset/code', {}, { loader: '#password-link' })
	.then(response => {
	this.passwordLinkCode = response.data.short_code + '-' + response.data.code
	})
	} else if (mode == 'input') {
	$('#password').focus();
	}
	})
	},
	submit() {
	this.$root.clearFormValidation($('#general form'))

	let method = 'post'
	let location = '/api/v4/users'
	let post = this.$root.pick(this.user, ['aliases', 'email', 'first_name', 'last_name', 'organization'])

	if (this.user_id !== 'new') {
	method = 'put'
	location += '/' + this.user_id

	let skus = {}
	$('#user-skus input[type=checkbox]:checked').each((idx, input) => {
	let id = $(input).val()
	let range = $(input).parents('tr').first().find('input[type=range]').val()

	skus[id] = range \|\| 1
	})
	post.skus = skus
	} else {
	post.package = $('#user-packages input:checked').val()
	}

	if (this.passwordMode == 'link' && this.passwordLinkCode) {
	post.passwordLinkCode = this.passwordLinkCode
	} else if (this.passwordMode == 'input') {
	post.password = this.user.password
	post.password_confirmation = this.user.password_confirmation
	}

	axios[method](location, post)
	.then(response => {
	if (response.data.statusInfo) {
	this.$root.authInfo.statusInfo = response.data.statusInfo
	}

	this.$toast.success(response.data.message)
	this.$router.push({ name: 'users' })
	})
	},
	submitSettings() {
	this.$root.clearFormValidation($('#settings form'))
	let post = { greylist_enabled: $('#greylist_enabled').prop('checked') ? 1 : 0 }

	axios.post('/api/v4/users/' + this.user_id + '/config', post)
	.then(response => {
	this.$toast.success(response.data.message)
	})
	},
	statusUpdate(user) {
	this.user = Object.assign({}, this.user, user)
	},
	deleteUser() {
	// Delete the user from the confirm dialog
	axios.delete('/api/v4/users/' + this.user_id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'users' })
	}
	})
	},
	showDeleteConfirmation() {
	if (this.user_id == this.$root.authInfo.id) {
	// Deleting self, redirect to /profile/delete page
	this.$router.push({ name: 'profile-delete' })
	} else {
	// Display the warning
	- new Modal('#delete-warning').show()
	+ this.$refs.deleteWarning.show()
	}
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
	index 91b8a0fc..abc7ecb5 100644
	--- a/src/resources/vue/Wallet.vue
	+++ b/src/resources/vue/Wallet.vue
	@@ -1,430 +1,426 @@
	<template>
	<div class="container" dusk="wallet-component">
	<div v-if="wallet.id" id="wallet" class="card">
	<div class="card-body">
	<div class="card-title">{{ $t('wallet.title') }} <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div>
	<div class="card-text">
	<p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p>

	<div v-if="showPendingPayments" class="alert alert-warning">
	{{ $t('wallet.pending-payments-warning') }}
	</div>
	<p>
	<btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn>
	</p>
	<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
	<template v-if="mandate.id && !mandate.isValid">
	<div class="alert alert-danger">
	{{ $t('wallet.auto-payment-failed') }}
	</div>
	<btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
	</template>
	<btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn>
	</div>
	<div id="mandate-info" v-else>
	<div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
	{{ $t('wallet.auto-payment-disabled') }}
	</div>
	<template v-else>
	<p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p>
	<p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p>
	</template>
	<div v-if="mandate.isPending" class="alert alert-warning">
	{{ $t('wallet.auto-payment-inprogress') }}
	</div>
	<p class="buttons">
	<btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
	<btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn>
	</p>
	</div>
	</div>
	</div>
	</div>

	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true">
	{{ $t('wallet.receipts') }}
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false">
	{{ $t('wallet.history') }}
	</a>
	</li>
	<li v-if="showPendingPayments" class="nav-item">
	<a class="nav-link" id="tab-payments" href="#wallet-payments" role="tab" aria-controls="wallet-payments" aria-selected="false">
	{{ $t('wallet.pending-payments') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts">
	<div class="card-body">
	<div class="card-text">
	<p v-if="receipts.length">
	{{ $t('wallet.receipts-hint') }}
	</p>
	<div v-if="receipts.length" class="input-group">
	<select id="receipt-id" class="form-control">
	<option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>
	</select>
	<btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn>
	</div>
	<p v-if="!receipts.length">
	{{ $t('wallet.receipts-none') }}
	</p>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="wallet-history" role="tabpanel" aria-labelledby="tab-history">
	<div class="card-body">
	<transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log>
	</div>
	</div>
	<div class="tab-pane" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments">
	<div class="card-body">
	<payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log>
	</div>
	</div>
	</div>

	- <div id="payment-dialog" class="modal" tabindex="-1" role="dialog">
	- <div class="modal-dialog" role="document">
	- <div class="modal-content">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ paymentDialogTitle }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	+ <modal-dialog id="payment-dialog" ref="paymentDialog" :title="paymentDialogTitle" @click="payment" :buttons="dialogButtons">
	+ <div id="payment-method" v-if="paymentForm == 'method'">
	+ <form data-validation-prefix="mandate_">
	+ <div id="payment-method-selection">
	+ <a v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" :class="'card link-' + method.id">
	+ <svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />
	+ <img v-if="method.image" :src="method.image" />
	+ <span class="name">{{ method.name }}</span>
	+ </a>
	</div>
	- <div class="modal-body">
	- <div id="payment-method" v-if="paymentForm == 'method'">
	- <form data-validation-prefix="mandate_">
	- <div id="payment-method-selection">
	- <a v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" :class="'card link-' + method.id">
	- <svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />
	- <img v-if="method.image" :src="method.image" />
	- <span class="name">{{ method.name }}</span>
	- </a>
	- </div>
	- </form>
	- </div>
	- <div id="manual-payment" v-if="paymentForm == 'manual'">
	- <p v-if="wallet.currency != selectedPaymentMethod.currency">
	- {{ $t('wallet.currency-conv', { wc: wallet.currency, pc: selectedPaymentMethod.currency }) }}
	- </p>
	- <p v-if="selectedPaymentMethod.id == 'banktransfer'">
	- {{ $t('wallet.banktransfer-hint') }}
	- </p>
	- <p>
	- {{ $t('wallet.payment-amount-hint') }}
	- </p>
	- <form id="payment-form" @submit.prevent="payment">
	- <div class="input-group">
	- <input type="text" class="form-control" id="amount" v-model="amount" required>
	- <span class="input-group-text">{{ wallet.currency }}</span>
	- </div>
	- <div v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount)" class="alert alert-warning m-0 mt-3">
	- {{ $t('wallet.payment-warning', { price: $root.price(amount * selectedPaymentMethod.exchangeRate * 100, selectedPaymentMethod.currency) }) }}
	- </div>
	- </form>
	+ </form>
	+ </div>
	+ <div id="manual-payment" v-if="paymentForm == 'manual'">
	+ <p v-if="wallet.currency != selectedPaymentMethod.currency">
	+ {{ $t('wallet.currency-conv', { wc: wallet.currency, pc: selectedPaymentMethod.currency }) }}
	+ </p>
	+ <p v-if="selectedPaymentMethod.id == 'banktransfer'">
	+ {{ $t('wallet.banktransfer-hint') }}
	+ </p>
	+ <p>
	+ {{ $t('wallet.payment-amount-hint') }}
	+ </p>
	+ <form id="payment-form" @submit.prevent="payment">
	+ <div class="input-group">
	+ <input type="text" class="form-control" id="amount" v-model="amount" required>
	+ <span class="input-group-text">{{ wallet.currency }}</span>
	+ </div>
	+ <div v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount)" class="alert alert-warning m-0 mt-3">
	+ {{ $t('wallet.payment-warning', { price: $root.price(amount * selectedPaymentMethod.exchangeRate * 100, selectedPaymentMethod.currency) }) }}
	+ </div>
	+ </form>
	+ </div>
	+ <div id="auto-payment" v-if="paymentForm == 'auto'">
	+ <form data-validation-prefix="mandate_">
	+ <p>
	+ {{ $t('wallet.auto-payment-hint') }}
	+ </p>
	+ <div class="row mb-3">
	+ <label for="mandate_amount" class="col-sm-6 col-form-label">{{ $t('wallet.fill-up') }}</label>
	+ <div class="col-sm-6">
	+ <div class="input-group">
	+ <input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required>
	+ <span class="input-group-text">{{ wallet.currency }}</span>
	+ </div>
	</div>
	- <div id="auto-payment" v-if="paymentForm == 'auto'">
	- <form data-validation-prefix="mandate_">
	- <p>
	- {{ $t('wallet.auto-payment-hint') }}
	- </p>
	- <div class="row mb-3">
	- <label for="mandate_amount" class="col-sm-6 col-form-label">{{ $t('wallet.fill-up') }}</label>
	- <div class="col-sm-6">
	- <div class="input-group">
	- <input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required>
	- <span class="input-group-text">{{ wallet.currency }}</span>
	- </div>
	- </div>
	- </div>
	- <div class="row mb-3">
	- <label for="mandate_balance" class="col-sm-6 col-form-label">{{ $t('wallet.when-below') }}</label>
	- <div class="col-sm-6">
	- <div class="input-group">
	- <input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" required>
	- <span class="input-group-text">{{ wallet.currency }}</span>
	- </div>
	- </div>
	- </div>
	- <p v-if="!mandate.isValid">
	- {{ $t('wallet.auto-payment-next') }}
	- </p>
	- <div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0">
	- {{ $t('wallet.auto-payment-disabled-next') }}
	- </div>
	- </form>
	+ </div>
	+ <div class="row mb-3">
	+ <label for="mandate_balance" class="col-sm-6 col-form-label">{{ $t('wallet.when-below') }}</label>
	+ <div class="col-sm-6">
	+ <div class="input-group">
	+ <input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" required>
	+ <span class="input-group-text">{{ wallet.currency }}</span>
	+ </div>
	</div>
	</div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-primary modal-action" icon="check" @click="autoPayment"
	- v-if="paymentForm == 'auto' && (mandate.isValid \|\| mandate.isPending)"
	- >
	- {{ $t('btn.submit') }}
	- </btn>
	- <btn class="btn btn-primary modal-action" icon="check" @click="autoPayment"
	- v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
	- >
	- {{ $t('btn.continue') }}
	- </btn>
	- <btn class="btn-primary modal-action" icon="check" @click="payment"
	- v-if="paymentForm == 'manual'"
	- >
	- {{ $t('btn.continue') }}
	- </btn>
	+ <p v-if="!mandate.isValid">
	+ {{ $t('wallet.auto-payment-next') }}
	+ </p>
	+ <div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0">
	+ {{ $t('wallet.auto-payment-disabled-next') }}
	</div>
	- </div>
	+ </form>
	</div>
	- </div>
	+ </modal-dialog>
	</div>
	</template>

	<script>
	- import { Modal } from 'bootstrap'
	+ import ModalDialog from './Widgets/ModalDialog'
	import TransactionLog from './Widgets/TransactionLog'
	import PaymentLog from './Widgets/PaymentLog'
	import { downloadFile } from '../js/utils'

	import { library } from '@fortawesome/fontawesome-svg-core'

	library.add(
	require('@fortawesome/free-brands-svg-icons/faPaypal').definition,
	require('@fortawesome/free-regular-svg-icons/faCreditCard').definition,
	require('@fortawesome/free-solid-svg-icons/faBuildingColumns').definition,
	)

	export default {
	components: {
	+ ModalDialog,
	TransactionLog,
	PaymentLog
	},
	data() {
	return {
	amount: '',
	mandate: { amount: 10, balance: 0, method: null },
	paymentDialogTitle: null,
	paymentForm: null,
	nextForm: null,
	receipts: [],
	stripe: null,
	loadTransactions: false,
	loadPayments: false,
	showPendingPayments: false,
	wallet: {},
	walletId: null,
	paymentMethods: [],
	selectedPaymentMethod: null
	}
	},
	+ computed: {
	+ dialogButtons() {
	+ if (this.paymentForm == 'method') {
	+ return []
	+ }
	+
	+ const button = {
	+ className: 'btn-primary modal-action',
	+ icon: 'check',
	+ label: 'btn.submit'
	+ }
	+
	+ if (this.paymentForm == 'manual'
	+ \|\| (this.paymentForm == 'auto' && !this.mandate.isValid && !this.mandate.isPending)
	+ ) {
	+ button.label = 'btn.continue'
	+ }
	+
	+ return [ button ]
	+ }
	+ },
	mounted() {
	$('#wallet button').focus()

	this.walletId = this.$root.authInfo.wallets[0].id

	axios.get('/api/v4/wallets/' + this.walletId, { loader: true })
	.then(response => {
	this.wallet = response.data

	axios.get('/api/v4/wallets/' + this.walletId + '/receipts', { loader: '#wallet-receipts' })
	.then(response => {
	this.receipts = response.data.list
	})

	if (this.wallet.provider == 'stripe') {
	this.stripeInit()
	}
	})
	.catch(this.$root.errorHandler)

	this.loadMandate()

	axios.get('/api/v4/payments/has-pending')
	.then(response => {
	this.showPendingPayments = response.data.hasPending
	})
	},
	updated() {
	$(this.$el).find('ul.nav-tabs a').on('click', e => {
	this.$root.tab(e)

	if ($(e.target).is('#tab-history')) {
	this.loadTransactions = true
	} else if ($(e.target).is('#tab-payments')) {
	this.loadPayments = true
	}
	})
	},
	methods: {
	loadMandate() {
	const loader = '#mandate-form'

	this.$root.stopLoading(loader)

	if (!this.mandate.id \|\| this.mandate.isPending) {
	axios.get('/api/v4/payments/mandate', { loader })
	.then(response => {
	this.mandate = response.data
	})
	}
	},
	selectPaymentMethod(method) {
	this.formLock = false
	this.selectedPaymentMethod = method
	this.paymentForm = this.nextForm

	setTimeout(() => { $('#payment-dialog').find('#amount,#mandate_amount').focus() }, 10)
	},
	payment() {
	+ if (this.paymentForm == 'auto') {
	+ return this.autoPayment()
	+ }
	+
	if (this.formLock) {
	return
	}

	// Lock the form to prevent from double submission
	this.formLock = true
	let onFinish = () => { this.formLock = false }

	this.$root.clearFormValidation($('#payment-form'))

	const post = {
	amount: this.amount,
	methodId: this.selectedPaymentMethod.id,
	currency: this.selectedPaymentMethod.currency
	}

	axios.post('/api/v4/payments', post, { onFinish })
	.then(response => {
	if (response.data.redirectUrl) {
	location.href = response.data.redirectUrl
	} else {
	this.stripeCheckout(response.data)
	}
	})
	},
	autoPayment() {
	if (this.formLock) {
	return
	}

	// Lock the form to prevent from double submission
	this.formLock = true
	let onFinish = () => { this.formLock = false }

	const method = this.mandate.id && (this.mandate.isValid \|\| this.mandate.isPending) ? 'put' : 'post'
	let post = {
	amount: this.mandate.amount,
	balance: this.mandate.balance,
	}

	// Modifications can't change the method of payment
	if (this.selectedPaymentMethod) {
	post.methodId = this.selectedPaymentMethod.id
	post.currency = this.selectedPaymentMethod.currency
	}

	this.$root.clearFormValidation($('#auto-payment form'))

	axios[method]('/api/v4/payments/mandate', post, { onFinish })
	.then(response => {
	if (method == 'post') {
	this.mandate.id = null
	// a new mandate, redirect to the chackout page
	if (response.data.redirectUrl) {
	location.href = response.data.redirectUrl
	} else if (response.data.id) {
	this.stripeCheckout(response.data)
	}
	} else {
	// an update
	if (response.data.status == 'success') {
	- this.dialog.hide();
	+ this.$refs.paymentDialog.hide();
	this.mandate = response.data
	this.$toast.success(response.data.message)
	}
	}
	})
	},
	autoPaymentChange(event) {
	this.autoPaymentForm(event, this.$t('wallet.auto-payment-update'))
	},
	autoPaymentDelete() {
	axios.delete('/api/v4/payments/mandate')
	.then(response => {
	this.mandate = { amount: 10, balance: 0 }
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	}
	})
	},
	paymentMethodForm(nextForm) {
	this.formLock = false
	this.paymentMethods = []
	this.paymentForm = 'method'
	this.nextForm = nextForm
	this.paymentDialogTitle = this.$t(nextForm == 'auto' ? 'wallet.auto-payment-setup' : 'wallet.top-up')

	- this.dialog = new Modal('#payment-dialog')
	- this.dialog.show()
	+ this.$refs.paymentDialog.show()

	this.$nextTick().then(() => {
	const type = nextForm == 'manual' ? 'oneoff' : 'recurring'
	const loader = ['#payment-method', { 'min-height': '10em', small: false }]

	axios.get('/api/v4/payments/methods', { params: { type }, loader })
	.then(response => {
	this.paymentMethods = response.data
	})
	})
	},
	autoPaymentForm(event, title) {
	this.paymentForm = 'auto'
	this.paymentDialogTitle = title
	this.formLock = false

	- this.dialog = new Modal('#payment-dialog')
	- this.dialog.show()
	+ this.$refs.paymentDialog.show()
	},
	receiptDownload() {
	const receipt = $('#receipt-id').val()
	downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt)
	},
	stripeInit() {
	let script = $('#stripe-script')

	if (!script.length) {
	script = document.createElement('script')

	script.onload = () => {
	this.stripe = Stripe(window.config.stripePK)
	}

	script.id = 'stripe-script'
	script.src = 'https://js.stripe.com/v3/'

	document.getElementsByTagName('head')[0].appendChild(script)
	} else {
	this.stripe = Stripe(window.config.stripePK)
	}
	},
	stripeCheckout(data) {
	if (!this.stripe) {
	return
	}

	this.stripe.redirectToCheckout({
	sessionId: data.id
	}).then(result => {
	// If it fails due to a browser or network error,
	// display the localized error message to the user
	if (result.error) {
	this.$toast.error(result.error.message)
	}
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Widgets/CompanionappList.vue b/src/resources/vue/Widgets/CompanionappList.vue
	index 12bd4359..6743c533 100644
	--- a/src/resources/vue/Widgets/CompanionappList.vue
	+++ b/src/resources/vue/Widgets/CompanionappList.vue
	@@ -1,78 +1,62 @@
	<template>
	<div>
	- <btn icon="trash-can" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()">
	+ <btn icon="trash-can" class="btn-outline-danger button-delete float-end" @click="$refs.deleteDialog.show()">
	{{ $t('companion.delete') }}
	</btn>
	+
	<list-table class="m-0" :list="entries" :setup="setup"></list-table>
	<list-more v-if="hasMore" :on-click="loadMore"></list-more>
	- <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('companion.remove-devices') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <p>{{ $t('companion.remove-devices-text') }}</p>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn class="btn-danger modal-action" data-bs-dismiss="modal" @click="removeDevices()" icon="trash-can">{{ $t('btn.delete') }}</btn>
	- </div>
	- </div>
	- </div>
	- </div>
	+
	+ <modal-dialog id="delete-warning" ref="deleteDialog" :title="$t('companion.remove-devices')" @click="removeDevices()" :buttons="['delete']" :cancel-focus="true">
	+ <p>{{ $t('companion.remove-devices-text') }}</p>
	+ </modal-dialog>
	</div>
	</template>

	<script>
	- import { Modal } from 'bootstrap'
	import ListTools from './ListTools'
	+ import ModalDialog from './ModalDialog'

	export default {
	+ components: {
	+ ModalDialog
	+ },
	mixins: [ ListTools ],
	data() {
	return {
	entries: [],
	setup: {
	model: 'companion',
	columns: [
	{
	prop: 'name'
	},
	{
	prop: 'device_id',
	label: 'companion.deviceid'
	}
	]
	}

	}
	},
	mounted() {
	this.loadMore({ reset: true })
	- $('#delete-warning')[0].addEventListener('shown.bs.modal', event => {
	- $(event.target).find('button.modal-cancel').focus()
	- })
	},
	methods: {
	loadMore(params) {
	this.listSearch('entries', '/api/v4/companion/', params)
	},
	removeDevices() {
	axios.post('/api/v4/companion/revoke')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	}
	this.loadMore({ reset: true })
	})
	.catch(this.$root.errorHandler)
	- },
	- showDeleteConfirmation() {
	- // Display the warning
	- new Modal('#delete-warning').show()
	- },
	+ }
	}
	}
	</script>
	diff --git a/src/resources/vue/Widgets/ModalDialog.vue b/src/resources/vue/Widgets/ModalDialog.vue
	new file mode 100644
	index 00000000..7381acb0
	--- /dev/null
	+++ b/src/resources/vue/Widgets/ModalDialog.vue
	@@ -0,0 +1,90 @@
	+<template>
	+ <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
	+ <div class="modal-dialog" role="document">
	+ <div class="modal-content" style="max-height: 90vh">
	+ <div class="modal-header">
	+ <h5 class="modal-title">{{ title }}</h5>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	+ </div>
	+ <div class="modal-body overflow-auto">
	+ <slot></slot>
	+ </div>
	+ <div class="modal-footer">
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t(buttons.length ? 'btn.cancel' : 'btn.close') }}</btn>
	+ <btn v-for="(button, index) in buttons" :key="index"
	+ :class="btnProperty(button, 'className')"
	+ :icon="btnProperty(button, 'icon')"
	+ :data-bs-dismiss="btnProperty(button, 'dismiss')"
	+ @click="$emit('click', $event)"
	+ >
	+ {{ $t(btnProperty(button, 'label')) }}
	+ </btn>
	+ </div>
	+ </div>
	+ </div>
	+ </div>
	+</template>
	+
	+<script>
	+ import { Modal } from 'bootstrap'
	+ import { clearFormValidation } from '../../js/utils'
	+
	+ // Common buttons
	+ const buttonTypes = {
	+ 'delete': {
	+ className: 'btn-danger modal-action',
	+ dismiss: 'modal',
	+ label: 'btn.delete',
	+ icon: 'trash-can'
	+ },
	+ submit: {
	+ className: 'btn-primary modal-action',
	+ label: 'btn.submit',
	+ icon: 'check'
	+ },
	+ }
	+
	+ export default {
	+ props: {
	+ buttons: { type: Array, default: () => [] },
	+ cancelFocus: { type: Boolean, default: false },
	+ title: { type: String, default: '' }
	+ },
	+ mounted() {
	+ this.$el.addEventListener('shown.bs.modal', event => {
	+ clearFormValidation(event.target)
	+
	+ if (this.cancelFocus) {
	+ $(event.target).find('button.modal-cancel').focus()
	+ } else {
	+ $(event.target).find('input,select').first().focus()
	+ }
	+ })
	+
	+ this.dialog = new Modal(this.$el)
	+ },
	+ methods: {
	+ btnProperty(button, property) {
	+ const isString = typeof button == 'string'
	+ if (!isString && property in button) {
	+ return button[property]
	+ }
	+
	+ if (isString && button in buttonTypes && property in buttonTypes[button]) {
	+ return buttonTypes[button][property]
	+ }
	+ },
	+ events(events) {
	+ for (const name in events) {
	+ this.$el.addEventListener(name + '.bs.modal', events[name])
	+ }
	+ },
	+ hide() {
	+ this.dialog.hide()
	+ },
	+ show() {
	+ this.dialog.show()
	+ }
	+ }
	+ }
	+</script>
	diff --git a/src/resources/vue/Widgets/SupportForm.vue b/src/resources/vue/Widgets/SupportForm.vue
	index 930d6e1c..bdf0cc92 100644
	--- a/src/resources/vue/Widgets/SupportForm.vue
	+++ b/src/resources/vue/Widgets/SupportForm.vue
	@@ -1,115 +1,99 @@
	<template>
	- <div class="modal" id="support-dialog" tabindex="-1" role="dialog" aria-hidden="true">
	- <div class="modal-dialog" role="document">
	- <form class="modal-content" @submit.prevent="submit">
	- <div class="modal-header">
	- <h5 class="modal-title">{{ $t('support.title') }}</h5>
	- <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	- </div>
	- <div class="modal-body">
	- <div class="mb-3">
	- <label for="support-user" class="form-label">{{ $t('support.id') }}</label>
	- <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" />
	- <small class="text-muted">{{ $t('support.id-hint') }}</small>
	- </div>
	- <div class="mb-3">
	- <label for="support-name" class="form-label">{{ $t('support.name') }}</label>
	- <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" />
	- </div>
	- <div class="mb-3">
	- <label for="support-email" class="form-label">{{ $t('support.email') }}</label>
	- <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required />
	- </div>
	- <div class="mb-3">
	- <label for="support-summary" class="form-label">{{ $t('support.summary') }}</label>
	- <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required />
	- </div>
	- <div>
	- <label for="support-body" class="form-label">{{ $t('support.expl') }}</label>
	- <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea>
	- </div>
	- </div>
	- <div class="modal-footer">
	- <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	- <btn type="submit" class="btn-primary modal-action" icon="check">{{ $t('btn.submit') }}</btn>
	- </div>
	- </form>
	- </div>
	- </div>
	+ <modal-dialog id="support-dialog" ref="dialog" :title="$t('support.title')" @click="submit" :buttons="['submit']">
	+ <form>
	+ <div class="mb-3">
	+ <label for="support-user" class="form-label">{{ $t('support.id') }}</label>
	+ <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" />
	+ <small class="text-muted">{{ $t('support.id-hint') }}</small>
	+ </div>
	+ <div class="mb-3">
	+ <label for="support-name" class="form-label">{{ $t('support.name') }}</label>
	+ <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" />
	+ </div>
	+ <div class="mb-3">
	+ <label for="support-email" class="form-label">{{ $t('support.email') }}</label>
	+ <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required />
	+ </div>
	+ <div class="mb-3">
	+ <label for="support-summary" class="form-label">{{ $t('support.summary') }}</label>
	+ <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required />
	+ </div>
	+ <div>
	+ <label for="support-body" class="form-label">{{ $t('support.expl') }}</label>
	+ <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea>
	+ </div>
	+ </form>
	+ </modal-dialog>
	</template>

	<script>
	- import { Modal } from 'bootstrap'
	+ import ModalDialog from '../Widgets/ModalDialog'

	export default {
	+ components: {
	+ ModalDialog
	+ },
	data() {
	return {
	body: '',
	email: '',
	name: '',
	summary: '',
	user: ''
	}
	},
	mounted() {
	- const dialog = this.$el
	-
	- dialog.addEventListener('hide.bs.modal', () => {
	- this.lockForm(false)
	- if (this.cancelToken) {
	- this.cancelToken()
	+ this.$refs.dialog.events({
	+ hide: () => {
	+ this.lockForm(false)
	+ if (this.cancelToken) {
	+ this.cancelToken()
	+ this.cancelToken = null
	+ }
	+ },
	+ show: () => {
	this.cancelToken = null
	}
	})
	-
	- dialog.addEventListener('show.bs.modal', () => {
	- this.cancelToken = null
	- })
	-
	- dialog.addEventListener('shown.bs.modal', () => {
	- $(dialog).find('input').first().focus()
	- })
	-
	- this.dialog = new Modal(dialog)
	},
	methods: {
	lockForm(lock) {
	$(this.$el).find('input,textarea,.modal-action').prop('disabled', lock)
	},
	- showDialog() {
	- this.dialog.show()
	+ show() {
	+ this.$refs.dialog.show()
	},
	submit() {
	this.lockForm(true)

	let params = {
	user: this.user,
	name: this.name,
	email: this.email,
	summary: this.summary,
	body: this.body
	}

	const CancelToken = axios.CancelToken

	let args = {
	cancelToken: new CancelToken((c) => {
	this.cancelToken = c;
	})
	}

	axios.post('/api/v4/support/request', params, args)
	.then(response => {
	this.summary = ''
	this.body = ''
	this.lockForm(false)
	- this.dialog.hide()
	+ this.$refs.dialog.hide()
	this.$toast.success(response.data.message)
	})
	.catch(error => {
	this.lockForm(false)
	})
	}
	}
	}
	</script>
	diff --git a/src/tests/Browser.php b/src/tests/Browser.php
	index 2a59a87b..0b067216 100644
	--- a/src/tests/Browser.php
	+++ b/src/tests/Browser.php
	@@ -1,299 +1,300 @@
	<?php

	namespace Tests;

	use Facebook\WebDriver\WebDriverKeys;
	use PHPUnit\Framework\Assert;
	use Tests\Browser\Components\Error;
	use Tests\Browser\Components\Toast;

	/**
	* Laravel Dusk Browser extensions
	*/
	class Browser extends \Laravel\Dusk\Browser
	{
	/**
	* Assert that the given element attribute contains specified text.
	*/
	public function assertAttributeRegExp($selector, $attribute, $regexp)
	{
	$element = $this->resolver->findOrFail($selector);
	$value = (string) $element->getAttribute($attribute);
	$error = "No expected text in [$selector][$attribute]. Found: $value";

	Assert::assertMatchesRegularExpression($regexp, $value, $error);

	return $this;
	}

	/**
	* Assert number of (visible) elements
	*/
	public function assertElementsCount($selector, $expected_count, $visible = true)
	{
	$elements = $this->elements($selector);
	$count = count($elements);

	if ($visible) {
	foreach ($elements as $element) {
	if (!$element->isDisplayed()) {
	$count--;
	}
	}
	}

	Assert::assertEquals($expected_count, $count, "Count of [$selector] elements is not $expected_count");

	return $this;
	}

	/**
	* Assert Tip element content
	*/
	public function assertTip($selector, $content)
	{
	return $this->click($selector)
	->withinBody(function ($browser) use ($content) {
	$browser->waitFor('div.tooltip .tooltip-inner')
	->assertSeeIn('div.tooltip .tooltip-inner', $content);
	})
	->click($selector);
	}

	/**
	* Assert Toast element content (and close it)
	*/
	public function assertToast(string $type, string $message, $title = null)
	{
	return $this->withinBody(function ($browser) use ($type, $title, $message) {
	$browser->with(new Toast($type), function (Browser $browser) use ($title, $message) {
	$browser->assertToastTitle($title)
	->assertToastMessage($message)
	->closeToast();
	});
	});
	}

	/**
	* Assert specified error page is displayed.
	*/
	public function assertErrorPage(int $error_code, string $hint = '')
	{
	$this->with(new Error($error_code, $hint), function ($browser) {
	// empty, assertions will be made by the Error component itself
	});

	return $this;
	}

	/**
	* Assert that the given element has specified class assigned.
	*/
	public function assertHasClass($selector, $class_name)
	{
	$element = $this->resolver->findOrFail($selector);
	$classes = explode(' ', (string) $element->getAttribute('class'));

	Assert::assertContains($class_name, $classes, "[$selector] has no class '{$class_name}'");

	return $this;
	}

	/**
	* Assert that the given element is readonly
	*/
	public function assertReadonly($selector)
	{
	$element = $this->resolver->findOrFail($selector);
	$value = $element->getAttribute('readonly');

	Assert::assertTrue($value == 'true', "Element [$selector] is not readonly");

	return $this;
	}

	/**
	* Assert that the given element is not readonly
	*/
	public function assertNotReadonly($selector)
	{
	$element = $this->resolver->findOrFail($selector);
	$value = $element->getAttribute('readonly');

	Assert::assertTrue($value != 'true', "Element [$selector] is not readonly");

	return $this;
	}

	/**
	* Assert that the given element contains specified text,
	* no matter it's displayed or not.
	*/
	public function assertText($selector, $text)
	{
	$element = $this->resolver->findOrFail($selector);

	if ($text === '') {
	Assert::assertTrue((string) $element->getText() === $text, "Element's text is not empty [$selector]");
	} else {
	Assert::assertTrue(strpos($element->getText(), $text) !== false, "No expected text in [$selector]");
	}

	return $this;
	}

	/**
	* Assert that the given element contains specified text,
	* no matter it's displayed or not - using a regular expression.
	*/
	public function assertTextRegExp($selector, $regexp)
	{
	$element = $this->resolver->findOrFail($selector);

	Assert::assertMatchesRegularExpression($regexp, $element->getText(), "No expected text in [$selector]");

	return $this;
	}

	/**
	* Remove all toast messages
	*/
	public function clearToasts()
	{
	$this->script("\$('.toast-container > *').remove()");

	return $this;
	}

	/**
	* Wait until a button becomes enabled and click it
	*/
	public function clickWhenEnabled($selector)
	{
	return $this->waitFor($selector . ':not([disabled])')->click($selector);
	}

	/**
	* Check if in Phone mode
	*/
	public static function isPhone()
	{
	return getenv('TESTS_MODE') == 'phone';
	}

	/**
	* Check if in Tablet mode
	*/
	public static function isTablet()
	{
	return getenv('TESTS_MODE') == 'tablet';
	}

	/**
	* Check if in Desktop mode
	*/
	public static function isDesktop()
	{
	return !self::isPhone() && !self::isTablet();
	}

	/**
	* Returns content of a downloaded file
	*/
	public function readDownloadedFile($filename, $sleep = 5)
	{
	$filename = __DIR__ . "/Browser/downloads/$filename";

	// Give the browser a chance to finish download
	if (!file_exists($filename) && $sleep) {
	sleep($sleep);
	}

	Assert::assertFileExists($filename);

	return file_get_contents($filename);
	}

	/**
	* Removes downloaded file
	*/
	public function removeDownloadedFile($filename)
	{
	@unlink(__DIR__ . "/Browser/downloads/$filename");

	return $this;
	}

	/**
	* Clears the input field and related vue v-model data.
	*/
	public function vueClear($selector)
	{
	$selector = $this->resolver->format($selector);

	// The existing clear(), and type() with empty string do not work.
	// We have to clear the field and dispatch 'input' event programatically.

	$this->script(
	"var element = document.querySelector('$selector');"
	. "element.value = '';"
	. "element.dispatchEvent(new Event('input'))"
	);

	return $this;
	}

	/**
	* Execute code within body context.
	* Useful to execute code that selects elements outside of a component context
	*/
	public function withinBody($callback)
	{
	if ($this->resolver->prefix != 'body') {
	$orig_prefix = $this->resolver->prefix;
	$this->resolver->prefix = 'body';
	}

	call_user_func($callback, $this);

	if (isset($orig_prefix)) {
	$this->resolver->prefix = $orig_prefix;
	}

	return $this;
	}

	/**
	* Store the console output with the given name. Overwrites Dusk's method.
	*
	* @param string $name
	* @return $this
	*/
	public function storeConsoleLog($name)
	{
	if (in_array($this->driver->getCapabilities()->getBrowserName(), static::$supportsRemoteLogs)) {
	$console = $this->driver->manage()->getLog('browser');

	// Ignore errors/warnings irrelevant for testing
	foreach ($console as $idx => $entry) {
	if (
	$entry['level'] != 'SEVERE'
	\|\| strpos($entry['message'], 'Failed to load resource: the server responded with a status of')
	+ \|\| preg_match('/^\S+\.js [0-9]+:[0-9]+\s*$/', $entry['message'])
	) {
	$console[$idx] = null;
	}
	}

	$console = array_values(array_filter($console));

	if (!empty($console)) {
	$file = sprintf('%s/%s.log', rtrim(static::$storeConsoleLogAt, '/'), $name);
	$content = json_encode($console, JSON_PRETTY_PRINT);

	file_put_contents($file, $content);
	}
	}

	return $this;
	}
	}
	diff --git a/src/tests/Browser/Meet/RoomOptionsTest.php b/src/tests/Browser/Meet/RoomOptionsTest.php
	index 19feb4f4..c16b0104 100644
	--- a/src/tests/Browser/Meet/RoomOptionsTest.php
	+++ b/src/tests/Browser/Meet/RoomOptionsTest.php
	@@ -1,326 +1,326 @@
	<?php

	namespace Tests\Browser\Meet;

	use App\Meet\Room;
	use Tests\Browser;
	use Tests\Browser\Components\Dialog;
	use Tests\Browser\Components\Toast;
	use Tests\Browser\Pages\Meet\Room as RoomPage;
	use Tests\TestCaseDusk;

	class RoomOptionsTest extends TestCaseDusk
	{
	/**
	* {@inheritDoc}
	*/
	public function setUp(): void
	{
	parent::setUp();
	$this->setupTestRoom();
	}

	public function tearDown(): void
	{
	$this->resetTestRoom();
	parent::tearDown();
	}

	/**
	* Test password protected room
	*
	* @group meet
	*/
	public function testRoomPassword(): void
	{
	$this->browse(function (Browser $owner, Browser $guest) {
	$room = Room::where('name', 'john')->first();

	// Join the room as an owner (authenticate)
	$owner->visit(new RoomPage('john'))
	->click('@setup-button')
	->submitLogon('john@kolab.org', 'simple123')
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->assertMissing('@setup-password-input')
	->clickWhenEnabled('@setup-button')
	->waitFor('@session')
	// Enter room option dialog
	->click('@menu button.link-options')
	->with(new Dialog('#room-options-dialog'), function (Browser $browser) use ($room) {
	$browser->assertSeeIn('@title', 'Room options')
	- ->assertSeeIn('@button-action', 'Close')
	+ ->assertSeeIn('@button-cancel', 'Close')
	->assertElementsCount('.modal-footer button', 1)
	->assertSeeIn('#password-input .label', 'Password:')
	->assertSeeIn('#password-input-text.text-muted', 'none')
	->assertVisible('#password-input + small')
	->assertSeeIn('#password-set-btn', 'Set password')
	->assertElementsCount('#password-input button', 1)
	->assertMissing('#password-input input')
	// Test setting a password
	->click('#password-set-btn')
	->assertMissing('#password-input-text')
	->assertVisible('#password-input input')
	->assertValue('#password-input input', '')
	->assertSeeIn('#password-input #password-save-btn', 'Save')
	->assertElementsCount('#password-input button', 1)
	->type('#password-input input', 'pass')
	->click('#password-input #password-save-btn')
	->assertToast(Toast::TYPE_SUCCESS, 'Room configuration updated successfully.')
	->assertMissing('#password-input input')
	->assertSeeIn('#password-input-text:not(.text-muted)', 'pass')
	->assertSeeIn('#password-clear-btn.btn-outline-danger', 'Clear password')
	->assertElementsCount('#password-input button', 1)
	- ->click('@button-action');
	+ ->click('@button-cancel');

	$this->assertSame('pass', $room->fresh()->getSetting('password'));
	});

	// In another browser act as a guest, expect password required
	$guest->visit(new RoomPage('john'))
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->assertSeeIn('@setup-status-message', "Please, provide a valid password.")
	->assertVisible('@setup-form .input-group:nth-child(4) svg')
	->assertAttribute('@setup-form .input-group:nth-child(4) .input-group-text', 'title', 'Password')
	->assertAttribute('@setup-password-input', 'placeholder', 'Password')
	->assertValue('@setup-password-input', '')
	->assertSeeIn('@setup-button', "JOIN")
	// Try to join w/o password
	->clickWhenEnabled('@setup-button')
	->waitFor('#setup-password.is-invalid')
	// Try to join with a valid password
	->type('#setup-password', 'pass')
	->clickWhenEnabled('@setup-button')
	->waitFor('@session');

	// Test removing the password
	$owner->click('@menu button.link-options')
	->with(new Dialog('#room-options-dialog'), function (Browser $browser) use ($room) {
	$browser->assertSeeIn('@title', 'Room options')
	->assertSeeIn('#password-input-text:not(.text-muted)', 'pass')
	->assertSeeIn('#password-clear-btn.btn-outline-danger', 'Clear password')
	->assertElementsCount('#password-input button', 1)
	->click('#password-clear-btn')
	->assertToast(Toast::TYPE_SUCCESS, "Room configuration updated successfully.")
	->assertMissing('#password-input input')
	->assertSeeIn('#password-input-text.text-muted', 'none')
	->assertSeeIn('#password-set-btn', 'Set password')
	->assertElementsCount('#password-input button', 1)
	- ->click('@button-action');
	+ ->click('@button-cancel');

	$this->assertSame(null, $room->fresh()->getSetting('password'));
	});
	});
	}

	/**
	* Test locked room (denying the join request)
	*
	* @group meet
	*/
	public function testLockedRoomDeny(): void
	{
	$this->browse(function (Browser $owner, Browser $guest) {
	$room = Room::where('name', 'john')->first();

	// Join the room as an owner (authenticate)
	$owner->visit(new RoomPage('john'))
	// ->click('@setup-button')
	// ->submitLogon('john@kolab.org', 'simple123')
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->type('@setup-nickname-input', 'John')
	->clickWhenEnabled('@setup-button')
	->waitFor('@session')
	// Enter room option dialog
	->click('@menu button.link-options')
	->with(new Dialog('#room-options-dialog'), function (Browser $browser) use ($room) {
	$browser->assertSeeIn('@title', 'Room options')
	->assertSeeIn('#room-lock label', 'Locked room:')
	->assertVisible('#room-lock input[type=checkbox]:not(:checked)')
	->assertVisible('#room-lock + small')
	// Test setting the lock
	->click('#room-lock input')
	->assertToast(Toast::TYPE_SUCCESS, "Room configuration updated successfully.")
	- ->click('@button-action');
	+ ->click('@button-cancel');

	$this->assertSame('true', $room->fresh()->getSetting('locked'));
	});

	// In another browser act as a guest
	$guest->visit(new RoomPage('john'))
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->assertButtonEnabled('@setup-button')
	->assertSeeIn('@setup-button.btn-success', 'JOIN NOW')
	// try without the nickname
	->clickWhenEnabled('@setup-button')
	->waitFor('@setup-nickname-input.is-invalid')
	->assertSeeIn(
	'@setup-status-message',
	"The room is locked. Please, enter your name and try again."
	)
	->assertMissing('@setup-password-input')
	->assertButtonEnabled('@setup-button')
	->assertSeeIn('@setup-button.btn-success', 'JOIN NOW')
	->type('@setup-nickname-input', 'Guest<p>')
	->clickWhenEnabled('@setup-button')
	->assertMissing('@setup-nickname-input.is-invalid')
	->waitForText("Waiting for permission to join the room.")
	->assertButtonDisabled('@setup-button');

	// Test denying the request (this will also test custom toasts)
	$owner
	->whenAvailable(new Toast(Toast::TYPE_CUSTOM), function ($browser) {
	$browser->assertToastTitle('Join request')
	->assertVisible('.toast-header svg.fa-user')
	->assertSeeIn('@message', 'Guest<p> requested to join.')
	->assertAttributeRegExp('@message img', 'src', '\|^data:image\|')
	->assertSeeIn('@message button.accept.btn-success', 'Accept')
	->assertSeeIn('@message button.deny.btn-danger', 'Deny')
	->click('@message button.deny');
	})
	->waitUntilMissing('.toast')
	// wait 10 seconds to make sure the request message does not show up again
	->pause(10 * 1000)
	->assertMissing('.toast');
	});
	}

	/**
	* Test locked room (accepting the join request, and dismissing a user)
	*
	* @group meet
	*/
	public function testLockedRoomAcceptAndDismiss(): void
	{
	$this->browse(function (Browser $owner, Browser $guest) {
	$room = Room::where('name', 'john')->first();

	// Join the room as an owner (authenticate)
	$owner->visit(new RoomPage('john'))
	// ->click('@setup-button')
	// ->submitLogon('john@kolab.org', 'simple123')
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->type('@setup-nickname-input', 'John')
	->clickWhenEnabled('@setup-button')
	->waitFor('@session')
	// Enter room option dialog
	->click('@menu button.link-options')
	->with(new Dialog('#room-options-dialog'), function (Browser $browser) use ($room) {
	$browser->assertSeeIn('@title', 'Room options')
	->assertSeeIn('#room-lock label', 'Locked room:')
	->assertVisible('#room-lock input[type=checkbox]:not(:checked)')
	->assertVisible('#room-lock + small')
	// Test setting the lock
	->click('#room-lock input')
	->assertToast(Toast::TYPE_SUCCESS, "Room configuration updated successfully.")
	- ->click('@button-action');
	+ ->click('@button-cancel');

	$this->assertSame('true', $room->fresh()->getSetting('locked'));
	});

	// In another browser act as a guest
	$guest->visit(new RoomPage('john'))
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->type('@setup-nickname-input', 'guest')
	->clickWhenEnabled('@setup-button')
	->waitForText("Waiting for permission to join the room.")
	->assertButtonDisabled('@setup-button');

	$owner
	->whenAvailable(new Toast(Toast::TYPE_CUSTOM), function ($browser) {
	$browser->assertToastTitle('Join request')
	->assertSeeIn('@message', 'guest requested to join.')
	->click('@message button.accept');
	});

	// Guest automatically anters the room
	$guest->waitFor('@session', 12)
	// make sure he has no access to the Options menu
	->waitFor('@session .meet-video:not(.self)')
	->assertSeeIn('@session .meet-video:not(.self) .meet-nickname', 'John')
	// TODO: Assert title and icon
	->click('@session .meet-video:not(.self) .meet-nickname')
	->pause(100)
	->assertMissing('.dropdown-menu');

	// Test dismissing the participant
	$owner->click('@session .meet-video:not(.self) .meet-nickname')
	->waitFor('@session .meet-video:not(.self) .dropdown-menu')
	->assertSeeIn('@session .meet-video:not(.self) .dropdown-menu > .action-dismiss', 'Dismiss')
	->click('@session .meet-video:not(.self) .dropdown-menu > .action-dismiss')
	->waitUntilMissing('.dropdown-menu')
	->waitUntilMissing('@session .meet-video:not(.self)');

	// Expect a "end of session" dialog on the participant side
	$guest->with(new Dialog('#leave-dialog'), function (Browser $browser) {
	$browser->assertSeeIn('@title', 'Room closed')
	->assertSeeIn('@body', "The session has been closed by the room owner.")
	- ->assertMissing('@button-cancel')
	- ->assertSeeIn('@button-action', 'Close');
	+ ->assertMissing('@button-action')
	+ ->assertSeeIn('@button-cancel', 'Close');
	});
	});
	}

	/**
	* Test nomedia (subscribers only) feature
	*
	* @group meet
	*/
	public function testSubscribersOnly(): void
	{
	$this->browse(function (Browser $owner, Browser $guest) {
	$room = Room::where('name', 'john')->first();

	// Join the room as an owner (authenticate)
	$owner->visit(new RoomPage('john'))
	// ->click('@setup-button')
	// ->submitLogon('john@kolab.org', 'simple123')
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->type('@setup-nickname-input', 'John')
	->clickWhenEnabled('@setup-button')
	->waitFor('@session')
	// Enter room option dialog
	->click('@menu button.link-options')
	->with(new Dialog('#room-options-dialog'), function (Browser $browser) use ($room) {
	$browser->assertSeeIn('@title', 'Room options')
	->assertSeeIn('#room-nomedia label', 'Subscribers only:')
	->assertVisible('#room-nomedia input[type=checkbox]:not(:checked)')
	->assertVisible('#room-nomedia + small')
	// Test enabling the option
	->click('#room-nomedia input')
	->assertToast(Toast::TYPE_SUCCESS, "Room configuration updated successfully.")
	- ->click('@button-action');
	+ ->click('@button-cancel');

	$this->assertSame('true', $room->fresh()->getSetting('nomedia'));
	});

	// In another browser act as a guest
	$guest->visit(new RoomPage('john'))
	->waitFor('@setup-form')
	->waitUntilMissing('@setup-status-message.loading')
	->type('@setup-nickname-input', 'John')
	->clickWhenEnabled('@setup-button')
	// expect the owner to have a video, but the guest to have none
	->waitFor('@session .meet-video')
	->waitFor('@session .meet-subscriber.self');

	// Unset the option back
	$owner->click('@menu button.link-options')
	->with(new Dialog('#room-options-dialog'), function (Browser $browser) use ($room) {
	$browser->assertVisible('#room-nomedia input[type=checkbox]:checked')
	// Test enabling the option
	->click('#room-nomedia input')
	->assertToast(Toast::TYPE_SUCCESS, "Room configuration updated successfully.")
	- ->click('@button-action');
	+ ->click('@button-cancel');

	$this->assertSame(null, $room->fresh()->getSetting('nomedia'));
	});
	});
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Mon, Aug 17, 9:09 PM (1 d, 13 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1261620
Default Alt Text: (217 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions