@oxygen-cms/ui 1.4.0 → 1.5.2

package/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true,
+        "jest/globals": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/recommended",
+        "prettier"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue",
+        "jest"
+    ],
+    "rules": {
+    }
+};

package/.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -24,6 +24,6 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm install -g yarn
-    - run: yarn install
-    - run: yarn test
+    - run: npm ci
+    - run: npm run lint
+    - run: npm run test

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/ui.iml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "1.4.0",
+  "version": "1.5.2",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {
@@ -18,9 +18,10 @@
     "autoprefixer": "^9.8.5",
     "babel-loader": "^8.1.0",
     "brace": "^0.11.1",
-    "buefy": "^0.9.4",
-    "bulma": "~0.9.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",
@@ -29,10 +30,12 @@
     "v-hotkey": "^0.8.0",
     "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"
+    "vue2-ace-editor": "^0.0.15",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",
@@ -40,6 +43,10 @@
     "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",
@@ -49,7 +56,8 @@
     "webpack-cli": "^3.3.11"
   },
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint --ext js,vue src/"
   },
   "jest": {
     "verbose": true,

package/src/AuthApi.js

@@ -1,5 +1,6 @@
 import {API_ROOT} from "./CrudApi";
-import {FetchBuilder} from "./api";
+import {FetchBuilder, initCsrfCookie} from "./api";
+import UserPermissions from "./UserPermissions";
 
 export default class AuthApi {
 
@@ -11,41 +12,62 @@ export default class AuthApi {
         return FetchBuilder.default(this.$buefy, method);
     }
 
-    async logout() {
-        let data = await this.request('post')
-            .fetch(API_ROOT + 'auth/logout');
-        window.location = data.redirect;
-        return data;
+    async login(username, password, code) {
+        return await this.request('post')
+            .withJson({
+                username,
+                password,
+                '2fa_code': code
+            })
+            .fetch(API_ROOT + 'auth/login');
     }
 
-    async stopImpersonating() {
-        let data = await this.request('post')
-            .fetch('/oxygen/view/users/leaveImpersonate');
-        console.log(data);
-        window.location = data.redirect;
-        return data;
+    async getLoginPreferences() {
+        return await this.request('get').fetch(API_ROOT + 'auth/preferences');
     }
 
-    async userDetails() {
-        if(AuthApi.currentUserDetails) {
-            return AuthApi.currentUserDetails;
-        } else if(AuthApi.currentlyFetchingUserDetails === true) {
-            return new Promise((resolve, reject) => {
-                AuthApi.userDetailsResolvedHooks.push(resolve);
-            });
-        }
+    async setupTwoFactorAuth() {
+        return await this.request('post')
+            .fetch(API_ROOT + 'auth/two-factor-setup');
+    }
 
-        AuthApi.currentlyFetchingUserDetails = true;
-        let response = await this.request('get')
-            .fetch(API_ROOT + 'auth/user');
+    async confirmTwoFactorAuth(code) {
+        return await this.request('post')
+            .withJson({
+                '2fa_code': code
+            })
+            .fetch(API_ROOT + 'auth/two-factor-confirm');
+    }
 
-        AuthApi.currentUserDetails = response;
-        AuthApi.currentlyFetchingUserDetails = false;
-        for(let hook of AuthApi.userDetailsResolvedHooks) {
-            hook(response);
-        }
-        AuthApi.userDetailsResolvedHooks = [];
+    async sendReminderEmail(email) {
+        return await this.request('post')
+            .withJson({
+                'email': email
+            })
+            .fetch(API_ROOT + 'auth/send-reminder-email');
+    }
 
+    async sendEmailVerification() {
+        return await this.request('post')
+            .fetch(API_ROOT + 'auth/verify-email');
+    }
+
+    async resetPassword(params) {
+        return await this.request('post')
+            .withJson(params)
+            .fetch(API_ROOT + 'auth/reset-password');
+    }
+
+    async logout() {
+        let response = await this.request('post')
+            .fetch(API_ROOT + 'auth/logout');
+        this.$buefy.notification.open({
+            message: 'You have been logged out',
+            type: 'is-info',
+            duration: 4000,
+            queue: false
+        });
+        await initCsrfCookie();
         return response;
     }
 
@@ -61,21 +83,34 @@ export default class AuthApi {
             .fetch(API_ROOT + 'auth/change-password');
     }
 
-    async updateFullName(name) {
-        return this.request('put')
-            .withJson({
-                fullName: name
-            })
-            .fetch(API_ROOT + 'auth/fullName');
+    async listUserSessions() {
+        return this.request('get')
+            .fetch(API_ROOT + 'auth/sessions')
     }
 
-    async terminateAccount() {
-        return this.request('post')
-            .withJson(params)
-            .fetch(API_ROOT + 'auth/terminate-account');
+    async deleteUserSession(id) {
+        return this.request('delete')
+            .fetch(API_ROOT + 'auth/sessions/' + id)
     }
 }
 
-AuthApi.currentlyFetchingUserDetails = false;
-AuthApi.currentUserDetails = null;
-AuthApi.userDetailsResolvedHooks = [];
+export const checkAuthenticated = (store) => {
+    return (to, from, next) => {
+        store.dispatch('determineLoginStatus').then((isLoggedIn) => {
+            if(!to.path.startsWith('/auth/login') && !isLoggedIn && to.meta.allowUnauthenticated !== true) {
+                UserPermissions.$buefy.notification.open({
+                    message: 'You need to be logged in to view that page',
+                    type: 'is-info',
+                    queue: false,
+                    duration: 7000
+                });
+                next({
+                    path: '/auth/login',
+                    query: { redirect: to.fullPath }
+                });
+            } else {
+                next();
+            }
+        })
+    }
+};

package/src/CrudApi.js

@@ -66,20 +66,20 @@ class CrudApi {
             .fetch(this.constructor.getResourceRoot() + '/search');
     }
 
-    async forceDelete(id, callback) {
+    async forceDelete(id) {
         return this.request('delete')
             .fetch(this.constructor.getResourceRoot() + '/' + id + '?force=true');
     }
 
     async confirmForceDelete(id) {
-        const promise = new Promise((resolve, reject) => {
+        const promise = new Promise((resolve) => {
             this.$buefy.dialog.confirm({
                 message: 'Are you sure you want to delete this record forever?',
                 onConfirm: resolve
             });
         });
 
-        let result = await promise;
+        await promise;
         let data = await this.forceDelete(id);
         this.$buefy.toast.open(morphToNotification(data));
         return data;

package/src/GroupsApi.js

@@ -0,0 +1,9 @@
+import {CrudApi} from './CrudApi';
+
+export default class GroupsApi extends CrudApi {
+
+    static getResourceName() {
+        return 'groups';
+    }
+
+}

package/src/MediaDirectoryApi.js

@@ -3,7 +3,7 @@ import  { CrudApi } from './CrudApi';
 export default class MediaDirectoryApi extends CrudApi {
 
     static getResourceName() {
-        return 'mediaDirectory';
+        return 'media-directory';
     }
 
     static prepareModelForAPI(data) {

package/src/PreferencesApi.js

@@ -6,9 +6,11 @@ export const canAccessPrefs = ($buefy, userPermissions, keys) => {
     for(let key of keys) {
         let permissionsKey = 'preferences.' + key.split('::')[0].replace('.', '_');
         if(userPermissions.has(permissionsKey)) {
+            console.log('Granted');
             return true;
         }
     }
+    console.log('Denied');
     return false;
 };
 

package/src/UserPermissions.js

@@ -1,4 +1,4 @@
-// this is a straight JavaScript port of the `Oxygen\Auth\Permissions\SimplePermissionsSystem` PHP class.
+// this is a straight JavaScript port of the `Oxygen\Auth\Permissions\TreePermissionsSystem` PHP class.
 
 export default class UserPermissions {
 
@@ -7,7 +7,6 @@ export default class UserPermissions {
     }
 
     static get ROOT_CONTENT_TYPE() { return '_root'; }
-    static get ACCESS_KEY() { return '_access'; }
     static get PARENT_KEY() { return '_parent'; }
     static get MAX_INHERITANCE_DEPTH() { return 10; }
 
@@ -24,13 +23,7 @@ export default class UserPermissions {
         let keyParts = key.split('.');
 
         if(keyParts.length !== 2) {
-            throw new Error('SimplePermissionsSystem Requires a Dot-Seperated Permissions Key');
-        }
-
-        // check for the access key
-        if(!this.hasKey(keyParts[0], UserPermissions.ACCESS_KEY)) {
-            console.warn('no access');
-            return false;
+            throw new Error('TreePermissionsSystem Requires a Dot-Seperated Permissions Key');
         }
 
         // check for the specific key

package/src/UserPreferences.js

@@ -19,10 +19,6 @@ class UserPreferences {
         this.authApi = new AuthApi(this.$buefy);
     }
 
-    static async load() {
-        return new UserPreferences((await this.authApi.userDetails()).user.preferences);
-    }
-
     get(key, fallback = null) {
         let o = this.preferences;
 

package/src/UserPreferences.test.js

@@ -1,9 +1,7 @@
 import UserPreferences from './UserPreferences';
-import AuthApi from "./AuthApi";
 
 jest.mock('./AuthApi');
 
-
 test('gets and sets preferences', async () => {
     UserPreferences.setBuefy({});
     UserPreferences.authApi.userDetails.mockResolvedValue({

package/src/UsersApi.js

@@ -0,0 +1,41 @@
+import {API_ROOT, CrudApi} from './CrudApi';
+
+export default class UsersApi extends CrudApi {
+
+    static prepareModelForAPI(data) {
+        let m = { ...data  };
+        delete m.id;
+        if(m.group) {
+            m.group = m.group.id;
+        }
+        return m;
+    }
+
+    static getResourceName() {
+        return 'users';
+    }
+
+    async updateFullName(id, name) {
+        return this.request('put')
+            .withJson({
+                fullName: name
+            })
+            .fetch(API_ROOT + 'users/' + id + '/fullName');
+    }
+
+    async impersonate(id) {
+        return await this.request('post')
+            .fetch(API_ROOT + 'users/' + id + '/impersonate');
+    }
+
+    async forceDelete(id) {
+        return this.request('delete')
+            .fetch(this.constructor.getResourceRoot() + '/' + id + '/force');
+    }
+
+    async stopImpersonating() {
+        return await this.request('post')
+            .fetch(API_ROOT + 'users/stop-impersonating');
+    }
+
+}

package/src/api.js

@@ -1,12 +1,21 @@
-const getCSRFToken = () => {
-    let csrfTokenNode = document.querySelector('meta[name="csrf-token"]');
-    if(csrfTokenNode === null) {
-        return null;
-    }
-    return csrfTokenNode.attributes.content.nodeValue;
-};
+var xsrfToken = null;
+
+export const initCsrfCookie = async () => {
+    await window.fetch(
+        '/sanctum/csrf-cookie',
+        {
+            credentials: 'same-origin'
+        });
+    let cookiesObj = document.cookie
+        .split(';')
+        .reduce((res, c) => {
+            const [key, val] = c.trim().split('=').map(decodeURIComponent)
+            return Object.assign(res, { [key]: val });
+        }, {});
+    xsrfToken = cookiesObj['XSRF-TOKEN'];
+}
 
-class FetchBuilder {
+export class FetchBuilder {
     constructor($buefy, method) {
         this.$buefy = $buefy;
         this.method = method;
@@ -36,32 +45,40 @@ class FetchBuilder {
         return this;
     }
 
-    withCsrfToken() {
-        this.headers.set('X-CSRF-TOKEN', getCSRFToken());
-        return this;
-    }
-
     cookies() {
         this.credentials = 'same-origin';
         return this;
     }
 
-    async fetch(url) {
+    async setXsrfTokenHeader() {
+        if(xsrfToken === null) {
+            await initCsrfCookie();
+        }
+        this.headers.set('X-XSRF-TOKEN', xsrfToken);
+    }
+
+    async fetchRaw(url) {
+        await this.setXsrfTokenHeader()
+
         let v = { ... this};
         v.queryParams = undefined;
 
         if(this.queryParams) {
             url = new URL(url, window.location);
             for(let name in this.queryParams) {
-                if(this.queryParams.hasOwnProperty(name) && this.queryParams[name] !== null) {
+                if(Object.prototype.hasOwnProperty.call(this.queryParams, name) && this.queryParams[name] !== null) {
                     url.searchParams.append(name, this.queryParams[name]);
                 }
             }
         }
 
-        let response = await window.fetch(url.toString(), this);
+        return await window.fetch(url.toString(), this);
+    }
+
+    async fetch(url) {
+        let response = await this.fetchRaw(url);
 
-        let data;
+        let data = {};
         try {
             data = await response.json();
         } catch(e) {
@@ -73,23 +90,25 @@ class FetchBuilder {
                     queue: false
                 });
                 return {};
-            }
-
-            console.error('Response did not contain valid JSON: ', e);
-            this.$buefy.notification.open({
-                message: 'Whoops, looks like something went wrong.',
-                type: 'is-warning',
-                queue: false
-            });
+            } else if(response.status === 204) {
+                // no content, we're okay
+            } else {
+                console.error('Response did not contain valid JSON: ', e);
+                this.$buefy.notification.open({
+                    message: 'Whoops, looks like something went wrong.',
+                    type: 'is-warning',
+                    queue: false
+                });
 
-            throw e;
+                throw e;
+            }
         }
 
         if(response.ok && data.status !== 'failed') {
             return data;
         }
 
-        handleAPIError(data, this.$buefy);
+        handleAPIError(data, this.$buefy, FetchBuilder.router, response);
         let e = new Error('Received an error response from API call');
         e.response = data;
         throw e;
@@ -98,9 +117,12 @@ class FetchBuilder {
     static default($buefy, method) {
         return (new FetchBuilder($buefy, method))
             .cookies()
-            .withCsrfToken()
             .wantJson();
     }
+
+    static setRouter(router) {
+        FetchBuilder.router = router;
+    }
 }
 
 function statusToBueify(status) {
@@ -111,7 +133,7 @@ function statusToBueify(status) {
     }
 }
 
-function morphToNotification(data) {
+export function morphToNotification(data) {
     return {
         message: data.content,
         type: statusToBueify(data.status),
@@ -121,28 +143,60 @@ function morphToNotification(data) {
     };
 }
 
-const handleAPIError = function(content, $buefy) {
+const handleAPIError = function(content, $buefy, $router, response) {
     console.error('API error: ', content);
-    if(content.authenticated === false) {
+    if(response.status === 401 && content.code === 'unauthenticated') {
         // server is telling us to login again
-        window.location.replace('/oxygen/auth/login?intended=' + window.location);
+        initCsrfCookie()
+            .then(() => {
+                $router.push({path: '/auth/login', query: {redirect: $router.currentRoute.fullPath}});
+            });
+        return;
+    } else if(response.status === 403 && content.code === 'two_factor_setup_required') {
+        $router.push({ path: '/auth/2fa-setup' });
+        return;
+    } 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 === 429) {
+        $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') {
+        for(const [, errors ] of Object.entries(content.errors)) {
+            for(let error of errors) {
+                $buefy.notification.open({
+                    message: error,
+                    duration: 4000,
+                    queue: false,
+                    type: 'is-warning'
+                });
+            }
+        }
         return;
     }
 
     if(content.content && content.status) {
         $buefy.notification.open(morphToNotification(content));
-    } else if(content.error) {
+    } else if(content.exception) {
         $buefy.notification.open({
             message:
-                'PHP Exception of type <pre class="no-pre">' + content.error.type +
-                '</pre> with message <pre class="no-pre">' + content.error.message +
-                '</pre> thrown at <pre class="no-pre">' + content.error.file + ':' + content.error.line +
+                'PHP Exception of type <pre class="no-pre">' + content.exception +
+                '</pre> with message <pre class="no-pre">' + content.message +
+                '</pre> thrown at <pre class="no-pre">' + content.file + ':' + content.line +
                 '</pre>',
             duration: 20000,
             animation: 'fade',
             type: 'is-danger'
         });
-    } else {
+    } else if(response.status === 500) {
         $buefy.notification.open({
             message:'Whoops, looks like something went wrong.',
             type: 'is-danger',
@@ -152,4 +206,8 @@ const handleAPIError = function(content, $buefy) {
     }
 };
 
-export { FetchBuilder, morphToNotification, getCSRFToken };
+export function getXsrfToken() {
+    return xsrfToken;
+}
+
+FetchBuilder.router = null;