No OneTemporary
Actions

Size

251 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/resources/js/app.js b/src/resources/js/app.js
	index 5cdf1f35..be2af755 100644
	--- a/src/resources/js/app.js
	+++ b/src/resources/js/app.js
	@@ -1,518 +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'
	-
	-const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="visually-hidden">Loading</span></div></div>'
	+import { clearFormValidation, pick, startLoading, stopLoading } from './utils'

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

	-let isLoading = 0
	-
	-// Lock the UI with the 'loading...' element
	-const startLoading = () => {
	- isLoading++
	- let loading = $('#app > .app-loader').removeClass('fadeOut')
	- if (!loading.length) {
	- $('#app').append($(loader))
	- }
	-}
	-
	-// Hide "loading" overlay
	-const stopLoading = () => {
	- if (isLoading > 0) {
	- $('#app > .app-loader').addClass('fadeOut')
	- isLoading--;
	- }
	-}
	-
	let loadingRoute

	// Note: This has to be before the app is created
	// Note: You cannot use app inside of the function
	window.router.beforeEach((to, from, next) => {
	// check if the route requires authentication and user is not logged in
	if (to.meta.requiresAuth && !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: {
	- // Clear (bootstrap) form validation state
	- clearFormValidation(form) {
	- $(form).find('.is-invalid').removeClass('is-invalid')
	- $(form).find('.invalid-feedback').remove()
	- },
	+ 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}">`
	},
	- // Display "loading" overlay inside of the specified element
	- addLoader(elem, small = true, style = null) {
	- if (style) {
	- $(elem).css(style)
	- } else {
	- $(elem).css('position', 'relative')
	- }
	-
	- $(elem).append(small ? $(loader).addClass('small') : $(loader))
	- },
	- // Create an object copy with specified properties only
	- pick(obj, properties) {
	- let result = {}
	-
	- properties.forEach(prop => {
	- if (prop in obj) {
	- result[prop] = obj[prop]
	- }
	- })
	-
	- return result
	- },
	- // Remove loader element added in addLoader()
	- removeLoader(elem) {
	- $(elem).find('.app-loader').remove()
	- },
	+ pick,
	startLoading,
	stopLoading,
	- isLoading() {
	- return isLoading > 0
	- },
	tab(e) {
	e.preventDefault()
	new Tab(e.target).show()
	},
	errorPage(code, msg, hint) {
	// Until https://github.com/vuejs/vue-router/issues/977 is implemented
	// we can't really use router to display error page as it has two side
	// effects: it changes the URL and adds the error page to browser history.
	// For now we'll be replacing current view with error page "manually".

	if (!msg) msg = this.$te('error.' + code) ? this.$t('error.' + code) : this.$t('error.unknown')
	if (!hint) hint = ''

	const error_page = '<div id="error-page" class="error-page">'
	+ `<div class="code">${code}</div><div class="message">${msg}</div><div class="hint">${hint}</div>`
	+ '</div>'

	$('#error-page').remove()
	$('#app').append(error_page)

	app.updateBodyClass('error')
	},
	errorHandler(error) {
	- this.stopLoading()
	+ 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)
	}
	},
	- downloadFile(url, filename) {
	- // TODO: This might not be a best way for big files as the content
	- // will be stored (temporarily) in browser memory
	- // TODO: This method does not show the download progress in the browser
	- // but it could be implemented in the UI, axios has 'progress' property
	- axios.get(url, { responseType: 'blob' })
	- .then(response => {
	- const link = document.createElement('a')
	-
	- if (!filename) {
	- const contentDisposition = response.headers['content-disposition']
	- filename = 'unknown'
	-
	- if (contentDisposition) {
	- const match = contentDisposition.match(/filename="?(.+)"?/);
	- if (match && match.length === 2) {
	- filename = match[1];
	- }
	- }
	- }
	-
	- link.href = window.URL.createObjectURL(response.data)
	- link.download = filename
	- link.click()
	- })
	- },
	price(price, currency) {
	// TODO: Set locale argument according to the currently used locale
	return ((price \|\| 0) / 100).toLocaleString('de-DE', { style: 'currency', currency: currency \|\| 'CHF' })
	},
	priceLabel(cost, discount, 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')
	}
	},
	- isDegraded() {
	- return this.authInfo && this.authInfo.isAccountDegraded
	- },
	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()
	},
	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/js/utils.js b/src/resources/js/utils.js
	new file mode 100644
	index 00000000..17312f73
	--- /dev/null
	+++ b/src/resources/js/utils.js
	@@ -0,0 +1,134 @@
	+
	+/**
	+ * Clear (bootstrap) form validation state
	+ */
	+const clearFormValidation = (form) => {
	+ $(form).find('.is-invalid').removeClass('is-invalid')
	+ $(form).find('.invalid-feedback').remove()
	+}
	+
	+/**
	+ * File downloader
	+ */
	+const downloadFile = (url, filename) => {
	+ // TODO: This might not be a best way for big files as the content
	+ // will be stored (temporarily) in browser memory
	+ // TODO: This method does not show the download progress in the browser
	+ // but it could be implemented in the UI, axios has 'progress' property
	+ axios.get(url, { responseType: 'blob' })
	+ .then(response => {
	+ const link = document.createElement('a')
	+
	+ if (!filename) {
	+ const contentDisposition = response.headers['content-disposition']
	+ filename = 'unknown'
	+
	+ if (contentDisposition) {
	+ const match = contentDisposition.match(/filename="?(.+)"?/);
	+ if (match && match.length === 2) {
	+ filename = match[1];
	+ }
	+ }
	+ }
	+
	+ link.href = window.URL.createObjectURL(response.data)
	+ link.download = filename
	+ link.click()
	+ })
	+}
	+
	+/**
	+ * Create an object copy with specified properties only
	+ */
	+const pick = (obj, properties) => {
	+ let result = {}
	+
	+ properties.forEach(prop => {
	+ if (prop in obj) {
	+ result[prop] = obj[prop]
	+ }
	+ })
	+
	+ return result
	+}
	+
	+const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="visually-hidden">Loading</span></div></div>'
	+
	+let isLoading = 0
	+
	+/**
	+ * Display the 'loading...' element, lock the UI
	+ *
	+ * @param array\|string\|DOMElement\|null\|bool\|jQuery $element Supported input:
	+ * - DOMElement or jQuery collection or selector string: for element-level loader inside
	+ * - array: for element-level loader inside the element specified in the first array element
	+ * - undefined, null or true: for page-level loader
	+ * @param object $style Additional element style
	+ */
	+const startLoading = (element, style = null) => {
	+ let small = false
	+
	+ if (Array.isArray(element)) {
	+ style = element[1]
	+ element = element[0]
	+ }
	+
	+ if (element && element !== true) {
	+ // The loader inside some page element
	+ small = true
	+
	+ if (style) {
	+ small = style.small
	+ delete style.small
	+ $(element).css(style)
	+ } else {
	+ $(element).css('position', 'relative')
	+ }
	+ } else {
	+ // The full page loader
	+ isLoading++
	+ let loading = $('#app > .app-loader').removeClass('fadeOut')
	+ if (loading.length) {
	+ return
	+ }
	+
	+ element = $('#app')
	+ }
	+
	+ const loaderElement = $(loader)
	+
	+ if (small) {
	+ loaderElement.addClass('small')
	+ }
	+
	+ $(element).append(loaderElement)
	+
	+ return loaderElement
	+}
	+
	+/**
	+ * Hide the "loading" element
	+ *
	+ * @param array\|string\|DOMElement\|null\|bool\|jQuery $element
	+ * @see startLoading()
	+ */
	+const stopLoading = (element) => {
	+ if (element && element !== true) {
	+ if (Array.isArray(element)) {
	+ element = element[0]
	+ }
	+
	+ $(element).find('.app-loader').remove()
	+ } else if (isLoading > 0) {
	+ $('#app > .app-loader').addClass('fadeOut')
	+ isLoading--;
	+ }
	+}
	+
	+export {
	+ clearFormValidation,
	+ downloadFile,
	+ pick,
	+ startLoading,
	+ stopLoading
	+}
	diff --git a/src/resources/vue/Admin/Distlist.vue b/src/resources/vue/Admin/Distlist.vue
	index acfe289c..76477f43 100644
	--- a/src/resources/vue/Admin/Distlist.vue
	+++ b/src/resources/vue/Admin/Distlist.vue
	@@ -1,116 +1,113 @@
	<template>
	<div v-if="list.id" class="container">
	<div class="card" id="distlist-info">
	<div class="card-body">
	<div class="card-title">{{ list.email }}</div>
	<div class="card-text">
	<form class="read-only short">
	<div class="row plaintext">
	<label for="distlistid" class="col-sm-4 col-form-label">
	{{ $t('form.id') }} <span class="text-muted">({{ $t('form.created') }})</span>
	</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="distlistid">
	{{ list.id }} <span class="text-muted">({{ list.created_at }})</span>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.statusClass(list) + ' form-control-plaintext'" id="status">{{ $root.statusText(list) }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="name" class="col-sm-4 col-form-label">{{ $t('distlist.name') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="name">{{ list.name }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="members" class="col-sm-4 col-form-label">{{ $t('distlist.recipients') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="members">
	<span v-for="member in list.members" :key="member">{{ member }}<br></span>
	</span>
	</div>
	</div>
	</form>
	<div class="mt-2 buttons">
	<button v-if="!list.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendList">
	{{ $t('btn.suspend') }}
	</button>
	<button v-if="list.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendList">
	{{ $t('btn.unsuspend') }}
	</button>
	</div>
	</div>
	</div>
	</div>
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-settings" href="#distlist-settings" role="tab" aria-controls="distlist-settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="distlist-settings" role="tabpanel" aria-labelledby="tab-settings">
	<div class="card-body">
	<div class="card-text">
	<form class="read-only short">
	<div class="row plaintext">
	<label for="sender_policy" class="col-sm-4 col-form-label">{{ $t('distlist.sender-policy') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="sender_policy">
	{{ list.config.sender_policy && list.config.sender_policy.length ? list.config.sender_policy.join(', ') : $t('form.none') }}
	</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	list: { members: [], config: {} }
	}
	},
	created() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/groups/' + this.$route.params.list)
	+ axios.get('/api/v4/groups/' + this.$route.params.list, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.list = response.data
	})
	.catch(this.$root.errorHandler)
	},
	methods: {
	suspendList() {
	axios.post('/api/v4/groups/' + this.list.id + '/suspend')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.list = Object.assign({}, this.list, { isSuspended: true })
	}
	})
	},
	unsuspendList() {
	axios.post('/api/v4/groups/' + this.list.id + '/unsuspend')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.list = Object.assign({}, this.list, { isSuspended: false })
	}
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Admin/Resource.vue b/src/resources/vue/Admin/Resource.vue
	index 64c37eff..7ddc0846 100644
	--- a/src/resources/vue/Admin/Resource.vue
	+++ b/src/resources/vue/Admin/Resource.vue
	@@ -1,80 +1,77 @@
	<template>
	<div v-if="resource.id" class="container">
	<div class="card" id="resource-info">
	<div class="card-body">
	<div class="card-title">{{ resource.email }}</div>
	<div class="card-text">
	<form class="read-only short">
	<div class="row plaintext">
	<label for="resourceid" class="col-sm-4 col-form-label">
	{{ $t('form.id') }} <span class="text-muted">({{ $t('form.created') }})</span>
	</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="resourceid">
	{{ resource.id }} <span class="text-muted">({{ resource.created_at }})</span>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.statusClass(resource) + ' form-control-plaintext'" id="status">{{ $root.statusText(resource) }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="name">{{ resource.name }}</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-settings" href="#resource-settings" role="tab" aria-controls="resource-settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="resource-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="invitation_policy" class="col-sm-4 col-form-label">{{ $t('resource.invitation-policy') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="invitation_policy">
	{{ resource.config.invitation_policy \|\| $t('form.none') }}
	</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	resource: { config: {} }
	}
	},
	created() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/resources/' + this.$route.params.resource)
	+ axios.get('/api/v4/resources/' + this.$route.params.resource, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.resource = response.data
	})
	.catch(this.$root.errorHandler)
	}
	}
	</script>
	diff --git a/src/resources/vue/Admin/SharedFolder.vue b/src/resources/vue/Admin/SharedFolder.vue
	index 91e01b48..6ca77c63 100644
	--- a/src/resources/vue/Admin/SharedFolder.vue
	+++ b/src/resources/vue/Admin/SharedFolder.vue
	@@ -1,119 +1,116 @@
	<template>
	<div v-if="folder.id" class="container">
	<div class="card" id="folder-info">
	<div class="card-body">
	<div class="card-title">{{ folder.email }}</div>
	<div class="card-text">
	<form class="read-only short">
	<div class="row plaintext">
	<label for="folderid" class="col-sm-4 col-form-label">
	{{ $t('form.id') }} <span class="text-muted">({{ $t('form.created') }})</span>
	</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="folderid">
	{{ folder.id }} <span class="text-muted">({{ folder.created_at }})</span>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.statusClass(folder) + ' form-control-plaintext'" id="status">{{ $root.statusText(folder) }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="name">{{ folder.name }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="type" class="col-sm-4 col-form-label">{{ $t('form.type') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="type">{{ $t('shf.type-' + folder.type) }}</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-settings" href="#folder-settings" role="tab" aria-controls="folder-settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-aliases" href="#folder-aliases" role="tab" aria-controls="folder-aliases" aria-selected="false" @click="$root.tab">
	{{ $t('user.aliases-email') }} ({{ folder.aliases.length }})
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="folder-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="acl" class="col-sm-4 col-form-label">{{ $t('form.acl') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="acl">
	<span v-if="folder.config.acl.length">
	<span v-for="(entry, index) in folder.config.acl" :key="index">
	{{ entry.replace(',', ':') }}<br>
	</span>
	</span>
	<span v-else>{{ $t('form.none') }}</span>
	</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="folder-aliases" role="tabpanel" aria-labelledby="tab-aliases">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="(alias, index) in folder.aliases" :id="'alias' + index" :key="index">
	<td>{{ alias }}</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td>{{ $t('shf.aliases-none') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	folder: { config: {}, aliases: [] }
	}
	},
	created() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/shared-folders/' + this.$route.params.folder)
	+ axios.get('/api/v4/shared-folders/' + this.$route.params.folder, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.folder = response.data
	})
	.catch(this.$root.errorHandler)
	}
	}
	</script>
	diff --git a/src/resources/vue/Admin/Stats.vue b/src/resources/vue/Admin/Stats.vue
	index bffdc8cb..c45db4c2 100644
	--- a/src/resources/vue/Admin/Stats.vue
	+++ b/src/resources/vue/Admin/Stats.vue
	@@ -1,46 +1,42 @@
	<template>
	<div id="stats-container" class="container"></div>
	</template>

	<script>
	import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'

	export default {
	data() {
	return {
	charts: {},
	chartTypes: ['users', 'users-all', 'income', 'discounts', 'vouchers']
	}
	},
	mounted() {
	this.chartTypes.forEach(chart => this.loadChart(chart))
	},
	methods: {
	drawChart(name, data) {
	if (!data.title) {
	return
	}

	const ch = new Chart('#chart-' + name, data)

	this.charts[name] = ch
	},
	loadChart(name) {
	const chart = $('<div>').attr({ id: 'chart-' + name }).appendTo(this.$el)

	- this.$root.addLoader(chart)
	-
	- axios.get('/api/v4/stats/chart/' + name)
	+ axios.get('/api/v4/stats/chart/' + name, { loader: chart })
	.then(response => {
	- this.$root.removeLoader(chart)
	this.drawChart(name, response.data)
	})
	.catch(error => {
	console.error(error)
	- this.$root.removeLoader(chart)
	chart.append($('<span>').text(this.$t('msg.loading-failed')))
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
	index b48f6138..3bc64e3d 100644
	--- a/src/resources/vue/Admin/User.vue
	+++ b/src/resources/vue/Admin/User.vue
	@@ -1,841 +1,832 @@
	<template>
	<div class="container">
	<div class="card" id="user-info">
	<div class="card-body">
	<h1 class="card-title">{{ user.email }}</h1>
	<div class="card-text">
	<form class="read-only short">
	<div v-if="user.wallet.user_id != user.id" class="row plaintext">
	<label for="manager" class="col-sm-4 col-form-label">{{ $t('user.managed-by') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="manager">
	<router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">({{ $t('form.created') }})</span></label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="userid">
	{{ user.id }} <span class="text-muted">({{ user.created_at }})</span>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="status">
	<span :class="$root.statusClass(user)">{{ $root.statusText(user) }}</span>
	</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.first_name">
	<label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.last_name">
	<label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.organization">
	<label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="organization">{{ user.organization }}</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.phone">
	<label for="phone" class="col-sm-4 col-form-label">{{ $t('form.phone') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="phone">{{ user.phone }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="external_email" class="col-sm-4 col-form-label">{{ $t('user.ext-email') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="external_email">
	<a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a>
	<btn class="btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</btn>
	</span>
	</div>
	</div>
	<div class="row plaintext" v-if="user.billing_address">
	<label for="billing_address" class="col-sm-4 col-form-label">{{ $t('user.address') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="country" class="col-sm-4 col-form-label">{{ $t('user.country') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="country">{{ user.country }}</span>
	</div>
	</div>
	</form>
	<div class="mt-2 buttons">
	<btn v-if="!user.isSuspended" id="button-suspend" class="btn-warning" @click="suspendUser">
	{{ $t('btn.suspend') }}
	</btn>
	<btn v-if="user.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendUser">
	{{ $t('btn.unsuspend') }}
	</btn>
	</div>
	</div>
	</div>
	</div>
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-finances" href="#user-finances" role="tab" aria-controls="user-finances" aria-selected="true">
	{{ $t('user.finances') }}
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-aliases" href="#user-aliases" role="tab" aria-controls="user-aliases" aria-selected="false">
	{{ $t('user.aliases') }} ({{ user.aliases.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-subscriptions" href="#user-subscriptions" role="tab" aria-controls="user-subscriptions" aria-selected="false">
	{{ $t('user.subscriptions') }} ({{ skus.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-domains" href="#user-domains" role="tab" aria-controls="user-domains" aria-selected="false">
	{{ $t('user.domains') }} ({{ domains.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-users" href="#user-users" role="tab" aria-controls="user-users" aria-selected="false">
	{{ $t('user.users') }} ({{ users.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-distlists" href="#user-distlists" role="tab" aria-controls="user-distlists" aria-selected="false">
	{{ $t('user.distlists') }} ({{ distlists.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-resources" href="#user-resources" role="tab" aria-controls="user-resources" aria-selected="false">
	{{ $t('user.resources') }} ({{ resources.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-shared-folders" href="#user-shared-folders" role="tab" aria-controls="user-shared-folders" aria-selected="false">
	{{ $t('dashboard.shared-folders') }} ({{ folders.length }})
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-settings" href="#user-settings" role="tab" aria-controls="user-settings" aria-selected="false">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances">
	<div class="card-body">
	<h2 class="card-title">
	{{ $t('wallet.title') }}
	<span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance, wallet.currency) }}</strong></span>
	</h2>
	<div class="card-text">
	<form class="read-only short">
	<div class="row">
	<label class="col-sm-4 col-form-label">{{ $t('user.discount') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="discount">
	<span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span>
	<btn class="btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</btn>
	</span>
	</div>
	</div>
	<div class="row" v-if="wallet.mandate && wallet.mandate.id">
	<label class="col-sm-4 col-form-label">{{ $t('user.auto-payment') }}</label>
	<div class="col-sm-8">
	<span id="autopayment" :class="'form-control-plaintext' + (wallet.mandateState ? ' text-danger' : '')"
	v-html="$t('user.auto-payment-text', {
	amount: wallet.mandate.amount + ' ' + wallet.currency,
	balance: wallet.mandate.balance + ' ' + wallet.currency,
	method: wallet.mandate.method
	})"
	>
	<span v-if="wallet.mandateState">({{ wallet.mandateState }})</span>.
	</span>
	</div>
	</div>
	<div class="row" v-if="wallet.providerLink">
	<label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} {{ $t('form.id') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" v-html="wallet.providerLink"></span>
	</div>
	</div>
	</form>
	<div class="mt-2 buttons">
	<btn id="button-award" class="btn-success" @click="awardDialog">{{ $t('user.add-bonus') }}</btn>
	<btn id="button-penalty" class="btn-danger" @click="penalizeDialog">{{ $t('user.add-penalty') }}</btn>
	</div>
	</div>
	<h2 class="card-title mt-4">{{ $t('wallet.transactions') }}</h2>
	<transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log>
	</div>
	</div>
	<div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="(alias, index) in user.aliases" :id="'alias' + index" :key="index">
	<td>{{ alias }}</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td>{{ $t('user.aliases-none') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-subscriptions" role="tabpanel" aria-labelledby="tab-subscriptions">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('user.subscription') }}</th>
	<th scope="col">{{ $t('user.price') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="(sku, sku_id) in skus" :id="'sku' + sku.id" :key="sku_id">
	<td>{{ sku.name }}</td>
	<td class="price">{{ sku.price }}</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td colspan="2">{{ $t('user.subscriptions-none') }}</td>
	</tr>
	</tfoot>
	</table>
	<small v-if="discount > 0" class="hint">
	<hr class="m-0">
	¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
	</small>
	<div class="mt-2 buttons">
	<btn class="btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">{{ $t('user.reset-2fa') }}</btn>
	<btn class="btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">{{ $t('user.add-beta') }}</btn>
	</div>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('domain.namespace') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="globe" :class="$root.statusClass(domain)" :title="$root.statusText(domain)"></svg-icon>
	<router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link>
	</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td>{{ $t('user.domains-none') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.primary-email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="item in users" :id="'user' + item.id" :key="item.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="user" :class="$root.statusClass(item)" :title="$root.statusText(item)"></svg-icon>
	<router-link v-if="item.id != user.id" :to="{ path: '/user/' + item.id }">{{ item.email }}</router-link>
	<span v-else>{{ item.email }}</span>
	</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td>{{ $t('user.users-none') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-distlists" role="tabpanel" aria-labelledby="tab-distlists">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('distlist.name') }}</th>
	<th scope="col">{{ $t('form.email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="list in distlists" :key="list.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="users" :class="$root.statusClass(list)" :title="$root.statusText(list)"></svg-icon>
	<router-link :to="{ path: '/distlist/' + list.id }">{{ list.name }}</router-link>
	</td>
	<td>
	<router-link :to="{ path: '/distlist/' + list.id }">{{ list.email }}</router-link>
	</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td colspan="2">{{ $t('distlist.list-empty') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-resources" role="tabpanel" aria-labelledby="tab-resources">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.name') }}</th>
	<th scope="col">{{ $t('form.email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="resource in resources" :key="resource.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="gear" :class="$root.statusClass(resource)" :title="$root.statusText(resource)"></svg-icon>
	<router-link :to="{ path: '/resource/' + resource.id }">{{ resource.name }}</router-link>
	</td>
	<td>
	<router-link :to="{ path: '/resource/' + resource.id }">{{ resource.email }}</router-link>
	</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td colspan="2">{{ $t('resource.list-empty') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-shared-folders" role="tabpanel" aria-labelledby="tab-shared-folders">
	<div class="card-body">
	<div class="card-text">
	<table class="table table-sm table-hover mb-0">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.name') }}</th>
	<th scope="col">{{ $t('form.type') }}</th>
	<th scope="col">{{ $t('form.email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="folder in folders" :key="folder.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="folder-open" :class="$root.statusClass(folder)" :title="$root.statusText(folder)"></svg-icon>
	<router-link :to="{ path: '/shared-folder/' + folder.id }">{{ folder.name }}</router-link>
	</td>
	<td>{{ $t('shf.type-' + folder.type) }}</td>
	<td><router-link :to="{ path: '/shared-folder/' + folder.id }">{{ folder.email }}</router-link></td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td colspan="3">{{ $t('shf.list-empty') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="user-settings" role="tabpanel" aria-labelledby="tab-settings">
	<div class="card-body">
	<div class="card-text">
	<form class="read-only short">
	<div class="row plaintext">
	<label for="greylist_enabled" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="greylist_enabled">
	<span v-if="user.config.greylist_enabled" class="text-success">{{ $t('form.enabled') }}</span>
	<span v-else class="text-danger">{{ $t('form.disabled') }}</span>
	</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>

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

	<div id="email-dialog" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('user.ext-email') }}</h5>
	<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<p>
	<input v-model="external_email" name="external_email" class="form-control">
	</p>
	</div>
	<div class="modal-footer">
	<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	<btn class="btn-primary modal-action" @click="submitEmail()" icon="check">{{ $t('btn.submit') }}</btn>
	</div>
	</div>
	</div>
	</div>

	<div id="oneoff-dialog" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title') }}</h5>
	<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<form data-validation-prefix="oneoff_">
	<div class="row mb-3">
	<label for="oneoff_amount" class="col-form-label">{{ $t('form.amount') }}</label>
	<div class="input-group">
	<input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required>
	<span class="input-group-text">{{ wallet.currency }}</span>
	</div>
	</div>
	<div class="row">
	<label for="oneoff_description" class="col-form-label">{{ $t('form.description') }}</label>
	<input class="form-control" id="oneoff_description" v-model="oneoff_description" required>
	</div>
	</form>
	</div>
	<div class="modal-footer">
	<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	<btn class="btn-primary modal-action" @click="submitOneOff()" icon="check">{{ $t('btn.submit') }}</btn>
	</div>
	</div>
	</div>
	</div>

	<div id="reset-2fa-dialog" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('user.reset-2fa-title') }}</h5>
	<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<p>{{ $t('user.2fa-hint1') }}</p>
	<p>{{ $t('user.2fa-hint2') }}</p>
	</div>
	<div class="modal-footer">
	<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	<btn class="btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</btn>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import { Modal } from 'bootstrap'
	import TransactionLog from '../Widgets/TransactionLog'

	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: {
	TransactionLog
	},
	beforeRouteUpdate (to, from, next) {
	// An event called when the route that renders this component has changed,
	// but this component is reused in the new route.
	// Required to handle links from /user/XXX to /user/YYY
	next()
	this.$parent.routerReload()
	},
	data() {
	return {
	oneoff_amount: '',
	oneoff_description: '',
	oneoff_negative: false,
	discount: 0,
	discount_description: '',
	discounts: [],
	external_email: '',
	folders: [],
	has2FA: false,
	hasBeta: false,
	wallet: {},
	walletReload: false,
	distlists: [],
	domains: [],
	resources: [],
	skus: [],
	sku2FA: null,
	users: [],
	user: {
	aliases: [],
	config: {},
	wallet: {},
	skus: {},
	}
	}
	},
	created() {
	const user_id = this.$route.params.user

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

	- const financesTab = '#user-finances'
	+ 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)
	- this.$root.addLoader(financesTab)
	- axios.get('/api/v4/wallets/' + this.user.wallets[0].id)
	+ axios.get('/api/v4/wallets/' + this.user.wallets[0].id, { loader })
	.then(response => {
	- this.$root.removeLoader(financesTab)
	this.wallet = response.data
	this.setMandateState()
	})
	- .catch(error => {
	- this.$root.removeLoader(financesTab)
	- })

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

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

	this.skus.push(item)

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

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

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

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

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

	// Fetch shared folders lists
	axios.get('/api/v4/shared-folders?owner=' + user_id)
	.then(response => {
	this.folders = response.data.list
	})
	})
	.catch(this.$root.errorHandler)
	},
	mounted() {
	$(this.$el).find('ul.nav-tabs a').on('click', this.$root.tab)
	},
	methods: {
	addBetaSku() {
	axios.post('/api/v4/users/' + this.user.id + '/skus/beta')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.hasBeta = true
	const sku = response.data.sku
	this.skus.push({
	id: sku.id,
	name: sku.name,
	cost: sku.cost,
	price: this.$root.priceLabel(sku.cost, this.discount)
	})
	}
	})
	},
	capitalize(str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	},
	awardDialog() {
	this.oneOffDialog(false)
	},
	discountEdit() {
	if (!this.discount_dialog) {
	const dialog = $('#discount-dialog')[0]

	dialog.addEventListener('shown.bs.modal', e => {
	$(dialog).find('select').focus()
	// Note: Vue v-model is strict, convert null to a string
	this.wallet.discount_id = this.wallet_discount_id \|\| ''
	})

	this.discount_dialog = new Modal(dialog)
	}

	this.discount_dialog.show()

	if (!this.discounts.length) {
	// Fetch discounts
	axios.get('/api/v4/users/' + this.user.id + '/discounts')
	.then(response => {
	this.discounts = response.data.list
	})
	}
	},
	emailEdit() {
	this.external_email = this.user.external_email
	this.$root.clearFormValidation($('#email-dialog'))

	if (!this.email_dialog) {
	const dialog = $('#email-dialog')[0]

	dialog.addEventListener('shown.bs.modal', e => {
	$(dialog).find('input').focus()
	})

	this.email_dialog = new Modal(dialog)
	}

	this.email_dialog.show()
	},
	setMandateState() {
	let mandate = this.wallet.mandate
	if (mandate && mandate.id) {
	if (!mandate.isValid) {
	this.wallet.mandateState = mandate.isPending ? 'pending' : 'invalid'
	} else if (mandate.isDisabled) {
	this.wallet.mandateState = 'disabled'
	}
	}
	},
	oneOffDialog(negative) {
	this.oneoff_negative = negative

	if (!this.oneoff_dialog) {
	const dialog = $('#oneoff-dialog')[0]

	dialog.addEventListener('shown.bs.modal', () => {
	this.$root.clearFormValidation(dialog)
	$(dialog).find('#oneoff_amount').focus()
	})

	this.oneoff_dialog = new Modal(dialog)
	}

	this.oneoff_dialog.show()
	},
	penalizeDialog() {
	this.oneOffDialog(true)
	},
	reload() {
	// this is to reload transaction log
	this.walletReload = true
	this.$nextTick(() => { this.walletReload = false })
	},
	reset2FA() {
	new Modal('#reset-2fa-dialog').hide()
	axios.post('/api/v4/users/' + this.user.id + '/reset2FA')
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.skus = this.skus.filter(sku => sku.id != this.sku2FA)
	this.has2FA = false
	}
	})
	},
	reset2FADialog() {
	new Modal('#reset-2fa-dialog').show()
	},
	submitDiscount() {
	this.discount_dialog.hide()

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

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

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

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

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

	axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post)
	.then(response => {
	if (response.data.status == 'success') {
	this.oneoff_dialog.hide()
	this.$toast.success(response.data.message)
	this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance})
	this.oneoff_amount = ''
	this.oneoff_description = ''
	this.reload()
	}
	})
	},
	suspendUser() {
	axios.post('/api/v4/users/' + this.user.id + '/suspend')
	.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/App.vue b/src/resources/vue/App.vue
	index 19823114..21d45741 100644
	--- a/src/resources/vue/App.vue
	+++ b/src/resources/vue/App.vue
	@@ -1,131 +1,130 @@
	<template>
	<router-view v-if="!isLoading && !routerReloading && key" :key="key" @hook:mounted="childMounted"></router-view>
	</template>

	<script>
	export default {
	data() {
	return {
	isLoading: true,
	routerReloading: false
	}
	},
	computed: {
	key() {
	// Display 403 error page if the current user has no permission to a specified page
	// Note that it's the only place I found that allows us to do this.
	if (this.$route.meta.perm && !this.checkPermission(this.$route.meta.perm)) {
	// Returning false here will block the page component from execution,
	// as we're using the key in v-if condition on the router-view above
	return false
	}

	// The 'key' property is used to reload the Page component
	// whenever a route changes. Normally vue does not do that.
	return this.$route.name == '404' ? this.$route.path : 'static'
	}
	},
	mounted() {
	const token = localStorage.getItem('token')

	if (token) {
	- this.$root.startLoading()
	axios.defaults.headers.common.Authorization = 'Bearer ' + token

	const post = { refresh_token: localStorage.getItem("refreshToken") }

	- axios.post('/api/auth/info?refresh=1', post, { ignoreErrors: true })
	+ axios.post('/api/auth/info?refresh=1', post, { ignoreErrors: true, loader: true })
	.then(response => {
	this.$root.loginUser(response.data, false)
	- this.$root.stopLoading()
	- this.isLoading = false
	})
	.catch(error => {
	- // Release lock on the router-view, otherwise links (e.g. Logout) will not work
	- this.isLoading = false
	// Handle the error, on 401 display the logon page
	this.$root.errorHandler(error)
	})
	+ .finally(() => {
	+ // Release lock on the router-view, otherwise links (e.g. Logout) will not work
	+ this.isLoading = false
	+ })
	} else {
	this.isLoading = false
	}
	},
	methods: {
	checkPermission(type) {
	if (this.$root.hasPermission(type)) {
	return true
	}

	const hint = type == 'wallets' ? this.$t('wallet.noperm') : ''

	this.$root.errorPage(403, null, hint)

	return false
	},
	childMounted() {
	this.$root.updateBodyClass()
	this.getFAQ()
	this.degradedWarning()
	},
	degradedWarning() {
	// Display "Account Degraded" warning on all pages
	if (this.$root.isDegraded()) {
	let message = this.$t('user.degraded-warning')

	if (this.$root.authInfo.isDegraded) {
	message += ' ' + this.$t('user.degraded-hint')
	}

	const html = `<div id="status-degraded" class="d-flex justify-content-center">`
	+ `<p class="alert alert-danger">${message}</p></div>`

	$('#app > div.container').prepend(html)
	}
	},
	getFAQ() {
	let page = this.$route.path

	if (page == '/' \|\| page == '/login') {
	return
	}

	axios.get('/content/faq' + page, { ignoreErrors: true })
	.then(response => {
	const result = response.data.faq
	$('#faq').remove()
	if (result && result.length) {
	let faq = $('<div id="faq" class="faq mt-3"><h5>' + this.$t('app.faq') + '</h5><ul class="pl-4"></ul></div>')
	let list = $([])

	result.forEach(item => {
	let li = $('<li>').append($('<a>').attr('href', item.href).text(item.title))

	// Handle internal links with the vue-router
	if (item.href.charAt(0) == '/') {
	li.find('a').on('click', event => {
	event.preventDefault()
	this.$router.push(item.href)
	})
	}

	list = list.add(li)
	})

	faq.find('ul').append(list)

	$(this.$el).append(faq)
	}
	})
	},
	routerReload() {
	// Together with beforeRouteUpdate even on a route component
	// allows us to force reload the component. So it is possible
	// to jump from/to page that uses currently loaded component.
	this.routerReloading = true
	this.$nextTick().then(() => {
	this.routerReloading = false
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/CompanionApp.vue b/src/resources/vue/CompanionApp.vue
	index bc1c3275..211692de 100644
	--- a/src/resources/vue/CompanionApp.vue
	+++ b/src/resources/vue/CompanionApp.vue
	@@ -1,78 +1,73 @@
	<template>
	<div class="container" dusk="companionapp-component">
	<div class="card">
	<div class="card-body">
	<div class="card-title">
	{{ $t('companion.title') }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	</div>
	<div class="card-text">
	<p>
	{{ $t('companion.description') }}
	</p>
	</div>
	</div>
	</div>

	<ul class="nav nav-tabs mt-2" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-qrcode" href="#companion-qrcode" role="tab" aria-controls="companion-qrcode" aria-selected="true" @click="$root.tab">
	{{ $t('companion.pair-new') }}
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-list" href="#companion-list" role="tab" aria-controls="companion-list" aria-selected="false" @click="$root.tab">
	{{ $t('companion.paired') }}
	</a>
	</li>
	</ul>

	<div class="tab-content">
	<div class="tab-pane active" id="companion-qrcode" role="tabpanel" aria-labelledby="tab-qrcode">
	<div class="card-body">
	<div class="card-text">
	<p>
	{{ $t('companion.pairing-instructions') }}
	</p>
	<p>
	<img :src="qrcode" />
	</p>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="companion-list" role="tabpanel" aria-labelledby="tab-list">
	<div class="card-body">
	<companionapp-list class="card-text"></companionapp-list>
	</div>
	</div>
	</div>

	</div>
	</template>

	<script>
	import CompanionappList from './Widgets/CompanionappList'

	export default {
	components: {
	CompanionappList
	},
	data() {
	return {
	qrcode: ""
	}
	},
	mounted() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/companion/pairing')
	+ axios.get('/api/v4/companion/pairing', { loading: true })
	.then(response => {
	- this.$root.stopLoading()
	this.qrcode = response.data.qrcode
	})
	.catch(this.$root.errorHandler)
	- },
	- methods: {
	- },
	+ }
	}
	</script>
	diff --git a/src/resources/vue/Distlist/Info.vue b/src/resources/vue/Distlist/Info.vue
	index 01d3cb3e..55e2f1cd 100644
	--- a/src/resources/vue/Distlist/Info.vue
	+++ b/src/resources/vue/Distlist/Info.vue
	@@ -1,151 +1,148 @@
	<template>
	<div class="container">
	<status-component v-if="list_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>

	<div class="card" id="distlist-info">
	<div class="card-body">
	<div class="card-title" v-if="list_id !== 'new'">
	{{ $tc('distlist.list-title', 1) }}
	<btn class="btn-outline-danger button-delete float-end" @click="deleteList()" icon="trash-can">{{ $t('distlist.delete') }}</btn>
	</div>
	<div class="card-title" v-if="list_id === 'new'">{{ $t('distlist.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="list_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="list_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(list) + ' form-control-plaintext'" id="status">{{ $root.statusText(list) }}</span>
	</div>
	</div>
	<div class="row mb-3">
	<label for="name" class="col-sm-4 col-form-label">{{ $t('distlist.name') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="name" required v-model="list.name">
	</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="list_id !== 'new'" required v-model="list.email">
	</div>
	</div>
	<div class="row mb-3">
	<label for="members-input" class="col-sm-4 col-form-label">{{ $t('distlist.recipients') }}</label>
	<div class="col-sm-8">
	<list-input id="members" :list="list.members"></list-input>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	<form @submit.prevent="submitSettings" class="card-body">
	<div class="row mb-3">
	<label for="sender-policy-input" class="col-sm-4 col-form-label">{{ $t('distlist.sender-policy') }}</label>
	<div class="col-sm-8 pt-2">
	<list-input id="sender-policy" :list="list.config.sender_policy" class="mb-1"></list-input>
	<small id="sender-policy-hint" class="text-muted">
	{{ $t('distlist.sender-policy-text') }}
	</small>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import ListInput from '../Widgets/ListInput'
	import StatusComponent from '../Widgets/Status'

	export default {
	components: {
	ListInput,
	StatusComponent
	},
	data() {
	return {
	list_id: null,
	list: { members: [], config: {} },
	status: {}
	}
	},
	created() {
	this.list_id = this.$route.params.list

	if (this.list_id != 'new') {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/groups/' + this.list_id)
	+ axios.get('/api/v4/groups/' + this.list_id, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.list = response.data
	this.status = response.data.statusInfo
	})
	.catch(this.$root.errorHandler)
	}
	},
	mounted() {
	$('#name').focus()
	},
	methods: {
	deleteList() {
	axios.delete('/api/v4/groups/' + this.list_id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'distlists' })
	}
	})
	},
	statusUpdate(list) {
	this.list = Object.assign({}, this.list, list)
	},
	submit() {
	this.$root.clearFormValidation($('#list-info form'))

	let method = 'post'
	let location = '/api/v4/groups'

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

	axios[method](location, this.list)
	.then(response => {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'distlists' })
	})
	},
	submitSettings() {
	this.$root.clearFormValidation($('#settings form'))
	let post = this.list.config

	axios.post('/api/v4/groups/' + this.list_id + '/config', post)
	.then(response => {
	this.$toast.success(response.data.message)
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Distlist/List.vue b/src/resources/vue/Distlist/List.vue
	index a8dd499f..8ed1e34b 100644
	--- a/src/resources/vue/Distlist/List.vue
	+++ b/src/resources/vue/Distlist/List.vue
	@@ -1,67 +1,64 @@
	<template>
	<div class="container">
	<div class="card" id="distlist-list">
	<div class="card-body">
	<div class="card-title">
	{{ $tc('distlist.list-title', 2) }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	<btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="distlist/new" icon="users">
	{{ $t('distlist.create') }}
	</btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	<thead>
	<tr>
	<th scope="col">{{ $t('distlist.name') }}</th>
	<th scope="col">{{ $t('distlist.email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="list in lists" :key="list.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="users" :class="$root.statusClass(list)" :title="$root.statusText(list)"></svg-icon>
	<router-link :to="{ path: 'distlist/' + list.id }">{{ list.name }}</router-link>
	</td>
	<td>
	<router-link :to="{ path: 'distlist/' + list.id }">{{ list.email }}</router-link>
	</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td colspan="2">{{ $t('distlist.list-empty') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	</div>
	</template>

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

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

	export default {
	data() {
	return {
	lists: []
	}
	},
	created() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/groups')
	+ axios.get('/api/v4/groups', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.lists = response.data
	})
	.catch(this.$root.errorHandler)
	}
	}
	</script>
	diff --git a/src/resources/vue/Domain/Info.vue b/src/resources/vue/Domain/Info.vue
	index a86e5801..7916c6c5 100644
	--- a/src/resources/vue/Domain/Info.vue
	+++ b/src/resources/vue/Domain/Info.vue
	@@ -1,227 +1,224 @@
	<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>
	</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>
	</div>
	</template>

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

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

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

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

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

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

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

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

	let 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/Domain/List.vue b/src/resources/vue/Domain/List.vue
	index 3ffb5275..94f48c98 100644
	--- a/src/resources/vue/Domain/List.vue
	+++ b/src/resources/vue/Domain/List.vue
	@@ -1,62 +1,59 @@
	<template>
	<div class="container">
	<div class="card" id="domain-list">
	<div class="card-body">
	<div class="card-title">
	{{ $t('user.domains') }}
	<btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="domain/new" icon="globe">
	{{ $t('domain.create') }}
	</btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	<thead>
	<tr>
	<th scope="col">{{ $t('domain.namespace') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="domain in domains" :key="domain.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="globe" :class="$root.statusClass(domain)" :title="$root.statusText(domain)"></svg-icon>
	<router-link :to="{ path: 'domain/' + domain.id }">{{ domain.namespace }}</router-link>
	</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td>{{ $t('user.domains-none') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	</div>
	</template>

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

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

	export default {
	data() {
	return {
	domains: []
	}
	},
	created() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/domains')
	+ axios.get('/api/v4/domains', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.domains = response.data
	})
	.catch(this.$root.errorHandler)
	}
	}
	</script>
	diff --git a/src/resources/vue/File/Info.vue b/src/resources/vue/File/Info.vue
	index 729308ae..3b8c6c1d 100644
	--- a/src/resources/vue/File/Info.vue
	+++ b/src/resources/vue/File/Info.vue
	@@ -1,165 +1,162 @@
	<template>
	<div class="container">
	<div class="card" id="file-info">
	<div class="card-body">
	<div class="card-title">
	{{ file.name }}
	<btn v-if="file.canDelete" class="btn-outline-danger button-delete float-end" @click="fileDelete" icon="trash-can">{{ $t('file.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="file.isOwner">
	<a class="nav-link" id="tab-sharing" href="#sharing" role="tab" aria-controls="sharing" aria-selected="false" @click="$root.tab">
	{{ $t('file.sharing') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<form class="tab-pane show active card-body read-only short" id="general" role="tabpanel" aria-labelledby="tab-general">
	<div class="row plaintext">
	<label for="mimetype" class="col-sm-4 col-form-label">{{ $t('file.mimetype') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="mimetype">{{ file.mimetype }}</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="size" class="col-sm-4 col-form-label">{{ $t('form.size') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="size">{{ api.sizeText(file.size) }}</span>
	</div>
	</div>
	<div class="row plaintext mb-3">
	<label for="mtime" class="col-sm-4 col-form-label">{{ $t('file.mtime') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="mtime">{{ file.mtime }}</span>
	</div>
	</div>
	<btn class="btn-primary" icon="download" @click="fileDownload">{{ $t('btn.download') }}</btn>
	</form>
	<div v-if="file.isOwner" class="tab-pane card-body" id="sharing" role="tabpanel" aria-labelledby="tab-sharing">
	<div id="share-form" class="mb-3">
	<div class="row">
	<small id="share-links-hint" class="text-muted mb-2">
	{{ $t('file.sharing-links-text') }}
	</small>
	<div class="input-group">
	<input type="text" class="form-control" id="user" :placeholder="$t('form.email')">
	<a href="#" class="btn btn-outline-secondary" @click.prevent="shareAdd">
	<svg-icon icon="plus"></svg-icon><span class="visually-hidden">{{ $t('btn.add') }}</span>
	</a>
	</div>
	</div>
	</div>
	<div id="share-links" class="row m-0" v-if="shares.length">
	<div class="list-group p-0">
	<div v-for="item in shares" :key="item.id" class="list-group-item">
	<div class="d-flex w-100 justify-content-between">
	<span class="user lh-lg">
	<svg-icon icon="user"></svg-icon> {{ item.user }}
	</span>
	<span class="d-inline-block">
	<btn class="btn-link p-1" :icon="['far', 'clipboard']" :title="$t('btn.copy')" @click="copyLink(item.link)"></btn>
	<btn class="btn-link text-danger p-1" icon="trash-can" :title="$t('btn.delete')" @click="shareDelete(item.id)"></btn>
	</span>
	</div>
	<code>{{ item.link }}</code>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import FileAPI from '../../js/files.js'

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

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

	export default {
	data() {
	return {
	file: {},
	fileId: null,
	shares: []
	}
	},
	created() {
	this.api = new FileAPI({})

	this.fileId = this.$route.params.file

	- this.$root.startLoading()
	-
	- axios.get('/api/v4/files/' + this.fileId)
	+ axios.get('/api/v4/files/' + this.fileId, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.file = response.data

	if (this.file.isOwner) {
	axios.get('api/v4/files/' + this.fileId + '/permissions')
	.then(response => {
	if (response.data.list) {
	this.shares = response.data.list
	}
	})
	}
	})
	.catch(this.$root.errorHandler)
	},
	methods: {
	copyLink(link) {
	navigator.clipboard.writeText(link);
	},
	fileDelete() {
	axios.delete('api/v4/files/' + this.fileId)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'files' })
	}
	})
	},
	fileDownload() {
	this.api.fileDownload(this.fileId)
	},
	shareAdd() {
	let post = { permissions: 'read-only', user: $('#user').val() }

	if (!post.user) {
	return
	}

	axios.post('api/v4/files/' + this.fileId + '/permissions', post)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.shares.push(response.data)
	}
	})
	},
	shareDelete(id) {
	axios.delete('api/v4/files/' + this.fileId + '/permissions/' + id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.$delete(this.shares, this.shares.findIndex(element => element.id == id))
	}
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/File/List.vue b/src/resources/vue/File/List.vue
	index 3753f66b..648f8b43 100644
	--- a/src/resources/vue/File/List.vue
	+++ b/src/resources/vue/File/List.vue
	@@ -1,135 +1,135 @@
	<template>
	<div class="container">
	<div class="card" id="files">
	<div class="card-body">
	<div class="card-title">
	{{ $t('dashboard.files') }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	<div id="drop-area" class="file-drop-area float-end">
	<svg-icon icon="upload"></svg-icon> Click or drop file(s) here
	</div>
	</div>
	<div class="card-text pt-4">
	<div class="mb-2 d-flex w-100">
	<list-search :placeholder="$t('file.search')" :on-search="searchFiles"></list-search>
	</div>
	<table class="table table-sm table-hover files">
	<thead>
	<tr>
	<th scope="col" class="name">{{ $t('form.name') }}</th>
	<th scope="col" class="buttons"></th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="file in files" :key="file.id" @click="$root.clickRecord">
	<td class="name">
	<svg-icon icon="file"></svg-icon>
	<router-link :to="{ path: 'file/' + file.id }">{{ file.name }}</router-link>
	</td>
	<td class="buttons">
	<btn class="button-download p-0 ms-1" @click="fileDownload(file)" icon="download" :title="$t('btn.download')"></btn>
	<btn class="button-delete text-danger p-0 ms-1" @click="fileDelete(file)" icon="trash-can" :title="$t('btn.delete')"></btn>
	</td>
	</tr>
	</tbody>
	<list-foot :colspan="2" :text="$t('file.list-empty')"></list-foot>
	</table>
	<list-more v-if="hasMore" :on-click="loadFiles"></list-more>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import FileAPI from '../../js/files.js'
	import ListTools from '../Widgets/ListTools'

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

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

	export default {
	mixins: [ ListTools ],
	data() {
	return {
	api: {},
	files: []
	}
	},
	mounted() {
	this.uploads = {}

	this.api = new FileAPI({
	dropArea: '#drop-area',
	eventHandler: this.eventHandler
	})

	this.loadFiles({ init: true })
	},
	methods: {
	eventHandler(name, params) {
	const camelCase = name.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())
	const method = camelCase + 'Handler'

	if (method in this) {
	this[method](params)
	}
	},
	fileDelete(file) {
	axios.delete('api/v4/files/' + file.id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	// Refresh the list
	this.loadFiles({ reset: true })
	}
	})
	},
	fileDownload(file) {
	// This is not an appropriate method for big files, we can consider
	// using it still for very small files.
	- // this.$root.downloadFile('api/v4/files/' + file.id + '?download=1', file.name)
	+ // downloadFile('api/v4/files/' + file.id + '?download=1', file.name)

	// This method first makes a request to the API to get the download URL (which does not
	// require authentication) and then use it to download the file.
	this.api.fileDownload(file.id)
	},
	loadFiles(params) {
	this.listSearch('files', 'api/v4/files', params)
	},
	searchFiles(search) {
	this.loadFiles({ reset: true, search })
	},
	uploadProgressHandler(params) {
	// Note: There might be more than one event with completed=0
	// e.g. if you upload multiple files at once
	if (params.completed == 0 && !(params.id in this.uploads)) {
	// Create the toast message with progress bar
	this.uploads[params.id] = this.$toast.message({
	icon: 'upload',
	timeout: 24 * 60 * 60 * 60 * 1000,
	title: this.$t('msg.uploading'),
	msg: `${params.name} (${this.api.sizeText(params.total)})`,
	progress: 0
	})
	} else if (params.id in this.uploads) {
	if (params.completed == 100) {
	this.uploads[params.id].delete() // close the toast message
	delete this.uploads[params.id]

	// TODO: Reloading the list is probably not the best solution
	this.loadFiles({ reset: true })
	} else {
	// update progress bar
	this.uploads[params.id].updateProgress(params.completed)
	}
	}
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Page.vue b/src/resources/vue/Page.vue
	index 077f361a..de96b17e 100644
	--- a/src/resources/vue/Page.vue
	+++ b/src/resources/vue/Page.vue
	@@ -1,74 +1,71 @@
	<template>
	<div class="page-content container" @click="clickHandler" v-html="content"></div>
	</template>

	<script>
	export default {
	data() {
	return {
	content: ''
	}
	},
	mounted() {
	let page = this.$root.pageName()

	// Redirect / to /dashboard, if root page is not defined
	if (page == '404' && this.$route.path == '/') {
	this.$router.push({ name: 'dashboard' })
	return
	}

	- this.$root.startLoading()
	-
	- axios.get('/content/page/' + page, { ignoreErrors: true })
	+ axios.get('/content/page/' + page, { ignoreErrors: true, loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.content = response.data
	})
	.catch(this.$root.errorHandler)
	},
	methods: {
	clickHandler(event) {
	// ensure we use the link, in case the click has been received by a subelement
	let target = event.target

	while (target && target.tagName !== 'A') {
	target = target.parentNode
	}

	// handle only links that do not reference external resources
	if (target && target.href && !target.getAttribute('href').match(/:\/\//)) {
	const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = event

	if (
	// don't handle with control keys
	metaKey \|\| altKey \|\| ctrlKey \|\| shiftKey
	// don't handle when preventDefault called
	\|\| defaultPrevented
	// don't handle right clicks
	\|\| (button !== undefined && button !== 0)
	// don't handle if `target="_blank"`
	\|\| /_blank/i.test(target.getAttribute('target'))
	) {
	return
	}

	// don't handle same page links/anchors
	const url = new URL(target.href)
	const to = url.pathname

	if (to == '/support/contact') {
	event.preventDefault()
	this.$root.supportDialog(this.$el)
	return
	}

	if (window.location.pathname !== to) {
	event.preventDefault()
	this.$router.push(to)
	}
	}
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/PasswordReset.vue b/src/resources/vue/PasswordReset.vue
	index 58ec2068..eaf04012 100644
	--- a/src/resources/vue/PasswordReset.vue
	+++ b/src/resources/vue/PasswordReset.vue
	@@ -1,179 +1,177 @@
	<template>
	<div class="container">
	<div class="card" id="step1">
	<div class="card-body">
	<h4 class="card-title">{{ $t('password.reset') }} - {{ $t('nav.step', { i: 1, n: 3 }) }}</h4>
	<p class="card-text">
	{{ $t('password.reset-step1') }}
	<span v-if="fromEmail">{{ $t('password.reset-step1-hint', { email: fromEmail }) }}</span>
	</p>
	<form @submit.prevent="submitStep1" data-validation-prefix="reset_">
	<div class="mb-3">
	<label for="reset_email" class="visually-hidden">{{ $t('form.email') }}</label>
	<input type="text" class="form-control" id="reset_email" :placeholder="$t('form.email')" required v-model="email">
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	</form>
	</div>
	</div>

	<div class="card d-none" id="step2">
	<div class="card-body">
	<h4 class="card-title">{{ $t('password.reset') }} - {{ $t('nav.step', { i: 2, n: 3 }) }}</h4>
	<p class="card-text">
	{{ $t('password.reset-step2') }}
	</p>
	<form @submit.prevent="submitStep2" data-validation-prefix="reset_">
	<div class="mb-3">
	<label for="reset_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
	<input type="text" class="form-control" id="reset_short_code" :placeholder="$t('form.code')" required v-model="short_code">
	</div>
	<btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	<btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	<input type="hidden" id="reset_code" v-model="code" />
	</form>
	</div>
	</div>

	<div class="card d-none" id="step3">
	<div class="card-body">
	<h4 class="card-title">{{ $t('password.reset') }} - {{ $t('nav.step', { i: 3, n: 3 }) }}</h4>
	<p class="card-text">
	</p>
	<form @submit.prevent="submitStep3" data-validation-prefix="reset_">
	<password-input class="mb-3" v-model="pass" :user="userId" v-if="userId" :focus="true"></password-input>
	<div class="form-group pt-1 mb-3">
	<label for="secondfactor" class="visually-hidden">{{ $t('login.2fa') }}</label>
	<div class="input-group">
	<span class="input-group-text">
	<svg-icon icon="key"></svg-icon>
	</span>
	<input type="text" id="secondfactor" class="form-control rounded-end" :placeholder="$t('login.2fa')" v-model="secondfactor">
	</div>
	<small class="form-text text-muted">{{ $t('login.2fa_desc') }}</small>
	</div>
	<btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	<btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	</div>
	</template>

	<script>
	import PasswordInput from './Widgets/PasswordInput'

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

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

	export default {
	components: {
	PasswordInput
	},
	data() {
	return {
	email: '',
	code: '',
	short_code: '',
	pass: {},
	secondfactor: '',
	userId: null,
	fromEmail: window.config['mail.from.address']
	}
	},
	created() {
	// Verification code provided, auto-submit Step 2
	if (this.$route.params.code) {
	if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(this.$route.params.code)) {
	this.short_code = RegExp.$1
	this.code = RegExp.$2
	this.submitStep2(true)
	} else {
	this.$root.errorPage(404)
	}
	}
	},
	mounted() {
	// Focus the first input (autofocus does not work when using the menu/router)
	this.displayForm(1, true)
	},
	methods: {
	// Submits data to the API, validates and gets verification code
	submitStep1() {
	this.$root.clearFormValidation($('#step1 form'))

	axios.post('/api/auth/password-reset/init', {
	email: this.email
	}).then(response => {
	this.displayForm(2, true)
	this.code = response.data.code
	})
	},
	// Submits the code to the API for verification
	submitStep2(bylink) {
	let post = {
	code: this.code,
	short_code: this.short_code
	}

	let params = {}

	if (bylink === true) {
	- this.$root.startLoading()
	params.ignoreErrors = true
	+ params.loader = true
	}

	this.$root.clearFormValidation($('#step2 form'))

	axios.post('/api/auth/password-reset/verify', post, params).then(response => {
	- this.$root.stopLoading()
	this.userId = response.data.userId
	this.displayForm(3, true)
	}).catch(error => {
	if (bylink === true) {
	- this.$root.stopLoading()
	this.$root.errorPage(404, '', this.$t('password.link-invalid'))
	}
	})
	},
	// Submits the data to the API to reset the password
	submitStep3() {
	this.$root.clearFormValidation($('#step3 form'))

	const post = {
	...this.$root.pick(this, ['code', 'short_code', 'secondfactor']),
	...this.pass
	}

	axios.post('/api/auth/password-reset', post)
	.then(response => {
	// auto-login and goto dashboard
	this.$root.loginUser(response.data)
	})
	},
	// Moves the user a step back in registration form
	stepBack(e) {
	var card = $(e.target).closest('.card')

	card.prev().removeClass('d-none').find('input').first().focus()
	card.addClass('d-none').find('form')[0].reset()

	this.userId = null
	},
	displayForm(step, focus) {
	[1, 2, 3].filter(value => value != step).forEach(value => {
	$('#step' + value).addClass('d-none')
	})

	$('#step' + step).removeClass('d-none')

	if (focus) {
	$('#step' + step).find('input').first().focus()
	}
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Resource/Info.vue b/src/resources/vue/Resource/Info.vue
	index 423e1806..9e2caddd 100644
	--- a/src/resources/vue/Resource/Info.vue
	+++ b/src/resources/vue/Resource/Info.vue
	@@ -1,188 +1,182 @@
	<template>
	<div class="container">
	<status-component v-if="resource_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>

	<div class="card" id="resource-info">
	<div class="card-body">
	<div class="card-title" v-if="resource_id !== 'new'">
	{{ $tc('resource.list-title', 1) }}
	<btn class="btn-outline-danger button-delete float-end" @click="deleteResource()" icon="trash-can">{{ $t('resource.delete') }}</btn>
	</div>
	<div class="card-title" v-if="resource_id === 'new'">{{ $t('resource.new') }}</div>
	<div class="card-text">
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
	{{ $t('form.general') }}
	</a>
	</li>
	<li v-if="resource_id !== 'new'" class="nav-item">
	<a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
	<form @submit.prevent="submit" class="card-body">
	<div v-if="resource_id !== 'new'" class="row plaintext mb-3">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.statusClass(resource) + ' form-control-plaintext'" id="status">{{ $root.statusText(resource) }}</span>
	</div>
	</div>
	<div class="row mb-3">
	<label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="name" v-model="resource.name">
	</div>
	</div>
	<div v-if="domains.length" class="row mb-3">
	<label for="domain" class="col-sm-4 col-form-label">{{ $t('form.domain') }}</label>
	<div class="col-sm-8">
	<select class="form-select" v-model="resource.domain">
	<option v-for="_domain in domains" :key="_domain.id" :value="_domain.namespace">{{ _domain.namespace }}</option>
	</select>
	</div>
	</div>
	<div v-if="resource.email" class="row mb-3">
	<label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="email" disabled v-model="resource.email">
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	<form @submit.prevent="submitSettings" class="card-body">
	<div class="row mb-3">
	<label for="invitation_policy" class="col-sm-4 col-form-label">{{ $t('resource.invitation-policy') }}</label>
	<div class="col-sm-8">
	<div class="input-group input-group-select mb-1">
	<select class="form-select" id="invitation_policy" v-model="resource.config.invitation_policy" @change="policyChange">
	<option value="accept">{{ $t('resource.ipolicy-accept') }}</option>
	<option value="manual">{{ $t('resource.ipolicy-manual') }}</option>
	<option value="reject">{{ $t('resource.ipolicy-reject') }}</option>
	</select>
	<input type="text" class="form-control" id="owner" v-model="resource.config.owner" :placeholder="$t('form.email')">
	</div>
	<small id="invitation-policy-hint" class="text-muted">
	{{ $t('resource.invitation-policy-text') }}
	</small>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import StatusComponent from '../Widgets/Status'

	export default {
	components: {
	StatusComponent
	},
	data() {
	return {
	domains: [],
	resource_id: null,
	resource: { config: {} },
	status: {}
	}
	},
	created() {
	this.resource_id = this.$route.params.resource

	if (this.resource_id != 'new') {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/resources/' + this.resource_id)
	+ axios.get('/api/v4/resources/' + this.resource_id, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.resource = response.data
	this.status = response.data.statusInfo

	if (this.resource.config.invitation_policy.match(/^manual:(.+)$/)) {
	this.resource.config.owner = RegExp.$1
	this.resource.config.invitation_policy = 'manual'
	}
	this.$nextTick().then(() => { this.policyChange() })
	})
	.catch(this.$root.errorHandler)
	} else {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/domains')
	+ axios.get('/api/v4/domains', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.domains = response.data
	this.resource.domain = this.domains[0].namespace
	})
	.catch(this.$root.errorHandler)
	}
	},
	mounted() {
	$('#name').focus()
	},
	methods: {
	deleteResource() {
	axios.delete('/api/v4/resources/' + this.resource_id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'resources' })
	}
	})
	},
	policyChange() {
	let select = $('#invitation_policy')
	select.parent()[select.val() == 'manual' ? 'addClass' : 'removeClass']('selected')
	},
	statusUpdate(resource) {
	this.resource = Object.assign({}, this.resource, resource)
	},
	submit() {
	this.$root.clearFormValidation($('#resource-info form'))

	let method = 'post'
	let location = '/api/v4/resources'

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

	const post = this.$root.pick(this.resource, ['id', 'name', 'domain'])

	axios[method](location, post)
	.then(response => {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'resources' })
	})
	},
	submitSettings() {
	this.$root.clearFormValidation($('#settings form'))

	let post = this.$root.pick(this.resource.config, ['invitation_policy', 'owner'])

	if (post.invitation_policy == 'manual') {
	post.invitation_policy += ':' + post.owner
	}

	delete post.owner

	axios.post('/api/v4/resources/' + this.resource_id + '/config', post)
	.then(response => {
	this.$toast.success(response.data.message)
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Resource/List.vue b/src/resources/vue/Resource/List.vue
	index 236fac4c..6dc7d7ff 100644
	--- a/src/resources/vue/Resource/List.vue
	+++ b/src/resources/vue/Resource/List.vue
	@@ -1,67 +1,64 @@
	<template>
	<div class="container">
	<div class="card" id="resource-list">
	<div class="card-body">
	<div class="card-title">
	{{ $tc('resource.list-title', 2) }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	<btn-router v-if="!$root.isDegraded()" to="resource/new" class="btn-success float-end" icon="gear">
	{{ $t('resource.create') }}
	</btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.name') }}</th>
	<th scope="col">{{ $t('form.email') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="resource in resources" :key="resource.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="gear" :class="$root.statusClass(resource)" :title="$root.statusText(resource)"></svg-icon>
	<router-link :to="{ path: 'resource/' + resource.id }">{{ resource.name }}</router-link>
	</td>
	<td>
	<router-link :to="{ path: 'resource/' + resource.id }">{{ resource.email }}</router-link>
	</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td colspan="2">{{ $t('resource.list-empty') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	</div>
	</template>

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

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

	export default {
	data() {
	return {
	resources: []
	}
	},
	created() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/resources')
	+ axios.get('/api/v4/resources', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.resources = response.data
	})
	.catch(this.$root.errorHandler)
	}
	}
	</script>
	diff --git a/src/resources/vue/Rooms.vue b/src/resources/vue/Rooms.vue
	index e41ac2f2..013677ef 100644
	--- a/src/resources/vue/Rooms.vue
	+++ b/src/resources/vue/Rooms.vue
	@@ -1,64 +1,60 @@
	<template>
	<div class="container" dusk="rooms-component">
	<div id="meet-rooms" class="card">
	<div class="card-body">
	<div class="card-title">{{ $t('meet.title') }} <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small></div>
	<div class="card-text">
	<p>{{ $t('meet.welcome') }}</p>
	<p>{{ $t('meet.url') }}</p>
	<p><router-link v-if="href" :to="roomRoute">{{ href }}</router-link></p>
	<p>{{ $t('meet.notice') }}</p>
	<dl>
	<dt>{{ $t('meet.sharing') }}</dt>
	<dd>{{ $t('meet.sharing-text') }}</dd>
	<dt>{{ $t('meet.security') }}</dt>
	<dd>{{ $t('meet.security-text') }}</dd>
	<dt>{{ $t('meet.qa-title') }}</dt>
	<dd>{{ $t('meet.qa-text') }}</dd>
	<dt>{{ $t('meet.moderation') }}</dt>
	<dd>{{ $t('meet.moderation-text') }}</dd>
	<dt>{{ $t('meet.eject') }}</dt>
	<dd>{{ $t('meet.eject-text') }}</dd>
	<dt>{{ $t('meet.silent') }}</dt>
	<dd>{{ $t('meet.silent-text') }}</dd>
	<dt>{{ $t('meet.interpreters') }}</dt>
	<dd>{{ $t('meet.interpreters-text') }}</dd>
	</dl>
	<p>{{ $t('meet.beta-notice') }}</p>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	rooms: [],
	href: '',
	roomRoute: ''
	}
	},
	mounted() {
	if (!this.$root.hasSKU('meet') \|\| this.$root.isDegraded()) {
	this.$root.errorPage(403)
	return
	}

	- this.$root.startLoading()
	-
	- axios.get('/api/v4/meet/rooms')
	+ axios.get('/api/v4/meet/rooms', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	-
	this.rooms = response.data.list
	if (response.data.count) {
	this.roomRoute = '/meet/' + encodeURI(this.rooms[0].name)
	this.href = window.config['app.url'] + this.roomRoute
	}
	})
	.catch(this.$root.errorHandler)
	}
	}
	</script>
	diff --git a/src/resources/vue/Settings.vue b/src/resources/vue/Settings.vue
	index abe21542..b3ef3a7c 100644
	--- a/src/resources/vue/Settings.vue
	+++ b/src/resources/vue/Settings.vue
	@@ -1,123 +1,119 @@
	<template>
	<div class="container">
	<div class="card" id="settings">
	<div class="card-body">
	<div class="card-title">
	{{ $t('dashboard.settings') }}
	</div>
	<div class="card-text">
	<form @submit.prevent="submit">
	<div class="row mb-3">
	<label class="col-sm-4 col-form-label">{{ $t('settings.password-policy') }}</label>
	<div class="col-sm-8">
	<ul id="password_policy" class="list-group ms-1 mt-1">
	<li v-for="rule in passwordPolicy" :key="rule.label" class="list-group-item border-0 form-check pt-1 pb-1">
	<input type="checkbox" class="form-check-input"
	:id="'policy-' + rule.label"
	:name="rule.label"
	:checked="rule.enabled \|\| isRequired(rule)"
	:disabled="isRequired(rule)"
	>
	<span v-if="rule.label == 'last'" v-html="ruleLastHTML(rule)"></span>
	<label v-else :for="'policy-' + rule.label" class="form-check-label pe-2" style="opacity: 1;">{{ rule.name.split(':')[0] }}</label>
	<input type="text" class="form-control form-control-sm w-auto d-inline" v-if="['min', 'max'].includes(rule.label)" :value="rule.param" size="3">
	</li>
	</ul>
	</div>
	</div>
	<div class="row mb-3">
	<label class="col-sm-4 col-form-label">{{ $t('settings.password-retention') }}</label>
	<div class="col-sm-8">
	<ul id="password_retention" class="list-group ms-1 mt-1">
	<li class="list-group-item border-0 form-check pt-1 pb-1">
	<input type="checkbox" class="form-check-input" id="max_password_age" :checked="config.max_password_age">
	<label for="max_password_age" class="form-check-label pe-2">{{ $t('settings.password-max-age') }}</label>
	<select class="form-select form-select-sm d-inline w-auto" id="max_password_age_value">
	<option v-for="num in [3, 6, 9, 12]" :key="num" :value="num" :selected="num == config.max_password_age">
	{{ num }} {{ $t('form.months') }}
	</option>
	</select>
	</li>
	</ul>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	config: [],
	passwordPolicy: []
	}
	},
	created() {
	this.wallet = this.$root.authInfo.wallet
	},
	mounted() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/password-policy')
	+ axios.get('/api/v4/password-policy', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	-
	if (response.data.list) {
	this.passwordPolicy = response.data.list
	this.config = response.data.config
	}
	})
	.catch(this.$root.errorHandler)
	},
	methods: {
	isRequired(rule) {
	return rule.label == 'min' \|\| rule.label == 'max'
	},
	ruleLastHTML(rule) {
	let parts = rule.name.split(/[0-9]+/)
	let options = [1, 2, 3, 4, 5, 6]

	options = options.map(num => {
	let selected = num == rule.param ? ' selected' : ''
	return `<option value="${num}"${selected}>${num}</option>`
	})

	return `<label for="policy-last" class="form-check-label pe-2">
	${parts[0]} <select class="form-select form-select-sm d-inline w-auto">${options.join('')}</select> ${parts[1]}
	</label>`
	},
	submit() {
	this.$root.clearFormValidation($('#settings form'))

	let max_password_age = $('#max_password_age:checked').length ? $('#max_password_age_value').val() : 0
	let password_policy = [];

	$('#password_policy > li > input:checked').each((i, element) => {
	let entry = element.name
	let param = $(element.parentNode).find('select,input[type=text]').val()

	if (param) {
	entry += ':' + param
	}

	password_policy.push(entry)
	})

	let post = {
	max_password_age,
	password_policy: password_policy.join(','),
	}

	axios.post('/api/v4/users/' + this.wallet.user_id + '/config', post)
	.then(response => {
	this.$toast.success(response.data.message)
	})
	},
	}
	}
	</script>
	diff --git a/src/resources/vue/SharedFolder/Info.vue b/src/resources/vue/SharedFolder/Info.vue
	index ac434ee6..1e38a2ff 100644
	--- a/src/resources/vue/SharedFolder/Info.vue
	+++ b/src/resources/vue/SharedFolder/Info.vue
	@@ -1,182 +1,176 @@
	<template>
	<div class="container">
	<status-component v-if="folder_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>

	<div class="card" id="folder-info">
	<div class="card-body">
	<div class="card-title" v-if="folder_id !== 'new'">
	{{ $tc('shf.list-title', 1) }}
	<btn class="btn-outline-danger button-delete float-end" @click="deleteFolder()" icon="trash-can">{{ $t('shf.delete') }}</btn>
	</div>
	<div class="card-title" v-if="folder_id === 'new'">{{ $t('shf.new') }}</div>
	<div class="card-text">
	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
	{{ $t('form.general') }}
	</a>
	</li>
	<li v-if="folder_id !== 'new'" class="nav-item">
	<a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
	<form @submit.prevent="submit" class="card-body">
	<div v-if="folder_id !== 'new'" class="row plaintext mb-3">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.statusClass(folder) + ' form-control-plaintext'" id="status">{{ $root.statusText(folder) }}</span>
	</div>
	</div>
	<div class="row mb-3">
	<label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="name" v-model="folder.name">
	</div>
	</div>
	<div class="row mb-3">
	<label for="type" class="col-sm-4 col-form-label">{{ $t('form.type') }}</label>
	<div class="col-sm-8">
	<select id="type" class="form-select" v-model="folder.type" :disabled="folder_id !== 'new'">
	<option v-for="type in types" :key="type" :value="type">{{ $t('shf.type-' + type) }}</option>
	</select>
	</div>
	</div>
	<div v-if="domains.length" class="row mb-3">
	<label for="domain" class="col-sm-4 col-form-label">{{ $t('form.domain') }}</label>
	<div v-if="domains.length" class="col-sm-8">
	<select class="form-select" v-model="folder.domain">
	<option v-for="_domain in domains" :key="_domain.id" :value="_domain.namespace">{{ _domain.namespace }}</option>
	</select>
	</div>
	</div>
	<div class="row mb-3" v-if="folder.type == 'mail'">
	<label for="aliases-input" class="col-sm-4 col-form-label">{{ $t('form.emails') }}</label>
	<div class="col-sm-8">
	<list-input id="aliases" :list="folder.aliases"></list-input>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	<form @submit.prevent="submitSettings" class="card-body">
	<div class="row mb-3">
	<label for="acl-input" class="col-sm-4 col-form-label">{{ $t('form.acl') }}</label>
	<div class="col-sm-8">
	<acl-input id="acl" v-model="folder.config.acl" :list="folder.config.acl" class="mb-1"></acl-input>
	<small id="acl-hint" class="text-muted">
	{{ $t('shf.acl-text') }}
	</small>
	</div>
	</div>
	<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import AclInput from '../Widgets/AclInput'
	import ListInput from '../Widgets/ListInput'
	import StatusComponent from '../Widgets/Status'

	export default {
	components: {
	AclInput,
	ListInput,
	StatusComponent
	},
	data() {
	return {
	domains: [],
	folder_id: null,
	folder: { type: 'mail', config: {}, aliases: [] },
	status: {},
	types: [ 'mail', 'event', 'task', 'contact', 'note', 'file' ]
	}
	},
	created() {
	this.folder_id = this.$route.params.folder

	if (this.folder_id != 'new') {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/shared-folders/' + this.folder_id)
	+ axios.get('/api/v4/shared-folders/' + this.folder_id, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.folder = response.data
	this.status = response.data.statusInfo
	})
	.catch(this.$root.errorHandler)
	} else {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/domains')
	+ axios.get('/api/v4/domains', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.domains = response.data
	this.folder.domain = this.domains[0].namespace
	})
	.catch(this.$root.errorHandler)
	}
	},
	mounted() {
	$('#name').focus()
	},
	methods: {
	deleteFolder() {
	axios.delete('/api/v4/shared-folders/' + this.folder_id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'shared-folders' })
	}
	})
	},
	statusUpdate(folder) {
	this.folder = Object.assign({}, this.folder, folder)
	},
	submit() {
	this.$root.clearFormValidation($('#folder-info form'))

	let method = 'post'
	let location = '/api/v4/shared-folders'

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

	const post = this.$root.pick(this.folder, ['id', 'name', 'domain', 'type', 'aliases'])

	if (post.type != 'mail') {
	delete post.aliases
	}

	axios[method](location, post)
	.then(response => {
	this.$toast.success(response.data.message)
	this.$router.push({ name: 'shared-folders' })
	})
	},
	submitSettings() {
	this.$root.clearFormValidation($('#settings form'))

	let post = this.$root.pick(this.folder.config, ['acl'])

	axios.post('/api/v4/shared-folders/' + this.folder_id + '/config', post)
	.then(response => {
	this.$toast.success(response.data.message)
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/SharedFolder/List.vue b/src/resources/vue/SharedFolder/List.vue
	index a306954c..e88bf31d 100644
	--- a/src/resources/vue/SharedFolder/List.vue
	+++ b/src/resources/vue/SharedFolder/List.vue
	@@ -1,66 +1,63 @@
	<template>
	<div class="container">
	<div class="card" id="folder-list">
	<div class="card-body">
	<div class="card-title">
	{{ $tc('shf.list-title', 2) }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	<btn-router v-if="!$root.isDegraded()" to="shared-folder/new" class="btn-success float-end" icon="gear">
	{{ $t('shf.create') }}
	</btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.name') }}</th>
	<th scope="col">{{ $t('form.type') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="folder in folders" :key="folder.id" @click="$root.clickRecord">
	<td>
	<svg-icon icon="folder-open" :class="$root.statusClass(folder)" :title="$root.statusText(folder)"></svg-icon>
	<router-link :to="{ path: 'shared-folder/' + folder.id }">{{ folder.name }}</router-link>
	</td>
	<td>{{ $t('shf.type-' + folder.type) }}</td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	<td colspan="2">{{ $t('shf.list-empty') }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	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,
	)

	export default {
	data() {
	return {
	folders: []
	}
	},
	created() {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/shared-folders')
	+ axios.get('/api/v4/shared-folders', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	this.folders = response.data
	})
	.catch(this.$root.errorHandler)
	}
	}
	</script>
	diff --git a/src/resources/vue/Signup.vue b/src/resources/vue/Signup.vue
	index 2fb4318d..2020ece7 100644
	--- a/src/resources/vue/Signup.vue
	+++ b/src/resources/vue/Signup.vue
	@@ -1,303 +1,299 @@
	<template>
	<div class="container">
	<div id="step0" v-if="!invitation">
	<div class="plan-selector row row-cols-sm-2 g-3">
	<div v-for="item in plans" :key="item.id">
	<div :class="'card bg-light plan-' + item.title">
	<div class="card-header plan-header">
	<div class="plan-ico text-center">
	<svg-icon :icon="plan_icons[item.title]"></svg-icon>
	</div>
	</div>
	<div class="card-body text-center">
	<btn class="btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></btn>
	<div class="plan-description text-start mt-3" v-html="item.description"></div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="card d-none" id="step1" v-if="!invitation">
	<div class="card-body">
	<h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 1, n: 3 }) }}</h4>
	<p class="card-text">
	{{ $t('signup.step1') }}
	</p>
	<form @submit.prevent="submitStep1" data-validation-prefix="signup_">
	<div class="mb-3">
	<div class="input-group">
	<input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name">
	<input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name">
	</div>
	</div>
	<div class="mb-3">
	<label for="signup_email" class="visually-hidden">{{ $t('signup.email') }}</label>
	<input type="text" class="form-control" id="signup_email" :placeholder="$t('signup.email')" required v-model="email">
	</div>
	<btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	<btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	</form>
	</div>
	</div>

	<div class="card d-none" id="step2" v-if="!invitation">
	<div class="card-body">
	<h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 2, n: 3 }) }}</h4>
	<p class="card-text">
	{{ $t('signup.step2') }}
	</p>
	<form @submit.prevent="submitStep2" data-validation-prefix="signup_">
	<div class="mb-3">
	<label for="signup_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
	<input type="text" class="form-control" id="signup_short_code" :placeholder="$t('form.code')" required v-model="short_code">
	</div>
	<btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	<btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	<input type="hidden" id="signup_code" v-model="code" />
	</form>
	</div>
	</div>

	<div class="card d-none" id="step3">
	<div class="card-body">
	<h4 v-if="!invitation" class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 3, n: 3 }) }}</h4>
	<p class="card-text">
	{{ $t('signup.step3') }}
	</p>
	<form @submit.prevent="submitStep3" data-validation-prefix="signup_">
	<div class="mb-3" v-if="invitation">
	<div class="input-group">
	<input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name">
	<input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name">
	</div>
	</div>
	<div class="mb-3">
	<label for="signup_login" class="visually-hidden"></label>
	<div class="input-group">
	<input type="text" class="form-control" id="signup_login" required v-model="login" :placeholder="$t('signup.login')">
	<span class="input-group-text">@</span>
	<input v-if="is_domain" type="text" class="form-control rounded-end" id="signup_domain" required v-model="domain" :placeholder="$t('form.domain')">
	<select v-else class="form-select rounded-end" id="signup_domain" required v-model="domain">
	<option v-for="_domain in domains" :key="_domain" :value="_domain">{{ _domain }}</option>
	</select>
	</div>
	</div>
	<password-input class="mb-3" v-model="pass"></password-input>
	<div class="mb-3">
	<label for="signup_voucher" class="visually-hidden">{{ $t('signup.voucher') }}</label>
	<input type="text" class="form-control" id="signup_voucher" :placeholder="$t('signup.voucher')" v-model="voucher">
	</div>
	<btn v-if="!invitation" class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn>
	<btn class="btn-primary" type="submit" icon="check">
	<span v-if="invitation">{{ $t('btn.signup') }}</span>
	<span v-else>{{ $t('btn.submit') }}</span>
	</btn>
	</form>
	</div>
	</div>
	</div>
	</template>

	<script>
	import PasswordInput from './Widgets/PasswordInput'

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

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

	export default {
	components: {
	PasswordInput
	},
	data() {
	return {
	email: '',
	first_name: '',
	last_name: '',
	code: '',
	short_code: '',
	login: '',
	pass: {},
	domain: '',
	domains: [],
	invitation: null,
	is_domain: false,
	plan: null,
	plan_icons: {
	individual: 'user',
	group: 'users'
	},
	plans: [],
	voucher: ''
	}
	},
	mounted() {
	let param = this.$route.params.param;

	if (this.$route.name == 'signup-invite') {
	- this.$root.startLoading()
	- axios.get('/api/auth/signup/invitations/' + param)
	+ axios.get('/api/auth/signup/invitations/' + param, { loader: true })
	.then(response => {
	this.invitation = response.data
	this.login = response.data.login
	this.voucher = response.data.voucher
	this.first_name = response.data.first_name
	this.last_name = response.data.last_name
	this.plan = response.data.plan
	this.is_domain = response.data.is_domain
	this.setDomain(response.data)
	- this.$root.stopLoading()
	this.displayForm(3, true)
	})
	.catch(error => {
	this.$root.errorHandler(error)
	})
	} else if (param) {
	if (this.$route.path.indexOf('/signup/voucher/') === 0) {
	// Voucher (discount) code
	this.voucher = param
	this.displayForm(0)
	} else if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(param)) {
	// Verification code provided, auto-submit Step 2
	this.short_code = RegExp.$1
	this.code = RegExp.$2
	this.submitStep2(true)
	} else if (/^([a-zA-Z_]+)$/.test(param)) {
	// Plan title provided, save it and display Step 1
	this.plan = param
	this.displayForm(1, true)
	} else {
	this.$root.errorPage(404)
	}
	} else {
	this.displayForm(0)
	}
	},
	methods: {
	selectPlan(plan) {
	this.$router.push({path: '/signup/' + plan})
	this.plan = plan
	this.displayForm(1, true)
	},
	// Composes plan selection page
	step0() {
	if (!this.plans.length) {
	- this.$root.startLoading()
	- axios.get('/api/auth/signup/plans').then(response => {
	- this.$root.stopLoading()
	+ axios.get('/api/auth/signup/plans', { loader: true }).then(response => {
	this.plans = response.data.plans
	})
	.catch(error => {
	this.$root.errorHandler(error)
	})
	}
	},
	// Submits data to the API, validates and gets verification code
	submitStep1() {
	this.$root.clearFormValidation($('#step1 form'))

	const post = this.$root.pick(this, ['email', 'last_name', 'first_name', 'plan', 'voucher'])

	axios.post('/api/auth/signup/init', post)
	.then(response => {
	this.displayForm(2, true)
	this.code = response.data.code
	})
	},
	// Submits the code to the API for verification
	submitStep2(bylink) {
	if (bylink === true) {
	this.displayForm(2, false)
	}

	this.$root.clearFormValidation($('#step2 form'))

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

	axios.post('/api/auth/signup/verify', post)
	.then(response => {
	this.displayForm(3, true)
	// Reset user name/email/plan, we don't have them if user used a verification link
	this.first_name = response.data.first_name
	this.last_name = response.data.last_name
	this.email = response.data.email
	this.is_domain = response.data.is_domain
	this.voucher = response.data.voucher

	// Fill the domain selector with available domains
	if (!this.is_domain) {
	this.setDomain(response.data)
	}
	})
	.catch(error => {
	if (bylink === true) {
	// FIXME: display step 1, user can do nothing about it anyway
	// Maybe we should display 404 error page?
	this.displayForm(1, true)
	}
	})
	},
	// Submits the data to the API to create the user account
	submitStep3() {
	this.$root.clearFormValidation($('#step3 form'))

	let post = {
	...this.$root.pick(this, ['login', 'domain', 'voucher']),
	...this.pass
	}

	if (this.invitation) {
	post.invitation = this.invitation.id
	post.plan = this.plan
	post.first_name = this.first_name
	post.last_name = this.last_name
	} else {
	post.code = this.code
	post.short_code = this.short_code
	}

	axios.post('/api/auth/signup', post).then(response => {
	// auto-login and goto dashboard
	this.$root.loginUser(response.data)
	})
	},
	// Moves the user a step back in registration form
	stepBack(e) {
	var card = $(e.target).closest('.card')

	card.prev().removeClass('d-none').find('input').first().focus()
	card.addClass('d-none').find('form')[0].reset()

	if (card.attr('id') == 'step1') {
	this.step0()
	this.$router.replace({path: '/signup'})
	}
	},
	displayForm(step, focus) {
	[0, 1, 2, 3].filter(value => value != step).forEach(value => {
	$('#step' + value).addClass('d-none')
	})

	if (!step) {
	return this.step0()
	}

	$('#step' + step).removeClass('d-none')

	if (focus) {
	$('#step' + step).find('input').first().focus()
	}
	},
	setDomain(response) {
	if (response.domains) {
	this.domains = response.domains
	}

	this.domain = response.domain \|\| window.config['app.domain']
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
	index 987a45cc..ec989702 100644
	--- a/src/resources/vue/User/Info.vue
	+++ b/src/resources/vue/User/Info.vue
	@@ -1,332 +1,322 @@
	<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>
	</div>
	</template>

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

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

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

	export default {
	components: {
	ListInput,
	PackageSelect,
	PasswordInput,
	StatusComponent,
	SubscriptionSelect
	},
	data() {
	return {
	passwordLinkCode: '',
	passwordMode: '',
	user_id: null,
	user: { aliases: [], config: [] },
	status: {}
	}
	},
	computed: {
	isSelf: function () {
	return this.user_id == this.$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') {
	- this.$root.startLoading()
	-
	- axios.get('/api/v4/users/' + this.user_id)
	+ axios.get('/api/v4/users/' + this.user_id, { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	-
	this.user = response.data
	this.user.first_name = response.data.settings.first_name
	this.user.last_name = response.data.settings.last_name
	this.user.organization = response.data.settings.organization
	this.status = response.data.statusInfo

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

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

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

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

	this.passwordMode = mode

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

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

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

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

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

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

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

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

	axios[method](location, post)
	.then(response => {
	if (response.data.statusInfo) {
	this.$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()
	}
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
	index 97290317..91b8a0fc 100644
	--- a/src/resources/vue/Wallet.vue
	+++ b/src/resources/vue/Wallet.vue
	@@ -1,446 +1,430 @@
	<template>
	<div class="container" dusk="wallet-component">
	<div v-if="wallet.id" id="wallet" class="card">
	<div class="card-body">
	<div class="card-title">{{ $t('wallet.title') }} <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div>
	<div class="card-text">
	<p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p>

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

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

	<div id="payment-dialog" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ paymentDialogTitle }}</h5>
	<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<div id="payment-method" v-if="paymentForm == 'method'">
	<form data-validation-prefix="mandate_">
	<div id="payment-method-selection">
	<a 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>
	</div>
	<div id="auto-payment" v-if="paymentForm == 'auto'">
	<form data-validation-prefix="mandate_">
	<p>
	{{ $t('wallet.auto-payment-hint') }}
	</p>
	<div class="row mb-3">
	<label for="mandate_amount" class="col-sm-6 col-form-label">{{ $t('wallet.fill-up') }}</label>
	<div class="col-sm-6">
	<div class="input-group">
	<input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required>
	<span class="input-group-text">{{ wallet.currency }}</span>
	</div>
	</div>
	</div>
	<div class="row mb-3">
	<label for="mandate_balance" class="col-sm-6 col-form-label">{{ $t('wallet.when-below') }}</label>
	<div class="col-sm-6">
	<div class="input-group">
	<input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" required>
	<span class="input-group-text">{{ wallet.currency }}</span>
	</div>
	</div>
	</div>
	<p v-if="!mandate.isValid">
	{{ $t('wallet.auto-payment-next') }}
	</p>
	<div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0">
	{{ $t('wallet.auto-payment-disabled-next') }}
	</div>
	</form>
	</div>
	</div>
	<div class="modal-footer">
	<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	<btn class="btn-primary modal-action" icon="check" @click="autoPayment"
	v-if="paymentForm == 'auto' && (mandate.isValid \|\| mandate.isPending)"
	>
	{{ $t('btn.submit') }}
	</btn>
	<btn class="btn btn-primary modal-action" icon="check" @click="autoPayment"
	v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
	>
	{{ $t('btn.continue') }}
	</btn>
	<btn class="btn-primary modal-action" icon="check" @click="payment"
	v-if="paymentForm == 'manual'"
	>
	{{ $t('btn.continue') }}
	</btn>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import { Modal } from 'bootstrap'
	import TransactionLog from './Widgets/TransactionLog'
	import PaymentLog from './Widgets/PaymentLog'
	+ 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: {
	TransactionLog,
	PaymentLog
	},
	data() {
	return {
	amount: '',
	mandate: { amount: 10, balance: 0, method: null },
	paymentDialogTitle: null,
	paymentForm: null,
	nextForm: null,
	receipts: [],
	stripe: null,
	loadTransactions: false,
	loadPayments: false,
	showPendingPayments: false,
	wallet: {},
	walletId: null,
	paymentMethods: [],
	selectedPaymentMethod: null
	}
	},
	mounted() {
	$('#wallet button').focus()

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

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

	- const receiptsTab = $('#wallet-receipts')
	-
	- this.$root.addLoader(receiptsTab)
	- axios.get('/api/v4/wallets/' + this.walletId + '/receipts')
	+ axios.get('/api/v4/wallets/' + this.walletId + '/receipts', { loader: '#wallet-receipts' })
	.then(response => {
	- this.$root.removeLoader(receiptsTab)
	this.receipts = response.data.list
	})
	- .catch(error => {
	- this.$root.removeLoader(receiptsTab)
	- })

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

	this.loadMandate()

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

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

	- this.$root.removeLoader(mandate_form)
	+ this.$root.stopLoading(loader)

	if (!this.mandate.id \|\| this.mandate.isPending) {
	- this.$root.addLoader(mandate_form)
	- axios.get('/api/v4/payments/mandate')
	+ axios.get('/api/v4/payments/mandate', { loader })
	.then(response => {
	- this.$root.removeLoader(mandate_form)
	this.mandate = response.data
	})
	- .catch(error => {
	- this.$root.removeLoader(mandate_form)
	- })
	}
	},
	selectPaymentMethod(method) {
	this.formLock = false
	this.selectedPaymentMethod = method
	this.paymentForm = this.nextForm

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

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

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

	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.mandate = response.data
	this.$toast.success(response.data.message)
	}
	}
	})
	},
	autoPaymentChange(event) {
	this.autoPaymentForm(event, this.$t('wallet.auto-payment-update'))
	},
	autoPaymentDelete() {
	axios.delete('/api/v4/payments/mandate')
	.then(response => {
	this.mandate = { amount: 10, balance: 0 }
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	}
	})
	},
	paymentMethodForm(nextForm) {
	this.formLock = false
	this.paymentMethods = []
	this.paymentForm = 'method'
	this.nextForm = nextForm
	this.paymentDialogTitle = this.$t(nextForm == 'auto' ? 'wallet.auto-payment-setup' : 'wallet.top-up')

	this.dialog = new Modal('#payment-dialog')
	this.dialog.show()

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

	- this.$root.addLoader(form, false, { 'min-height': '10em' })
	-
	- axios.get('/api/v4/payments/methods', { params: { type } })
	+ axios.get('/api/v4/payments/methods', { params: { type }, loader })
	.then(response => {
	- this.$root.removeLoader(form)
	this.paymentMethods = response.data
	})
	})
	},
	autoPaymentForm(event, title) {
	this.paymentForm = 'auto'
	this.paymentDialogTitle = title
	this.formLock = false

	this.dialog = new Modal('#payment-dialog')
	this.dialog.show()
	},
	receiptDownload() {
	const receipt = $('#receipt-id').val()
	- this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt)
	+ 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/ListTools.vue b/src/resources/vue/Widgets/ListTools.vue
	index 0dd24feb..d177ff9a 100644
	--- a/src/resources/vue/Widgets/ListTools.vue
	+++ b/src/resources/vue/Widgets/ListTools.vue
	@@ -1,116 +1,99 @@
	<template>
	<div></div>
	</template>

	<script>

	const ListSearch = {
	props: {
	onSearch: { type: Function, default: () => {} },
	placeholder: { type: String, default: '' }
	},
	data() {
	return {
	search: ''
	}
	},
	template: `<form @submit.prevent="onSearch(search)" id="search-form" class="input-group" style="flex:1">
	<input class="form-control" type="text" :placeholder="placeholder" v-model="search">
	<button type="submit" class="btn btn-primary"><svg-icon icon="magnifying-glass"></svg-icon> {{ $t('btn.search') }}</button>
	</form>`
	}

	const ListFoot = {
	props: {
	colspan: { type: Number, default: 1 },
	text: { type: String, default: '' }
	},
	template: `<tfoot class="table-fake-body"><tr><td :colspan="colspan">{{ text }}</td></tr></tfoot>`
	}

	const ListMore = {
	props: {
	onClick: { type: Function, default: () => {} }
	},
	template: `<div class="text-center p-3 more-loader">
	<button class="btn btn-secondary" @click="onClick({})">{{ $t('nav.more') }}</button>
	</div>`
	}

	export default {
	components: {
	ListFoot,
	ListMore,
	ListSearch
	},
	data() {
	return {
	currentSearch: '',
	hasMore: false,
	page: 1
	}
	},
	methods: {
	listSearch(name, url, params) {
	let loader
	let get = params.get \|\| {}

	if (params) {
	if (params.reset \|\| params.init) {
	this[name] = []
	this.page = 0
	}

	get.page = params.page \|\| (this.page + 1)

	if ('search' in params) {
	get.search = params.search
	this.currentSearch = params.search
	this.hasMore = false
	} else {
	get.search = this.currentSearch
	}

	if (!params.init) {
	loader = $(this.$el).find('.more-loader')
	if (!loader.length \|\| get.page == 1) {
	loader = $(this.$el).find('tfoot td')
	}
	+ } else {
	+ loader = true
	}
	} else {
	this.currentSearch = null
	}

	- if (params && params.init) {
	- this.$root.startLoading()
	- } else {
	- this.$root.addLoader(loader)
	- }
	-
	- const finish = () => {
	- if (params && params.init) {
	- this.$root.stopLoading()
	- } else {
	- this.$root.removeLoader(loader)
	- }
	- }
	-
	- axios.get(url, { params: get })
	+ axios.get(url, { params: get, loader })
	.then(response => {
	// Note: In Vue we can't just use .concat()
	for (let i in response.data.list) {
	this.$set(this[name], this[name].length, response.data.list[i])
	}

	this.hasMore = response.data.hasMore
	this.page = response.data.page \|\| 1
	-
	- finish()
	- })
	- .catch(error => {
	- finish()
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Widgets/PackageSelect.vue b/src/resources/vue/Widgets/PackageSelect.vue
	index 5460fbfe..8e0a26d2 100644
	--- a/src/resources/vue/Widgets/PackageSelect.vue
	+++ b/src/resources/vue/Widgets/PackageSelect.vue
	@@ -1,86 +1,82 @@
	<template>
	<div>
	<table class="table table-sm form-list">
	<thead class="visually-hidden">
	<tr>
	<th scope="col"></th>
	<th scope="col">{{ $t('user.package') }}</th>
	<th scope="col">{{ $t('user.price') }}</th>
	<th scope="col"></th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id">
	<td class="selection">
	<input type="checkbox" @change="selectPackage"
	:value="pkg.id"
	:checked="pkg.id == package_id"
	:readonly="pkg.id == package_id"
	:id="'pkg-input-' + pkg.id"
	>
	</td>
	<td class="name">
	<label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label>
	</td>
	<td class="price text-nowrap">
	{{ $root.priceLabel(pkg.cost, discount, currency) }}
	</td>
	<td class="buttons">
	<btn v-if="pkg.description" class="btn-link btn-lg p-0" v-tooltip="pkg.description" icon="circle-info">
	<span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
	</btn>
	</td>
	</tr>
	</tbody>
	</table>
	<small v-if="discount > 0" class="hint">
	<hr class="m-0 mt-1">
	¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
	</small>
	</div>
	</template>

	<script>
	export default {
	props: {
	type: { type: String, default: 'user' }
	},
	data() {
	return {
	currency: '',
	discount: 0,
	discount_description: '',
	packages: [],
	package_id: null
	}
	},
	created() {
	// assign currency, discount, discount_description of the current user
	this.$root.userWalletProps(this)

	- this.$root.startLoading()
	-
	- axios.get('/api/v4/packages')
	+ axios.get('/api/v4/packages', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	-
	this.packages = response.data.filter(pkg => {
	if (this.type == 'domain') {
	return pkg.isDomain
	}

	return !pkg.isDomain
	})
	this.package_id = this.packages[0].id
	})
	.catch(this.$root.errorHandler)
	},
	methods: {
	selectPackage(e) {
	// Make sure there always is one package selected
	$(this.$el).find('input').not(e.target).prop('checked', false)
	this.package_id = $(e.target).prop('checked', true).val()
	},
	}
	}
	</script>
	diff --git a/src/resources/vue/Widgets/SubscriptionSelect.vue b/src/resources/vue/Widgets/SubscriptionSelect.vue
	index 69ef925e..9a887232 100644
	--- a/src/resources/vue/Widgets/SubscriptionSelect.vue
	+++ b/src/resources/vue/Widgets/SubscriptionSelect.vue
	@@ -1,206 +1,202 @@
	<template>
	<div>
	<table class="table table-sm form-list">
	<thead class="visually-hidden">
	<tr>
	<th scope="col"></th>
	<th scope="col">{{ $t('user.subscription') }}</th>
	<th scope="col">{{ $t('user.price') }}</th>
	<th scope="col"></th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="sku in skus" :id="'s' + sku.id" :key="sku.id">
	<td class="selection">
	<input type="checkbox" @input="onInputSku"
	:value="sku.id"
	:disabled="sku.readonly \|\| readonly"
	:checked="sku.enabled"
	:id="'sku-input-' + sku.title"
	>
	</td>
	<td class="name">
	<label :for="'sku-input-' + sku.title">{{ sku.name }}</label>
	<div v-if="sku.range" class="range-input">
	<label class="text-nowrap">{{ sku.range.min }} {{ sku.range.unit }}</label>
	<input type="range" class="form-range" @input="rangeUpdate"
	:value="sku.value \|\| sku.range.min"
	:min="sku.range.min"
	:max="sku.range.max"
	>
	</div>
	</td>
	<td class="price text-nowrap">
	{{ $root.priceLabel(sku.cost, discount, currency) }}
	</td>
	<td class="buttons">
	<btn v-if="sku.description" class="btn-link btn-lg p-0" v-tooltip="sku.description" icon="circle-info">
	<span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
	</btn>
	</td>
	</tr>
	</tbody>
	</table>
	<small v-if="discount > 0" class="hint">
	<hr class="m-0 mt-1">
	¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
	</small>
	</div>
	</template>

	<script>
	export default {
	props: {
	object: { type: Object, default: () => {} },
	readonly: { type: Boolean, default: false },
	type: { type: String, default: 'user' }
	},
	data() {
	return {
	currency: '',
	discount: 0,
	discount_description: '',
	skus: []
	}
	},
	created() {
	// assign currency, discount, discount_description of the current user
	this.$root.userWalletProps(this)

	if (this.object.wallet) {
	this.discount = this.object.wallet.discount
	this.discount_description = this.object.wallet.discount_description
	}

	- this.$root.startLoading()
	-
	- axios.get('/api/v4/' + this.type + 's/' + this.object.id + '/skus')
	+ axios.get('/api/v4/' + this.type + 's/' + this.object.id + '/skus', { loader: true })
	.then(response => {
	- this.$root.stopLoading()
	-
	if (this.readonly) {
	response.data = response.data.filter(sku => { return sku.id in this.object.skus })
	}

	// "merge" SKUs with user entitlement-SKUs
	this.skus = response.data
	.map(sku => {
	const objSku = this.object.skus[sku.id]
	if (objSku) {
	sku.enabled = true
	sku.skuCost = sku.cost
	sku.cost = objSku.costs.reduce((sum, current) => sum + current)
	sku.value = objSku.count
	sku.costs = objSku.costs
	} else if (!sku.readonly) {
	sku.enabled = false
	}

	return sku
	})

	// Update all range inputs (and price)
	this.$nextTick(() => {
	$(this.$el).find('input[type=range]').each((idx, elem) => { this.rangeUpdate(elem) })
	})
	})
	.catch(this.$root.errorHandler)
	},
	methods: {
	findSku(id) {
	for (let i = 0; i < this.skus.length; i++) {
	if (this.skus[i].id == id) {
	return this.skus[i];
	}
	}
	},
	onInputSku(e) {
	let input = e.target
	let sku = this.findSku(input.value)
	let required = []

	// We use 'readonly', not 'disabled', because we might want to handle
	// input events. For example to display an error when someone clicks
	// the locked input
	if (input.readOnly) {
	input.checked = !input.checked
	// TODO: Display an alert explaining why it's locked
	return
	}

	// TODO: Following code might not work if we change definition of forbidden/required
	// or we just need more sophisticated SKU dependency rules

	if (input.checked) {
	// Check if a required SKU is selected, alert the user if not
	(sku.required \|\| []).forEach(requiredHandler => {
	this.skus.forEach(item => {
	if (item.handler == requiredHandler) {
	if (!$('#s' + item.id).find('input[type=checkbox]:checked').length) {
	required.push(item.name)
	}
	}
	})
	})

	if (required.length) {
	input.checked = false
	return alert(this.$t('user.skureq', { sku: sku.name, list: required.join(', ') }))
	}
	} else {
	// Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync
	// TODO: Should we display an alert instead?
	this.skus.forEach(item => {
	if (item.required && item.required.indexOf(sku.handler) > -1) {
	$('#s' + item.id).find('input[type=checkbox]').prop('checked', false)
	}
	})
	}

	// Uncheck+lock/unlock conflicting SKUs
	(sku.forbidden \|\| []).forEach(forbiddenHandler => {
	this.skus.forEach(item => {
	let checkbox
	if (item.handler == forbiddenHandler && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) {
	if (input.checked) {
	checkbox.checked = false
	checkbox.readOnly = true
	} else {
	checkbox.readOnly = false
	}
	}
	})
	})
	},
	rangeUpdate(e) {
	let input = $(e.target \|\| e)
	let value = input.val()
	let record = input.parents('tr').first()
	let sku_id = record.find('input[type=checkbox]').val()
	let sku = this.findSku(sku_id)
	let existing = sku.costs ? sku.costs.length : 0
	let cost

	// Calculate cost, considering both existing entitlement cost and sku cost
	if (existing) {
	cost = sku.costs
	.sort((a, b) => a - b) // sort by cost ascending (free units first)
	.slice(0, value)
	.reduce((sum, current) => sum + current)

	if (value > existing) {
	cost += sku.skuCost * (value - existing)
	}
	} else {
	cost = sku.cost * (value - sku.units_free)
	}

	// Update the label
	input.prev().text(value + ' ' + sku.range.unit)

	// Update the price
	record.find('.price').text(this.$root.priceLabel(cost, this.discount, this.currency))
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Widgets/TransactionLog.vue b/src/resources/vue/Widgets/TransactionLog.vue
	index 66879cfc..60e19b7c 100644
	--- a/src/resources/vue/Widgets/TransactionLog.vue
	+++ b/src/resources/vue/Widgets/TransactionLog.vue
	@@ -1,92 +1,87 @@
	<template>
	<div>
	<table class="table table-sm m-0 transactions">
	<thead>
	<tr>
	<th scope="col">{{ $t('form.date') }}</th>
	<th scope="col" v-if="isAdmin">{{ $t('form.user') }}</th>
	<th scope="col"></th>
	<th scope="col">{{ $t('form.description') }}</th>
	<th scope="col" class="price">{{ $t('form.amount') }}</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="transaction in transactions" :id="'log' + transaction.id" :key="transaction.id">
	<td class="datetime">{{ transaction.createdAt }}</td>
	<td class="email" v-if="isAdmin">{{ transaction.user }}</td>
	<td class="selection">
	<btn v-if="transaction.hasDetails" class="btn-lg btn-link btn-action" icon="circle-info"
	:title="$t('form.details')"
	@click="loadTransaction(transaction.id)"
	></btn>
	</td>
	<td class="description">{{ description(transaction) }}</td>
	<td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td>
	</tr>
	</tbody>
	<list-foot :text="$t('wallet.transactions-none')" :colspan="isAdmin ? 5 : 4"></list-foot>
	</table>
	<list-more v-if="hasMore" :on-click="loadLog"></list-more>
	</div>
	</template>

	<script>
	import ListTools from './ListTools'

	export default {
	mixins: [ ListTools ],
	props: {
	walletId: { type: String, default: null },
	isAdmin: { type: Boolean, default: false },
	},
	data() {
	return {
	transactions: []
	}
	},
	mounted() {
	this.loadLog({ reset: true })
	},
	methods: {
	loadLog(params) {
	if (this.walletId) {
	this.listSearch('transactions', '/api/v4/wallets/' + this.walletId + '/transactions', params)
	}
	},
	loadTransaction(id) {
	let record = $('#log' + id)
	let cell = record.find('td.description')
	let details = $('<div class="list-details"><ul></ul><div>').appendTo(cell)

	- this.$root.addLoader(cell)
	- axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id)
	+ axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id, { loader: cell })
	.then(response => {
	- this.$root.removeLoader(cell)
	record.find('button').remove()
	let list = details.find('ul')
	response.data.list.forEach(elem => {
	list.append($('<li>').text(this.description(elem)))
	})
	})
	- .catch(error => {
	- this.$root.removeLoader(cell)
	- })
	},
	amount(transaction) {
	return this.$root.price(transaction.amount, transaction.currency)
	},
	className(transaction) {
	return transaction.amount < 0 ? 'text-danger' : 'text-success';
	},
	description(transaction) {
	let desc = transaction.description

	if (/^(billed\|created\|deleted)$/.test(transaction.type)) {
	desc += ' (' + this.$root.price(transaction.amount) + ')'
	}

	return desc
	}
	}
	}
	</script>

File Metadata

Mime Type: text/x-diff
Expires: Fri, Feb 6, 2:23 PM (1 h, 32 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 428302
Default Alt Text: (251 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions