diff --git a/src/.env.example b/src/.env.example
index 85a6e48d..f2d1d8e2 100644
--- a/src/.env.example
+++ b/src/.env.example
@@ -1,175 +1,178 @@
 APP_NAME=Kolab
 APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
 APP_URL=http://127.0.0.1:8000
 #APP_PASSPHRASE=
 APP_PUBLIC_URL=
 APP_DOMAIN=kolabnow.com
 APP_WEBSITE_DOMAIN=kolabnow.com
 APP_THEME=default
 APP_TENANT_ID=5
 APP_LOCALE=en
 APP_LOCALES=
 
 APP_WITH_ADMIN=1
 APP_WITH_RESELLER=1
 APP_WITH_SERVICES=1
 
+APP_HEADER_CSP="connect-src 'self'; child-src 'self'; font-src 'self'; form-action 'self' data:; frame-ancestors 'self'; img-src blob: data: 'self' *; media-src 'self'; object-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-eval' 'unsafe-inline'; default-src 'self';"
+APP_HEADER_XFO=sameorigin
+
 SIGNUP_LIMIT_EMAIL=0
 SIGNUP_LIMIT_IP=0
 
 ASSET_URL=http://127.0.0.1:8000
 
 WEBMAIL_URL=/apps
 SUPPORT_URL=/support
 SUPPORT_EMAIL=
 
 LOG_CHANNEL=stack
 LOG_SLOW_REQUESTS=5
 
 DB_CONNECTION=mysql
 DB_DATABASE=kolabdev
 DB_HOST=127.0.0.1
 DB_PASSWORD=kolab
 DB_PORT=3306
 DB_USERNAME=kolabdev
 
 BROADCAST_DRIVER=redis
 CACHE_DRIVER=redis
 
 QUEUE_CONNECTION=redis
 
 SESSION_DRIVER=file
 SESSION_LIFETIME=120
 
 OPENEXCHANGERATES_API_KEY="from openexchangerates.org"
 
 MFA_DSN=mysql://roundcube:Welcome2KolabSystems@127.0.0.1/roundcube
 MFA_TOTP_DIGITS=6
 MFA_TOTP_INTERVAL=30
 MFA_TOTP_DIGEST=sha1
 
 IMAP_URI=ssl://127.0.0.1:11993
 IMAP_ADMIN_LOGIN=cyrus-admin
 IMAP_ADMIN_PASSWORD=Welcome2KolabSystems
 IMAP_VERIFY_HOST=false
 IMAP_VERIFY_PEER=false
 
 LDAP_BASE_DN="dc=mgmt,dc=com"
 LDAP_DOMAIN_BASE_DN="ou=Domains,dc=mgmt,dc=com"
 LDAP_HOSTS=127.0.0.1
 LDAP_PORT=389
 LDAP_SERVICE_BIND_DN="uid=kolab-service,ou=Special Users,dc=mgmt,dc=com"
 LDAP_SERVICE_BIND_PW="Welcome2KolabSystems"
 LDAP_USE_SSL=false
 LDAP_USE_TLS=false
 
 # Administrative
 LDAP_ADMIN_BIND_DN="cn=Directory Manager"
 LDAP_ADMIN_BIND_PW="Welcome2KolabSystems"
 LDAP_ADMIN_ROOT_DN="dc=mgmt,dc=com"
 
 # Hosted (public registration)
 LDAP_HOSTED_BIND_DN="uid=hosted-kolab-service,ou=Special Users,dc=mgmt,dc=com"
 LDAP_HOSTED_BIND_PW="Welcome2KolabSystems"
 LDAP_HOSTED_ROOT_DN="dc=hosted,dc=com"
 
 OPENVIDU_API_PASSWORD=MY_SECRET
 OPENVIDU_API_URL=http://localhost:8080/api/
 OPENVIDU_API_USERNAME=OPENVIDUAPP
 OPENVIDU_API_VERIFY_TLS=true
 OPENVIDU_COTURN_IP=127.0.0.1
 OPENVIDU_COTURN_REDIS_DATABASE=2
 OPENVIDU_COTURN_REDIS_IP=127.0.0.1
 OPENVIDU_COTURN_REDIS_PASSWORD=turn
 # Used as COTURN_IP, TURN_PUBLIC_IP, for KMS_TURN_URL
 OPENVIDU_PUBLIC_IP=127.0.0.1
 OPENVIDU_PUBLIC_PORT=3478
 OPENVIDU_SERVER_PORT=8080
 OPENVIDU_WEBHOOK=true
 OPENVIDU_WEBHOOK_ENDPOINT=http://127.0.0.1:8000/webhooks/meet/openvidu
 
 # "CDR" events, see https://docs.openvidu.io/en/2.13.0/reference-docs/openvidu-server-cdr/
 #OPENVIDU_WEBHOOK_EVENTS=[sessionCreated,sessionDestroyed,participantJoined,participantLeft,webrtcConnectionCreated,webrtcConnectionDestroyed,recordingStatusChanged,filterEventDispatched,mediaNodeStatusChanged]
 #OPENVIDU_WEBHOOK_HEADERS=[\"Authorization:\ Basic\ SOMETHING\"]
 
 PGP_ENABLED=
 PGP_BINARY=
 PGP_AGENT=
 PGP_GPGCONF=
 PGP_LENGTH=
 
 ; Set these to IP addresses you serve WOAT with.
 ; Have the domain owner point _woat.<hosted-domain> NS RRs refer to ns0{1,2}.<provider-domain>
 WOAT_NS1=ns01.domain.tld
 WOAT_NS2=ns02.domain.tld
 
 REDIS_HOST=127.0.0.1
 REDIS_PASSWORD=null
 REDIS_PORT=6379
 
 SWOOLE_HOT_RELOAD_ENABLE=true
 SWOOLE_HTTP_ACCESS_LOG=true
 SWOOLE_HTTP_HOST=127.0.0.1
 SWOOLE_HTTP_PORT=8000
 SWOOLE_HTTP_REACTOR_NUM=1
 SWOOLE_HTTP_WEBSOCKET=true
 SWOOLE_HTTP_WORKER_NUM=1
 SWOOLE_OB_OUTPUT=true
 
 PAYMENT_PROVIDER=
 MOLLIE_KEY=
 STRIPE_KEY=
 STRIPE_PUBLIC_KEY=
 STRIPE_WEBHOOK_SECRET=
 
 MAIL_DRIVER=smtp
 MAIL_HOST=smtp.mailtrap.io
 MAIL_PORT=2525
 MAIL_USERNAME=null
 MAIL_PASSWORD=null
 MAIL_ENCRYPTION=null
 MAIL_FROM_ADDRESS="noreply@example.com"
 MAIL_FROM_NAME="Example.com"
 MAIL_REPLYTO_ADDRESS="replyto@example.com"
 MAIL_REPLYTO_NAME=null
 
 DNS_TTL=3600
 DNS_SPF="v=spf1 mx -all"
 DNS_STATIC="%s.    MX  10 ext-mx01.mykolab.com."
 DNS_COPY_FROM=null
 
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
 AWS_DEFAULT_REGION=us-east-1
 AWS_BUCKET=
 
 PUSHER_APP_ID=
 PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_APP_CLUSTER=mt1
 
 MIX_ASSET_PATH='/'
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 
 # Generate with ./artisan passport:client --password
 #PASSPORT_PROXY_OAUTH_CLIENT_ID=
 #PASSPORT_PROXY_OAUTH_CLIENT_SECRET=
 
 PASSPORT_PRIVATE_KEY=
 PASSPORT_PUBLIC_KEY=
 
 COMPANY_NAME=
 COMPANY_ADDRESS=
 COMPANY_DETAILS=
 COMPANY_EMAIL=
 COMPANY_LOGO=
 COMPANY_FOOTER=
 
 VAT_COUNTRIES=CH,LI
 VAT_RATE=7.7
 
 KB_ACCOUNT_DELETE=
 KB_ACCOUNT_SUSPENDED=
diff --git a/src/app/Http/Kernel.php b/src/app/Http/Kernel.php
index f49d8a29..a5c0625a 100644
--- a/src/app/Http/Kernel.php
+++ b/src/app/Http/Kernel.php
@@ -1,103 +1,105 @@
 <?php
 
 namespace App\Http;
 
 use Illuminate\Foundation\Http\Kernel as HttpKernel;
 
 class Kernel extends HttpKernel
 {
     /**
      * The application's global HTTP middleware stack.
      *
      * These middleware are run during every request to your application.
      *
      * @var array
      */
     protected $middleware = [
         \App\Http\Middleware\RequestLogger::class,
         \App\Http\Middleware\TrustProxies::class,
         \App\Http\Middleware\CheckForMaintenanceMode::class,
         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
         \App\Http\Middleware\TrimStrings::class,
         \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
         \App\Http\Middleware\DevelConfig::class,
         \App\Http\Middleware\Locale::class,
+        \App\Http\Middleware\ContentSecurityPolicy::class,
         // FIXME: CORS handling added here, I didn't find a nice way
         // to add this only to the API routes
         // \App\Http\Middleware\Cors::class,
     ];
 
     /**
      * The application's route middleware groups.
      *
      * @var array
      */
     protected $middlewareGroups = [
         'web' => [
             // \App\Http\Middleware\EncryptCookies::class,
             // \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
             // \Illuminate\Session\Middleware\StartSession::class,
             // \Illuminate\Session\Middleware\AuthenticateSession::class,
             // \Illuminate\View\Middleware\ShareErrorsFromSession::class,
             // \App\Http\Middleware\VerifyCsrfToken::class,
             // \Illuminate\Routing\Middleware\SubstituteBindings::class,
         ],
 
         'api' => [
             //'throttle:120,1',
             'bindings',
         ],
     ];
 
     /**
      * The application's route middleware.
      *
      * These middleware may be assigned to groups or used individually.
      *
      * @var array
      */
     protected $routeMiddleware = [
         'admin' => \App\Http\Middleware\AuthenticateAdmin::class,
         'auth' => \App\Http\Middleware\Authenticate::class,
         'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
         'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
         'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
         'can' => \Illuminate\Auth\Middleware\Authorize::class,
         'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
         'reseller' => \App\Http\Middleware\AuthenticateReseller::class,
         'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
         'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
         'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
     ];
 
     /**
      * The priority-sorted list of middleware.
      *
      * This forces non-global middleware to always be in the given order.
      *
      * @var array
      */
     protected $middlewarePriority = [
         \Illuminate\Session\Middleware\StartSession::class,
         \Illuminate\View\Middleware\ShareErrorsFromSession::class,
         \App\Http\Middleware\AuthenticateAdmin::class,
         \App\Http\Middleware\AuthenticateReseller::class,
         \App\Http\Middleware\Authenticate::class,
         \Illuminate\Session\Middleware\AuthenticateSession::class,
         \Illuminate\Routing\Middleware\SubstituteBindings::class,
         \Illuminate\Auth\Middleware\Authorize::class,
+        \App\Http\Middleware\ContentSecurityPolicy::class,
     ];
 
     /**
      * Handle an incoming HTTP request.
      *
      * @param \Illuminate\Http\Request $request HTTP Request object
      *
      * @return \Illuminate\Http\Response
      */
     public function handle($request)
     {
         // Overwrite the http request object
         return parent::handle(Request::createFrom($request));
     }
 }
diff --git a/src/app/Http/Middleware/ContentSecurityPolicy.php b/src/app/Http/Middleware/ContentSecurityPolicy.php
new file mode 100644
index 00000000..f13d7719
--- /dev/null
+++ b/src/app/Http/Middleware/ContentSecurityPolicy.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+
+class ContentSecurityPolicy
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @param \Closure                 $next
+     *
+     * @return mixed
+     */
+    public function handle($request, Closure $next)
+    {
+        $headers = [
+            'csp' => 'Content-Security-Policy',
+            'xfo' => 'X-Frame-Options',
+        ];
+
+        $next = $next($request);
+
+        foreach ($headers as $opt => $header) {
+            if ($value = \config("app.headers.{$opt}")) {
+                $next->header($header, $value);
+            }
+        }
+
+        return $next;
+    }
+}
diff --git a/src/config/app.php b/src/config/app.php
index 4a39e2ab..4eeaff61 100644
--- a/src/config/app.php
+++ b/src/config/app.php
@@ -1,299 +1,304 @@
 <?php
 
 return [
 
     /*
     |--------------------------------------------------------------------------
     | Application Name
     |--------------------------------------------------------------------------
     |
     | This value is the name of your application. This value is used when the
     | framework needs to place the application's name in a notification or
     | any other location as required by the application or its packages.
     |
     */
 
     'name' => env('APP_NAME', 'Laravel'),
 
     /*
     |--------------------------------------------------------------------------
     | Application Environment
     |--------------------------------------------------------------------------
     |
     | This value determines the "environment" your application is currently
     | running in. This may determine how you prefer to configure various
     | services the application utilizes. Set this in your ".env" file.
     |
     */
 
     'env' => env('APP_ENV', 'production'),
 
     /*
     |--------------------------------------------------------------------------
     | Application Debug Mode
     |--------------------------------------------------------------------------
     |
     | When your application is in debug mode, detailed error messages with
     | stack traces will be shown on every error that occurs within your
     | application. If disabled, a simple generic error page is shown.
     |
     */
 
     'debug' => env('APP_DEBUG', false),
 
     /*
     |--------------------------------------------------------------------------
     | Application URL
     |--------------------------------------------------------------------------
     |
     | This URL is used by the console to properly generate URLs when using
     | the Artisan command line tool. You should set this to the root of
     | your application so that it is used when running Artisan tasks.
     */
 
     'url' => env('APP_URL', 'http://localhost'),
 
     'passphrase' => env('APP_PASSPHRASE', null),
 
     'public_url' => env('APP_PUBLIC_URL', env('APP_URL', 'http://localhost')),
 
     'asset_url' => env('ASSET_URL', null),
 
     'support_url' => env('SUPPORT_URL', null),
 
     'support_email' => env('SUPPORT_EMAIL', null),
 
     'webmail_url' => env('WEBMAIL_URL', null),
 
     'theme' => env('APP_THEME', 'default'),
 
     'tenant_id' => env('APP_TENANT_ID', null),
 
     'currency' => \strtoupper(env('APP_CURRENCY', 'CHF')),
 
     /*
     |--------------------------------------------------------------------------
     | Application Domain
     |--------------------------------------------------------------------------
     |
     | System domain used for user signup (kolab identity)
     */
     'domain' => env('APP_DOMAIN', 'domain.tld'),
 
     'website_domain' => env('APP_WEBSITE_DOMAIN', env('APP_DOMAIN', 'domain.tld')),
 
     /*
     |--------------------------------------------------------------------------
     | Application Timezone
     |--------------------------------------------------------------------------
     |
     | Here you may specify the default timezone for your application, which
     | will be used by the PHP date and date-time functions. We have gone
     | ahead and set this to a sensible default for you out of the box.
     |
     */
 
     'timezone' => 'UTC',
 
     /*
     |--------------------------------------------------------------------------
     | Application Locale Configuration
     |--------------------------------------------------------------------------
     |
     | The application locale determines the default locale that will be used
     | by the translation service provider. You are free to set this value
     | to any of the locales which will be supported by the application.
     |
     */
 
     'locale' => env('APP_LOCALE', 'en'),
 
     /*
     |--------------------------------------------------------------------------
     | Application Fallback Locale
     |--------------------------------------------------------------------------
     |
     | The fallback locale determines the locale to use when the current one
     | is not available. You may change the value to correspond to any of
     | the language folders that are provided through your application.
     |
     */
 
     'fallback_locale' => 'en',
 
     /*
     |--------------------------------------------------------------------------
     | Faker Locale
     |--------------------------------------------------------------------------
     |
     | This locale will be used by the Faker PHP library when generating fake
     | data for your database seeds. For example, this will be used to get
     | localized telephone numbers, street address information and more.
     |
     */
 
     'faker_locale' => 'en_US',
 
     /*
     |--------------------------------------------------------------------------
     | Encryption Key
     |--------------------------------------------------------------------------
     |
     | This key is used by the Illuminate encrypter service and should be set
     | to a random, 32 character string, otherwise these encrypted strings
     | will not be safe. Please do this before deploying an application!
     |
     */
 
     'key' => env('APP_KEY'),
 
     'cipher' => 'AES-256-CBC',
 
     /*
     |--------------------------------------------------------------------------
     | Autoloaded Service Providers
     |--------------------------------------------------------------------------
     |
     | The service providers listed here will be automatically loaded on the
     | request to your application. Feel free to add your own services to
     | this array to grant expanded functionality to your applications.
     |
     */
 
     'providers' => [
         /*
          * Laravel Framework Service Providers...
          */
         Illuminate\Auth\AuthServiceProvider::class,
         Illuminate\Broadcasting\BroadcastServiceProvider::class,
         Illuminate\Bus\BusServiceProvider::class,
         Illuminate\Cache\CacheServiceProvider::class,
         Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
         Illuminate\Cookie\CookieServiceProvider::class,
         Illuminate\Database\DatabaseServiceProvider::class,
         Illuminate\Encryption\EncryptionServiceProvider::class,
         Illuminate\Filesystem\FilesystemServiceProvider::class,
         Illuminate\Foundation\Providers\FoundationServiceProvider::class,
         Illuminate\Hashing\HashServiceProvider::class,
         Illuminate\Mail\MailServiceProvider::class,
         Illuminate\Notifications\NotificationServiceProvider::class,
         Illuminate\Pagination\PaginationServiceProvider::class,
         Illuminate\Pipeline\PipelineServiceProvider::class,
         Illuminate\Queue\QueueServiceProvider::class,
         Illuminate\Redis\RedisServiceProvider::class,
         Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
         Illuminate\Session\SessionServiceProvider::class,
         Illuminate\Translation\TranslationServiceProvider::class,
         Illuminate\Validation\ValidationServiceProvider::class,
         Illuminate\View\ViewServiceProvider::class,
 
         /*
          * Package Service Providers...
          */
         Barryvdh\DomPDF\ServiceProvider::class,
 
         /*
          * Application Service Providers...
          */
         App\Providers\AppServiceProvider::class,
         App\Providers\AuthServiceProvider::class,
         // App\Providers\BroadcastServiceProvider::class,
         App\Providers\EventServiceProvider::class,
         App\Providers\HorizonServiceProvider::class,
         App\Providers\PassportServiceProvider::class,
         App\Providers\RouteServiceProvider::class,
     ],
 
     /*
     |--------------------------------------------------------------------------
     | Class Aliases
     |--------------------------------------------------------------------------
     |
     | This array of class aliases will be registered when this application
     | is started. However, feel free to register as many as you wish as
     | the aliases are "lazy" loaded so they don't hinder performance.
     |
     */
 
     'aliases' => [
         'App' => Illuminate\Support\Facades\App::class,
         'Arr' => Illuminate\Support\Arr::class,
         'Artisan' => Illuminate\Support\Facades\Artisan::class,
         'Auth' => Illuminate\Support\Facades\Auth::class,
         'Blade' => Illuminate\Support\Facades\Blade::class,
         'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
         'Bus' => Illuminate\Support\Facades\Bus::class,
         'Cache' => Illuminate\Support\Facades\Cache::class,
         'Config' => Illuminate\Support\Facades\Config::class,
         'Cookie' => Illuminate\Support\Facades\Cookie::class,
         'Crypt' => Illuminate\Support\Facades\Crypt::class,
         'DB' => Illuminate\Support\Facades\DB::class,
         'Eloquent' => Illuminate\Database\Eloquent\Model::class,
         'Event' => Illuminate\Support\Facades\Event::class,
         'File' => Illuminate\Support\Facades\File::class,
         'Gate' => Illuminate\Support\Facades\Gate::class,
         'Hash' => Illuminate\Support\Facades\Hash::class,
         'Lang' => Illuminate\Support\Facades\Lang::class,
         'Log' => Illuminate\Support\Facades\Log::class,
         'Mail' => Illuminate\Support\Facades\Mail::class,
         'Notification' => Illuminate\Support\Facades\Notification::class,
         'Password' => Illuminate\Support\Facades\Password::class,
         'PDF' => Barryvdh\DomPDF\Facade::class,
         'Queue' => Illuminate\Support\Facades\Queue::class,
         'Redirect' => Illuminate\Support\Facades\Redirect::class,
         'Redis' => Illuminate\Support\Facades\Redis::class,
         'Request' => Illuminate\Support\Facades\Request::class,
         'Response' => Illuminate\Support\Facades\Response::class,
         'Route' => Illuminate\Support\Facades\Route::class,
         'Schema' => Illuminate\Support\Facades\Schema::class,
         'Session' => Illuminate\Support\Facades\Session::class,
         'Storage' => Illuminate\Support\Facades\Storage::class,
         'Str' => Illuminate\Support\Str::class,
         'URL' => Illuminate\Support\Facades\URL::class,
         'Validator' => Illuminate\Support\Facades\Validator::class,
         'View' => Illuminate\Support\Facades\View::class,
     ],
 
+    'headers' => [
+        'csp' => env('APP_HEADER_CSP', ""),
+        'xfo' => env('APP_HEADER_XFO', ""),
+    ],
+
     // Locations of knowledge base articles
     'kb' => [
         // An article about suspended accounts
         'account_suspended' => env('KB_ACCOUNT_SUSPENDED'),
         // An article about a way to delete an owned account
         'account_delete' => env('KB_ACCOUNT_DELETE'),
     ],
 
     'company' => [
         'name' => env('COMPANY_NAME'),
         'address' => env('COMPANY_ADDRESS'),
         'details' => env('COMPANY_DETAILS'),
         'email' => env('COMPANY_EMAIL'),
         'logo' => env('COMPANY_LOGO'),
         'footer' => env('COMPANY_FOOTER', env('COMPANY_DETAILS')),
     ],
 
     'storage' => [
         'min_qty' => (int) env('STORAGE_MIN_QTY', 5), // in GB
     ],
 
     'vat' => [
         'countries' => env('VAT_COUNTRIES'),
         'rate' => (float) env('VAT_RATE'),
     ],
 
     'payment' => [
         'methods_oneoff' => env('PAYMENT_METHODS_ONEOFF', "creditcard,paypal,banktransfer"),
         'methods_recurring' => env('PAYMENT_METHODS_RECURRING', "creditcard"),
     ],
 
     'with_admin' => (bool) env('APP_WITH_ADMIN', false),
     'with_reseller' => (bool) env('APP_WITH_RESELLER', false),
     'with_services' => (bool) env('APP_WITH_SERVICES', false),
 
     'signup' => [
         'email_limit' => (int) env('SIGNUP_LIMIT_EMAIL', 0),
         'ip_limit' => (int) env('SIGNUP_LIMIT_IP', 0),
     ],
 
     'woat_ns1' => env('WOAT_NS1', 'ns01.' . env('APP_DOMAIN')),
     'woat_ns2' => env('WOAT_NS2', 'ns02.' . env('APP_DOMAIN')),
 ];
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index cb710a1d..a85c51f4 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -1,506 +1,506 @@
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
  * building robust, powerful web applications using Vue and Laravel.
  */
 
 require('./bootstrap')
 
 import AppComponent from '../vue/App'
 import MenuComponent from '../vue/Widgets/Menu'
 import SupportForm from '../vue/Widgets/SupportForm'
 import store from './store'
 import { Tab } from 'bootstrap'
 import { loadLangAsync, i18n } from './locale'
 
 const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="visually-hidden">Loading</span></div></div>'
 
 let isLoading = 0
 
 // Lock the UI with the 'loading...' element
 const startLoading = () => {
     isLoading++
     let loading = $('#app > .app-loader').removeClass('fadeOut')
     if (!loading.length) {
         $('#app').append($(loader))
     }
 }
 
 // Hide "loading" overlay
 const stopLoading = () => {
     if (isLoading > 0) {
         $('#app > .app-loader').addClass('fadeOut')
         isLoading--;
     }
 }
 
 let loadingRoute
 
 // Note: This has to be before the app is created
 // Note: You cannot use app inside of the function
 window.router.beforeEach((to, from, next) => {
     // check if the route requires authentication and user is not logged in
     if (to.meta.requiresAuth && !store.state.isLoggedIn) {
         // remember the original request, to use after login
         store.state.afterLogin = to;
 
         // redirect to login page
         next({ name: 'login' })
 
         return
     }
 
     if (to.meta.loading) {
         startLoading()
         loadingRoute = to.name
     }
 
     next()
 })
 
 window.router.afterEach((to, from) => {
     if (to.name && loadingRoute === to.name) {
         stopLoading()
         loadingRoute = null
     }
 
     // When changing a page remove old:
     // - error page
     // - modal backdrop
     $('#error-page,.modal-backdrop.show').remove()
     $('body').css('padding', 0) // remove padding added by unclosed modal
 })
 
 const app = new Vue({
     components: {
         AppComponent,
         MenuComponent,
     },
     i18n,
     store,
     router: window.router,
     data() {
         return {
             isUser: !window.isAdmin && !window.isReseller,
             appName: window.config['app.name'],
             appUrl: window.config['app.url'],
             themeDir: '/themes/' + window.config['app.theme']
         }
     },
     methods: {
         // Clear (bootstrap) form validation state
         clearFormValidation(form) {
             $(form).find('.is-invalid').removeClass('is-invalid')
             $(form).find('.invalid-feedback').remove()
         },
         hasPermission(type) {
             const authInfo = store.state.authInfo
             const key = 'enable' + type.charAt(0).toUpperCase() + type.slice(1)
             return !!(authInfo && authInfo.statusInfo[key])
         },
         hasRoute(name) {
             return this.$router.resolve({ name: name }).resolved.matched.length > 0
         },
         hasSKU(name) {
             const authInfo = store.state.authInfo
             return authInfo.statusInfo.skus && authInfo.statusInfo.skus.indexOf(name) != -1
         },
         isController(wallet_id) {
             if (wallet_id && store.state.authInfo) {
                 let i
                 for (i = 0; i < store.state.authInfo.wallets.length; i++) {
                     if (wallet_id == store.state.authInfo.wallets[i].id) {
                         return true
                     }
                 }
                 for (i = 0; i < store.state.authInfo.accounts.length; i++) {
                     if (wallet_id == store.state.authInfo.accounts[i].id) {
                         return true
                     }
                 }
             }
 
             return false
         },
         // Set user state to "logged in"
         loginUser(response, dashboard, update) {
             if (!update) {
                 store.commit('logoutUser') // destroy old state data
                 store.commit('loginUser')
             }
 
             localStorage.setItem('token', response.access_token)
             localStorage.setItem('refreshToken', response.refresh_token)
             axios.defaults.headers.common.Authorization = 'Bearer ' + response.access_token
 
             if (response.email) {
                 store.state.authInfo = response
             }
 
             if (dashboard !== false) {
                 this.$router.push(store.state.afterLogin || { name: 'dashboard' })
             }
 
             store.state.afterLogin = null
 
             // Refresh the token before it expires
             let timeout = response.expires_in || 0
 
             // We'll refresh 60 seconds before the token expires
             if (timeout > 60) {
                 timeout -= 60
             }
 
             // TODO: We probably should try a few times in case of an error
             // TODO: We probably should prevent axios from doing any requests
             //       while the token is being refreshed
 
             this.refreshTimeout = setTimeout(() => {
                 axios.post('/api/auth/refresh', {'refresh_token': response.refresh_token}).then(response => {
                     this.loginUser(response.data, false, true)
                 })
             }, timeout * 1000)
         },
         // Set user state to "not logged in"
         logoutUser(redirect) {
             store.commit('logoutUser')
             localStorage.setItem('token', '')
             localStorage.setItem('refreshToken', '')
             delete axios.defaults.headers.common.Authorization
 
             if (redirect !== false) {
                 this.$router.push({ name: 'login' })
             }
 
             clearTimeout(this.refreshTimeout)
         },
         logo(mode) {
             let src = this.appUrl + this.themeDir + '/images/logo_' + (mode || 'header') + '.png'
 
             return `<img src="${src}" alt="${this.appName}">`
         },
         // Display "loading" overlay inside of the specified element
         addLoader(elem, small = true, style = null) {
             if (style) {
                 $(elem).css(style)
             } else {
                 $(elem).css('position', 'relative')
             }
 
             $(elem).append(small ? $(loader).addClass('small') : $(loader))
         },
         // 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()
         },
         startLoading,
         stopLoading,
         isLoading() {
             return isLoading > 0
         },
         tab(e) {
             e.preventDefault()
             new Tab(e.target).show()
         },
         errorPage(code, msg, hint) {
             // Until https://github.com/vuejs/vue-router/issues/977 is implemented
             // we can't really use router to display error page as it has two side
             // effects: it changes the URL and adds the error page to browser history.
             // For now we'll be replacing current view with error page "manually".
 
             if (!msg) msg = this.$te('error.' + code) ? this.$t('error.' + code) : this.$t('error.unknown')
             if (!hint) hint = ''
 
             const error_page = '<div id="error-page" class="error-page">'
                 + `<div class="code">${code}</div><div class="message">${msg}</div><div class="hint">${hint}</div>`
                 + '</div>'
 
             $('#error-page').remove()
             $('#app').append(error_page)
 
             app.updateBodyClass('error')
         },
         errorHandler(error) {
             this.stopLoading()
 
             if (!error.response) {
                 // TODO: probably network connection error
             } else if (error.response.status === 401) {
                 // Remember requested route to come back to it after log in
                 if (this.$route.meta.requiresAuth) {
                     store.state.afterLogin = this.$route
                     this.logoutUser()
                 } else {
                     this.logoutUser(false)
                 }
             } else {
                 this.errorPage(error.response.status, error.response.statusText)
             }
         },
         downloadFile(url) {
             // TODO: This might not be a best way for big files as the content
             //       will be stored (temporarily) in browser memory
             // TODO: This method does not show the download progress in the browser
             //       but it could be implemented in the UI, axios has 'progress' property
             axios.get(url, { responseType: 'blob' })
                 .then(response => {
                     const link = document.createElement('a')
                     const contentDisposition = response.headers['content-disposition']
                     let filename = 'unknown'
 
                     if (contentDisposition) {
                         const match = contentDisposition.match(/filename="(.+)"/);
                         if (match.length === 2) {
                             filename = match[1];
                         }
                     }
 
                     link.href = window.URL.createObjectURL(response.data)
                     link.download = filename
                     link.click()
                 })
         },
         price(price, currency) {
             // TODO: Set locale argument according to the currently used locale
             return ((price || 0) / 100).toLocaleString('de-DE', { style: 'currency', currency: currency || 'CHF' })
         },
         priceLabel(cost, discount, 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 store.state.authInfo.isAccountDegraded
+            return store.state.authInfo && store.state.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 = store.state.authInfo.accounts[0]
 
             if (!wallet) {
                 wallet = store.state.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
 window.axios.interceptors.request.use(
     config => {
         // This is the only way I found to change configuration options
         // on a running application. We need this for browser testing.
         config.headers['X-Test-Payment-Provider'] = window.config.paymentProvider
 
         return config
     },
     error => {
         // Do something with request error
         return Promise.reject(error)
     }
 )
 
 // Add a axios response interceptor for general/validation error handler
 window.axios.interceptors.response.use(
     response => {
         if (response.config.onFinish) {
             response.config.onFinish()
         }
 
         return response
     },
     error => {
         // Do not display the error in a toast message, pass the error as-is
         if (error.config.ignoreErrors) {
             return Promise.reject(error)
         }
 
         if (error.config.onFinish) {
             error.config.onFinish()
         }
 
         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(.listinput-widget)').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)
     }
 )