@oxygen-cms/ui 1.4.0 → 1.5.2

package/src/components/AuthenticationLog.vue

@@ -1,7 +1,40 @@
 <template>
     <div class="full-height scroll-container pad">
         <div class="box">
-            <h1 class="title">Logins, Logouts &amp; Login Attempts</h1>
+          <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"
@@ -11,11 +44,11 @@
                      :total="paginatedItems.totalItems"
                      :row-class="(row) => row.type === 1 ? 'is-danger' : ''"
                      @page-change="paginatedItems.currentPage = $event">
-                <b-table-column label="IP Address" v-slot="props">
+                <b-table-column v-slot="props" label="IP Address">
                     {{ props.row.ipAddress }}
                 </b-table-column>
 
-                <b-table-column label="Location" v-slot="props">
+                <b-table-column v-slot="props" label="Location">
                     <div v-if="props.row.geolocationInfo !== null">
                         {{ props.row.geolocationInfo }}
                     </div>
@@ -23,17 +56,25 @@
 
                 </b-table-column>
 
-                <b-table-column label="Browser / Device" v-slot="props">
+                <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 label="Time" v-slot="props">
+                <b-table-column v-slot="props" label="Time">
                     {{ Internationalize.formatDateTime(props.row.timestamp) }}
                 </b-table-column>
 
-                <b-table-column label="Type" v-slot="props">
-                    {{ getInfo(props.row) }}
+                <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>
@@ -44,6 +85,7 @@
 import {FetchBuilder} from "../api";
 import Internationalize from "../Internationalize";
 import UAParser from 'ua-parser-js';
+import AuthApi from "../AuthApi";
 
 const IP_INFO_LOADING = 'loading';
 
@@ -51,7 +93,9 @@ 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
         }
@@ -63,20 +107,32 @@ export default {
         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.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.ip), ...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);
-            }
+            await Promise.all([this.fetchSessions(), this.fetchLogins()]);
         },
         geoIP(ip) {
             if(this.ipInfo.has(ip)) {
@@ -97,17 +153,21 @@ export default {
         },
         updateInfoForIp(ip) {
             let geolocationInfo = this.ipInfo.has(ip) ? this.getGeolocationInfo(this.ipInfo.get(ip)) : '';
-            for(let item of this.paginatedItems.items) {
+            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) {
@@ -116,14 +176,10 @@ export default {
             }
             return data.city + ', ' + data.country_name;
         },
-        getInfo(data) {
-            if(data.type === 0) {
-                return 'Login';
-            } else if(data.type === 1) {
-                return 'Login Failed';
-            } else if(data.type === 2) {
-                return 'Logout';
-            }
+        async deleteSession(id) {
+            await this.authApi.deleteUserSession(id);
+            this.$buefy.notification.open({ message: 'User session removed', type: 'is-warning' });
+            await this.fetchData();
         }
     }
 }

package/src/components/CodeEditor.vue

@@ -1,20 +1,14 @@
 <template>
     <div class="editor-container has-background-grey-darker" :style="'height: ' + height + ';'">
-
-        <b-loading :is-full-page="false" v-model="loading" class="load-screen"></b-loading>
-
         <transition name="fade">
             <AceEditor
-                v-if="!loading"
                 key="editor"
+                ref="ace"
                 :value="value"
-                @input="$emit('input', $event)"
-                @init="editorInit"
                 :lang="lang"
                 :theme="theme"
                 width="100%"
                 height="100%"
-                ref="ace"
                 :options="{
                     enableBasicAutocompletion: true,
                     enableLiveAutocompletion: true,
@@ -28,59 +22,53 @@
                     showInvisibles: showInvisibles,
                     showGutter: true,
             }"
+                @input="$emit('input', $event)"
+                @init="editorInit"
             />
         </transition>
-
     </div>
 </template>
 
 <script>
-import UserPreferences from "../UserPreferences";
 
 export default {
     name: "CodeEditor",
+    components: { AceEditor: require('vue2-ace-editor') },
     props: {
-        value: String,
-        height: String,
-        lang: String
+        value: { type: String, default: null },
+        height: { type: String, required: true },
+        lang: { type: String, required:  true }
     },
     data() {
         return {
-            loading: true,
-            userPreferences: {}
         }
     },
     computed: {
         wrapMode() {
-            return this.userPreferences.get('editor.ace.wordWrap');
+            return this.$store.getters.userPreferences.get('editor.ace.wordWrap');
         },
         highlightActiveLine() {
-            return this.userPreferences.get('editor.ace.highlightActiveLine');
+            return this.$store.getters.userPreferences.get('editor.ace.highlightActiveLine');
         },
         showPrintMargin() {
-            return this.userPreferences.get('editor.ace.showPrintMargin');
+            return this.$store.getters.userPreferences.get('editor.ace.showPrintMargin');
         },
         showInvisibles() {
-            return this.userPreferences.get('editor.ace.showInvisibles');
+            return this.$store.getters.userPreferences.get('editor.ace.showInvisibles');
         },
         theme() {
-            return this.userPreferences.get('editor.ace.theme').replace('ace/theme/', '');
+            return this.$store.getters.userPreferences.get('editor.ace.theme').replace('ace/theme/', '');
         },
         fontSize() {
-            return this.userPreferences.get('editor.ace.fontSize');
+            return this.$store.getters.userPreferences.get('editor.ace.fontSize');
         }
     },
-    async mounted() {
-        this.userPreferences = await UserPreferences.load();
-        this.loading = false;
-    },
-    components: { AceEditor: require('vue2-ace-editor') },
     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);
+            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();
@@ -99,8 +87,4 @@ export default {
         width: 100%;
         position: relative;
     }
-
-    .load-screen ::v-deep .loading-background {
-        background-color: transparent;
-    }
 </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

@@ -1,15 +1,25 @@
 <template>
-    <p>
-        Error 404!
-    </p>
+    <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"
+        name: "Error404",
+        components: {}
     }
 </script>
 
 <style scoped>
 
-</style>
+</style>

package/src/components/EventsChooser.vue

@@ -1,8 +1,8 @@
 <template>
-    <b-modal :active="active" @update:active="arg => $emit('update:active', arg)"
-             trap-focus
+    <b-modal :active="active" trap-focus
              aria-role="dialog"
-             aria-modal>
+             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">
@@ -16,16 +16,16 @@
             <section class="modal-card-body full-height-container">
                 <slot name="explanation"></slot>
                 <b-field>
-                    <b-input placeholder="Search..."
-                             type="search"
-                             icon="search" rounded v-model="searchQuery">
+                    <b-input v-model="searchQuery"
+                             placeholder="Search..."
+                             type="search" icon="search" rounded>
                     </b-input>
                 </b-field>
-                <EventsTable :paginated-items="eventsPaginatedItems" :on-page-change="(page) => this.eventsPaginatedItems.currentPage = page">
-                    <template v-slot:actions="slotProps">
+                <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 @click="$emit('selected', slotProps.row)" :type="disableEvent(slotProps.row) ? '' : 'is-success'" :disabled="disableEvent(slotProps.row)">Choose</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>
@@ -40,11 +40,12 @@ import EventsTable from './EventsTable.vue';
 
 export default {
     name: "EventsChooser",
+    components: { EventsTable },
     props: {
         active: Boolean,
         disableEvent: {
             type: Function,
-            default: (event) => { return false; }
+            default: () => { return false; }
         }
     },
     data() {
@@ -62,7 +63,6 @@ export default {
     async created() {
         await this.fetchData()
     },
-    components: { EventsTable },
     methods: {
         async fetchData() {
             this.eventsPaginatedItems.loading = true;

package/src/components/EventsTable.vue

@@ -3,7 +3,6 @@
         <b-table
                 :data="paginatedItems === null || paginatedItems.items === null ? [] : paginatedItems.items"
                 :checked-rows="checkedRows"
-                v-on:update:checkedRows="$emit('update:checkedRows', $event)"
                 :loading="paginatedItems.items === null || paginatedItems.loading"
                 :checkable="checkable"
                 custom-row-key="id"
@@ -12,23 +11,24 @@
                 :total="paginatedItems.totalItems"
                 :per-page="paginatedItems.itemsPerPage"
                 :current-page="paginatedItems.currentPage"
-                @page-change="onPageChange"
                 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">
-            <b-table-column label="Title" v-slot="props">
+                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 label="Display on website" v-slot="props">
+            <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" v-bind:row="props.row"></slot>
+                <slot name="actions" :row="props.row"></slot>
             </b-table-column>
 
             <template slot="empty">
@@ -50,8 +50,14 @@
     export default {
         name: "EventsTable",
         props: {
-            paginatedItems: Object,
-            onPageChange: Function,
+            paginatedItems: {
+                type: Object,
+                required: true
+            },
+            onPageChange: {
+                type: Function,
+                required: true
+            },
             checkedRows: {
                 type: Array,
                 default: () => { return []; }

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>