@oxygen-cms/ui 1.4.0 → 1.5.2

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

@@ -1,10 +1,41 @@
 <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";
+import download from "downloadjs";
+
 export default {
-    name: "ImportExport"
+    name: "ImportExport",
+    data() {
+        return {
+            exporting: false
+        }
+    },
+    methods: {
+        async processDownload() {
+            this.exporting = true;
+            let response = await (new FetchBuilder(this.$buefy, 'post'))
+                .cookies()
+                .fetchRaw(API_ROOT + "import-export/export");
+            this.$buefy.notification.open({ message: 'Export successful', type: 'is-success', queue: false });
+            let blob = await response.blob();
+            download(blob, 'database ' + (new Date()).toLocaleString() + '.zip');
+            this.exporting = false;
+        }
+    }
 }
 </script>
 

package/src/components/LegacyPage.vue

@@ -1,20 +1,18 @@
 <template>
     <div class="full-height full-height-container legacy-container">
         <transition name="fade">
-            <iframe ref="iframe" class="iframe" v-show="!loading" />
+            <iframe v-show="!loading" ref="iframe" class="iframe" />
         </transition>
-<!--        <b-loading :is-full-page="false" v-model="loading" :can-cancel="false"></b-loading>-->
 
         <MediaInsertModal :active.sync="isInsertMediaItemModalActive" @close="closeInsertMediaItemModal" @select="onFilesSelected" />
     </div>
 </template>
 
 <script>
-import MediaInsertModal from "./MediaInsertModal.vue";
+import MediaInsertModal from "./media/MediaInsertModal.vue";
 
 import { morphToNotification } from "../api";
 import MediaApi from "../MediaApi";
-import UserPreferences from "../UserPreferences";
 
 // from https://gist.github.com/hdodov/a87c097216718655ead6cf2969b0dcfa
 
@@ -50,9 +48,17 @@ const iframeURLChange = (iframe, callback, legacyPage) => {
 
 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: {
-        legacyPrefix: String,
-        adminPrefix: String
+        fullPath: { type: String, required: true },
+        legacyPrefix: { type: String, required: true },
+        adminPrefix: { type: String, required: true }
     },
     data() {
         return {
@@ -60,17 +66,18 @@ export default {
             currentPath: null,
             isInsertMediaItemModalActive: false,
             resolveInsertMediaItems: null,
-            rejectInsertMediaItems: null,
-            userPreferences: null
+            rejectInsertMediaItems: null
         }
     },
-    components: { MediaInsertModal },
     computed: {
-        loading() { return this.loadingPath !== null; }
+        loading() { return this.loadingPath !== null; },
+        userPreferences() { return this.$store.getters.userPreferences; }
+    },
+    'watch': {
+        'fullPath': 'onFullPathChanged'
     },
     async mounted() {
         this.loadingPath = 'prefs';
-        this.userPreferences = await UserPreferences.load();
 
         window.document.body.style.overflowY = 'hidden';
         window.document.documentElement.style.overflowY = 'hidden';
@@ -89,18 +96,11 @@ export default {
     unmounted() {
         this.$parent.$data.requestedCollapsed = false;
     },
-    beforeRouteUpdate(to, from, next) {
-        // when the Vue route changes, load this path inside the iframe
-        this.loadPath(to.fullPath);
-        next();
-    },
-    beforeRouteLeave(to, from, next) {
-        window.document.body.style.overflowY = 'auto';
-        window.document.documentElement.style.overflowY = 'auto';
-        this.$parent.$data.requestedCollapsed = false;
-        next();
-    },
     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;
@@ -139,7 +139,6 @@ export default {
         // 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));

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>