@oxygen-cms/ui 1.5.2 → 1.6.2

package/.gitattributes

@@ -0,0 +1,3 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text

package/assets/icon/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/packages/oxygen/ui/img/icon/mstile-70x70.png"/>
+      <square150x150logo src="/packages/oxygen/ui/img/icon/mstile-150x150.png"/>
+      <square310x310logo src="/packages/oxygen/ui/img/icon/mstile-310x310.png"/>
+      <wide310x150logo src="/packages/oxygen/ui/img/icon/mstile-310x150.png"/>
+      <TileColor>#2b5797</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "1.5.2",
+  "version": "1.6.2",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {
@@ -16,13 +16,11 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "autoprefixer": "^9.8.5",
-    "babel-loader": "^8.1.0",
     "brace": "^0.11.1",
     "buefy": "^0.9.10",
     "bulma": "~0.9.3",
     "copy-webpack-plugin": "^5.1.1",
     "downloadjs": "^1.4.7",
-    "file-loader": "^6.1.1",
     "libphonenumber-js": "^1.9.11",
     "lodash": "^4.17.21",
     "title-case": "^3.0.3",
@@ -31,7 +29,6 @@
     "vex-js": "~4.1.0",
     "vue": "^2.6.11",
     "vue-async-computed": "^3.9.0",
-    "vue-loader": "^15.9.6",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "^2.6.11",
     "vue2-ace-editor": "^0.0.15",
@@ -42,18 +39,13 @@
     "@babel/preset-env": "^7.13.5",
     "babel-jest": "^26.6.3",
     "babel-polyfill": "^6.26.0",
-    "css-loader": "^3.5.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-vue": "^7.17.0",
     "jest": "^26.6.3",
-    "node-sass": "^4.13.1",
-    "postcss-loader": "^3.0.0",
-    "regenerator-runtime": "^0.13.7",
-    "sass-loader": "^8.0.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.11"
+    "sass-embedded": "^1.49.9",
+    "regenerator-runtime": "^0.13.7"
   },
   "scripts": {
     "test": "jest",

package/src/AuthApi.js

@@ -1,4 +1,4 @@
-import {API_ROOT} from "./CrudApi";
+import {getApiRoot} from "./CrudApi";
 import {FetchBuilder, initCsrfCookie} from "./api";
 import UserPermissions from "./UserPermissions";
 
@@ -19,16 +19,16 @@ export default class AuthApi {
                 password,
                 '2fa_code': code
             })
-            .fetch(API_ROOT + 'auth/login');
+            .fetch(getApiRoot() + 'auth/login');
     }
 
     async getLoginPreferences() {
-        return await this.request('get').fetch(API_ROOT + 'auth/preferences');
+        return await this.request('get').fetch(getApiRoot() + 'auth/preferences');
     }
 
     async setupTwoFactorAuth() {
         return await this.request('post')
-            .fetch(API_ROOT + 'auth/two-factor-setup');
+            .fetch(getApiRoot() + 'auth/two-factor-setup');
     }
 
     async confirmTwoFactorAuth(code) {
@@ -36,7 +36,7 @@ export default class AuthApi {
             .withJson({
                 '2fa_code': code
             })
-            .fetch(API_ROOT + 'auth/two-factor-confirm');
+            .fetch(getApiRoot() + 'auth/two-factor-confirm');
     }
 
     async sendReminderEmail(email) {
@@ -44,23 +44,23 @@ export default class AuthApi {
             .withJson({
                 'email': email
             })
-            .fetch(API_ROOT + 'auth/send-reminder-email');
+            .fetch(getApiRoot() + 'auth/send-reminder-email');
     }
 
     async sendEmailVerification() {
         return await this.request('post')
-            .fetch(API_ROOT + 'auth/verify-email');
+            .fetch(getApiRoot() + 'auth/verify-email');
     }
 
     async resetPassword(params) {
         return await this.request('post')
             .withJson(params)
-            .fetch(API_ROOT + 'auth/reset-password');
+            .fetch(getApiRoot() + 'auth/reset-password');
     }
 
     async logout() {
         let response = await this.request('post')
-            .fetch(API_ROOT + 'auth/logout');
+            .fetch(getApiRoot() + 'auth/logout');
         this.$buefy.notification.open({
             message: 'You have been logged out',
             type: 'is-info',
@@ -80,17 +80,17 @@ export default class AuthApi {
         console.log(params);
         return this.request('post')
             .withJson(params)
-            .fetch(API_ROOT + 'auth/change-password');
+            .fetch(getApiRoot() + 'auth/change-password');
     }
 
     async listUserSessions() {
         return this.request('get')
-            .fetch(API_ROOT + 'auth/sessions')
+            .fetch(getApiRoot() + 'auth/sessions')
     }
 
     async deleteUserSession(id) {
         return this.request('delete')
-            .fetch(API_ROOT + 'auth/sessions/' + id)
+            .fetch(getApiRoot() + 'auth/sessions/' + id)
     }
 }
 

package/src/CrudApi.js

@@ -1,9 +1,13 @@
-import {FetchBuilder} from './api.js';
+import {FetchBuilder, getApiHost} from './api.js';
 import {morphToNotification} from "./api";
 
-const API_ROOT = '/oxygen/api/';
+const API_ROOT = 'oxygen/api/';
 
-class CrudApi {
+export const getApiRoot = () => {
+    return getApiHost() + API_ROOT;
+}
+
+export class CrudApi {
 
     constructor($buefy) {
         this.$buefy = $buefy;
@@ -18,7 +22,7 @@ class CrudApi {
     }
 
     static getResourceRoot() {
-        return API_ROOT + this.getResourceName();
+        return getApiRoot() + this.getResourceName();
     }
 
     static prepareModelForAPI(data) {
@@ -107,6 +111,4 @@ class CrudApi {
         return this.request('post')
             .fetch(this.constructor.getResourceRoot() + '/' + id + '/make-head');
     }
-}
-
-export { CrudApi, API_ROOT };
+}

package/src/PreferencesApi.js

@@ -1,4 +1,4 @@
-import {API_ROOT} from "./CrudApi";
+import {getApiRoot} from "./CrudApi";
 import {FetchBuilder} from "./api";
 
 export const canAccessPrefs = ($buefy, userPermissions, keys) => {
@@ -26,7 +26,7 @@ export default class PreferencesApi {
 
     async getValue(key) {
         return await this.request('get')
-            .fetch(API_ROOT + 'preferences/' + key);
+            .fetch(getApiRoot() + 'preferences/' + key);
     }
 
     async checkValid(key, value) {
@@ -34,7 +34,7 @@ export default class PreferencesApi {
             .withJson({
                 value: value
             })
-            .fetch(API_ROOT + 'preferences/' + key + '/validate');
+            .fetch(getApiRoot() + 'preferences/' + key + '/validate');
     }
 
     async setValue(key, value) {
@@ -42,6 +42,6 @@ export default class PreferencesApi {
             .withJson({
                 value: value
             })
-            .fetch(API_ROOT + 'preferences/' + key);
+            .fetch(getApiRoot() + 'preferences/' + key);
     }
 }

package/src/UserPermissions.js

@@ -23,10 +23,11 @@ export default class UserPermissions {
         let keyParts = key.split('.');
 
         if(keyParts.length !== 2) {
-            throw new Error('TreePermissionsSystem Requires a Dot-Seperated Permissions Key');
+            throw new Error('TreePermissionsSystem Requires a Dot-Seperated Permissions Key: ' + key);
         }
 
         // check for the specific key
+        // console.log(key + " = " + result);
         return this.hasKey(keyParts[0], keyParts[1]);
     }
 

package/src/UserPreferences.test.js

@@ -4,17 +4,11 @@ jest.mock('./AuthApi');
 
 test('gets and sets preferences', async () => {
     UserPreferences.setBuefy({});
-    UserPreferences.authApi.userDetails.mockResolvedValue({
-        user: {
-            preferences: {
-                foo: 'bar',
-                baz: { qux: 'fub '}
-            }
-        }
+    let prefs = new UserPreferences({
+        foo: 'bar',
+        baz: { qux: 'fub '}
     });
 
-    let prefs = await UserPreferences.load();
-
     expect(prefs.get('foo')).toBe('bar');
     expect(prefs.has('fob')).toBe(false);
     expect(prefs.has('baz.qux')).toBe(true);

package/src/UsersApi.js

@@ -1,4 +1,4 @@
-import {API_ROOT, CrudApi} from './CrudApi';
+import {getApiRoot, CrudApi} from './CrudApi';
 
 export default class UsersApi extends CrudApi {
 
@@ -20,12 +20,12 @@ export default class UsersApi extends CrudApi {
             .withJson({
                 fullName: name
             })
-            .fetch(API_ROOT + 'users/' + id + '/fullName');
+            .fetch(getApiRoot() + 'users/' + id + '/fullName');
     }
 
     async impersonate(id) {
         return await this.request('post')
-            .fetch(API_ROOT + 'users/' + id + '/impersonate');
+            .fetch(getApiRoot() + 'users/' + id + '/impersonate');
     }
 
     async forceDelete(id) {
@@ -35,7 +35,7 @@ export default class UsersApi extends CrudApi {
 
     async stopImpersonating() {
         return await this.request('post')
-            .fetch(API_ROOT + 'users/stop-impersonating');
+            .fetch(getApiRoot() + 'users/stop-impersonating');
     }
 
 }

package/src/api.js

@@ -1,8 +1,20 @@
+import {getApiRoot} from "./CrudApi";
+
+export const getApiHost = () => {
+    if (parseInt(window.location.port) >= 3000) {
+        // for local development, Laravel should be running on port 80,
+        // whereas the frontend (`npm run dev`) is running on a higher port
+        return "http://localhost/";
+    } else {
+        return '/';
+    }
+}
+
 var xsrfToken = null;
 
 export const initCsrfCookie = async () => {
     await window.fetch(
-        '/sanctum/csrf-cookie',
+        getApiRoot() + 'csrf-cookie',
         {
             credentials: 'same-origin'
         });
@@ -46,7 +58,7 @@ export class FetchBuilder {
     }
 
     cookies() {
-        this.credentials = 'same-origin';
+        this.credentials = getApiHost() === '/' ? 'same-origin' : 'include';
         return this;
     }
 
@@ -90,7 +102,7 @@ export class FetchBuilder {
                     queue: false
                 });
                 return {};
-            } else if(response.status === 204) {
+            } else if(response.status === 204 || response.status === 404) {
                 // no content, we're okay
             } else {
                 console.error('Response did not contain valid JSON: ', e);
@@ -158,6 +170,8 @@ const handleAPIError = function(content, $buefy, $router, response) {
     } else if(response.status === 403 && content.code === 'email_unverified') {
         $router.push({ path: '/auth/needs-verified-email', query: {redirect: $router.currentRoute.fullPath } });
         return;
+    } else if(response.status === 404) {
+        $router.push({ name: 'error404' });
     } else if(response.status === 429) {
         $buefy.notification.open({
             message: 'Too many requests within a short timeframe. Please wait.',

package/src/components/App.vue

@@ -1,22 +1,23 @@
 <template>
     <div style="height: 100%;">
-<!--        <transition name="slide-left" mode="out-in">-->
             <router-view @logout="signOut">
                 <template #main-navigation>
-                    <slot name="app-navigation"></slot>
+                    <MainMenu :items="mainMenuItems" />
                 </template>
             </router-view>
-<!--        </transition>-->
     </div>
 </template>
 
 <script>
     import AuthApi from "../AuthApi";
+    import MainMenu from "./MainMenu.vue";
     export default {
         name: "App",
+        components: {MainMenu},
         props: {
             appTitle: { type: String, required: true },
             defaultRouteTitle: { type: String, required: true },
+            mainMenuItems: { type: Object, required: true },
             impersonating: {
                 type: Boolean,
                 default: false

package/src/components/AuthenticationLog.vue

@@ -84,8 +84,9 @@
 <script>
 import {FetchBuilder} from "../api";
 import Internationalize from "../Internationalize";
-import UAParser from 'ua-parser-js';
+import { UAParser } from 'ua-parser-js';
 import AuthApi from "../AuthApi";
+import {getApiRoot} from "../CrudApi";
 
 const IP_INFO_LOADING = 'loading';
 
@@ -121,7 +122,7 @@ export default {
           let data = await FetchBuilder
               .default(this.$buefy, 'post')
               .withQueryParams({ page: this.paginatedItems.currentPage })
-              .fetch('/oxygen/api/auth/login-log-entries');
+              .fetch(getApiRoot() + 'auth/login-log-entries');
 
           this.paginatedItems.items = data.items.map((item) => { return { geolocationInfo: this.ipInfo.get(item.ipAddress), ...item } });
           this.paginatedItems.totalItems = data.totalItems;
@@ -143,7 +144,7 @@ export default {
             }
             this.ipInfo.set(ip, IP_INFO_LOADING);
             FetchBuilder.default(this.$buefy, 'post')
-                .fetch('/oxygen/api/auth/ip-location/' + ip, (data) => data)
+                .fetch(getApiRoot() + 'auth/ip-location/' + ip, (data) => data)
                 .then((data) => {
                     this.ipInfo.set(ip, data);
                     this.updateInfoForIp(ip);

package/src/components/CodeEditor.vue

@@ -31,9 +31,16 @@
 
 <script>
 
+import AceEditor from 'vue2-ace-editor';
+import 'brace/ext/language_tools'; //language extension prerequsite...
+import 'brace/mode/html';
+import 'brace/mode/twig';
+import 'brace/theme/tomorrow_night_eighties';
+import 'brace/theme/tomorrow_night';
+
 export default {
     name: "CodeEditor",
-    components: { AceEditor: require('vue2-ace-editor') },
+    components: { AceEditor },
     props: {
         value: { type: String, default: null },
         height: { type: String, required: true },
@@ -65,11 +72,6 @@ export default {
     },
     methods: {
         editorInit() {
-            require('brace/ext/language_tools') //language extension prerequsite...
-            require(`brace/mode/${this.lang}`);
-            require(`brace/theme/${this.theme}`);
-            require(`brace/snippets/${this.lang}`);
-
             // ignore first missing DOCTYPE warning
             let session = this.$refs.ace.editor.getSession();
             session.on("changeAnnotation", () => {

package/src/components/ImportExport.vue

@@ -14,7 +14,7 @@
 
 <script>
 import {FetchBuilder} from "../api";
-import {API_ROOT} from "../CrudApi";
+import {getApiRoot} from "../CrudApi";
 import download from "downloadjs";
 
 export default {
@@ -29,7 +29,7 @@ export default {
             this.exporting = true;
             let response = await (new FetchBuilder(this.$buefy, 'post'))
                 .cookies()
-                .fetchRaw(API_ROOT + "import-export/export");
+                .fetchRaw(getApiRoot() + "import-export/export");
             this.$buefy.notification.open({ message: 'Export successful', type: 'is-success', queue: false });
             let blob = await response.blob();
             download(blob, 'database ' + (new Date()).toLocaleString() + '.zip');

package/src/components/LegacyPage.vue

@@ -11,7 +11,7 @@
 <script>
 import MediaInsertModal from "./media/MediaInsertModal.vue";
 
-import { morphToNotification } from "../api";
+import {getApiHost, morphToNotification} from "../api";
 import MediaApi from "../MediaApi";
 
 // from https://gist.github.com/hdodov/a87c097216718655ead6cf2969b0dcfa
@@ -134,7 +134,7 @@ export default {
             }
         },
         vuePathToURL(path) {
-            return this.legacyPrefix + path;
+            return getApiHost() + this.legacyPrefix.replace(/^\//, '') + path;
         },
         // We detect when the iframe url changes, and update our window accordingly...
         onNavigated(newURL) {
@@ -162,7 +162,7 @@ export default {
 
             if(path !== this.currentPath) {
                 let { loadInside, location } = this.fullURLToVuePath(path);
-                console.log('[LegacyPage] ', loadInside, location);
+                console.log('[LegacyPage] ', 'loadInside:', loadInside, 'location:', location);
                 if(loadInside === 'iframe') {
                     window.history.pushState({}, "", location);
                 } else if(loadInside === 'vue') {
@@ -182,9 +182,9 @@ export default {
         },
         loadPath(routePath) {
             let path = this.vuePathToURL(routePath);
-            if(path === '/oxygen/view/auth/login') {
+            if(path.endsWith('/oxygen/view/auth/login')) {
                 console.log('[LegacyPage] Need to login again, redirecting...');
-                window.location.replace('/oxygen/view/auth/login');
+                window.location.replace('/oxygen/auth/login');
             }
 
             console.log('[LegacyPage] Loading', path);

package/src/components/MainMenu.vue

@@ -0,0 +1,102 @@
+<template>
+    <div v-if="userPermissions">
+        <b-menu-list>
+            <b-menu-item icon="home" tag="router-link" to="/dashboard" label="Dashboard"></b-menu-item>
+        </b-menu-list>
+
+        <b-menu-list v-for="(category, label) in categoriesWithPermission(items)"
+                     :key="label"
+                     :label="label">
+            <b-menu-item v-for="(group, groupLabel) in groupsWithPermission(category)"
+                         :key="groupLabel"
+                         :icon="group.icon"
+                         :tag="userPermissions.has(group.listPermission) ? 'router-link' : null"
+                         :expanded="group.groupPrefix ? $route.fullPath.startsWith(group.groupPrefix) : null"
+                         :to="group.listAction">
+                <template #label>
+                    {{ groupLabel }}
+                    <b-button v-if="userPermissions.has(group.addPermission)"
+                              tag="router-link"
+                              type="is-text"
+                              class="is-pulled-right show-if-active"
+                              :icon-right="group.addIcon"
+                              :to="group.addAction"></b-button>
+                </template>
+                <b-menu-item v-for="(item, itemLabel) in itemsWithPermission(group.items)" :key="itemLabel" :label="itemLabel" tag="router-link" :to="item.to"></b-menu-item>
+            </b-menu-item>
+        </b-menu-list>
+
+        <b-menu-list v-if="userPermissions && userPermissions.hasOneOf(['preferences.getValue', 'users.getList', 'groups.getList', 'importExport.getList'])" label="System">
+            <b-menu-item v-if="userPermissions && userPermissions.has('preferences.getValue')" icon="cogs" tag="router-link" to="/preferences" label="Preferences"></b-menu-item>
+            <b-menu-item v-if="userPermissions && userPermissions.has('users.getList')" icon="users" tag="router-link" to="/users" label="Users and Permissions"></b-menu-item>
+        </b-menu-list>
+    </div>
+
+</template>
+
+<script>
+export default {
+    name: "MainMenu",
+    props: {
+        items: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        userPermissions() { return this.$store.getters.userPermissions; }
+    },
+    methods: {
+        categoriesWithPermission(categories) {
+            return Object.fromEntries(Object.entries(categories).filter(([,category]) => this.userPermissions.hasOneOf(Object.values(category).flatMap((group) => this.getPermissionsForGroup(group))) ));
+        },
+        getPermissionsForGroup(group) {
+            let values = Object.values(group.items).map(s => s.permission);
+            if(group.addPermission) { values.push(group.addPermission); }
+            if(group.listPermission) { values.push(group.listPermission); }
+            return values;
+        },
+        itemsWithPermission(items) {
+            return Object.fromEntries(Object.entries(items).filter(([, item]) => this.userPermissions.has(item.permission)));
+        },
+        groupsWithPermission(groups) {
+            return Object.fromEntries(Object.entries(groups)
+                .filter(([, group]) => this.userPermissions.hasOneOf(this.getPermissionsForGroup(group)))
+                .sort(([,groupA], [,groupB]) => (groupB.order ?? 0) - (groupA.order ?? 0))
+            );
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .show-if-active {
+        visibility: hidden;
+        opacity: 0;
+        padding: 0;
+        transition: visibility 0.2s ease, opacity 0.2s ease;
+        height: auto;
+
+        .router-link-active & {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .menu-list li:hover & {
+            visibility: visible;
+            opacity: 1;
+        }
+    }
+
+    .left-navigation-container.is-collapsed .show-if-active {
+        visibility: hidden !important;
+        opacity: 0 !important;
+    }
+</style>
+
+<style>
+.show-if-active .icon:first-child:last-child {
+    margin-left: 0;
+    margin-right: 0;
+}
+</style>

package/src/components/auth/WelcomeFloat.vue

@@ -49,35 +49,35 @@ export default {
     }
 
     .login-theme-autumn {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/autumn-min.jpg');
+        background-image: url('../../../assets/bg/autumn-min.jpg');
     }
 
     .login-theme-city {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/city-min.jpg');
+        background-image: url('../../../assets/bg/city-min.jpg');
     }
 
     .login-theme-clouds {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/clouds-min.jpg');
+        background-image: url('../../../assets/bg/clouds-min.jpg');
     }
 
     .login-theme-coast {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/coast-min.jpg');
+        background-image: url('../../../assets/bg/coast-min.jpg');
     }
 
     .login-theme-speckles {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/speckles-min.jpg');
+        background-image: url('../../../assets/bg/speckles-min.jpg');
     }
 
     .login-theme-trees {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/trees-min.jpg');
+        background-image: url('../../../assets/bg/trees-min.jpg');
     }
 
     .login-theme-waves {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/waves.jpg');
+        background-image: url('../../../assets/bg/waves.jpg');
     }
 
     .login-theme-yosemite {
-        background-image: url('/vendor/oxygen/ui-theme/img/bg/yosemite-falls-min.jpg');
+        background-image: url('../../../assets/bg/yosemite-falls-min.jpg');
     }
 
     .login-theme-white {

package/src/components/dashboard/EventsPanel.vue

@@ -0,0 +1,20 @@
+<template>
+    <article>
+        <p class="title">Events<b-icon icon="calendar-alt" size="is-medium"></b-icon></p>
+        <p class="subtitle">Promotion for upcoming concerts and events</p>
+        <div class="buttons">
+            <b-button tag="router-link" to="/upcoming-events" icon-left="list">Manage Events</b-button>
+            <b-button tag="router-link" to="/upcoming-events/create" icon-left="plus" type="is-success">Create New Event</b-button>
+        </div>
+    </article>
+</template>
+
+<script>
+export default {
+    name: "EventsPanel"
+}
+</script>
+
+<style scoped lang="scss">
+    @import './panel.scss';
+</style>

package/src/components/dashboard/MainDashboard.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="full-height scroll-container">
+        <div class="has-background-white-ter">
+            <div class="container hero is-medium">
+                <div class="hero-body">
+                    <h1 class="title" style="font-size: 3rem;">
+                        <transition name="fade">
+                            <span v-if="user">Welcome, {{ user.fullName }}</span>
+                        </transition>
+                    </h1>
+                    <br>
+                    <h2 class="subtitle">The Oxygen CMS administration panel allows you to edit the site content, manage events and more.</h2>
+                </div>
+            </div>
+        </div>
+
+        <div class="has-background-white">
+            <div class="container hero">
+                <div class="hero-body">
+                    <section class="tile is-ancestor">
+                        <div class="tile is-parent">
+                            <div class="tile is-child heading-box">
+                                <h2 class="title">Manage site</h2>
+                            </div>
+                        </div>
+                    </section>
+
+                    <div class="grid-loading">
+                        <b-loading :active="!userPermissions" :is-full-page="false"></b-loading>
+                        <transition name="fade">
+                            <section v-if="userPermissions" class="tile is-ancestor">
+                                <div v-for="(group, i) in panels"  :key="i" class="tile is-vertical">
+                                    <div v-if="userPermissions && userPermissions.hasOneOf(group.map(panel => panel.permission))" class="tile is-parent is-vertical">
+                                        <div v-for="panel in group" :key="panel.name" class="tile is-child notification">
+                                            <component :is="panel.component"></component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                        </transition>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <component :is="item" v-for="(item, i) in extraRows" :key="i"></component>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "MainDashboard",
+        props: {
+            panels: {
+                type: Array,
+                required: true
+            },
+            extraRows: {
+                type: Array,
+                default: () => { return []; }
+            }
+        },
+        data() {
+            return {
+            }
+        },
+        computed: {
+            userPermissions() { return this.$store.getters.userPermissions; },
+            user() { return this.$store.state.user; }
+        },
+    }
+</script>
+
+<style scoped>
+    .title .icon {
+        margin-left: 1rem;
+    }
+
+    .grid-loading {
+        position: relative;
+        min-height: 30rem;
+    }
+
+    .notification {
+        text-align: center;
+    }
+</style>

package/src/components/dashboard/MediaPanel.vue

@@ -0,0 +1,21 @@
+<template>
+    <article>
+        <p class="title">Photos &amp; Files <b-icon icon="photo-video" size="is-medium"></b-icon></p>
+        <p class="subtitle">Photos, videos, audio, PDFs.</p>
+        <div class="buttons">
+            <b-button tag="router-link" to="/media/list" icon-left="list">Manage Photos & Files</b-button>
+            <b-button tag="router-link" type="is-success" to="/media/list?upload=true" icon-left="upload">Upload</b-button>
+            <b-button tag="router-link" to="/media/responsive-images" type="is-light" icon-left="mail-bulk">Generate Responsive Images</b-button>
+        </div>
+    </article>
+</template>
+
+<script>
+export default {
+    name: "MediaPanel"
+}
+</script>
+
+<style scoped lang="scss">
+    @import './panel.scss';
+</style>

package/src/components/dashboard/PagesPartialsPanel.vue

@@ -0,0 +1,24 @@
+<template>
+    <article>
+        <p class="title">Pages<b-icon icon="file-alt" size="is-medium"></b-icon></p>
+        <p class="subtitle">Manage the content of the website</p>
+        <div class="buttons">
+            <b-button tag="router-link" to="/pages" icon-left="list">Manage Pages</b-button>
+            <b-button tag="router-link" to="/partials" icon-left="puzzle-piece">Manage Partials</b-button>
+        </div>
+        <b-button tag="a" href="/" icon-left="eye" type="is-primary" rounded>View Live Site</b-button>
+    </article>
+</template>
+
+<script>
+export default {
+    name: "PagesPartialsPanel",
+    computed: {
+        userPermissions() { return this.$store.getters.userPermissions; },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import './panel.scss';
+</style>

package/src/components/dashboard/panel.scss

@@ -0,0 +1,8 @@
+.buttons {
+    justify-content: center;
+}
+
+.title .icon {
+    display: inline-block;
+    margin-left: 1rem;
+}

package/src/components/media/MediaList.vue

@@ -230,7 +230,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    @import '../../styles/variables';
+    @import '../../styles/variables.scss';
     @import '../util.css';
 
     .box {

package/src/components/media/MediaResponsiveImages.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import {API_ROOT} from "../../CrudApi";
+import {getApiRoot} from "../../CrudApi";
 import {FetchBuilder, morphToNotification} from "../../api";
 
 export default {
@@ -35,7 +35,7 @@ export default {
             this.requestInFlight = true;
             this.hasServerLog = false;
             this.serverLog = '[generating...]';
-            let result = await (FetchBuilder.default(this.$buefy, 'post')).fetch(API_ROOT + 'media/make-responsive');
+            let result = await (FetchBuilder.default(this.$buefy, 'post')).fetch(getApiRoot() + 'media/make-responsive');
             this.$buefy.toast.open(morphToNotification(result));
             this.requestInFlight = false;
             this.serverLog = result.log;

package/src/components/media/media.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables';
+@import '../../styles/variables.scss';
 
 .card-image {
   min-height: 6rem;

package/src/components/preferences/Preferences.vue

@@ -0,0 +1,82 @@
+<template>
+    <PreferencesList>
+        <template #default="slotProps">
+            <b-tab-item v-if="slotProps.canAccessPrefs(['appearance.themes', 'appearance.pages', 'appearance.events'].concat(getExtraPrefsPermissions('appearance')))" label="Website Theme">
+                <PreferencesThemeChooser @theme-changed="onThemeChanged" />
+                <PreferencesPageTemplates :current-theme="currentTheme" />
+                <PreferencesEventTemplates :current-theme="currentTheme" />
+                <PreferencesSiteAppearance :current-theme="currentTheme" />
+                <component :is="pref.component" v-for="pref in getExtraPrefs('appearance')" :key="pref.key" :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="slotProps.canAccessPrefs(getExtraPrefsPermissions('external'))" label="External Integrations">
+                <component :is="pref.component" v-for="pref in getExtraPrefs('external')" :key="pref.key" :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="slotProps.canAccessPrefs(['modules.auth'])" label="Authentication & Security">
+                <PreferencesAuthentication :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="slotProps.canAccessPrefs(['appearance.auth'])" label="Admin Look & Feel">
+                <PreferencesAdminAppearance :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="userPermissions.has('importExport.getExport')" label="Website Data">
+                <ImportExport />
+            </b-tab-item>
+        </template>
+    </PreferencesList>
+</template>
+
+<script>
+
+import PreferencesList from './PreferencesList.vue';
+import PreferencesPageTemplates from './PreferencesPageTemplates.vue';
+import PreferencesEventTemplates from './PreferencesEventTemplates.vue';
+import PreferencesThemeChooser from './PreferencesThemeChooser.vue';
+import PreferencesAuthentication from './PreferencesAuthentication.vue';
+import PreferencesAdminAppearance from './PreferencesAdminAppearance.vue';
+import PreferencesSiteAppearance from './PreferencesSiteAppearance.vue';
+import ImportExport from '../ImportExport.vue';
+
+export default {
+    name: "Preferences",
+    components: {
+        PreferencesList,
+        PreferencesPageTemplates,
+        PreferencesEventTemplates,
+        PreferencesThemeChooser,
+        PreferencesAuthentication,
+        PreferencesAdminAppearance,
+        PreferencesSiteAppearance,
+        ImportExport
+    },
+    props: {
+        extraPrefs: {
+            type: Object,
+            default: () => { return {}; }
+        }
+    },
+    data() {
+        return {
+            currentTheme: null,
+        }
+    },
+    computed: {
+        userPermissions() {
+            return this.$store.getters.userPermissions;
+        }
+    },
+    methods: {
+        onThemeChanged(currentTheme) {
+            this.currentTheme = currentTheme;
+        },
+        getExtraPrefsPermissions(category) {
+            return (this.extraPrefs[category] ?? []).map(pref => pref.key);
+        },
+        getExtraPrefs(category) {
+            return (this.extraPrefs[category] ?? []);
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/icons.js

@@ -73,7 +73,8 @@ import {
     faLandmark,
     faFolderOpen,
     faImages,
-    faMinusCircle
+    faMinusCircle,
+    faCalendarPlus, faPaperPlane
 } from "@fortawesome/free-solid-svg-icons";
 
 export const addIconsToLibrary = () => {
@@ -86,5 +87,5 @@ export const addIconsToLibrary = () => {
         faFileExcel, faFileCsv, faChevronCircleDown, faChevronCircleUp, faTrash,
         faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faUser, faFolder, faHome, faFilePdf, faSignOutAlt, faTag,
         faFolderPlus, faTimes, faQuestionCircle, faFileUpload, faLandmark,
-        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages);
+        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages, faCalendarPlus, faPaperPlane);
 };

package/src/main.js

@@ -12,6 +12,7 @@ import { AuthRoutes, makeAuthenticatedRoute } from "./routes";
 import createStore from "./store/index";
 import { checkAuthenticated } from "./AuthApi";
 import Error404 from "./components/Error404.vue";
+import MainMenu from "./components/MainMenu.vue";
 
 /**
  * Creates the Vue.js Oxygen application, allowing for a few points of customization (i.e.: adding modules)
@@ -26,7 +27,7 @@ export default class OxygenUI {
         this.Vue = Vue;
         this.authenticatedRoutes = []
         this.unauthenticatedRoutes = []
-        this.rootComponents = { App }
+        this.mainMenuItems = {}
         this.beforeMountHooks = []
     }
 
@@ -40,6 +41,17 @@ export default class OxygenUI {
         this.authenticatedRoutes.push(route);
     }
 
+    addMainMenuGroup(category, group) {
+        if(!this.mainMenuItems[category]) {
+            this.mainMenuItems[category] = {};
+        }
+        if(!group.items) {
+            group.items = {};
+        }
+        this.mainMenuItems[category][group.name] = group;
+        return group;
+    }
+
     addUnauthenticatedRoutes(routes) {
         for (let route of routes) {
             this.unauthenticatedRoutes.push(route);
@@ -74,12 +86,18 @@ export default class OxygenUI {
                 makeAuthenticatedRoute(this.authenticatedRoutes)
             ])
             .concat(this.unauthenticatedRoutes)
-            .concat([{
-                path: '*',
-                name: 'error404',
-                component: Error404,
-                meta: {title: 'Not found'}
-            }]);
+            .concat([
+                {
+                    path: '/not-found',
+                    name: 'error404',
+                    component: Error404,
+                    meta: {title: 'Not found'}
+                },
+                {
+                    path: '/*',
+                    redirect: { name: 'error404' }
+                }
+            ]);
 
         const router = new Router({
             routes: routes,
@@ -91,7 +109,13 @@ export default class OxygenUI {
 
         this.app = new this.Vue({
             router: router,
-            components: this.rootComponents,
+            render: (h) => h(App, {
+                props: {
+                    appTitle: document.title,
+                    defaultRouteTitle: 'Administration Panel',
+                    mainMenuItems: this.mainMenuItems
+                }
+            }),
             store
         });
 
@@ -109,3 +133,5 @@ export default class OxygenUI {
     }
 }
 
+export const WEB_CONTENT = 'Web Content';
+

package/src/modules/LegacyPages.js

@@ -1,6 +1,40 @@
 import LegacyPage from "../components/LegacyPage.vue";
+import { WEB_CONTENT } from "../main.js";
 
 export default function(ui) {
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Pages',
+        icon: 'file-alt',
+        listAction: '/pages',
+        listPermission: 'pages.getList',
+        addIcon: 'plus',
+        addPermission: 'pages.postCreate',
+        addAction: '/pages/create',
+        items: {
+        }
+    });
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Partials',
+        icon: 'puzzle-piece',
+        listAction: '/partials',
+        listPermission: 'partials.getList',
+        addIcon: 'plus',
+        addPermission: 'partials.postCreate',
+        addAction: '/partials/create',
+        items: {
+        }
+    });
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Events',
+        icon: 'calendar-alt',
+        listAction: '/upcoming-events',
+        listPermission: 'upcomingEvents.getList',
+        addIcon: 'calendar-plus',
+        addPermission: 'upcomingEvents.postCreate',
+        addAction: '/upcoming-events/create',
+        items: {
+        }
+    });
     ui.addAuthenticatedRoutes([
         {
             // will match everything, try to render a legacy Oxygen page...

package/src/modules/Media.js

@@ -1,7 +1,22 @@
 import MediaPage from "../components/media/MediaPage.vue";
 import MediaResponsiveImages from "../components/media/MediaResponsiveImages.vue";
+import {WEB_CONTENT} from "../main";
 
 export default function(ui) {
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Photos & Files',
+        icon: 'photo-video',
+        groupPrefix: '/media',
+        addAction: '/media/list/?upload=true',
+        addIcon: 'upload',
+        addPermission: 'media.postCreate',
+        listAction: '/media/list',
+        listPermission: 'media.getList',
+        items: {
+            'Deleted Photos & Files': { to: '/media/trash', permission: 'media.getList' },
+            'Responsive Images': { to: '/media/responsive-images', permission: 'media.postMakeResponsive' }
+        }
+    });
     ui.addAuthenticatedRoutes([
         {
             path: 'media/list/:currentPath(.*)?',

package/src/styles/_variables.scss

@@ -1,23 +1,8 @@
 // Set your colors
 $primary: #0053b1;
-//$twitter: #4099FF;
 
-@import "~bulma/sass/utilities/_all";
+@import "~bulma/sass/utilities/_all.sass";
 
 $menu-item-color: darken($grey, 5%);
 $menu-item-active-background-color: transparent;
 $menu-item-active-color: lighten($grey, 4%);
-
-// $menu-item-hover-background-color: rgba(255, 255, 255, 0.1);
-// $menu-item-hover-color: $white-bis;
-
-//$navbar-item-active-color: #fff;
-//$navbar-item-hover-background-color: #f3f3f9;
-//
-//// Links
-//$link: $primary;
-//$link-focus-border: $primary;
-
-// Import Bulma's core
-// TODO: wtf is going on here??
-@import "~bulma/sass/utilities/_all";

package/src/styles/app.scss

@@ -1,11 +1,11 @@
 @import "_variables.scss";
 
 // Import Bulma and Buefy styles
-@import "~bulma";
+@import "~bulma/bulma.sass";
 @import "~buefy/src/scss/buefy";
 
 .navbar {
-  box-shadow: 0px 0px 2px $dark;
+  box-shadow: 0 0 2px $dark;
 }
 
 .navbar-item {