@oxygen-cms/ui 1.6.2 → 1.6.5

package/.idea/workspace.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="4ad0dcde-54f6-459b-8ef0-38a17e946358" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ComposerSettings">
+    <execution />
+  </component>
+  <component name="ProjectId" id="27rS1jBVazc5EdthHlwaXfJm1hC" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "last_opened_file_path": "/home/chris/code/oxygen/Components/ui"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="4ad0dcde-54f6-459b-8ef0-38a17e946358" name="Changes" comment="" />
+      <created>1650076498224</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1650076498224</updated>
+    </task>
+    <servers />
+  </component>
+</project>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "1.6.2",
+  "version": "1.6.5",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {

package/src/AuthApi.js

@@ -2,6 +2,13 @@ import {getApiRoot} from "./CrudApi";
 import {FetchBuilder, initCsrfCookie} from "./api";
 import UserPermissions from "./UserPermissions";
 
+export const LOGIN_AGAIN_NOTIFICATION = {
+    message: 'You need to login again.',
+    type: 'is-warning',
+    duration: 5000,
+    queue: false
+};
+
 export default class AuthApi {
 
     constructor($buefy) {

package/src/EventsApi.js

@@ -13,4 +13,9 @@ export default class EventsApi extends CrudApi {
         return 'upcoming-events';
     }
 
+    async listTrybookingSessions() {
+        return this.request('get')
+            .fetch(this.constructor.getResourceRoot() + '/trybooking-sessions');
+    }
+
 }

package/src/Internationalize.js

@@ -28,4 +28,16 @@ export default class Internationalize {
         }
         return format.format(datetime);
     }
+
+    static formatDateTimeRange(from, to) {
+        let format = new Intl.DateTimeFormat(this.locale , {
+            hour: 'numeric', minute: 'numeric'
+        });
+
+        if(from.getDate() === to.getDate() && from.getMonth() === to.getMonth() && from.getYear() === to.getYear()) {
+            return this.formatDate(from) + " " + format.format(from) + " - " + format.format(to);
+        } else {
+            return this.formatDate(from) + " " + format.format(from) + " - " + this.formatDate(to) + format.format(to);
+        }
+    }
 }

package/src/api.js

@@ -1,4 +1,5 @@
 import {getApiRoot} from "./CrudApi";
+import {LOGIN_AGAIN_NOTIFICATION} from "./AuthApi";
 
 export const getApiHost = () => {
     if (parseInt(window.location.port) >= 3000) {
@@ -28,6 +29,7 @@ export const initCsrfCookie = async () => {
 }
 
 export class FetchBuilder {
+
     constructor($buefy, method) {
         this.$buefy = $buefy;
         this.method = method;
@@ -120,7 +122,7 @@ export class FetchBuilder {
             return data;
         }
 
-        handleAPIError(data, this.$buefy, FetchBuilder.router, response);
+        await handleAPIError(data, this.$buefy, FetchBuilder.router, FetchBuilder.store, response);
         let e = new Error('Received an error response from API call');
         e.response = data;
         throw e;
@@ -135,6 +137,10 @@ export class FetchBuilder {
     static setRouter(router) {
         FetchBuilder.router = router;
     }
+
+    static setStore(store) {
+        FetchBuilder.store = store;
+    }
 }
 
 function statusToBueify(status) {
@@ -155,35 +161,29 @@ export function morphToNotification(data) {
     };
 }
 
-const handleAPIError = function(content, $buefy, $router, response) {
-    console.error('API error: ', content);
+const handleAPIError = async (content, $buefy, $router, $store, response) => {
+    console.error('API error: ', content, $router);
     if(response.status === 401 && content.code === 'unauthenticated') {
         // server is telling us to login again
-        initCsrfCookie()
-            .then(() => {
-                $router.push({path: '/auth/login', query: {redirect: $router.currentRoute.fullPath}});
-            });
-        return;
+        await $store.commit('setUser', null);
+        await initCsrfCookie();
+        await $buefy.notification.open(LOGIN_AGAIN_NOTIFICATION);
+        await $router.push({path: '/auth/login', query: {redirect: $router.currentRoute.fullPath}});
     } else if(response.status === 403 && content.code === 'two_factor_setup_required') {
-        $router.push({ path: '/auth/2fa-setup' });
-        return;
+        await $router.push({ path: '/auth/2fa-setup' });
     } else if(response.status === 403 && content.code === 'email_unverified') {
-        $router.push({ path: '/auth/needs-verified-email', query: {redirect: $router.currentRoute.fullPath } });
-        return;
+        await $router.push({ path: '/auth/needs-verified-email', query: {redirect: $router.currentRoute.fullPath } });
     } else if(response.status === 404) {
-        $router.push({ name: 'error404' });
+        await $router.push({ name: 'error404' });
     } else if(response.status === 429) {
-        $buefy.notification.open({
+        await $buefy.notification.open({
             message: 'Too many requests within a short timeframe. Please wait.',
             type: 'is-warning',
             duration: 10000,
             queue: false
         });
-        return;
-    }
-
-    // handle generic validation errors
-    if(typeof content.errors === 'object') {
+    } else if(typeof content.errors === 'object') {
+        // handle generic validation errors
         for(const [, errors ] of Object.entries(content.errors)) {
             for(let error of errors) {
                 $buefy.notification.open({
@@ -194,13 +194,10 @@ const handleAPIError = function(content, $buefy, $router, response) {
                 });
             }
         }
-        return;
-    }
-
-    if(content.content && content.status) {
-        $buefy.notification.open(morphToNotification(content));
+    } else if(content.content && content.status) {
+        await $buefy.notification.open(morphToNotification(content));
     } else if(content.exception) {
-        $buefy.notification.open({
+        await $buefy.notification.open({
             message:
                 'PHP Exception of type <pre class="no-pre">' + content.exception +
                 '</pre> with message <pre class="no-pre">' + content.message +
@@ -211,7 +208,7 @@ const handleAPIError = function(content, $buefy, $router, response) {
             type: 'is-danger'
         });
     } else if(response.status === 500) {
-        $buefy.notification.open({
+        await $buefy.notification.open({
             message:'Whoops, looks like something went wrong.',
             type: 'is-danger',
             animation: 'fade',
@@ -225,3 +222,4 @@ export function getXsrfToken() {
 }
 
 FetchBuilder.router = null;
+FetchBuilder.store = null;

package/src/components/CodeEditor.vue

@@ -32,11 +32,44 @@
 <script>
 
 import AceEditor from 'vue2-ace-editor';
-import 'brace/ext/language_tools'; //language extension prerequsite...
+// 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",

package/src/components/LegacyPage.vue

@@ -11,8 +11,9 @@
 <script>
 import MediaInsertModal from "./media/MediaInsertModal.vue";
 
-import {getApiHost, morphToNotification} from "../api";
+import {getApiHost, initCsrfCookie, morphToNotification} from "../api";
 import MediaApi from "../MediaApi";
+import {LOGIN_AGAIN_NOTIFICATION} from "../AuthApi";
 
 // from https://gist.github.com/hdodov/a87c097216718655ead6cf2969b0dcfa
 
@@ -20,15 +21,6 @@ const iframeURLChange = (iframe, callback, legacyPage) => {
     var unloadHandler = function() {
         console.log('[LegacyPage] Starting load');
         legacyPage.loadingPath = 'unknown';
-        // Timeout needed because the URL changes immediately after
-        // the `unload` event is dispatched.
-        // TODO: this is rather brittle because I believe it relies upon timing
-        // setTimeout(function() {
-        //     console.log(iframe.contentWindow);
-        //     if(iframe.contentWindow) {
-        //         callback(iframe.contentWindow.location.href);
-        //     }
-        // }, 0);
     };
 
     function attachUnload() {
@@ -90,7 +82,7 @@ export default {
         iframe.addEventListener('load', this.onLoaded.bind(this));
         if(iframe.contentDocument.readyState === "complete") {
             console.warn('[LegacyPage] mounted: page was already loaded - perhaps this page was cached?');
-            this.onLoaded();
+            await this.onLoaded();
         }
     },
     unmounted() {
@@ -126,7 +118,8 @@ export default {
             let urlObj = new URL(url);
             let urlString = urlObj.toString();
             if(urlObj.pathname.startsWith(this.legacyPrefix)) {
-                return { loadInside: 'iframe', location: this.adminPrefix + urlString.split(this.legacyPrefix)[1] };
+                let loc = urlString.split(this.legacyPrefix)[1];
+                return { loadInside: 'iframe', location: this.adminPrefix + loc, locationWithoutPrefix: loc };
             } else if(urlObj.pathname.startsWith(this.adminPrefix)) {
                 return { loadInside: 'vue', location: urlString.split(this.adminPrefix)[1] };
             } else {
@@ -155,7 +148,7 @@ export default {
         popState() {
             this.$router.back();
         },
-        onLoaded() {
+        async onLoaded() {
             let path = this.$refs.iframe.contentWindow.location.href;
             if(path === 'about:blank') { return; }
             console.log('[LegacyPage] Loaded', path);
@@ -166,12 +159,26 @@ export default {
                 if(loadInside === 'iframe') {
                     window.history.pushState({}, "", location);
                 } else if(loadInside === 'vue') {
-                    this.$router.push(location);
+                    if(location.startsWith('/auth/login?location=')) {
+                        // If the legacy page is redirecting us to login,
+                        // then that must be because our auth expired/failed.
+                        // So we explicitly log ourselves out, and redirect to the login page.
+                        let redirectTo = this.fullURLToVuePath(this.currentPath);
+                        if(redirectTo.loadInside !== 'iframe') { throw new Error("this.currentPath was not inside iframe"); }
+                        console.log("Requested redirect to /auth/login . Clearing user state first", redirectTo);
+                        this.$store.commit('setUser', null);
+                        this.$buefy.notification.open(LOGIN_AGAIN_NOTIFICATION);
+                        await initCsrfCookie();
+                        location = { name: 'login', query: { redirect: redirectTo.locationWithoutPrefix } };
+                    }
+
+                    await this.$router.push(location);
+                    return;
                 } else {
                     // load outside of iframe
                     window.location = location;
+                    return;
                 }
-
                 this.currentPath = path;
             }
 

package/src/components/auth/Login.vue

@@ -89,9 +89,6 @@ export default {
                 this.submitting = false;
                 this.hasFailedLogin = false;
                 this.$store.commit('setUser', response.user);
-                if(this.$route.query.location) {
-                  window.location = this.$route.query.location;
-                }
                 this.$buefy.notification.open({
                   message: "You're now logged in.",
                   type: 'is-info',

package/src/components/auth/Logout.vue

@@ -22,5 +22,5 @@ export default {
 </script>
 
 <style scoped>
-
+    @import './login.scss';
 </style>

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/icons.js

@@ -74,7 +74,7 @@ import {
     faFolderOpen,
     faImages,
     faMinusCircle,
-    faCalendarPlus, faPaperPlane
+    faCalendarPlus, faPaperPlane, faHandshakeSlash, faHandshake
 } from "@fortawesome/free-solid-svg-icons";
 
 export const addIconsToLibrary = () => {
@@ -87,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, faCalendarPlus, faPaperPlane);
+        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages, faCalendarPlus, faPaperPlane, faHandshake, faHandshakeSlash);
 };

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)
@@ -29,6 +29,10 @@ export default class OxygenUI {
         this.unauthenticatedRoutes = []
         this.mainMenuItems = {}
         this.beforeMountHooks = []
+        this.extraPrefs = {
+            'appearance': [],
+            'external': []
+        }
     }
 
     addAuthenticatedRoutes(routes) {
@@ -81,6 +85,15 @@ 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)
@@ -120,6 +133,7 @@ export default class OxygenUI {
         });
 
         FetchBuilder.setRouter(router);
+        FetchBuilder.setStore(store);
         UserPermissions.setBuefy(this.app.$buefy);
         UserPreferences.setBuefy(this.app.$buefy)
         return this;

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 {