@oxygen-cms/ui 1.6.4 → 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.4",
+  "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/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/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/main.js

@@ -133,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;