@oxygen-cms/ui 1.5.0

package/src/UserPreferences.js

@@ -0,0 +1,69 @@
+// ================================
+//             Notification
+// ================================
+
+import AuthApi from "./AuthApi";
+
+const isDefined = (o) => {
+    return typeof o !== 'undefined' && o !== null;
+};
+
+class UserPreferences {
+
+    constructor(preferences) {
+        this.preferences = preferences;
+    }
+
+    static setBuefy($buefy) {
+        this.$buefy = $buefy;
+        this.authApi = new AuthApi(this.$buefy);
+    }
+
+    get(key, fallback = null) {
+        let o = this.preferences;
+
+        if(!isDefined(o)) {
+            return fallback;
+        }
+
+        var parts = key.split('.');
+        //var last = parts.pop();
+        var l = parts.length;
+        var i = 0;
+
+        while(isDefined(o) && i < l) {
+            var idx = parts[i];
+            o = o[idx];
+            i++;
+        }
+
+        if (isDefined(o)) {
+            return o;
+        } else {
+            console.log('Preferences key ', key, 'was not defined, using default ', fallback);
+            return fallback;
+        }
+    }
+
+    has(key) {
+        let o = this.preferences;
+        if(!o) {
+            return false;
+        }
+
+        var parts = key.split('.');
+        var l = parts.length;
+        var i = 1;
+        var current = parts[0];
+
+        while((o = o[current]) && i < l) {
+            current = parts[i];
+            i++;
+        }
+
+        return !!o;
+    }
+}
+
+export default UserPreferences;
+

package/src/UserPreferences.test.js

@@ -0,0 +1,23 @@
+import UserPreferences from './UserPreferences';
+
+jest.mock('./AuthApi');
+
+test('gets and sets preferences', async () => {
+    UserPreferences.setBuefy({});
+    UserPreferences.authApi.userDetails.mockResolvedValue({
+        user: {
+            preferences: {
+                foo: 'bar',
+                baz: { qux: 'fub '}
+            }
+        }
+    });
+
+    let prefs = await UserPreferences.load();
+
+    expect(prefs.get('foo')).toBe('bar');
+    expect(prefs.has('fob')).toBe(false);
+    expect(prefs.has('baz.qux')).toBe(true);
+    expect(prefs.get('bar.qux2', 'fallback')).toBe('fallback');
+
+});

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

@@ -0,0 +1,209 @@
+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'];
+}
+
+export class FetchBuilder {
+    constructor($buefy, method) {
+        this.$buefy = $buefy;
+        this.method = method;
+        this.headers = new Headers();
+        this.body = undefined;
+    }
+    wantJson() {
+        this.headers.set('Accept', 'application/json');
+        return this;
+    }
+    setContentType(type) {
+        this.headers.set('Content-Type', type);
+        return this;
+    }
+    setBody(body) {
+        this.body = body;
+        return this;
+    }
+    withJson(json) {
+        this.body = JSON.stringify(json);
+        this.setContentType('application/json');
+        return this;
+    }
+
+    withQueryParams(queryParams) {
+        this.queryParams = queryParams;
+        return this;
+    }
+
+    cookies() {
+        this.credentials = 'same-origin';
+        return this;
+    }
+
+    async setXsrfTokenHeader() {
+        if(xsrfToken === null) {
+            await initCsrfCookie();
+        }
+        this.headers.set('X-XSRF-TOKEN', xsrfToken);
+    }
+
+    async fetch(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(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);
+
+        let data = {};
+        try {
+            data = await response.json();
+        } catch(e) {
+            if(response.status === 413) {
+                this.$buefy.notification.open({
+                    message: 'Upload failed: file(s) too large',
+                    type: 'is-danger',
+                    animation: 'fade',
+                    queue: false
+                });
+                return {};
+            } 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;
+            }
+        }
+
+        if(response.ok && data.status !== 'failed') {
+            return data;
+        }
+
+        handleAPIError(data, this.$buefy, FetchBuilder.router, response);
+        let e = new Error('Received an error response from API call');
+        e.response = data;
+        throw e;
+    }
+
+    static default($buefy, method) {
+        return (new FetchBuilder($buefy, method))
+            .cookies()
+            .wantJson();
+    }
+
+    static setRouter(router) {
+        FetchBuilder.router = router;
+    }
+}
+
+function statusToBueify(status) {
+    if(status === 'failed') {
+        return 'is-danger';
+    } else {
+        return `is-${status}`;
+    }
+}
+
+export function morphToNotification(data) {
+    return {
+        message: data.content,
+        type: statusToBueify(data.status),
+        indefinite: data.duration === 'indefinite',
+        duration: data.duration ? data.duration : 4000,
+        queue: false
+    };
+}
+
+const handleAPIError = function(content, $buefy, $router, response) {
+    console.error('API error: ', content);
+    if(response.status === 401 && content.code === 'unauthenticated') {
+        // server is telling us to login again
+        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.exception) {
+        $buefy.notification.open({
+            message:
+                '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 if(response.status === 500) {
+        $buefy.notification.open({
+            message:'Whoops, looks like something went wrong.',
+            type: 'is-danger',
+            animation: 'fade',
+            queue: false
+        });
+    }
+};
+
+export function getXsrfToken() {
+    return xsrfToken;
+}
+
+FetchBuilder.router = null;

package/src/components/App.vue

@@ -0,0 +1,61 @@
+<template>
+    <div style="height: 100%;">
+<!--        <transition name="slide-left" mode="out-in">-->
+            <router-view @logout="signOut">
+                <template #main-navigation>
+                    <slot name="app-navigation"></slot>
+                </template>
+            </router-view>
+<!--        </transition>-->
+    </div>
+</template>
+
+<script>
+    import AuthApi from "../AuthApi";
+    export default {
+        name: "App",
+        props: {
+            appTitle: { type: String, required: true },
+            defaultRouteTitle: { type: String, required: true },
+            impersonating: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                user: null,
+                authApi: new AuthApi(this.$buefy),
+                userPermissions: null
+            }
+        },
+        watch: {
+            '$route' (to) {
+                this.setTitle(to.meta.title);
+            },
+        },
+        created() {
+            this.setTitle(this.$route.meta.title);
+            this.$root.$on('update-route-title', (title) => {
+                this.setTitle(title);
+            });
+        },
+        methods: {
+            setTitle(title) {
+                document.title = (title || this.defaultRouteTitle) + ' - ' + this.appTitle;
+            },
+            async signOut() {
+                await this.authApi.logout();
+                this.$store.commit('setUser', null);
+                await this.$router.push('/auth/logout');
+            },
+            stopImpersonating() {
+                this.authApi.stopImpersonating();
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    @import '../styles/app.scss';
+</style>

package/src/components/AuthenticatedLayout.vue

@@ -0,0 +1,254 @@
+<template>
+    <div class="is-flex is-flex-direction-row" style="height: 100%;">
+        <div :class="'left-navigation-container' + (collapsed ? ' is-collapsed' : '')">
+
+            <div class="app-logo-title">
+                <router-link to="/" class="app-logo-title-link">
+                    <img src="../../assets/oxygen-icon.png" alt="Oxygen CMS" class="app-logo">
+                    <router-link v-if="!collapsed" to="/" class="app-title">Oxygen CMS</router-link>
+                </router-link>
+                <span class="is-flex-grow-1"></span>
+                <b-button v-if="!requestedCollapsed" type="is-light" :icon-left="collapsed ? 'angle-right' : 'angle-left'" class="collapse-menu-button" @click="setCollapsed = !setCollapsed"></b-button>
+            </div>
+
+            <b-menu class="left-navigation">
+                <slot name="main-navigation" :collapsed="collapsed"></slot>
+            </b-menu>
+
+            <div :class="'user-info' + (impersonating ? ' has-background-warning' : '')">
+                <b-dropdown aria-role="list" :position="collapsed ? 'is-top-right' : 'is-top-left'" expanded>
+                    <template #trigger>
+                        <div class="user-dropdown">
+                            <div v-if="!collapsed" class="user-dropdown-text">
+                                <strong v-if="impersonating">Temporarily logged-in as<br/></strong>
+                                <transition name="fade" mode="out-in">
+                                    <span v-if="user">{{ user.fullName }}</span>
+                                    <b-skeleton v-else size="is-medium" width="10em" :animated="true"></b-skeleton>
+                                </transition>
+                                <transition name="fade" mode="out-in">
+                                    <p v-if="user" class="is-size-7">{{ user.email }}</p>
+                                    <b-skeleton v-else width="8em" :animated="true"></b-skeleton>
+                                </transition>
+                            </div>
+                            <div class="is-flex-grow-1"></div>
+                            <div class="has-background-grey-light centered-icon" style="display: inline-block;">
+                                <b-icon icon="user" size="is-large" class="has-text-grey-lighter"></b-icon>
+                            </div>
+                        </div>
+                    </template>
+                    <b-dropdown-item aria-role="listitem" has-link><router-link to="/user/profile"><b-icon icon="user-edit"></b-icon>Profile</router-link></b-dropdown-item>
+                    <b-dropdown-item aria-role="listitem" has-link><router-link to="/user/login-log"><b-icon icon="lock"></b-icon>Account Security</router-link></b-dropdown-item>
+                    <b-dropdown-item separator></b-dropdown-item>
+                    <b-dropdown-item aria-role="listitem" @click="$emit('logout')"><b-icon icon="sign-out-alt"></b-icon>Sign Out</b-dropdown-item>
+                    <b-dropdown-item v-if="impersonating" aria-role="listitem" @click="stopImpersonating"><b-icon icon="times"></b-icon>Stop impersonating</b-dropdown-item>
+                </b-dropdown>
+            </div>
+        </div>
+
+        <div class="no-pad full-height-container content-column">
+
+            <transition name="slide-up" mode="out-in">
+                <router-view></router-view>
+            </transition>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import UsersApi from "../UsersApi";
+import {morphToNotification} from "../api";
+import {isNavigationFailure, NavigationFailureType} from "vue-router/src/util/errors";
+
+export default {
+    name: "AuthenticatedLayout",
+    emits: ["logout"],
+    data() {
+        return {
+            usersApi: new UsersApi(this.$buefy),
+            setCollapsed: false,
+            requestedCollapsed: false
+        }
+    },
+    computed: {
+        impersonating() { return this.$store.state.impersonating; },
+        user() { return this.$store.state.user; },
+        userPreferences() { return this.$store.getters.userPreferences; },
+        collapsed() {
+            return this.setCollapsed || this.requestedCollapsed;
+        }
+    },
+    mounted() {
+        console.log('mounted', this.$store);
+        this.setGlobalFontSize()
+    },
+    methods: {
+        setGlobalFontSize() {
+            let fontSize = this.userPreferences.get('fontSize', '100%');
+            console.log('Setting global font size to ', fontSize);
+            if(fontSize !== '100%') {
+                window.document.documentElement.style.fontSize = fontSize;
+            }
+        },
+        async stopImpersonating() {
+            let response = await this.usersApi.stopImpersonating();
+            this.$buefy.notification.open(morphToNotification(response));
+            this.$store.commit('stopImpersonating', response.user);
+            // ignore duplicated navigation failure
+            await this.$router.push({ path: '/' }).catch(failure => {
+                if(!isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+                    throw failure;
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import 'util.css';
+    @import '../styles/_variables.scss';
+
+    .left-navigation-container {
+        padding: 0 !important;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        max-width: 550px;
+        border-right: 1px solid $grey-lighter;
+        transition: max-width 0.5s ease;
+    }
+
+    .left-navigation-container.is-collapsed {
+        max-width: 5rem;
+    }
+
+    .app-logo-title {
+        display: flex;
+        align-items: center;
+        padding: 1rem 0;
+    }
+
+    .app-logo {
+        width: 3rem;
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+
+    .app-logo-title-link {
+        display: flex;
+        align-items: center;
+    }
+
+    .app-title {
+        color: $text;
+        font-size: 1.1rem;
+    }
+
+    .app-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .left-navigation {
+        flex: 1;
+        padding: 1rem 1rem 1rem 2rem;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .content-column {
+        flex: 4;
+    }
+
+    ::v-deep .router-link-exact-active {
+        // background-color: $link-invert !important;
+        color: $black-bis !important;
+        font-weight: 700;
+    }
+
+    ::v-deep .menu-list .icon {
+        margin-right: 1rem;
+    }
+
+    .user-dropdown {
+        padding: 1rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+
+    .columns {
+        margin: 0;
+    }
+
+    .no-pad {
+        padding: 0;
+    }
+
+    .content-column {
+        background-color: $white-ter;
+    }
+
+    .dropdown-content .icon {
+        margin-right: 0.5rem;
+    }
+
+    .app-logo-title:hover .collapse-menu-button {
+        opacity: 1.0;
+    }
+
+    .collapse-menu-button {
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        margin-right: 1rem;
+        z-index: 10;
+    }
+
+    .is-collapsed {
+        .collapse-menu-button {
+            margin-left: 1rem;
+        }
+
+        .left-navigation {
+            padding: 0;
+            text-align: center;
+        }
+
+        ::v-deep .menu-label {
+            text-indent: -9999px;
+            height: 0;
+            border-bottom: 1px solid $grey-lighter;
+        }
+
+        ::v-deep .icon-text > span:not(.icon) {
+            display: none;
+        }
+
+        ::v-deep .menu-list .icon {
+            margin-right: 0;
+        }
+
+        ::v-deep .menu-list li ul {
+            border-left: 0;
+            margin: 0;
+            padding-left: 0;
+        }
+
+        .app-logo-title-link {
+            width: 5rem;
+            flex-direction: column;
+        }
+
+        .app-logo-title {
+            display: block;
+            position: relative;
+        }
+
+        .collapse-menu-button {
+            position: absolute;
+            top: 1rem;
+            left: 4.5rem;
+        }
+    }
+</style>