@oxygen-cms/ui 1.5.0

package/src/components/AuthenticationLog.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="full-height scroll-container pad">
+        <div class="box">
+          <h1 class="title">Active Sessions <b-button icon-left="redo-alt" rounded @click="fetchSessions"></b-button>
+          </h1>
+
+
+          <b-table :data="sessions.items === null ? [] : sessions.items"
+                   :loading="sessions.loading">
+            <b-table-column v-slot="props" label="Browser / Device">
+              <b-tooltip :label="props.row.userAgent" animated>{{ parseUserAgent(props.row.userAgent) }}</b-tooltip>
+            </b-table-column>
+
+            <b-table-column v-slot="props" label="IP Address">
+              {{ props.row.ipAddress }}
+            </b-table-column>
+
+            <b-table-column v-slot="props" label="Location">
+              <div v-if="props.row.geolocationInfo !== null">
+                {{ props.row.geolocationInfo }}
+              </div>
+              <b-progress v-else></b-progress>
+            </b-table-column>
+
+            <b-table-column v-slot="props" label="Last Activity">
+              {{ Internationalize.formatDateTime(props.row.lastActivity) }}
+            </b-table-column>
+
+            <b-table-column v-slot="props" label="">
+              <b-tag v-if="props.row.current" type="is-success" style="text-transform: uppercase">Current Session</b-tag>
+              <b-button v-else size="is-small" type="is-warning" icon-left="sign-out-alt" @click="deleteSession(props.row.id)">Remove session</b-button>
+            </b-table-column>
+          </b-table>
+        </div>
+
+        <div class="box">
+            <h1 class="title">Logins, Logouts &amp; Login Attempts <b-button icon-left="redo-alt" rounded @click="paginatedItems.currentPage = 1; fetchLogins"></b-button></h1>
+
+            <b-table :data="paginatedItems.items === null ? [] : paginatedItems.items"
+                     :loading="paginatedItems.loading"
+                     paginated
+                     backend-pagination
+                     :per-page="paginatedItems.itemsPerPage"
+                     :total="paginatedItems.totalItems"
+                     :row-class="(row) => row.type === 1 ? 'is-danger' : ''"
+                     @page-change="paginatedItems.currentPage = $event">
+                <b-table-column v-slot="props" label="IP Address">
+                    {{ props.row.ipAddress }}
+                </b-table-column>
+
+                <b-table-column v-slot="props" label="Location">
+                    <div v-if="props.row.geolocationInfo !== null">
+                        {{ props.row.geolocationInfo }}
+                    </div>
+                    <b-progress v-else></b-progress>
+
+                </b-table-column>
+
+                <b-table-column v-slot="props" label="Browser / Device">
+                    <b-tooltip :label="props.row.userAgent" animated>{{ parseUserAgent(props.row.userAgent) }}</b-tooltip>
+
+                </b-table-column>
+
+                <b-table-column v-slot="props" label="Time">
+                    {{ Internationalize.formatDateTime(props.row.timestamp) }}
+                </b-table-column>
+
+                <b-table-column v-slot="props" label="Type">
+                    <span v-if="props.row.type === 0">
+                      <b-tag type="is-success is-light"><b-icon icon="sign-in-alt" /> Login</b-tag>
+                    </span>
+                    <span v-else-if="props.row.type === 1">
+                      <b-tag type="is-danger is-light"><b-icon icon="exclamation-triangle" /> Failed Login</b-tag>
+                    </span>
+                    <span v-else-if="props.row.type === 2">
+                      <b-tag><b-icon icon="sign-out-alt" /> Logout</b-tag>
+                    </span>
+                </b-table-column>
+            </b-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import {FetchBuilder} from "../api";
+import Internationalize from "../Internationalize";
+import UAParser from 'ua-parser-js';
+import AuthApi from "../AuthApi";
+
+const IP_INFO_LOADING = 'loading';
+
+export default {
+    name: "AuthenticationLog",
+    data() {
+        return {
+            authApi: new AuthApi(this.$buefy),
+            paginatedItems: { items: null, currentPage: 1, loading: true, totalItems: null, itemsPerPage: null },
+            sessions: { items: null, loading: true },
+            ipInfo: new Map(),
+            Internationalize
+        }
+    },
+    watch: {
+        'paginatedItems.currentPage': 'fetchData'
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchSessions() {
+          this.sessions.loading = true;
+          let response = await this.authApi.listUserSessions();
+          this.sessions.items = response.sessions.map((item) => { return { geolocationInfo: this.ipInfo.get(item.ipAddress), ...item } });
+          this.sessions.loading = false;
+          for(let item of this.sessions.items) {
+            this.geoIP(item.ipAddress);
+          }
+        },
+        async fetchLogins() {
+          this.paginatedItems.loading = true;
+          let data = await FetchBuilder
+              .default(this.$buefy, 'post')
+              .withQueryParams({ page: this.paginatedItems.currentPage })
+              .fetch('/oxygen/api/auth/login-log-entries');
+
+          this.paginatedItems.items = data.items.map((item) => { return { geolocationInfo: this.ipInfo.get(item.ipAddress), ...item } });
+          this.paginatedItems.totalItems = data.totalItems;
+          this.paginatedItems.loading = false;
+          this.paginatedItems.itemsPerPage = data.itemsPerPage;
+          for(let item of this.paginatedItems.items) {
+            this.geoIP(item.ipAddress);
+          }
+        },
+        async fetchData() {
+            this.fetchSessions();
+            this.fetchLogins();
+        },
+        geoIP(ip) {
+            if(this.ipInfo.has(ip)) {
+                if(this.ipInfo.get(ip) !== IP_INFO_LOADING) {
+                    this.updateInfoForIp(ip);
+                }
+                return;
+            }
+            this.ipInfo.set(ip, IP_INFO_LOADING);
+            FetchBuilder.default(this.$buefy, 'post')
+                .fetch('/oxygen/api/auth/ip-location/' + ip, (data) => data)
+                .then((data) => {
+                    this.ipInfo.set(ip, data);
+                    this.updateInfoForIp(ip);
+                }).catch(() => {
+                    this.updateInfoForIp(ip);
+                })
+        },
+        updateInfoForIp(ip) {
+            let geolocationInfo = this.ipInfo.has(ip) ? this.getGeolocationInfo(this.ipInfo.get(ip)) : '';
+            for(let item of this.paginatedItems.items) {
+                if(item.ipAddress === ip) {
+                    item.geolocationInfo = geolocationInfo;
+                }
+            }
+            for(let item of this.sessions.items) {
+              if(item.ipAddress === ip) {
+                item.geolocationInfo = geolocationInfo;
+              }
+            }
+        },
+        parseUserAgent(userAgent) {
+            let ua = new UAParser(userAgent);
+            let browser = ua.getBrowser();
+            let device = ua.getDevice();
+            // console.log(device);
+            return browser.name + ' ' + browser.version + ' on ' + ua.getOS().name + ', ' + (device.vendor ? device.vendor : '(unknown device)');
+        },
+        getGeolocationInfo(data) {
+            if(!data.city || !data.country_name) {
+                return 'unknown';
+            }
+            return data.city + ', ' + data.country_name;
+        },
+        async deleteSession(id) {
+            await this.authApi.deleteUserSession(id);
+            this.$buefy.notification.open({ message: 'User session removed', type: 'is-warning' });
+            await this.fetchData();
+        }
+    }
+}
+</script>
+
+<style scoped>
+    @import './util.css';
+
+    tr.is-danger {
+        color: #f00;
+    }
+</style>

package/src/components/CodeEditor.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="editor-container has-background-grey-darker" :style="'height: ' + height + ';'">
+        <transition name="fade">
+            <AceEditor
+                key="editor"
+                ref="ace"
+                :value="value"
+                :lang="lang"
+                :theme="theme"
+                width="100%"
+                height="100%"
+                :options="{
+                    enableBasicAutocompletion: true,
+                    enableLiveAutocompletion: true,
+                    fontSize: fontSize,
+                    highlightActiveLine: highlightActiveLine,
+                    enableSnippets: true,
+                    showLineNumbers: true,
+                    wrap: wrapMode,
+                    tabSize: 4,
+                    showPrintMargin: showPrintMargin,
+                    showInvisibles: showInvisibles,
+                    showGutter: true,
+            }"
+                @input="$emit('input', $event)"
+                @init="editorInit"
+            />
+        </transition>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "CodeEditor",
+    components: { AceEditor: require('vue2-ace-editor') },
+    props: {
+        value: { type: String, default: null },
+        height: { type: String, required: true },
+        lang: { type: String, required:  true }
+    },
+    data() {
+        return {
+        }
+    },
+    computed: {
+        wrapMode() {
+            return this.$store.getters.userPreferences.get('editor.ace.wordWrap');
+        },
+        highlightActiveLine() {
+            return this.$store.getters.userPreferences.get('editor.ace.highlightActiveLine');
+        },
+        showPrintMargin() {
+            return this.$store.getters.userPreferences.get('editor.ace.showPrintMargin');
+        },
+        showInvisibles() {
+            return this.$store.getters.userPreferences.get('editor.ace.showInvisibles');
+        },
+        theme() {
+            return this.$store.getters.userPreferences.get('editor.ace.theme').replace('ace/theme/', '');
+        },
+        fontSize() {
+            return this.$store.getters.userPreferences.get('editor.ace.fontSize');
+        }
+    },
+    methods: {
+        editorInit() {
+            require('brace/ext/language_tools') //language extension prerequsite...
+            require(`brace/mode/${this.lang}`);
+            require(`brace/theme/${this.theme}`);
+            require(`brace/snippets/${this.lang}`);
+
+            // ignore first missing DOCTYPE warning
+            let session = this.$refs.ace.editor.getSession();
+            session.on("changeAnnotation", () => {
+                const a = session.getAnnotations();
+                const b = a.slice(0).filter( (item) => item.text.indexOf('DOC') === -1 );
+                if(a.length > b.length) session.setAnnotations(b);
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .editor-container {
+        width: 100%;
+        position: relative;
+    }
+</style>

package/src/components/EditButtonOnRowHover.vue

@@ -0,0 +1,21 @@
+<template>
+    <b-button size="is-small" type="is-text" icon-right="pencil-alt" class="show-on-hover" @click="edit" />
+</template>
+
+<script>
+export default {
+    name: "EditButtonOnRowHover",
+    props: { edit: { type: Function, required: true }}
+}
+</script>
+
+<style scoped>
+    .show-on-hover {
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    tr:hover .show-on-hover {
+        opacity: 1;
+    }
+</style>

package/src/components/Error404.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="hero is-fullheight has-background-white-ter">
+        <div class="hero-body has-text-centered is-justify-content-center">
+            <div>
+                <h1 class="title">Page Not Found</h1>
+                <p>Perhaps you have mistyped the URL or clicked on a dead link?</p>
+                <br />
+                <b-button tag="router-link" to="/" type="is-primary">Back to Dashboard</b-button>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Error404",
+        components: {}
+    }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/EventsChooser.vue

@@ -0,0 +1,88 @@
+<template>
+    <b-modal :active="active" trap-focus
+             aria-role="dialog"
+             aria-modal
+             @update:active="arg => $emit('update:active', arg)">
+        <div class="modal-card" style="width: auto">
+            <header class="modal-card-head">
+                <p class="modal-card-title">
+                    <slot name="title">Choose an event</slot>
+                </p>
+                <button
+                    type="button"
+                    class="delete"
+                    @click="$emit('update:active', false)"/>
+            </header>
+            <section class="modal-card-body full-height-container">
+                <slot name="explanation"></slot>
+                <b-field>
+                    <b-input v-model="searchQuery"
+                             placeholder="Search..."
+                             type="search" icon="search" rounded>
+                    </b-input>
+                </b-field>
+                <EventsTable :paginated-items="eventsPaginatedItems" :on-page-change="(page) => eventsPaginatedItems.currentPage = page">
+                    <template #actions="slotProps">
+                        <div class="buttons" style="flex-wrap: nowrap;">
+                            <b-button icon-left="calendar-alt" size="is-small" tag="a" :href="'/oxygen/upcoming-events/' + slotProps.row.id + '/edit'" style="margin-left: 0.5rem;" rounded>Go to event</b-button>
+                            <b-button rounded :type="disableEvent(slotProps.row) ? '' : 'is-success'" :disabled="disableEvent(slotProps.row)" @click="$emit('selected', slotProps.row)">Choose</b-button>
+                        </div>
+                    </template>
+                </EventsTable>
+            </section>
+        </div>
+    </b-modal>
+</template>
+
+<script>
+import EventsApi from "../EventsApi";
+import EventsTable from './EventsTable.vue';
+
+export default {
+    name: "EventsChooser",
+    components: { EventsTable },
+    props: {
+        active: Boolean,
+        disableEvent: {
+            type: Function,
+            default: () => { return false; }
+        }
+    },
+    data() {
+        return {
+            eventsPaginatedItems: { items: null, itemsPerPage: null, totalItems: null, loading: false, currentPage: null },
+            eventsApi: new EventsApi(this.$buefy),
+            searchQuery: '',
+            searchDebounce: null
+        }
+    },
+    watch: {
+        'searchQuery': 'debounceFetchData',
+        'eventsPaginatedItems.currentPage': 'fetchData'
+    },
+    async created() {
+        await this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            this.eventsPaginatedItems.loading = true;
+
+            let data = await this.eventsApi.list(false, this.eventsPaginatedItems.currentPage, this.searchQuery !== '' ? this.searchQuery : null);
+            this.eventsPaginatedItems.items = data.items;
+            this.eventsPaginatedItems.itemsPerPage = data.itemsPerPage;
+            this.eventsPaginatedItems.totalItems = data.totalItems;
+            this.eventsPaginatedItems.loading = false;
+        },
+        debounceFetchData() {
+            clearTimeout(this.searchDebounce)
+            this.searchDebounce = setTimeout(() => {
+                this.fetchData();
+            }, 400);
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/EventsTable.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <b-table
+                :data="paginatedItems === null || paginatedItems.items === null ? [] : paginatedItems.items"
+                :checked-rows="checkedRows"
+                :loading="paginatedItems.items === null || paginatedItems.loading"
+                :checkable="checkable"
+                custom-row-key="id"
+                :paginated="paginatedItems.totalItems > paginatedItems.itemsPerPage"
+                backend-pagination
+                :total="paginatedItems.totalItems"
+                :per-page="paginatedItems.itemsPerPage"
+                :current-page="paginatedItems.currentPage"
+                aria-next-label="Next page"
+                aria-previous-label="Previous page"
+                aria-page-label="Page"
+                aria-current-label="Current page"
+                class="full-height-flex full-height-container"
+                @update:checkedRows="$emit('update:checkedRows', $event)"
+                @page-change="onPageChange">
+            <b-table-column v-slot="props" label="Title">
+                {{ props.row.title }}
+            </b-table-column>
+
+            <b-table-column v-slot="props" label="Display on website">
+                <em v-if="!props.row.active">No</em>
+                <span v-else>{{ props.row.startDate ? new Date(props.row.startDate).toDateString() : '?'}} - {{ props.row.endDate ? new Date(props.row.endDate).toDateString() : '?'}}</span>
+            </b-table-column>
+
+            <b-table-column v-slot="props">
+                <slot name="actions" :row="props.row"></slot>
+            </b-table-column>
+
+            <template slot="empty">
+                <section class="section">
+                    <div class="content has-text-grey has-text-centered">
+                        <p>
+                            <slot name="empty">
+                                No events found.
+                            </slot>
+                        </p>
+                    </div>
+                </section>
+            </template>
+        </b-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "EventsTable",
+        props: {
+            paginatedItems: {
+                type: Object,
+                required: true
+            },
+            onPageChange: {
+                type: Function,
+                required: true
+            },
+            checkedRows: {
+                type: Array,
+                default: () => { return []; }
+            },
+            checkable: Boolean
+        },
+        data() {
+            return {
+            };
+        },
+    }
+</script>
+
+<style scoped>
+    .b-table {
+        min-height: 10rem;
+    }
+
+    .b-table.is-loading {
+        margin-bottom: 5rem;
+    }
+</style>

package/src/components/GenericEditableField.vue

@@ -0,0 +1,74 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div v-if="updatedValue === null">
+            <slot name="display" :edit="edit" :value="data[fieldName]">
+                <p>
+                    {{ data[fieldName] }}
+                    <EditButtonOnRowHover :edit="edit" />
+                </p>
+            </slot>
+        </div>
+        <slot v-else name="edit" :submit="submitValue" :initial-value="data[fieldName]" :updating="updating">
+            <b-field :label="label" :label-position="label ? 'inside' : null">
+                <b-input v-model="updatedValue" :type="type" :disabled="updating" class="not-full-width" @keyup.enter.native="submit"></b-input>
+                <p class="control">
+                    <b-button type="is-primary" :loading="updating" @click="submit">Change</b-button>
+                </p>
+            </b-field>
+        </slot>
+    </transition>
+</template>
+
+<script>
+import {morphToNotification} from "../api";
+import EditButtonOnRowHover from "./EditButtonOnRowHover.vue";
+
+export default {
+    name: "GenericEditableField",
+    components: {EditButtonOnRowHover},
+    props: {
+        api: { type: Object, required: true},
+        data: { type: Object, required: true },
+        fieldName: { type: String, required: true },
+        label: { type: String, default: null },
+        type: { type: String, default: 'text' }
+    },
+    data() {
+        return {
+            updatedValue: null,
+            updating: false,
+        };
+    },
+    methods: {
+        async submitValue(value) {
+            this.updatedValue = value;
+            this.submit();
+        },
+        async submit() {
+            this.updating = true;
+            let data = {
+                id: this.data.id
+            };
+            data[this.fieldName] = this.updatedValue;
+            try {
+                let response = this.fieldName === 'fullName' ? await this.api.updateFullName(this.data.id, this.updatedValue) : await this.api.update(data);
+                this.updating = false;
+                this.updatedValue = null;
+                this.$buefy.toast.open(morphToNotification(response));
+                this.$emit('update:data', response.item);
+            } catch(e) {
+                this.updating = false;
+            }
+        },
+        edit() {
+            this.updatedValue = this.data[this.fieldName];
+        },
+    }
+}
+</script>
+
+<style scoped>
+    .not-full-width {
+        width: 15rem;
+    }
+</style>

package/src/components/GroupsChooser.vue

@@ -0,0 +1,58 @@
+<template>
+    <b-field>
+        <b-autocomplete
+            :value="computedValue"
+            :loading="loading || updating"
+            open-on-focus
+            field="name"
+            :data="users"
+            placeholder="Select a group..."
+            clearable
+            @typing="fetchData"
+            @select="o => $emit('select', o)">
+            <template #empty>No results found</template>
+            <template slot-scope="props">
+                <p><b-icon :icon="props.option.icon"></b-icon><strong>{{ props.option.name }}</strong></p>
+                <p class="is-size-7" style="white-space: break-spaces;">{{ props.option.description }}</p>
+            </template>
+        </b-autocomplete>
+    </b-field>
+</template>
+
+<script>
+import GroupsApi from "../GroupsApi";
+
+export default {
+    name: "GroupsChooser",
+    props: {
+        value: { required: false, type: Object, default: null },
+        updating: { type: Boolean, default: false }
+    },
+    data() {
+        return {
+            groupsApi: new GroupsApi(this.$buefy),
+            loading: true,
+            users: []
+        }
+    },
+    computed: {
+        computedValue() {
+            return this.value ? this.value.name : '';
+        }
+    },
+    async mounted() {
+        await this.fetchData('');
+    },
+    methods: {
+        async fetchData(name) {
+            this.loading = true;
+            this.users = (await this.groupsApi.list(false, 1, name)).items;
+            this.loading = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>