@oxygen-cms/ui 1.4.0 → 1.5.2

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/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,111 @@
+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 {
+    constructor(Vue) {
+        this.app = null;
+        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,
+    }
+};
+

package/src/store/index.js

@@ -0,0 +1,70 @@
+import Vuex from 'vuex';
+
+import UserPermissions from "../UserPermissions";
+import AuthApi from "../AuthApi";
+import UserPreferences from "../UserPreferences";
+
+export default (vue) => {
+    vue.use(Vuex);
+
+    return new Vuex.Store({
+        state: {
+            user: null,
+            loginStatus: null,
+            impersonating: false
+        },
+        mutations: {
+            setUser(state, user) {
+                state.user = user;
+                state.loginStatus = user !== null;
+            },
+            setImpersonating(state, user) {
+                state.user = user;
+                state.loginStatus = user !== null;
+                state.impersonating = true;
+            },
+            stopImpersonating(state, user) {
+                state.user = user;
+                state.loginStatus = user !== null;
+                state.impersonating = false;
+            }
+        },
+        getters: {
+            userPermissions: state => {
+                if(!state.user) { return null; }
+                return new UserPermissions(state.user.permissions);
+            },
+            userPreferences: state => {
+                if(!state.user) { return null; }
+                return new UserPreferences(state.user.preferences);
+            }
+        },
+        actions: {
+            determineLoginStatus({ commit, state }) {
+                return new Promise((resolve) => {
+                    if(state.loginStatus != null) {
+                        resolve(state.loginStatus);
+                        return;
+                    }
+
+                    console.log('Determining login status');
+
+                    let authApi = new AuthApi(null);
+                    authApi.login(null, null, null).then((response) => {
+                        console.log(response);
+                        if(response.impersonating === true) {
+                            commit('setImpersonating', response.user);
+                        } else {
+                            commit('setUser', response.user);
+                        }
+                        resolve(true);
+                    }).catch(() => {
+                        commit('setUser', null);
+                        resolve(false);
+                    })
+                });
+
+            }
+        }
+    });
+};

package/src/styles/_variables.scss

@@ -19,4 +19,5 @@ $menu-item-active-color: lighten($grey, 4%);
 //$link-focus-border: $primary;
 
 // Import Bulma's core
+// TODO: wtf is going on here??
 @import "~bulma/sass/utilities/_all";

package/src/styles/app.scss

@@ -50,14 +50,27 @@ pre.no-pre {
 }
 
 .slide-left-enter-active, .slide-left-leave-active {
-  transition: transform 0.4s ease, opacity 0.4s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .slide-left-leave-to {
-  transform: translateY(2em);
+  transform: translateX(1em);
   opacity: 0;
 }
 
 .slide-left-enter {
+  transform: translateX(-1em);
+  opacity: 0;
+}
+
+.slide-up-enter-active, .slide-up-leave-active {
+  transition: transform 0.4s ease, opacity 0.4s ease;
+}
+.slide-up-leave-to {
+  transform: translateY(2em);
+  opacity: 0;
+}
+
+.slide-up-enter {
   transform: translateY(-2em);
   opacity: 0;
 }

package/src/login.js

@@ -1,17 +0,0 @@
-import Vue from "vue";
-import Buefy from "buefy";
-import './styles/app.scss';
-import './styles/login.scss';
-import {morphToNotification} from "./api";
-
-Vue.use(Buefy, {
-    defaultIconComponent: 'vue-fontawesome',
-    defaultIconPack: 'fas',
-});
-
-var app = new Vue({
-}).$mount('#app');
-
-if(typeof window.OXYGEN_SESSION_NOTIFICATION !== 'undefined') {
-    app.$buefy.toast.open(morphToNotification(window.OXYGEN_SESSION_NOTIFICATION));
-}

package/src/routes.js

@@ -1,61 +0,0 @@
-import ViewProfile from "./components/ViewProfile.vue";
-import AuthenticationLog from "./components/AuthenticationLog.vue";
-import MediaPage from "./components/MediaPage.vue";
-import MediaResponsiveImages from "./components/MediaResponsiveImages.vue";
-
-const UserProfileRoutes =  [
-    {
-        path: '/auth/profile',
-        name: 'auth.viewProfile',
-        component: ViewProfile,
-        meta: { title: 'View Profile' }
-    },
-    {
-        path: '/auth/login-log',
-        component: AuthenticationLog,
-        meta: { title: 'Logins & Login Attempts' }
-    },
-];
-
-const MediaRoutes = [
-    {
-        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'}
-    }
-];
-
-export { UserProfileRoutes, MediaRoutes };