@oxygen-cms/ui 1.5.0

package/src/components/GroupsList.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="box">
+        <div class="level">
+            <div class="level-left">
+                <h1 class="title">Groups</h1>
+            </div>
+            <div class="level-right">
+            </div>
+        </div>
+
+        <b-table :data="paginatedItems.items === null ? [] : paginatedItems.items" :loading="paginatedItems.loading">
+            <b-table-column v-slot="props" label="">
+                <GenericEditableField :api="groupsApi" :data="props.row" field-name="icon" @update:data="updateGroup">
+                    <template #display="{ value, edit }">
+                        <b-icon :icon="value" size="is-small"></b-icon>
+                        <EditButtonOnRowHover :edit="edit" />
+                    </template>
+                </GenericEditableField>
+            </b-table-column>
+            <b-table-column v-slot="props" label="Name">
+                <GenericEditableField :api="groupsApi" :data="props.row" field-name="name" @update:data="updateGroup" />
+            </b-table-column>
+            <b-table-column v-slot="props" label="Description">
+                <GenericEditableField :api="groupsApi" :data="props.row" field-name="description" @update:data="updateGroup" />
+            </b-table-column>
+            <b-table-column v-slot="props" label="Nickname">
+                <GenericEditableField :api="groupsApi" :data="props.row" field-name="nickname" @update:data="updateGroup">
+                    <template #display="{ value, edit }">
+                        <code>{{ value }}</code>
+                        <EditButtonOnRowHover :edit="edit" />
+                    </template>
+                </GenericEditableField>
+            </b-table-column>
+            <b-table-column v-slot="props" label="Created">
+                <UserJoined :user="props.row"></UserJoined>
+            </b-table-column>
+            <b-table-column v-slot="props" label="" width="25em">
+                <div class="buttons">
+                    <b-button v-if="props.row.deletedAt" rounded outlined icon-left="recycle" size="is-small" @click="restoreItem(props.row.id)">Restore</b-button>
+                    <b-button v-if="props.row.deletedAt" rounded type="is-danger" outlined icon-left="trash" size="is-small" @click="forceDeleteItem(props.row.id)">Delete Forever</b-button>
+                    <b-button v-if="!props.row.deletedAt" rounded icon-left="trash"  size="is-small" @click="deleteItem(props.row.id)">Delete</b-button>
+                </div>
+            </b-table-column>
+        </b-table>
+
+        <hr />
+
+        <div class="content">
+            <h3>Permissions</h3>
+            <p>To edit group permissions, you will need access to the <code>artisan</code> console command which comes installed with this application.</p>
+            <p>Here are some getting-started tips:</p>
+            <pre><code>
+# list all permissions recognised the application
+artisan permissions
+
+# list permissions explictly set for the "admin" group
+artisan permissions admin
+
+# list all permissions for the "admin" group
+artisan permissions admin -a
+
+# grant a permission to group "admin"
+artisan permissions admin --grant pages.postCreate
+
+# unset a permission for group "admin"
+artisan permissions admin --unset pages.postCreate
+
+# explicitly deny a permission for group "admin"
+artisan permissions admin --deny pages.postCreate
+
+# sets that "pages" should inherit their permissions from "_content"
+artisan permissions admin --inherit pages:_content</code></pre>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import GroupsApi from "../GroupsApi";
+import UserJoined from "./UserJoined.vue";
+import GenericEditableField from "./GenericEditableField.vue";
+import EditButtonOnRowHover from "./EditButtonOnRowHover.vue";
+
+export default {
+    name: "GroupsList",
+    components: { UserJoined, GenericEditableField, EditButtonOnRowHover },
+    data() {
+        return {
+            groupsApi: new GroupsApi(this.$buefy),
+            paginatedItems: {items: null, totalItems: null, itemsPerPage: null, loading: false, currentPage: 1},
+        }
+    },
+    async mounted() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            this.paginatedItems.loading = true;
+            let data = await this.groupsApi.list(false, this.paginatedItems.currentPage, null);
+            this.paginatedItems.items = data.items;
+            this.paginatedItems.totalItems = data.totalItems;
+            this.paginatedItems.itemsPerPage = data.itemsPerPage;
+            this.paginatedItems.loading = false;
+        },
+        updateGroup(group) {
+            this.paginatedItems.items = this.paginatedItems.items.map(g => {
+                return g.id === group.id ? group : g;
+            });
+            this.$emit('updated');
+        },
+        async deleteItem(id) {
+            await this.groupsApi.deleteAndNotify(id);
+            await this.fetchData();
+        },
+        async forceDeleteItem(id) {
+            await this.groupsApi.confirmForceDelete(id);
+            await this.fetchData();
+        },
+        async restoreItem(id) {
+            await this.groupsApi.restoreAndNotify(id);
+            await this.fetchData();
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ImportExport.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="content">
+      <h3>Export Data</h3>
+      <p>
+        Create a backup of all the content and settings of the website.<br>
+        It is recommended to make regular backups to ensure the safety of your content.
+      </p>
+      <b-button type="is-primary" size="is-medium" :loading="exporting" @click="processDownload">Download data as `.zip`</b-button>
+
+      <h3>Import Data</h3>
+      <p>To restore the contents and settings of this site from a backup, use the Artisan Console.</p>
+    </div>
+</template>
+
+<script>
+import {FetchBuilder} from "../api";
+import {API_ROOT} from "../CrudApi";
+
+export default {
+    name: "ImportExport",
+    data() {
+        return {
+            exporting: false
+        }
+    },
+    methods: {
+        async processDownload() {
+            this.exporting = true;
+            let builder = (new FetchBuilder(this.$buefy, 'post'))
+                .cookies();
+            await builder.setXsrfTokenHeader();
+            let response = await window.fetch(API_ROOT + "import-export/export", { ... builder });
+            this.$buefy.notification.open({ message: 'Export successful', type: 'is-success', queue: false });
+            let blob = await response.blob();
+            let file = window.URL.createObjectURL(blob);
+            this.exporting = false;
+            window.location.assign(file);
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/LegacyPage.vue

@@ -0,0 +1,256 @@
+<template>
+    <div class="full-height full-height-container legacy-container">
+        <transition name="fade">
+            <iframe v-show="!loading" ref="iframe" class="iframe" />
+        </transition>
+
+        <MediaInsertModal :active.sync="isInsertMediaItemModalActive" @close="closeInsertMediaItemModal" @select="onFilesSelected" />
+    </div>
+</template>
+
+<script>
+import MediaInsertModal from "./media/MediaInsertModal.vue";
+
+import { morphToNotification } from "../api";
+import MediaApi from "../MediaApi";
+
+// from https://gist.github.com/hdodov/a87c097216718655ead6cf2969b0dcfa
+
+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() {
+        // Remove the unloadHandler in case it was already attached.
+        // Otherwise, the change will be dispatched twice.
+        iframe.contentWindow.removeEventListener("unload", unloadHandler);
+        iframe.contentWindow.addEventListener("unload", unloadHandler);
+    }
+
+    iframe.addEventListener("load", attachUnload);
+    attachUnload();
+}
+
+// This component manages the tricky/hacky integration of two incompatible GUI systems.
+// Legacy pages are rendered inside an iframe, and legacy pages can transition between each other using SmoothState.js
+// When the iframe location is updated, so is the url of the parent page using this.$router.push()
+
+export default {
+    name: "LegacyPage",
+    components: { MediaInsertModal },
+    beforeRouteLeave(to, from, next) {
+        window.document.body.style.overflowY = 'auto';
+        window.document.documentElement.style.overflowY = 'auto';
+        this.$parent.$data.requestedCollapsed = false;
+        next();
+    },
+    props: {
+        fullPath: { type: String, required: true },
+        legacyPrefix: { type: String, required: true },
+        adminPrefix: { type: String, required: true }
+    },
+    'watch': {
+        'fullPath': 'onFullPathChanged'
+    },
+    data() {
+        return {
+            loadingPath: null,
+            currentPath: null,
+            isInsertMediaItemModalActive: false,
+            resolveInsertMediaItems: null,
+            rejectInsertMediaItems: null
+        }
+    },
+    computed: {
+        loading() { return this.loadingPath !== null; },
+        userPreferences() { return this.$store.getters.userPreferences; }
+    },
+    async mounted() {
+        this.loadingPath = 'prefs';
+
+        window.document.body.style.overflowY = 'hidden';
+        window.document.documentElement.style.overflowY = 'hidden';
+        let iframe = this.$refs.iframe;
+
+        iframeURLChange(iframe, this.onNavigated.bind(this), this);
+
+        this.loadPath(this.$route.fullPath);
+
+        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();
+        }
+    },
+    unmounted() {
+        this.$parent.$data.requestedCollapsed = false;
+    },
+    methods: {
+        onFullPathChanged(newFullPath) {
+            console.log('Route changed', );
+            this.loadPath(newFullPath);
+        },
+        setupIframeIntegrations() {
+            console.log('[LegacyPage] Setting up iframe integrations for', this.$refs.iframe.contentWindow.location.href);
+            let elem = this.$refs.iframe;
+            elem.contentWindow.Oxygen = elem.contentWindow.Oxygen || {};
+            elem.contentWindow.Oxygen.user = this.userPreferences.preferences;
+            elem.contentWindow.Oxygen.onNavigationBegin = this.onNavigated.bind(this);
+            elem.contentWindow.Oxygen.onNavigationEnd = this.onLoaded.bind(this);
+            elem.contentWindow.Oxygen.notify = this.showInnerNotification.bind(this);
+            elem.contentWindow.Oxygen.openAlertDialog = this.openAlertDialog.bind(this);
+            elem.contentWindow.Oxygen.hardRedirect = this.hardRedirect.bind(this);
+            elem.contentWindow.Oxygen.insertMediaItem = this.openInsertMediaItemModal.bind(this);
+            elem.contentWindow.Oxygen.openConfirmDialog = this.openConfirmDialog.bind(this);
+            elem.contentWindow.Oxygen.popState = this.popState.bind(this);
+            elem.contentWindow.Oxygen.onToggleFullscreen = this.onToggleFullscreen.bind(this);
+
+            if(elem.contentWindow.Oxygen.onLoadedInsideIFrame) {
+                elem.contentWindow.Oxygen.onLoadedInsideIFrame();
+            } else {
+                console.warn('[LegacyPage] no onLoadedInsideIFrame callback set');
+            }
+        },
+        fullURLToVuePath(url) {
+            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] };
+            } else if(urlObj.pathname.startsWith(this.adminPrefix)) {
+                return { loadInside: 'vue', location: urlString.split(this.adminPrefix)[1] };
+            } else {
+                return { loadInside: false, location: urlString };
+            }
+        },
+        vuePathToURL(path) {
+            return this.legacyPrefix + path;
+        },
+        // We detect when the iframe url changes, and update our window accordingly...
+        onNavigated(newURL) {
+            console.log('[LegacyPage] Navigated to ' + newURL);
+        },
+        showInnerNotification(data) {
+            this.$buefy.notification.open(morphToNotification(data));
+        },
+        openAlertDialog(message) {
+            this.$buefy.dialog.alert({
+                message: message,
+                size: 'is-small'
+            });
+        },
+        openConfirmDialog(options) {
+            this.$buefy.dialog.confirm(options);
+        },
+        popState() {
+            this.$router.back();
+        },
+        onLoaded() {
+            let path = this.$refs.iframe.contentWindow.location.href;
+            if(path === 'about:blank') { return; }
+            console.log('[LegacyPage] Loaded', path);
+
+            if(path !== this.currentPath) {
+                let { loadInside, location } = this.fullURLToVuePath(path);
+                console.log('[LegacyPage] ', loadInside, location);
+                if(loadInside === 'iframe') {
+                    window.history.pushState({}, "", location);
+                } else if(loadInside === 'vue') {
+                    this.$router.push(location);
+                } else {
+                    // load outside of iframe
+                    window.location = location;
+                }
+
+                this.currentPath = path;
+            }
+
+            document.title = this.$refs.iframe.contentDocument.title;
+            this.setupIframeIntegrations();
+
+            this.loadingPath = null;
+        },
+        loadPath(routePath) {
+            let path = this.vuePathToURL(routePath);
+            if(path === '/oxygen/view/auth/login') {
+                console.log('[LegacyPage] Need to login again, redirecting...');
+                window.location.replace('/oxygen/view/auth/login');
+            }
+
+            console.log('[LegacyPage] Loading', path);
+
+            this.loadingPath = path;
+
+            let elem = this.$refs.iframe;
+            if(elem.src !== path) {
+                // load the page from scratch
+                elem.src = path;
+            }
+        },
+        hardRedirect(loc) {
+            window.location.replace(loc);
+        },
+        openInsertMediaItemModal() {
+            this.isInsertMediaItemModalActive = true;
+            return new Promise((resolve, reject) => {
+                this.resolveInsertMediaItems = resolve;
+                this.rejectInsertMediaItems = reject;
+            });
+        },
+        closeInsertMediaItemModal() {
+            this.rejectInsertMediaItems({ message: 'modal closed' });
+            this.isInsertMediaItemModalActive = false;
+        },
+        onFilesSelected(files) {
+            let include = files.map(item => MediaApi.generateIncludeStatement(item)).join("\n") + "\n";
+            let filenames = files.map(item => item.fullPath).join(",");
+            this.resolveInsertMediaItems(include);
+            this.isInsertMediaItemModalActive = false;
+            this.$buefy.toast.open({
+                message: 'Inserted ' + filenames,
+                type: 'is-info',
+                queue: false
+            });
+        },
+        onToggleFullscreen(mode) {
+            this.$parent.$data.requestedCollapsed = mode;
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import  './util.css';
+    @import '../styles/_variables.scss';
+
+    .iframe {
+        flex: 1;
+        width: 100%;
+    }
+
+    .hidden {
+        transition: opacity 1s ease, visibility 1s ease;
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    .visible {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .legacy-container {
+        position: relative;
+        background-color: $grey-lightest;
+    }
+</style>

package/src/components/UserJoined.vue

@@ -0,0 +1,35 @@
+<template>
+    <span>{{ joined }}, on {{ joinedAbs }}</span>
+</template>
+
+<script>
+import Internationalize from "../Internationalize";
+
+export default {
+    name: "UserJoined",
+    props: {
+        user: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        joined() {
+            const rtf1 = new Intl.RelativeTimeFormat('en', { style: 'narrow' });
+            let daysSinceJoined = (new Date(this.user.createdAt) - new Date()) / (1000 * 24 * 60 * 60);
+            let shouldUseYears = daysSinceJoined < -400;
+            return rtf1.format(
+                Math.round(shouldUseYears ? daysSinceJoined / 365 : daysSinceJoined),
+                shouldUseYears ? 'year' : 'day'
+            );
+        },
+        joinedAbs() {
+            return Internationalize.formatDate(this.user.createdAt);
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/UserManagement.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="full-height scroll-container pad">
+        <div class="box">
+            <div class="level">
+                <div class="level-left">
+                    <h1 class="title">Users</h1>
+                </div>
+                <div class="level-right">
+                    <b-input v-model="searchQuery" icon-left="search" rounded placeholder="Search for users..." class="mr-4"></b-input>
+                    <b-button type="is-success" icon-left="plus" @click="isCreateUserModalActive = true">Create Account</b-button>
+                </div>
+            </div>
+
+            <b-table :data="paginatedItems.items === null ? [] : paginatedItems.items" :loading="paginatedItems.loading">
+                <b-table-column v-slot="props" label="Full Name">
+                    <GenericEditableField :api="usersApi" :data="props.row" field-name="fullName" @update:data="updateUser">
+                        <template #display="{ value, edit }">
+                            <p>
+                                {{ value }}
+                                <EditButtonOnRowHover :edit="edit" />
+                            </p>
+                        </template>
+                    </GenericEditableField>
+                </b-table-column>
+                <b-table-column v-slot="props" label="Email">
+                    <GenericEditableField :api="usersApi" :data="props.row" field-name="email" type="email" @update:data="updateUser">
+                        <template #display="{ value, edit }">
+                            <p>
+                                <a :href="'mailto:' + value" target="_blank" class="is-size-7">{{ value }}</a>
+                                <EditButtonOnRowHover :edit="edit" />
+                            </p>
+                        </template>
+                    </GenericEditableField>
+                </b-table-column>
+                <b-table-column v-slot="props" label="Group">
+                    <GenericEditableField :api="usersApi" :data="props.row" field-name="group" @update:data="updateUser">
+                        <template #display="{ value, edit }">
+                            <p>
+                                {{ value.name }}
+                                <EditButtonOnRowHover :edit="edit" />
+                            </p>
+                        </template>
+                        <template #edit="{ initialValue, submit, updating }">
+                            <GroupsChooser :value="initialValue" :updating="updating" @select="submit" />
+                        </template>
+                    </GenericEditableField>
+                </b-table-column>
+                <b-table-column v-slot="props" label="Username">
+                    <GenericEditableField :api="usersApi" :data="props.row" field-name="username" @update:data="updateUser">
+                        <template #display="{ value, edit }">
+                            <p>
+                                {{ value }}
+                                <EditButtonOnRowHover :edit="edit" />
+                            </p>
+                        </template>
+                    </GenericEditableField>
+                </b-table-column>
+                <b-table-column v-slot="props" label="Email Verified">
+                    {{ props.row.emailVerified ? 'Yes' : 'No' }}
+                </b-table-column>
+                <b-table-column v-slot="props" label="Two-Factor Auth">
+                    {{ props.row.twoFactorAuthEnabled ? 'Yes' : 'No' }}
+                </b-table-column>
+                <b-table-column v-slot="props" label="Joined">
+                    <UserJoined :user="props.row"></UserJoined>
+                </b-table-column>
+                <b-table-column v-slot="props" label="" width="25em">
+                    <div class="buttons">
+                        <b-button rounded icon-left="sign-in-alt" size="is-small" type="is-info" @click="impersonate(props.row.id)">Login as this user</b-button>
+                        <b-button v-if="props.row.deletedAt" rounded icon-left="trash" size="is-small" type="is-danger" @click="forceDelete(props.row.id)">Delete Forever</b-button>
+                        <b-button v-if="!props.row.deletedAt" rounded icon-left="minus-circle" size="is-small" @click="deactivate(props.row.id)">Deactivate</b-button>
+                        <b-button v-else rounded icon-left="plus" size="is-small" type="is-success" @click="activate(props.row.id)">Activate</b-button>
+                    </div>
+                </b-table-column>
+            </b-table>
+
+            <CreateUserModal :active.sync="isCreateUserModalActive" @update:users="fetchData" />
+        </div>
+
+        <GroupsList @updated="fetchData" />
+    </div>
+</template>
+
+<script>
+import UsersApi from "../UsersApi";
+import UserJoined from "./UserJoined.vue";
+import {morphToNotification} from "../api";
+import {isNavigationFailure, NavigationFailureType} from "vue-router/src/util/errors";
+import GenericEditableField from "./GenericEditableField.vue";
+import GroupsChooser from "./GroupsChooser.vue";
+import GroupsList from "./GroupsList.vue";
+import EditButtonOnRowHover from "./EditButtonOnRowHover.vue";
+import CreateUserModal from "./users/CreateUserModal.vue";
+
+export default {
+    name: "UserManagement",
+    components: {
+        CreateUserModal,
+        EditButtonOnRowHover, GroupsChooser, GenericEditableField, UserJoined, GroupsList},
+    data() {
+        return {
+            usersApi: new UsersApi(this.$buefy),
+            selectedUser: null,
+            searchQuery: null,
+            isCreateUserModalActive: false,
+            paginatedItems: {items: null, totalItems: null, itemsPerPage: null, loading: false, currentPage: 1},
+        }
+    },
+    watch: {
+        'searchQuery': 'fetchData'
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            this.paginatedItems.loading = true;
+            let data = await this.usersApi.list(false, this.paginatedItems.currentPage, this.searchQuery);
+
+            this.paginatedItems.items = data.items;
+            this.paginatedItems.totalItems = data.totalItems;
+            this.paginatedItems.itemsPerPage = data.itemsPerPage;
+            this.paginatedItems.loading = false;
+        },
+        async impersonate(id) {
+            const promise = new Promise((resolve) => {
+                this.$buefy.dialog.confirm({
+                    message: 'This super-admin functionality allows you to impersonate another user. Are you sure you want to continue?',
+                    onConfirm: resolve
+                });
+            });
+
+            await promise;
+            let response = await this.usersApi.impersonate(id);
+            console.log(response);
+            this.$buefy.notification.open(morphToNotification(response));
+            this.$store.commit('setImpersonating', response.user);
+            // ignore duplicated navigation failure
+            await this.$router.push({ path: '/' }).catch(failure => {
+                if(!isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+                    throw failure;
+                }
+            });
+        },
+        async deactivate(id) {
+            await this.usersApi.deleteAndNotify(id);
+            await this.fetchData();
+        },
+        async activate(id) {
+            await this.usersApi.restoreAndNotify(id);
+            await this.fetchData();
+        },
+        async forceDelete(id) {
+            await this.usersApi.confirmForceDelete(id);
+            await this.fetchData();
+        },
+        updateUser(user) {
+            this.paginatedItems.items = this.paginatedItems.items.map(u => {
+                return u.id === user.id ? user : u;
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+    @import './util.css';
+</style>