No OneTemporary
Actions

Size

133 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/resources/js/admin/routes.js b/src/resources/js/admin/routes.js
	index 1d73c098..86696a76 100644
	--- a/src/resources/js/admin/routes.js
	+++ b/src/resources/js/admin/routes.js
	@@ -1,76 +1,81 @@
	-import DashboardComponent from '../../vue/Admin/Dashboard'
	-import DistlistComponent from '../../vue/Admin/Distlist'
	-import DomainComponent from '../../vue/Admin/Domain'
	import LoginComponent from '../../vue/Login'
	import LogoutComponent from '../../vue/Logout'
	import PageComponent from '../../vue/Page'
	-import ResourceComponent from '../../vue/Admin/Resource'
	-import SharedFolderComponent from '../../vue/Admin/SharedFolder'
	-import StatsComponent from '../../vue/Admin/Stats'
	-import UserComponent from '../../vue/Admin/User'
	+
	+// Here's a list of lazy-loaded components
	+// Note: you can pack multiple components into the same chunk, webpackChunkName
	+// is also used to get a sensible file name instead of numbers
	+
	+const DashboardComponent = () => import(/* webpackChunkName: "../admin/pages" */ '../../vue/Admin/Dashboard')
	+const DistlistComponent = () => import(/* webpackChunkName: "../admin/pages" */ '../../vue/Admin/Distlist')
	+const DomainComponent = () => import(/* webpackChunkName: "../admin/pages" */ '../../vue/Admin/Domain')
	+const ResourceComponent = () => import(/* webpackChunkName: "../admin/pages" */ '../../vue/Admin/Resource')
	+const SharedFolderComponent = () => import(/* webpackChunkName: "../admin/pages" */ '../../vue/Admin/SharedFolder')
	+const StatsComponent = () => import(/* webpackChunkName: "../admin/pages" */ '../../vue/Admin/Stats')
	+const UserComponent = () => import(/* webpackChunkName: "../admin/pages" */ '../../vue/Admin/User')

	const routes = [
	{
	path: '/',
	redirect: { name: 'dashboard' }
	},
	{
	path: '/dashboard',
	name: 'dashboard',
	component: DashboardComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/distlist/:list',
	name: 'distlist',
	component: DistlistComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/domain/:domain',
	name: 'domain',
	component: DomainComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/login',
	name: 'login',
	component: LoginComponent
	},
	{
	path: '/logout',
	name: 'logout',
	component: LogoutComponent
	},
	{
	path: '/resource/:resource',
	name: 'resource',
	component: ResourceComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/shared-folder/:folder',
	name: 'shared-folder',
	component: SharedFolderComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/stats',
	name: 'stats',
	component: StatsComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/user/:user',
	name: 'user',
	component: UserComponent,
	meta: { requiresAuth: true }
	},
	{
	name: '404',
	path: '*',
	component: PageComponent
	}
	]

	export default routes
	diff --git a/src/resources/js/reseller/routes.js b/src/resources/js/reseller/routes.js
	index b1770e9d..45f235c3 100644
	--- a/src/resources/js/reseller/routes.js
	+++ b/src/resources/js/reseller/routes.js
	@@ -1,90 +1,95 @@
	-import DashboardComponent from '../../vue/Reseller/Dashboard'
	-import DistlistComponent from '../../vue/Admin/Distlist'
	-import DomainComponent from '../../vue/Admin/Domain'
	-import InvitationsComponent from '../../vue/Reseller/Invitations'
	import LoginComponent from '../../vue/Login'
	import LogoutComponent from '../../vue/Logout'
	import PageComponent from '../../vue/Page'
	-import ResourceComponent from '../../vue/Admin/Resource'
	-import SharedFolderComponent from '../../vue/Admin/SharedFolder'
	-import StatsComponent from '../../vue/Reseller/Stats'
	-import UserComponent from '../../vue/Admin/User'
	-import WalletComponent from '../../vue/Wallet'
	+
	+// Here's a list of lazy-loaded components
	+// Note: you can pack multiple components into the same chunk, webpackChunkName
	+// is also used to get a sensible file name instead of numbers
	+
	+const DashboardComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Reseller/Dashboard')
	+const DistlistComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Admin/Distlist')
	+const DomainComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Admin/Domain')
	+const InvitationsComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Reseller/Invitations')
	+const ResourceComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Admin/Resource')
	+const SharedFolderComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Admin/SharedFolder')
	+const StatsComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Reseller/Stats')
	+const UserComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Admin/User')
	+const WalletComponent = () => import(/* webpackChunkName: "../reseller/pages" */ '../../vue/Wallet')

	const routes = [
	{
	path: '/',
	redirect: { name: 'dashboard' }
	},
	{
	path: '/dashboard',
	name: 'dashboard',
	component: DashboardComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/distlist/:list',
	name: 'distlist',
	component: DistlistComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/domain/:domain',
	name: 'domain',
	component: DomainComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/login',
	name: 'login',
	component: LoginComponent
	},
	{
	path: '/logout',
	name: 'logout',
	component: LogoutComponent
	},
	{
	path: '/invitations',
	name: 'invitations',
	component: InvitationsComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/resource/:resource',
	name: 'resource',
	component: ResourceComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/shared-folder/:folder',
	name: 'shared-folder',
	component: SharedFolderComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/stats',
	name: 'stats',
	component: StatsComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/user/:user',
	name: 'user',
	component: UserComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/wallet',
	name: 'wallet',
	component: WalletComponent,
	meta: { requiresAuth: true }
	},
	{
	name: '404',
	path: '*',
	component: PageComponent
	}
	]

	export default routes
	diff --git a/src/resources/js/user/routes.js b/src/resources/js/user/routes.js
	index ce9e6e47..efb1c3c7 100644
	--- a/src/resources/js/user/routes.js
	+++ b/src/resources/js/user/routes.js
	@@ -1,157 +1,158 @@
	-import DashboardComponent from '../../vue/Dashboard'
	-import DistlistInfoComponent from '../../vue/Distlist/Info'
	-import DistlistListComponent from '../../vue/Distlist/List'
	-import DomainInfoComponent from '../../vue/Domain/Info'
	-import DomainListComponent from '../../vue/Domain/List'
	import LoginComponent from '../../vue/Login'
	import LogoutComponent from '../../vue/Logout'
	-import MeetComponent from '../../vue/Rooms'
	import PageComponent from '../../vue/Page'
	import PasswordResetComponent from '../../vue/PasswordReset'
	-import ResourceInfoComponent from '../../vue/Resource/Info'
	-import ResourceListComponent from '../../vue/Resource/List'
	-import SharedFolderInfoComponent from '../../vue/SharedFolder/Info'
	-import SharedFolderListComponent from '../../vue/SharedFolder/List'
	import SignupComponent from '../../vue/Signup'
	-import UserInfoComponent from '../../vue/User/Info'
	-import UserListComponent from '../../vue/User/List'
	-import UserProfileComponent from '../../vue/User/Profile'
	-import UserProfileDeleteComponent from '../../vue/User/ProfileDelete'
	-import WalletComponent from '../../vue/Wallet'

	// Here's a list of lazy-loaded components
	// Note: you can pack multiple components into the same chunk, webpackChunkName
	// is also used to get a sensible file name instead of numbers
	-const RoomComponent = () => import(/* webpackChunkName: "room" */ '../../vue/Meet/Room.vue')
	+
	+const DashboardComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Dashboard')
	+const DistlistInfoComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Distlist/Info')
	+const DistlistListComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Distlist/List')
	+const DomainInfoComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Domain/Info')
	+const DomainListComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Domain/List')
	+const MeetComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Rooms')
	+const ResourceInfoComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Resource/Info')
	+const ResourceListComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Resource/List')
	+const SharedFolderInfoComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/SharedFolder/Info')
	+const SharedFolderListComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/SharedFolder/List')
	+const UserInfoComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/User/Info')
	+const UserListComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/User/List')
	+const UserProfileComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/User/Profile')
	+const UserProfileDeleteComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/User/ProfileDelete')
	+const WalletComponent = () => import(/* webpackChunkName: "../user/pages" */ '../../vue/Wallet')
	+const RoomComponent = () => import(/* webpackChunkName: "../user/meet" */ '../../vue/Meet/Room.vue')

	const routes = [
	{
	path: '/dashboard',
	name: 'dashboard',
	component: DashboardComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/distlist/:list',
	name: 'distlist',
	component: DistlistInfoComponent,
	meta: { requiresAuth: true, perm: 'distlists' }
	},
	{
	path: '/distlists',
	name: 'distlists',
	component: DistlistListComponent,
	meta: { requiresAuth: true, perm: 'distlists' }
	},
	{
	path: '/domain/:domain',
	name: 'domain',
	component: DomainInfoComponent,
	meta: { requiresAuth: true, perm: 'domains' }
	},
	{
	path: '/domains',
	name: 'domains',
	component: DomainListComponent,
	meta: { requiresAuth: true, perm: 'domains' }
	},
	{
	path: '/login',
	name: 'login',
	component: LoginComponent
	},
	{
	path: '/logout',
	name: 'logout',
	component: LogoutComponent
	},
	{
	path: '/password-reset/:code?',
	name: 'password-reset',
	component: PasswordResetComponent
	},
	{
	path: '/profile',
	name: 'profile',
	component: UserProfileComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/profile/delete',
	name: 'profile-delete',
	component: UserProfileDeleteComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/resource/:resource',
	name: 'resource',
	component: ResourceInfoComponent,
	meta: { requiresAuth: true, perm: 'resources' }
	},
	{
	path: '/resources',
	name: 'resources',
	component: ResourceListComponent,
	meta: { requiresAuth: true, perm: 'resources' }
	},
	{
	component: RoomComponent,
	name: 'room',
	path: '/meet/:room',
	meta: { loading: true }
	},
	{
	path: '/rooms',
	name: 'rooms',
	component: MeetComponent,
	meta: { requiresAuth: true }
	},
	{
	path: '/shared-folder/:folder',
	name: 'shared-folder',
	component: SharedFolderInfoComponent,
	meta: { requiresAuth: true, perm: 'folders' }
	},
	{
	path: '/shared-folders',
	name: 'shared-folders',
	component: SharedFolderListComponent,
	meta: { requiresAuth: true, perm: 'folders' }
	},
	{
	path: '/signup/invite/:param',
	name: 'signup-invite',
	component: SignupComponent
	},
	{
	path: '/signup/:param?',
	alias: '/signup/voucher/:param',
	name: 'signup',
	component: SignupComponent
	},
	{
	path: '/user/:user',
	name: 'user',
	component: UserInfoComponent,
	meta: { requiresAuth: true, perm: 'users' }
	},
	{
	path: '/users',
	name: 'users',
	component: UserListComponent,
	meta: { requiresAuth: true, perm: 'users' }
	},
	{
	path: '/wallet',
	name: 'wallet',
	component: WalletComponent,
	meta: { requiresAuth: true, perm: 'wallets' }
	},
	{
	name: '404',
	path: '*',
	component: PageComponent
	}
	]

	export default routes
	diff --git a/src/resources/themes/app.scss b/src/resources/themes/app.scss
	index 74b39dd0..db382321 100644
	--- a/src/resources/themes/app.scss
	+++ b/src/resources/themes/app.scss
	@@ -1,454 +1,461 @@
	html,
	body,
	body > .outer-container {
	height: 100%;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	table {
	th {
	white-space: nowrap;
	}

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

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

	&.form-list {
	margin: 0;

	td {
	border: 0;

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

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

	button {
	line-height: 1;
	}
	}

	.btn-action {
	line-height: 1;
	padding: 0;
	}
	+
	+ td {
	+ & > svg + a,
	+ & > svg + span {
	+ margin-left: .4em;
	+ }
	+ }
	}

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

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

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

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

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

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

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

	svg {
	font-size: 1.5em;
	}

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

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

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

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

	#status-box {
	background-color: lighten($green, 35);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.nav-tabs {
	flex-wrap: nowrap;

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

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

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

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

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

	svg {
	vertical-align: -0.175em;
	}

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

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

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

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

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

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

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

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

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

	@include media-breakpoint-down(sm) {
	.tab-pane > .card-body {
	padding: 0.5rem;
	}
	}
	diff --git a/src/resources/themes/forms.scss b/src/resources/themes/forms.scss
	index de5b08eb..44fa1853 100644
	--- a/src/resources/themes/forms.scss
	+++ b/src/resources/themes/forms.scss
	@@ -1,154 +1,160 @@
	.list-input {
	& > div {
	&:not(:last-child) {
	margin-bottom: -1px;

	input,
	a.btn {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	}
	}

	&:not(:first-child) {
	input,
	a.btn {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	}
	}
	}

	input.is-invalid {
	z-index: 2;
	}

	.btn svg {
	vertical-align: middle;
	}
	}

	.acl-input {
	select.acl,
	select.mod-user {
	max-width: fit-content;
	}
	}

	.range-input {
	display: flex;

	label {
	margin-right: 0.5em;
	min-width: 4em;
	text-align: right;
	line-height: 1.7;
	}
	}

	.input-group-activable {
	&.active {
	:not(.activable) {
	display: none;
	}
	}

	&:not(.active) {
	.activable {
	display: none;
	}
	}

	// Label is always visible
	.label {
	color: $body-color;
	display: initial !important;
	}

	.input-group-text {
	border-color: transparent;
	background: transparent;
	padding-left: 0;

	&:not(.label) {
	flex: 1;
	}
	}
	}

	// An input group with a select and input, where input is displayed
	// only for some select values
	.input-group-select {
	&:not(.selected) {
	input {
	display: none;
	}

	select {
	border-bottom-right-radius: .25rem !important;
	border-top-right-radius: .25rem !important;
	}
	}

	input {
	border-bottom-right-radius: .25rem !important;
	border-top-right-radius: .25rem !important;
	}
	}

	.form-control-plaintext .btn-sm {
	margin-top: -0.25rem;
	}

	+.buttons {
	+ & > button + button {
	+ margin-left: .5em;
	+ }
	+}
	+
	// Various improvements for mobile
	@include media-breakpoint-down(sm) {
	.row.mb-3 {
	margin-bottom: 0.5rem !important;
	}

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

	.tab-content {
	margin-top: 0.5rem;
	}

	.col-form-label {
	color: #666;
	font-size: 95%;
	}

	.row.plaintext .col-form-label {
	padding-bottom: 0;
	}

	form.read-only.short label {
	width: 35%;

	& + * {
	width: 65%;
	}
	}

	.row.checkbox {
	position: relative;

	& > div {
	padding-top: 0 !important;

	input {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	}
	}

	label {
	padding-right: 2.5rem;
	}
	}
	}
	diff --git a/src/resources/vue/Admin/Distlist.vue b/src/resources/vue/Admin/Distlist.vue
	index 19734767..021c9bd7 100644
	--- a/src/resources/vue/Admin/Distlist.vue
	+++ b/src/resources/vue/Admin/Distlist.vue
	@@ -1,116 +1,116 @@
	<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">
	+ <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)
	.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/Domain.vue b/src/resources/vue/Admin/Domain.vue
	index afe28ea3..f279a1dc 100644
	--- a/src/resources/vue/Admin/Domain.vue
	+++ b/src/resources/vue/Admin/Domain.vue
	@@ -1,118 +1,118 @@
	<template>
	<div v-if="domain" class="container">
	<div class="card" id="domain-info">
	<div class="card-body">
	<div class="card-title">{{ domain.namespace }}</div>
	<div class="card-text">
	<form class="read-only short">
	<div class="row plaintext">
	<label for="domainid" 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="domainid">
	{{ domain.id }} <span class="text-muted">({{ domain.created_at }})</span>
	</span>
	</div>
	</div>
	<div class="row plaintext">
	<label for="first_name" 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(domain)">{{ $root.statusText(domain) }}</span>
	</span>
	</div>
	</div>
	</form>
	- <div class="mt-2">
	+ <div class="mt-2 buttons">
	<button v-if="!domain.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendDomain">
	{{ $t('btn.suspend') }}
	</button>
	<button v-if="domain.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendDomain">
	{{ $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-config" href="#domain-config" role="tab" aria-controls="domain-config" aria-selected="true" @click="$root.tab">
	{{ $t('form.config') }}
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-settings" href="#domain-settings" role="tab" aria-controls="domain-settings" aria-selected="false" @click="$root.tab">
	{{ $t('form.settings') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane show active" id="domain-config" role="tabpanel" aria-labelledby="tab-config">
	<div class="card-body">
	<div class="card-text">
	<p>{{ $t('domain.dns-verify') }}</p>
	<p><pre id="dns-verify">{{ domain.dns.join("\n") }}</pre></p>
	<p>{{ $t('domain.dns-config') }}</p>
	<p><pre id="dns-config">{{ domain.mx.join("\n") }}</pre></p>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="domain-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="spf_whitelist" class="col-sm-4 col-form-label">{{ $t('domain.spf-whitelist') }}</label>
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="spf_whitelist">
	{{ domain.config && domain.config.spf_whitelist.length ? domain.config.spf_whitelist.join(', ') : $t('form.none') }}
	</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	domain: null
	}
	},
	created() {
	const domain_id = this.$route.params.domain;

	axios.get('/api/v4/domains/' + domain_id)
	.then(response => {
	this.domain = response.data
	})
	.catch(this.$root.errorHandler)
	},
	methods: {
	suspendDomain() {
	axios.post('/api/v4/domains/' + this.domain.id + '/suspend', {})
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.domain = Object.assign({}, this.domain, { isSuspended: true })
	}
	})
	},
	unsuspendDomain() {
	axios.post('/api/v4/domains/' + this.domain.id + '/unsuspend', {})
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	this.domain = Object.assign({}, this.domain, { isSuspended: false })
	}
	})
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
	index a7a69130..004a4614 100644
	--- a/src/resources/vue/Admin/User.vue
	+++ b/src/resources/vue/Admin/User.vue
	@@ -1,842 +1,842 @@
	<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>
	- <button type="button" class="btn btn-secondary btn-sm" @click="emailEdit">{{ $t('btn.edit') }}</button>
	+ <button type="button" class="btn btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</button>
	</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">
	+ <div class="mt-2 buttons">
	<button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser">
	{{ $t('btn.suspend') }}
	</button>
	<button v-if="user.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendUser">
	{{ $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-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>
	- <button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">{{ $t('btn.edit') }}</button>
	+ <button type="button" class="btn btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</button>
	</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">
	+ <div class="mt-2 buttons">
	<button id="button-award" class="btn btn-success" type="button" @click="awardDialog">{{ $t('user.add-bonus') }}</button>
	<button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">{{ $t('user.add-penalty') }}</button>
	</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">
	+ <div class="mt-2 buttons">
	<button type="button" class="btn btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">
	{{ $t('user.reset-2fa') }}
	</button>
	<button type="button" class="btn btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">
	{{ $t('user.add-beta') }}
	</button>
	</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="cog" :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>
	<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	</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">
	<button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
	<button type="button" class="btn btn-primary modal-action" @click="submitDiscount()">
	<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	</button>
	</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>
	<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	</div>
	<div class="modal-body">
	<p>
	<input v-model="external_email" name="external_email" class="form-control">
	</p>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
	<button type="button" class="btn btn-primary modal-action" @click="submitEmail()">
	<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	</button>
	</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>
	<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	</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">
	<button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
	<button type="button" class="btn btn-primary modal-action" @click="submitOneOff()">
	<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	</button>
	</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>
	<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	</div>
	<div class="modal-body">
	<p>{{ $t('user.2fa-hint1') }}</p>
	<p>{{ $t('user.2fa-hint2') }}</p>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
	<button type="button" class="btn btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

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

	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)
	.then(response => {
	this.$root.stopLoading()

	this.user = response.data

	const financesTab = '#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)
	.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/PasswordReset.vue b/src/resources/vue/PasswordReset.vue
	index 8b6816ed..329b1493 100644
	--- a/src/resources/vue/PasswordReset.vue
	+++ b/src/resources/vue/PasswordReset.vue
	@@ -1,168 +1,168 @@
	<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>
	<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
	</form>
	</div>
	</div>

	<div class="card d-none" id="step2">
	<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>
	<button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
	+ <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
	<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_">
	<div class="mb-3">
	<label for="reset_password" class="visually-hidden">{{ $t('form.password') }}</label>
	<input type="password" class="form-control" id="reset_password" :placeholder="$t('form.password')" required v-model="password">
	</div>
	<div class="mb-3">
	<label for="reset_confirm" class="visually-hidden">{{ $t('form.password-confirm') }}</label>
	<input type="password" class="form-control" id="reset_confirm" :placeholder="$t('form.password-confirm')" required v-model="password_confirmation">
	</div>
	- <div class="form-group pt-3">
	+ <div class="form-group pt-3 mb-3">
	<label for="secondfactor" class="sr-only">2FA</label>
	<div class="input-group">
	- <span class="input-group-prepend">
	- <span class="input-group-text"><svg-icon icon="key"></svg-icon></span>
	+ <span class="input-group-text">
	+ <svg-icon icon="key"></svg-icon>
	</span>
	- <input type="text" id="secondfactor" class="form-control rounded-right" placeholder="Second factor code" v-model="secondFactor">
	+ <input type="text" id="secondfactor" class="form-control rounded-end" placeholder="Second factor code" v-model="secondFactor">
	</div>
	<small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
	</div>
	<button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	</form>
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	email: '',
	code: '',
	short_code: '',
	password: '',
	password_confirmation: '',
	secondFactor: '',
	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) {
	if (bylink === true) {
	this.displayForm(2, false)
	}

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

	axios.post('/api/auth/password-reset/verify', {
	code: this.code,
	short_code: this.short_code
	}).then(response => {
	this.displayForm(3, true)
	}).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 reset the password
	submitStep3() {
	this.$root.clearFormValidation($('#step3 form'))

	axios.post('/api/auth/password-reset', {
	code: this.code,
	short_code: this.short_code,
	password: this.password,
	password_confirmation: this.password_confirmation,
	secondfactor: this.secondFactor
	}).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()
	},
	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/Signup.vue b/src/resources/vue/Signup.vue
	index 8518f49a..38816736 100644
	--- a/src/resources/vue/Signup.vue
	+++ b/src/resources/vue/Signup.vue
	@@ -1,304 +1,304 @@
	<template>
	<div class="container">
	<div id="step0" v-if="!invitation">
	<div class="plan-selector row row-cols-sm-2 g-3">
	<div v-for="item in plans" :key="item.id">
	<div :class="'card bg-light plan-' + item.title">
	<div class="card-header plan-header">
	<div class="plan-ico text-center">
	<svg-icon :icon="plan_icons[item.title]"></svg-icon>
	</div>
	</div>
	<div class="card-body text-center">
	<button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button>
	<div class="plan-description text-start mt-3" v-html="item.description"></div>
	</div>
	</div>
	</div>
	</div>
	</div>

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

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

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

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

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

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

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

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

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

	let post = {
	login: this.login,
	domain: this.domain,
	password: this.password,
	password_confirmation: this.password_confirmation,
	voucher: this.voucher
	}

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

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

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

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

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

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

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

	this.domain = response.domain \|\| window.config['app.domain']
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
	index 21978f84..15e09985 100644
	--- a/src/resources/vue/Wallet.vue
	+++ b/src/resources/vue/Wallet.vue
	@@ -1,435 +1,435 @@
	<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>
	<button type="button" class="btn btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</button>
	</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>
	<button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button>
	</template>
	<button type="button" class="btn btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</button>
	</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>
	+ <p class="buttons">
	<button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button>
	<button type="button" class="btn btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</button>
	</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>
	<button type="button" class="btn btn-secondary" @click="receiptDownload">
	<svg-icon icon="download"></svg-icon> {{ $t('btn.download') }}
	</button>
	</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>
	<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	</div>
	<div class="modal-body">
	<div id="payment-method" v-if="paymentForm == 'method'">
	<form data-validation-prefix="mandate_">
	<div id="payment-method-selection">
	<a :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" class="card link-profile">
	<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">
	<button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
	<button type="button" class="btn btn-primary modal-action"
	v-if="paymentForm == 'auto' && (mandate.isValid \|\| mandate.isPending)"
	@click="autoPayment"
	>
	<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	</button>
	<button type="button" class="btn btn-primary modal-action"
	v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
	@click="autoPayment"
	>
	<svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}
	</button>
	<button type="button" class="btn btn-primary modal-action"
	v-if="paymentForm == 'manual'"
	@click="payment"
	>
	<svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

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

	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.$store.state.authInfo.wallets[0].id

	this.$root.startLoading()
	axios.get('/api/v4/wallets/' + this.walletId)
	.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')
	.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')

	this.$root.removeLoader(mandate_form)

	if (!this.mandate.id \|\| this.mandate.isPending) {
	this.$root.addLoader(mandate_form)
	axios.get('/api/v4/payments/mandate')
	.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'))

	axios.post('/api/v4/payments', {amount: this.amount, methodId: this.selectedPaymentMethod.id, currency: this.selectedPaymentMethod.currency}, { 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')
	this.$root.addLoader(form, false, {'min-height': '10em'})

	axios.get('/api/v4/payments/methods', {params: {type: nextForm == 'manual' ? 'oneoff' : 'recurring'}})
	.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)
	},
	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/Menu.vue b/src/resources/vue/Widgets/Menu.vue
	index 11387e27..79010057 100644
	--- a/src/resources/vue/Widgets/Menu.vue
	+++ b/src/resources/vue/Widgets/Menu.vue
	@@ -1,122 +1,122 @@
	<template>
	<nav :id="mode + '-menu'" :class="'navbar navbar-light navbar-expand-' + (mode == 'header' ? 'lg' : 'sm')">
	<div class="container p-0">
	<router-link class="navbar-brand" to="/" v-html="$root.logo(mode)"></router-link>
	<button v-if="mode == 'header'" class="navbar-toggler" type="button"
	data-bs-toggle="collapse" data-bs-target="#header-menu-navbar"
	aria-controls="header-menu-navbar" aria-expanded="false" :aria-label="$t('menu.toggle')"
	>
	<span class="navbar-toggler-icon"></span>
	</button>
	<div :id="mode + '-menu-navbar'" :class="mode == 'header' ? 'collapse navbar-collapse justify-content-end' : ''">
	<ul class="navbar-nav justify-content-end">
	<li class="nav-item" v-for="item in menu" :key="item.index">
	<a v-if="item.href" :class="'nav-link link-' + item.index" :href="item.href">{{ item.title }}</a>
	<router-link v-if="item.to"
	:class="'nav-link link-' + item.index"
	active-class="active"
	:to="item.to"
	:exact="item.exact"
	>
	{{ item.title }}
	</router-link>
	</li>
	<li class="nav-item" v-if="!loggedIn && $root.isUser">
	<router-link class="nav-link link-signup" active-class="active" :to="{name: 'signup'}">{{ $t('menu.signup') }}</router-link>
	</li>
	<li class="nav-item" v-if="loggedIn">
	<router-link class="nav-link link-dashboard" active-class="active" :to="{name: 'dashboard'}">{{ $t('menu.cockpit') }}</router-link>
	</li>
	<li class="nav-item" v-if="loggedIn">
	<router-link class="nav-link menulogin link-logout" active-class="active" :to="{name: 'logout'}">{{ $t('menu.logout') }}</router-link>
	</li>
	<li class="nav-item" v-if="!loggedIn">
	<router-link class="nav-link menulogin link-login" :to="{name: 'login'}">{{ $t('menu.login') }}</router-link>
	</li>
	<li v-if="languages.length > 1 && mode == 'header'" id="language-selector" class="nav-item dropdown">
	<a href="#" class="nav-link link-lang dropdown-toggle" role="button" data-bs-toggle="dropdown">{{ getLang().toUpperCase() }}</a>
	- <div class="dropdown-menu dropdown-menu-right mb-2">
	+ <div class="dropdown-menu dropdown-menu-end mb-2">
	<a class="dropdown-item" href="#" v-for="lang in languages" :key="lang" @click="setLang(lang)">
	{{ lang.toUpperCase() }} - {{ $t('lang.' + lang) }}
	</a>
	</div>
	</li>
	</ul>
	<div v-if="mode == 'footer'" class="footer">
	<div id="footer-copyright">@ Apheleia IT AG, {{ buildYear }}</div>
	<div v-if="footer" id="footer-company">{{ footer }}</div>
	</div>
	</div>
	</div>
	</nav>
	</template>

	<script>
	import buildDate from '../../build/js/ts'
	import { setLang, getLang } from '../../js/locale'

	export default {
	props: {
	mode: { type: String, default: 'header' },
	footer: { type: String, default: '' }
	},
	data() {
	return {
	buildYear: buildDate.getFullYear(),
	languages: window.config['languages'] \|\| [],
	menuList: []
	}
	},
	computed: {
	loggedIn() { return this.$store.state.isLoggedIn },
	menu() { return this.menuList.filter(item => !item.footer \|\| this.mode == 'footer') },
	route() { return this.$route.name }
	},
	mounted() {
	this.menuList = this.loadMenu()

	// On mobile close the menu when the menu item is clicked
	if (this.mode == 'header') {
	$('#header-menu .navbar').on('click', function() { $(this).removeClass('show') })
	}
	},
	methods: {
	loadMenu() {
	let menu = []
	const lang = this.getLang()
	const loggedIn = this.loggedIn

	window.config.menu.forEach(item => {
	item.title = item['title-' + lang] \|\| item['title-en'] \|\| item.title

	if (!item.location \|\| !item.title) {
	console.error("Invalid menu entry", item)
	return
	}

	// TODO: Different menu for different loggedIn state

	if (item.location.match(/^https?:/)) {
	item.href = item.location
	} else {
	item.to = { path: item.location }
	}

	item.exact = item.location == '/'
	item.index = item.page \|\| item.title.toLowerCase().replace(/\s+/g, '')

	menu.push(item)
	})

	return menu
	},
	getLang() {
	return getLang()
	},
	setLang(language) {
	setLang(language)
	this.menuList = this.loadMenu()
	}
	}
	}
	</script>
	diff --git a/src/webpack.mix.js b/src/webpack.mix.js
	index ecbf2be0..5490a8a2 100644
	--- a/src/webpack.mix.js
	+++ b/src/webpack.mix.js
	@@ -1,30 +1,39 @@

	/*
	\|--------------------------------------------------------------------------
	\| Mix Asset Management
	\|--------------------------------------------------------------------------
	\|
	\| Mix provides a clean, fluent API for defining some Webpack build steps
	\| for your Laravel application. By default, we are compiling the Sass
	\| file for the application as well as bundling up all the JS files.
	\|
	*/

	const { spawn } = require('child_process');
	const glob = require('glob');
	const mix = require('laravel-mix');

	-mix.js('resources/js/user/app.js', 'public/js/user.js').vue()
	- .js('resources/js/admin/app.js', 'public/js/admin.js').vue()
	- .js('resources/js/reseller/app.js', 'public/js/reseller.js').vue()
	+mix.options({
	+ vue: {
	+ compilerOptions: {
	+ whitespace: 'condense'
	+ }
	+ }
	+})
	+
	+mix.js('resources/js/user/app.js', 'public/js/user.js')
	+ .js('resources/js/admin/app.js', 'public/js/admin.js')
	+ .js('resources/js/reseller/app.js', 'public/js/reseller.js')
	+ .vue()

	mix.before(() => {
	spawn('php', ['resources/build/before.php'], { stdio: 'inherit' })
	})

	glob.sync('resources/themes/*/', {}).forEach(fromDir => {
	const toDir = fromDir.replace('resources/themes/', 'public/themes/')

	mix.sass(fromDir + 'app.scss', toDir)
	.sass(fromDir + 'document.scss', toDir);
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Jan 30, 10:41 PM (8 h, 16 s)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 426058
Default Alt Text: (133 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions