@oxygen-cms/ui 1.6.0 → 1.6.3

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.6.0",
+  "version": "1.6.3",
   "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",
     "sass-embedded": "^1.49.9",
-    "postcss-loader": "^3.0.0",
-    "regenerator-runtime": "^0.13.7",
-    "sass-loader": "^8.0.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.11"
+    "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/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,49 @@
 
 <script>
 
+import AceEditor from 'vue2-ace-editor';
+// language extension pre-requisite...
+import 'brace/ext/language_tools';
+import 'brace/mode/html';
+import 'brace/mode/twig';
+import 'brace/snippets/html';
+import 'brace/snippets/twig';
+import 'brace/theme/tomorrow_night_eighties';
+import 'brace/theme/tomorrow_night';
+import 'brace/theme/ambiance';
+import 'brace/theme/chaos';
+import 'brace/theme/clouds_midnight';
+import 'brace/theme/cobalt';
+import 'brace/theme/idle_fingers';
+import 'brace/theme/merbivore';
+import 'brace/theme/merbivore_soft';
+import 'brace/theme/mono_industrial';
+import 'brace/theme/monokai';
+import 'brace/theme/pastel_on_dark';
+import 'brace/theme/solarized_dark';
+import 'brace/theme/terminal';
+import 'brace/theme/tomorrow_night';
+import 'brace/theme/tomorrow_night_blue';
+import 'brace/theme/tomorrow_night_bright';
+import 'brace/theme/tomorrow_night_eighties';
+import 'brace/theme/twilight';
+import 'brace/theme/vibrant_ink';
+import 'brace/theme/chrome';
+import 'brace/theme/clouds';
+import 'brace/theme/crimson_editor';
+import 'brace/theme/dawn';
+import 'brace/theme/dreamweaver';
+import 'brace/theme/eclipse';
+import 'brace/theme/github';
+import 'brace/theme/kr_theme';
+import 'brace/theme/solarized_light';
+import 'brace/theme/textmate';
+import 'brace/theme/tomorrow';
+import 'brace/theme/xcode';
+
 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 +105,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

@@ -60,7 +60,10 @@ export default {
             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))));
+            return Object.fromEntries(Object.entries(groups)
+                .filter(([, group]) => this.userPermissions.hasOneOf(this.getPermissionsForGroup(group)))
+                .sort(([,groupA], [,groupB]) => (groupB.order ?? 0) - (groupA.order ?? 0))
+            );
         }
     }
 }

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/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

@@ -4,7 +4,7 @@
             <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>

package/src/components/preferences/PreferencesList.vue

@@ -46,5 +46,5 @@ export default {
 </script>
 
 <style scoped>
-
+    @import '../util.css';
 </style>

package/src/components/preferences/PreferencesThemeChooser.vue

@@ -4,6 +4,7 @@
         <PreferencesField data-key="appearance.themes::theme" label="">
             <template #default="slotProps">
                 <b-table
+                    v-if="Object.values(slotProps.options).length > 0"
                     :data="Object.values(slotProps.options)"
                     :striped="false">
                     <b-table-column v-slot="props" label="Key">
@@ -26,6 +27,7 @@
                         <b-button v-else type="is-success" disabled>Theme is already active</b-button>
                     </b-table-column>
                 </b-table>
+                <p v-else class="has-text-centered"><em>No themes loaded.</em></p>
             </template>
         </PreferencesField>
     </ShowIfPermitted>

package/src/main.js

@@ -12,7 +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";
+import Preferences from "./components/preferences/Preferences.vue";
 
 /**
  * Creates the Vue.js Oxygen application, allowing for a few points of customization (i.e.: adding modules)
@@ -28,8 +28,11 @@ export default class OxygenUI {
         this.authenticatedRoutes = []
         this.unauthenticatedRoutes = []
         this.mainMenuItems = {}
-        this.rootComponents = { App, MainMenu }
         this.beforeMountHooks = []
+        this.extraPrefs = {
+            'appearance': [],
+            'external': []
+        }
     }
 
     addAuthenticatedRoutes(routes) {
@@ -82,17 +85,32 @@ export default class OxygenUI {
 
         const store = createStore(this.Vue);
 
+        this.authenticatedRoutes.push({
+            path: '/preferences',
+            component: Preferences,
+            props: {
+                extraPrefs: this.extraPrefs
+            },
+            meta: { title: 'System Preferences' }
+        });
+
         const routes = AuthRoutes
             .concat([
                 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,
@@ -104,10 +122,13 @@ export default class OxygenUI {
 
         this.app = new this.Vue({
             router: router,
-            data: {
-                mainMenuItems: this.mainMenuItems
-            },
-            components: this.rootComponents,
+            render: (h) => h(App, {
+                props: {
+                    appTitle: document.title,
+                    defaultRouteTitle: 'Administration Panel',
+                    mainMenuItems: this.mainMenuItems
+                }
+            }),
             store
         });
 

package/src/modules/Events.js

@@ -0,0 +1,35 @@
+import LegacyPage from "../components/LegacyPage.vue";
+import { WEB_CONTENT } from "../main.js";
+import PreferencesEventTemplates from "../components/preferences/PreferencesEventTemplates.vue";
+
+export default function(ui) {
+    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.extraPrefs['appearance'].push({
+        key: 'appearance.events',
+        component: PreferencesEventTemplates
+    });
+    ui.addAuthenticatedRoutes([
+        {
+            // will match everything, try to render a legacy Oxygen page...
+            path: 'upcoming-events/:subpath*',
+            component: LegacyPage,
+            props: (route) => {
+                return {
+                    fullPath: route.fullPath,
+                    legacyPrefix: '/oxygen/view',
+                    adminPrefix: '/oxygen'
+                }
+            }
+        }
+    ]);
+}

package/src/modules/{LegacyPages.js → PagesPartials.js}

@@ -24,21 +24,10 @@ export default function(ui) {
         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...
-            path: '(pages|partials|upcoming-events)/:subpath*',
+            path: '(pages|partials)/:subpath*',
             component: LegacyPage,
             props: (route) => {
                 return {

package/src/styles/_variables.scss

@@ -1,22 +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,7 +1,7 @@
 @import "_variables.scss";
 
 // Import Bulma and Buefy styles
-@import "~bulma";
+@import "~bulma/bulma.sass";
 @import "~buefy/src/scss/buefy";
 
 .navbar {