@oxygen-cms/ui 1.5.0

package/.babelrc

@@ -0,0 +1 @@
+{ "presets": ["@babel/preset-env"] }

package/.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": 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

@@ -0,0 +1,29 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - 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/.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion":9
+}

package/README.md

@@ -0,0 +1,7 @@
+# Oxygen CMS - Vue.js User Interface Utilities
+
+![Node.js CI](https://github.com/oxygen-cms/ui-utils/workflows/Node.js%20CI/badge.svg) ![on NPM](https://img.shields.io/npm/v/@oxygen-cms/utils)
+
+Supporting files for the Vue.JS-powered next-gen Oxygen CMS user interface.
+
+This begins the migration of Oxygen into a Single-Page Application powered by the 'Oxygen API'.

package/jest.init.js

@@ -0,0 +1 @@
+import "babel-polyfill";

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@oxygen-cms/ui",
+  "version": "1.5.0",
+  "description": "Various utilities for UI-building in Vue.js",
+  "main": "none",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oxygen-cms/ui.git"
+  },
+  "author": "Chris Chamberlain <chris@chamberlain.id.au>",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-regular-svg-icons": "^5.15.2",
+    "@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",
+    "ua-parser-js": "^0.7.24",
+    "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",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.1",
+    "@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"
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint --ext js,vue src/"
+  },
+  "jest": {
+    "verbose": true,
+    "setupFiles": [
+      "./jest.init.js"
+    ]
+  },
+  "bugs": {
+    "url": "https://github.com/oxygen-cms/ui/issues"
+  },
+  "homepage": "https://github.com/oxygen-cms/ui#readme"
+}

package/src/AuthApi.js

@@ -0,0 +1,116 @@
+import {API_ROOT} from "./CrudApi";
+import {FetchBuilder, initCsrfCookie} from "./api";
+import UserPermissions from "./UserPermissions";
+
+export default class AuthApi {
+
+    constructor($buefy) {
+        this.$buefy = $buefy;
+    }
+
+    request(method) {
+        return FetchBuilder.default(this.$buefy, method);
+    }
+
+    async login(username, password, code) {
+        return await this.request('post')
+            .withJson({
+                username,
+                password,
+                '2fa_code': code
+            })
+            .fetch(API_ROOT + 'auth/login');
+    }
+
+    async getLoginPreferences() {
+        return await this.request('get').fetch(API_ROOT + 'auth/preferences');
+    }
+
+    async setupTwoFactorAuth() {
+        return await this.request('post')
+            .fetch(API_ROOT + 'auth/two-factor-setup');
+    }
+
+    async confirmTwoFactorAuth(code) {
+        return await this.request('post')
+            .withJson({
+                '2fa_code': code
+            })
+            .fetch(API_ROOT + 'auth/two-factor-confirm');
+    }
+
+    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;
+    }
+
+    async changePassword(oldPass, newPass, newPassAgain) {
+        const params = {
+            oldPassword: oldPass,
+            password: newPass,
+            passwordConfirmation: newPassAgain
+        };
+        console.log(params);
+        return this.request('post')
+            .withJson(params)
+            .fetch(API_ROOT + 'auth/change-password');
+    }
+
+    async listUserSessions() {
+        return this.request('get')
+            .fetch(API_ROOT + 'auth/sessions')
+    }
+
+    async deleteUserSession(id) {
+        return this.request('delete')
+            .fetch(API_ROOT + 'auth/sessions/' + id)
+    }
+}
+
+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

@@ -0,0 +1,112 @@
+import {FetchBuilder} from './api.js';
+import {morphToNotification} from "./api";
+
+const API_ROOT = '/oxygen/api/';
+
+class CrudApi {
+
+    constructor($buefy) {
+        this.$buefy = $buefy;
+    }
+
+    request(method) {
+        return FetchBuilder.default(this.$buefy, method);
+    }
+
+    static getResourceName() {
+        throw new Error();
+    }
+
+    static getResourceRoot() {
+        return API_ROOT + this.getResourceName();
+    }
+
+    static prepareModelForAPI(data) {
+        let m = { ...data  };
+        delete m.id;
+        return m;
+    }
+
+    async list(inTrash, page, searchQuery) {
+        return this.request('get')
+            .withQueryParams({
+                page: (searchQuery !== null && searchQuery !== '' ) ? null : page,
+                trash: (inTrash ? 'true' : 'false'),
+                q: (searchQuery !== null && searchQuery !== '' ) ? searchQuery : null
+            })
+            .fetch(this.constructor.getResourceRoot());
+    }
+
+    async create(data) {
+        return this.request('post')
+            .withJson(this.constructor.prepareModelForAPI(data))
+            .fetch(this.constructor.getResourceRoot());
+    }
+
+    async get(id) {
+        return this.request('get')
+            .fetch(this.constructor.getResourceRoot() + '/' + id);
+    }
+
+    async update(data) {
+        let id = data.id;
+        return this.request('put')
+            .withJson(this.constructor.prepareModelForAPI(data))
+            .fetch(this.constructor.getResourceRoot() + '/' + id);
+    }
+
+    async delete(id) {
+        return this.request('delete')
+            .fetch(this.constructor.getResourceRoot() + '/' + id);
+    }
+
+    async search(searchQuery) {
+        return this.request('post')
+            .withJson(searchQuery)
+            .fetch(this.constructor.getResourceRoot() + '/search');
+    }
+
+    async forceDelete(id) {
+        return this.request('delete')
+            .fetch(this.constructor.getResourceRoot() + '/' + id + '?force=true');
+    }
+
+    async confirmForceDelete(id) {
+        const promise = new Promise((resolve) => {
+            this.$buefy.dialog.confirm({
+                message: 'Are you sure you want to delete this record forever?',
+                onConfirm: resolve
+            });
+        });
+
+        await promise;
+        let data = await this.forceDelete(id);
+        this.$buefy.toast.open(morphToNotification(data));
+        return data;
+    }
+
+    async restoreAndNotify(id) {
+        let data = await this.request('post')
+            .fetch(this.constructor.getResourceRoot() + '/' + id + '/restore');
+        this.$buefy.toast.open(morphToNotification(data));
+        return data;
+    }
+
+    async deleteAndNotify(id) {
+        let data = await this.delete(id);
+        this.$buefy.toast.open(morphToNotification(data));
+        return data;
+    }
+
+    async listVersions(id) {
+        return this.request('get')
+            .fetch(this.constructor.getResourceRoot() + '/' + id + '/versions');
+    }
+
+    async makeHeadVersion(id) {
+        return this.request('post')
+            .fetch(this.constructor.getResourceRoot() + '/' + id + '/make-head');
+    }
+}
+
+export { CrudApi, API_ROOT };

package/src/EventsApi.js

@@ -0,0 +1,16 @@
+import  { CrudApi } from './CrudApi';
+
+export default class EventsApi extends CrudApi {
+
+    static prepareModelForAPI(data) {
+        let m = { ...data  };
+        delete m.id;
+        delete m.bookings;
+        return m;
+    }
+
+    static getResourceName() {
+        return 'upcoming-events';
+    }
+
+}

package/src/GroupsApi.js

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

package/src/Internationalize.js

@@ -0,0 +1,31 @@
+export default class Internationalize {
+    static get locale() {
+        // hardcoded locale for now
+        return 'en-AU';
+    }
+
+    static formatDate(date) {
+        let format = new Intl.DateTimeFormat(this.locale);
+        if(typeof date === 'string') {
+            return format.format(new Date(date));
+        }
+        return format.format(date);
+    }
+
+    static formatLastUpdated(updatedAt) {
+        let d = new Date(updatedAt);
+        return d.toDateString() + ' ' + d.toLocaleTimeString();
+    }
+
+    static formatDateTime(datetime) {
+        let format = new Intl.DateTimeFormat(this.locale , {
+            year: 'numeric', month: 'numeric', day: 'numeric',
+            hour: 'numeric', minute: 'numeric', second: 'numeric'
+        });
+
+        if(typeof datetime === 'string') {
+            return format.format(new Date(datetime));
+        }
+        return format.format(datetime);
+    }
+}

package/src/MediaApi.js

@@ -0,0 +1,52 @@
+import  { CrudApi } from './CrudApi';
+
+export default class MediaApi extends CrudApi {
+
+    static get TYPE_IMAGE() { return 0; }
+    static get TYPE_DOCUMENT() { return 1; }
+    static get TYPE_AUDIO() { return 2; }
+
+    static getResourceName() {
+        return 'media';
+    }
+
+    static prepareModelForAPI(data) {
+        let m = { ...data  };
+        delete m.id;
+        delete m.filename;
+        delete m.extension;
+        m.parentDirectory = m.parentDirectory ? m.parentDirectory.id : null;
+        delete m.selected;
+        return m;
+    }
+
+    async create(data) {
+        let request = this.request('post');
+        let formData = new FormData();
+        for(let file of data.files) {
+            formData.append('file[]', file);
+        }
+        if(data.currentDirectory !== null) {
+            formData.append('parentDirectory', data.currentDirectory.id);
+        }
+        return request.setBody(formData)
+            .fetch(this.constructor.getResourceRoot());
+    }
+
+    async list(inTrash, searchQuery, page, path) {
+        return this.request('get')
+            .withQueryParams({
+                path: path,
+                q: (searchQuery !== null && searchQuery !== '' ) ? searchQuery : null,
+                page: (searchQuery !== null && searchQuery !== '' ) ? null : page,
+                trash: (inTrash ? 'true' : 'false'),
+            })
+            .fetch(this.constructor.getResourceRoot());
+    }
+
+    static generateIncludeStatement(item) {
+        let fullPathNoExt = item.fullPath.split('.')[0];
+        return '{{ media(\'' + fullPathNoExt + '\') }}';
+    }
+
+}

package/src/MediaDirectoryApi.js

@@ -0,0 +1,62 @@
+import  { CrudApi } from './CrudApi';
+
+export default class MediaDirectoryApi extends CrudApi {
+
+    static getResourceName() {
+        return 'media-directory';
+    }
+
+    static prepareModelForAPI(data) {
+        let m = { ...data  };
+        delete m.id;
+        delete m.fullPath;
+        m.parentDirectory = m.parentDirectory ? m.parentDirectory.id : null;
+        delete m.selected;
+        return m;
+    }
+
+}
+
+export const getDirectoryBreadcrumbItems = (currentDir) => {
+    let items = [];
+    let dir = currentDir;
+    while(dir !== null && typeof dir !== 'undefined') {
+        items.push({
+            text: dir.name,
+            separator: false,
+            link: dir === currentDir ? null : dir.fullPath
+        });
+        dir = dir.parentDirectory;
+    }
+    items.push({
+        home: true,
+        separator: false
+    });
+    return items.reverse();
+};
+
+export const getDirectoryPathString = (dir) => {
+    if(dir === null) {
+        return '/';
+    }
+
+    let path = '';
+    while(dir !== null && typeof dir !== 'undefined') {
+        path = '/' + path;
+        path = dir.name + path;
+        dir = dir.parentDirectory;
+    }
+    return path;
+};
+
+export const getDirectoryFullSlug = (dir) => {
+    let path = '';
+    while(dir !== null && typeof dir !== 'undefined') {
+        if(path !== '') {
+            path = '/' + path;
+        }
+        path = dir.slug + path;
+        dir = dir.parentDirectory;
+    }
+    return path;
+};

package/src/PreferencesApi.js

@@ -0,0 +1,47 @@
+import {API_ROOT} from "./CrudApi";
+import {FetchBuilder} from "./api";
+
+export const canAccessPrefs = ($buefy, userPermissions, keys) => {
+    console.log('Checking permissions for', 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;
+};
+
+export default class PreferencesApi {
+
+    constructor($buefy) {
+        this.$buefy = $buefy;
+    }
+
+    request(method) {
+        return FetchBuilder.default(this.$buefy, method);
+    }
+
+    async getValue(key) {
+        return await this.request('get')
+            .fetch(API_ROOT + 'preferences/' + key);
+    }
+
+    async checkValid(key, value) {
+        return await this.request('post')
+            .withJson({
+                value: value
+            })
+            .fetch(API_ROOT + 'preferences/' + key + '/validate');
+    }
+
+    async setValue(key, value) {
+        return await this.request('put')
+            .withJson({
+                value: value
+            })
+            .fetch(API_ROOT + 'preferences/' + key);
+    }
+}

package/src/UserPermissions.js

@@ -0,0 +1,66 @@
+// this is a straight JavaScript port of the `Oxygen\Auth\Permissions\TreePermissionsSystem` PHP class.
+
+export default class UserPermissions {
+
+    static setBuefy($buefy) {
+        this.$buefy = $buefy;
+    }
+
+    static get ROOT_CONTENT_TYPE() { return '_root'; }
+    static get PARENT_KEY() { return '_parent'; }
+    static get MAX_INHERITANCE_DEPTH() { return 10; }
+
+    constructor(permissions) {
+        this.permissions = permissions;
+    }
+
+    has(key) {
+        if(!this.permissions) {
+            console.warn('permissions not loaded');
+            return false;
+        }
+
+        let keyParts = key.split('.');
+
+        if(keyParts.length !== 2) {
+            throw new Error('TreePermissionsSystem Requires a Dot-Seperated Permissions Key');
+        }
+
+        // check for the specific key
+        return this.hasKey(keyParts[0], keyParts[1]);
+    }
+
+    hasOneOf(keys) {
+        for(let key of keys) {
+            if(this.has(key)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    hasKey(contentType, key, depth = 0) {
+        // check we're not looping
+        if(depth > UserPermissions.MAX_INHERITANCE_DEPTH) {
+            throw new Error('Max Depth Reached Due to Inheritance Loop');
+        }
+
+        // if the key is set then we will return the value of it
+        if(contentType in this.permissions && key in this.permissions[contentType]) {
+            return this.permissions[contentType][key];
+        } else {
+            // look in the parent contentType
+            let parent = (contentType in this.permissions && UserPermissions.PARENT_KEY in this.permissions[contentType]) ?
+                this.permissions[contentType][UserPermissions.PARENT_KEY]
+                : UserPermissions.ROOT_CONTENT_TYPE;
+
+            // have already reached the root - would only lead to infinite recursion
+            if(contentType === UserPermissions.ROOT_CONTENT_TYPE) {
+                return false;
+            }
+
+            return this.hasKey(parent, key, depth + 1);
+        }
+    }
+
+}