@oxygen-cms/ui 1.5.0

package/src/components/preferences/PreferencesThemeChooser.vue

@@ -0,0 +1,73 @@
+<template>
+    <ShowIfPermitted data-key="appearance.themes">
+        <h3 class="subtitle">Website Themes</h3>
+        <PreferencesField data-key="appearance.themes::theme" label="">
+            <template #default="slotProps">
+                <b-table
+                    :data="Object.values(slotProps.options)"
+                    :striped="false">
+                    <b-table-column v-slot="props" label="Key">
+                        <img :src="props.row.image" class="theme-logo" />
+                    </b-table-column>
+
+                    <b-table-column v-slot="props" field="name" label="Name">
+                        {{ props.row.name }}
+                        <strong v-if="getSelectedOption(slotProps.options, slotProps.value) === props.row">(current theme)</strong>
+                    </b-table-column>
+
+                    <b-table-column v-slot="props" field="provides" label="Provides preferences">
+                        <div v-for="(provideGroup, keyGroup) in props.row.provides" :key="keyGroup" class="is-size-7">
+                            <span v-for="(value, key) in provideGroup" :key="key"><code>{{ keyGroup }}::{{ key}}</code><br></span>
+                        </div>
+                    </b-table-column>
+
+                    <b-table-column v-slot="props" label="">
+                        <b-button v-if="getSelectedOption(slotProps.options, slotProps.value) !== props.row" :loading="updating" @click="switchToTheme(props.row.key, slotProps.updateValue)">Switch to this theme</b-button>
+                        <b-button v-else type="is-success" disabled>Theme is already active</b-button>
+                    </b-table-column>
+                </b-table>
+            </template>
+        </PreferencesField>
+    </ShowIfPermitted>
+</template>
+
+<script>
+import PreferencesField from "./PreferencesField.vue";
+import ShowIfPermitted from "./ShowIfPermitted.vue";
+export default {
+    name: "PreferencesThemeChooser",
+    components: {ShowIfPermitted, PreferencesField},
+    data() {
+        return {
+            updating: false
+        }
+    },
+    methods: {
+        printTheme(theme) {
+            return theme.display.name;
+        },
+        getSelectedOption(options, value) {
+            return options[value];
+        },
+        async switchToTheme(value, updateFn) {
+            console.log(value);
+            this.updating = true;
+            await updateFn(value);
+            this.updating = false;
+            this.$emit('theme-changed', value);
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-logo {
+        display: block;
+        max-width: 10rem;
+        margin: 0 auto;
+    }
+
+    .b-table ::v-deep .table td {
+        vertical-align: middle;
+    }
+</style>

package/src/components/preferences/ShowIfPermitted.vue

@@ -0,0 +1,37 @@
+<template>
+    <div v-show="permitted">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import {canAccessPrefs} from "../../PreferencesApi";
+
+export default {
+    name: "ShowIfPermitted",
+    props: {
+        dataKey: {
+            type: String,
+            default: null
+        },
+        keys: {
+            type: Array,
+            default: null
+        }
+    },
+    computed: {
+        keysArray() {
+            if(this.keys === null) {
+                return [this.dataKey];
+            } else {
+                return this.keys;
+            }
+        },
+        permitted() { return canAccessPrefs(this.$buefy, this.$store.getters.userPermissions, this.keysArray); }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/preferences/UserPreferences.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <h3 class="subtitle">General</h3>
+        <PreferencesField label="Font Size" data-key="user.general::fontSize" type="select" default-text="group"></PreferencesField>
+        <h3 class="subtitle">Editor</h3>
+        <PreferencesField label="Default Mode" data-key="user.editor::defaultMode" type="select" default-text="group"></PreferencesField>
+        <PreferencesField label="Overall Theme" data-key="user.editor::theme" type="select" default-text="group"></PreferencesField>
+        <h4 class="subtitle is-6">Code Editor</h4>
+        <PreferencesField label="Theme" data-key="user.editor::ace.theme" type="select" grouped default-text="group"></PreferencesField>
+        <PreferencesField label="Font Size" data-key="user.editor::ace.fontSize" type="select" default-text="group"></PreferencesField>
+        <PreferencesField label="Word Wrap" data-key="user.editor::ace.wordWrap" type="switch" default-text="group"></PreferencesField>
+        <PreferencesField label="Highlight Active Line" data-key="user.editor::ace.highlightActiveLine" type="switch" default-text="group"></PreferencesField>
+        <PreferencesField label="Show Print Margin" data-key="user.editor::ace.showPrintMargin" type="switch" default-text="group"></PreferencesField>
+        <PreferencesField label="Show Invisibles" data-key="user.editor::ace.showInvisibles" type="switch" default-text="group"></PreferencesField>
+        <h4 class="subtitle is-6">Design Editor</h4>
+        <PreferencesField label="Theme" data-key="user.editor::ckeditor.skin" type="select" grouped default-text="group"></PreferencesField>
+    </div>
+</template>
+
+<script>
+import PreferencesField from "./PreferencesField.vue";
+export default {
+    name: "UserPreferences",
+    components: {PreferencesField}
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/users/CreateUserModal.vue

@@ -0,0 +1,73 @@
+<template>
+    <b-modal :closable="false" :active="active" has-modal-card trap-focus aria-role="dialog" aria-modal @update:active="a => $emit('update:active', a)">
+        <div class="modal-card" style="overflow: visible">
+            <header class="modal-card-head">
+                <p class="modal-card-title">
+                    <b-icon icon="users" size="is-normal" class="push-right"></b-icon>
+                    Create Account
+                </p>
+            </header>
+            <section class="modal-card-body" style="overflow: visible">
+                <b-field label="Username">
+                    <b-input v-model="username" placeholder="e.g.: johndoe"></b-input>
+                </b-field>
+                <b-field label="Email Address">
+                    <b-input v-model="email" type="email" placeholder="e.g.: example@example.com"></b-input>
+                </b-field>
+                <b-field label="Full Name">
+                    <b-input v-model="fullName" placeholder="e.g.: John Doe"></b-input>
+                </b-field>
+                <b-field label="Group">
+                    <GroupsChooser :value="group" @select="g => group = g" />
+                </b-field>
+            </section>
+            <footer class="modal-card-foot is-flex">
+                <div class="is-flex-grow-1"></div>
+                <b-button @click="$emit('update:active', false)">Cancel</b-button>
+                <b-button type="is-primary" :loading="submitting" @click="submit">Create Account</b-button>
+            </footer>
+        </div>
+    </b-modal>
+</template>
+
+<script>
+import GroupsChooser from "../GroupsChooser.vue";
+import UsersApi from "../../UsersApi";
+import {morphToNotification} from "../../api";
+export default {
+    name: "CreateUserModal",
+    components: {GroupsChooser},
+    props: {
+        active: { type: Boolean, required: true }
+    },
+    data() {
+        return {
+            username: '',
+            email: '',
+            fullName: '',
+            group: null,
+            submitting: false,
+            usersApi: new UsersApi(this.$buefy)
+        }
+    },
+    methods: {
+        async submit() {
+            let data = { username: this.username, email: this.email, fullName: this.fullName, group: this.group };
+            try {
+                this.submitting = true;
+                let response = await this.usersApi.create(data);
+                this.$buefy.notification.open(morphToNotification(response));
+                this.$emit('update:active', false);
+                this.$emit('update:users');
+            } catch(e) {
+                // let the user try again
+            }
+            this.submitting = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/util.css

@@ -0,0 +1,47 @@
+.full-height-container {
+    display: flex;
+    flex-direction: column;
+}
+.column.full-height-container {
+    display: flex;
+}
+.box.full-height-container {
+    display: flex;
+}
+
+.scroll-container.pad,
+.full-height-container.pad {
+    padding: 2em;
+}
+
+.full-height-flex {
+    flex: 1 1 auto;
+}
+
+.full-height {
+    height: 100%;
+}
+
+.scroll-container {
+    overflow-y: auto;
+}
+
+.transition-element.is-loading {
+    margin: 2rem auto;
+    max-width: 100%;
+    width: 30em;
+}
+
+.top-bar {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.top-bar .title {
+    margin-bottom: 0;
+}
+
+.top-bar .title:not(:first-child) {
+    margin-left: 1rem;
+}

package/src/icons.js

@@ -0,0 +1,90 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+// internal icons
+import {
+    faCheck,
+    faCheckCircle,
+    faInfoCircle,
+    faExternalLinkAlt,
+    faExclamationTriangle,
+    faExclamationCircle,
+    faArrowUp,
+    faAngleRight,
+    faAngleLeft,
+    faAngleDown,
+    faEye,
+    faEyeSlash,
+    faCaretDown,
+    faCaretUp,
+    faUpload,
+    faPlus,
+    faCogs,
+    faPuzzlePiece,
+    faPhotoVideo,
+    faUserPlus,
+    faMailBulk,
+    faUsers,
+    faArrowLeft,
+    faRecycle,
+    faList,
+    faFileAlt,
+    faFile,
+    faFileAudio,
+    faFileImage,
+    faFilePdf,
+    faUserAlt,
+    faStamp,
+    faCalendarAlt,
+    faAddressCard,
+    faFileImport,
+    faUser,
+    faFileExport,
+    faDownload,
+    faFileExcel,
+    faFileCsv,
+    faChevronCircleDown,
+    faChevronCircleUp,
+    faTrash,
+    faSearch,
+    faBan,
+    faShare,
+    faTicketAlt,
+    faPencilAlt,
+    faRedoAlt,
+    faTags,
+    faLock,
+    faUserSlash,
+    faUsersCog,
+    faMusic,
+    faCalendarDay,
+    faTimesCircle,
+    faEnvelope,
+    faUserCog,
+    faFolder,
+    faHome,
+    faSignInAlt,
+    faUserEdit,
+    faSignOutAlt,
+    faTag,
+    faFolderPlus,
+    faTimes,
+    faQuestionCircle,
+    faFileUpload,
+    faLandmark,
+    faFolderOpen,
+    faImages,
+    faMinusCircle
+} from "@fortawesome/free-solid-svg-icons";
+
+export const addIconsToLibrary = () => {
+    library.add(faCheck, faLock, faUserSlash, faUserEdit, faUsersCog, faMinusCircle, faSignInAlt,
+        faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle, faFileAlt,
+        faArrowUp, faAngleRight, faEnvelope, faAngleLeft, faTicketAlt, faUserCog, faTags, faCalendarDay, faTimesCircle,
+        faMusic, faPencilAlt, faRedoAlt, faBan, faExternalLinkAlt,
+        faSearch, faAngleDown, faUserAlt, faCogs, faPhotoVideo, faPuzzlePiece, faPlus, faUserPlus, faMailBulk, faUsers,
+        faArrowLeft, faRecycle, faList, faStamp, faCalendarAlt, faAddressCard, faFileImport, faFileExport, faDownload,
+        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);
+};

package/src/main.js

@@ -0,0 +1,112 @@
+import Router from 'vue-router';
+import App from './components/App.vue';
+import UserPermissions from './UserPermissions';
+import UserPreferences from './UserPreferences';
+import VHotkey from 'v-hotkey';
+import Buefy from 'buefy';
+import AsyncComputed from 'vue-async-computed';
+import { FetchBuilder } from './api';
+import { addIconsToLibrary } from './icons';
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { AuthRoutes, makeAuthenticatedRoute } from "./routes";
+import createStore from "./store/index";
+import { checkAuthenticated } from "./AuthApi";
+import Error404 from "./components/Error404.vue";
+
+/**
+ * Creates the Vue.js Oxygen application, allowing for a few points of customization (i.e.: adding modules)
+ * @param Vue
+ * @param extraRoutes
+ * @param extraComponents
+ * @param beforeMount
+ */
+export default class OxygenUI {
+    app;
+
+    constructor(Vue) {
+        this.Vue = Vue;
+        this.authenticatedRoutes = []
+        this.unauthenticatedRoutes = []
+        this.rootComponents = { App }
+        this.beforeMountHooks = []
+    }
+
+    addAuthenticatedRoutes(routes) {
+        for (let route of routes) {
+            this.authenticatedRoutes.push(route);
+        }
+    }
+
+    addRoute(route) {
+        this.authenticatedRoutes.push(route);
+    }
+
+    addUnauthenticatedRoutes(routes) {
+        for (let route of routes) {
+            this.unauthenticatedRoutes.push(route);
+        }
+    }
+
+    registerModule(module) {
+        module(this)
+    }
+
+    createApp() {
+        // this could occur if we encounter a bad link inside the <LegacyPage> functionality
+        // TODO: remove this once <LegacyPage> is gone
+        if (window.location !== window.parent.location) {
+            throw new Error('refusing to load application inside of an iframe');
+        }
+
+        addIconsToLibrary();
+        this.Vue.component('vue-fontawesome', FontAwesomeIcon);
+        this.Vue.use(Buefy, {
+            defaultIconComponent: 'vue-fontawesome',
+            defaultIconPack: 'fas',
+        });
+        this.Vue.use(VHotkey);
+        this.Vue.use(AsyncComputed);
+        this.Vue.use(Router);
+
+        const store = createStore(this.Vue);
+
+        const routes = AuthRoutes
+            .concat([
+                makeAuthenticatedRoute(this.authenticatedRoutes)
+            ])
+            .concat(this.unauthenticatedRoutes)
+            .concat([{
+                path: '*',
+                name: 'error404',
+                component: Error404,
+                meta: {title: 'Not found'}
+            }]);
+
+        const router = new Router({
+            routes: routes,
+            base: '/oxygen/',
+            mode: 'history'
+        });
+
+        router.beforeEach(checkAuthenticated(store));
+
+        this.app = new this.Vue({
+            router: router,
+            components: this.rootComponents,
+            store
+        });
+
+        FetchBuilder.setRouter(router);
+        UserPermissions.setBuefy(this.app.$buefy);
+        UserPreferences.setBuefy(this.app.$buefy)
+        return this;
+    }
+
+    mount(selector) {
+        for(let hook of this.beforeMountHooks) {
+            hook(this.app);
+        }
+        this.app.$mount(selector);
+    }
+}
+

package/src/modules/LegacyPages.js

@@ -0,0 +1,18 @@
+import LegacyPage from "../components/LegacyPage.vue";
+
+export default function(ui) {
+    ui.addAuthenticatedRoutes([
+        {
+            // will match everything, try to render a legacy Oxygen page...
+            path: '(pages|partials|upcoming-events)/:subpath*',
+            component: LegacyPage,
+            props: (route) => {
+                return {
+                    fullPath: route.fullPath,
+                    legacyPrefix: '/oxygen/view',
+                    adminPrefix: '/oxygen'
+                }
+            }
+        }
+    ]);
+}

package/src/modules/Media.js

@@ -0,0 +1,45 @@
+import MediaPage from "../components/media/MediaPage.vue";
+import MediaResponsiveImages from "../components/media/MediaResponsiveImages.vue";
+
+export default function(ui) {
+    ui.addAuthenticatedRoutes([
+        {
+            path: 'media/list/:currentPath(.*)?',
+            name: 'media.list',
+            props: true,
+            component: MediaPage,
+            meta: { title: 'Photos & File Uploads'}
+        },
+        {
+            path: 'media/list',
+            props: {
+                currentPath: ''
+            },
+            component: MediaPage,
+            meta: { title: 'Photos & File Uploads'}
+        },
+        {
+            path: 'media/trash',
+            name: 'media.trash',
+            props: {
+                inTrash: true,
+                currentPath: ''
+            },
+            component: MediaPage,
+            meta: { title: 'Deleted Photos & File Uploads'}
+        },
+        {
+            path: 'media/search/:searchQuery',
+            name: 'media.search',
+            props: true,
+            component: MediaPage,
+            meta: { title: 'Search Photos & File Uploads'}
+        },
+        {
+            path: 'media/responsive-images',
+            name: 'media.responsiveImages',
+            component: MediaResponsiveImages,
+            meta: { title: 'Responsive Images'}
+        }
+    ]);
+}

package/src/modules/UserManagement.js

@@ -0,0 +1,24 @@
+import ViewProfile from "../components/ViewProfile.vue";
+import AuthenticationLog from "../components/AuthenticationLog.vue";
+import UserManagement from "../components/UserManagement.vue";
+
+export default function(ui) {
+    ui.addAuthenticatedRoutes([
+        {
+            path: 'user/profile',
+            name: 'auth.viewProfile',
+            component: ViewProfile,
+            meta: { title: 'View Profile' }
+        },
+        {
+            path: 'user/login-log',
+            component: AuthenticationLog,
+            meta: { title: 'Logins & Login Attempts' }
+        },
+        {
+            path: 'users',
+            component: UserManagement,
+            meta: { title: 'Manage Users'}
+        }
+    ]);
+}

package/src/routes/index.js

@@ -0,0 +1,92 @@
+import AuthenticatedLayout from "../components/AuthenticatedLayout.vue";
+import Login from "../components/auth/Login.vue";
+import Logout from "../components/auth/Logout.vue";
+import WelcomeFloat from "../components/auth/WelcomeFloat.vue";
+import TwoFactorSetup from "../components/auth/TwoFactorSetup.vue";
+import PasswordRemind from "../components/auth/PasswordRemind.vue";
+import PasswordReset from "../components/auth/PasswordReset.vue";
+import Auth404 from "../components/auth/Auth404.vue";
+import VerifyEmail from "../components/auth/VerifyEmail.vue";
+
+export const AuthRoutes = [
+    {
+        path: '/auth',
+        component: WelcomeFloat,
+        meta: {
+            allowUnauthenticated: true
+        },
+        children: [
+            {
+                name: 'login',
+                path: 'login',
+                component: Login,
+                meta: {
+                    title: 'Login',
+                    allowUnauthenticated: true
+                }
+            },
+            {
+                name: 'logout',
+                path: 'logout',
+                component: Logout,
+                meta: {
+                    title: 'Logout',
+                    allowUnauthenticated: true
+                }
+            },
+            {
+                name: '2fa-setup',
+                path: '2fa-setup',
+                component: TwoFactorSetup,
+                meta: {
+                    title: 'Setup two factor authentication'
+                }
+            },
+            {
+                name: 'forgot-password',
+                path: 'forgot-password',
+                component: PasswordRemind,
+                meta: {
+                    title: 'Forgot Password',
+                    allowUnauthenticated: true
+                }
+            },
+            {
+                name: 'reset-password',
+                path: 'reset-password',
+                component: PasswordReset,
+                meta: {
+                    title: 'Reset Password',
+                    allowUnauthenticated: true
+                }
+            },
+            {
+                name: 'needs-verified-email',
+                path: 'needs-verified-email',
+                component: VerifyEmail,
+                meta: {
+                    title: 'Verify your email address'
+                }
+            },
+            {
+                path: '',
+                component: Auth404
+            },
+            {
+                path: '*',
+                component: Auth404
+            }
+        ]
+    }
+];
+
+export const makeAuthenticatedRoute = (children) => {
+    return {
+        path: '/',
+        component: AuthenticatedLayout,
+        props: true,
+        redirect: '/dashboard',
+        children: children,
+    }
+};
+