@oxygen-cms/ui 1.5.0

package/src/components/auth/TwoFactorSetup.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="box container is-wider two-factor-setup">
+        <LoginLogo />
+
+        <transition name="fade" mode="out-in">
+            <div v-if="twoFactorQRCode">
+                <h1 class="subtitle has-text-centered">
+                    You need to set up two-factor authentication for this account.
+                </h1>
+
+                <div class="content">
+                <p>Two-factor authentication uses once-off codes from another device (e.g.: your phone) for additional security. To use two-factor authentication with Oxygen CMS, you need to download an authenticator app onto your phone.</p>
+                <p>Supported apps include:</p>
+                <ul>
+                    <li>Google Authenticator</li>
+                    <li><a href="https://lastpass.com/auth/" target="_blank">LastPass Authenticator</a></li>
+                    <li><a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a></li>
+                    <li><a href="https://authy.com/features/" target="_blank">Authy</a></li>
+                </ul>
+                </div>
+
+                <h2 class="subtitle">Getting started</h2>
+                <p>Scan the QR code below on your phone to begin setting up two-factor authentication, or follow <a :href="twoFactorUri">this link</a>.</p>
+
+                <div class="qr-code">
+                    <div v-html="twoFactorQRCode"></div>
+                </div>
+
+                <p>Or, manually enter this secret key into your chosen authenticator app:<br><br>
+                <pre>{{ twoFactorString }}</pre></p>
+
+                <br>
+                <h2 class="subtitle">Confirm a two-factor code to continue</h2>
+                <p>Once you've successfully configured your authenticator app, enter a valid code below to continue.</p>
+                <br>
+
+                <div class="level">
+                    <div class="level-left">
+                        <b-field label="2FA Code" label-position="inside" :type="failedValidation ? 'is-danger' : ''">
+                            <b-input v-model="totpCode" name="2fa_code" type="number" autofocus minlength="6" required placeholder="enter code here" @keyup.enter.native="confirm2FA"></b-input>
+                        </b-field>
+                    </div>
+                    <div class="level-right">
+                        <b-button type="is-primary" :loading="submitting" @click="confirm2FA">Confirm</b-button>
+                    </div>
+                </div>
+            </div>
+            <div v-else style="height=20rem;"></div>
+        </transition>
+
+        <b-loading :active="!twoFactorQRCode" :is-full-page="false"></b-loading>
+
+    </div>
+</template>
+
+<script>
+import AuthApi from "../../AuthApi";
+import LoginLogo from "./LoginLogo.vue";
+import {morphToNotification} from "../../api";
+
+export default {
+    name: "TwoFactorSetup",
+    components: { LoginLogo },
+    data() {
+        return {
+            twoFactorUri: null,
+            twoFactorString: null,
+            twoFactorQRCode: null,
+            totpCode: '',
+            failedValidation: false,
+            submitting: false,
+            authApi: new AuthApi(this.$buefy)
+        }
+    },
+    async created() {
+        try {
+            let data = await this.authApi.setupTwoFactorAuth();
+            this.twoFactorUri = data.as_uri;
+            this.twoFactorString = data.as_string;
+            this.twoFactorQRCode = data.as_qr_code;
+        } catch(e) {
+            console.log('Already set up?');
+        }
+    },
+    methods: {
+        async confirm2FA() {
+            try {
+                this.submitting = true;
+                let response = await this.authApi.confirmTwoFactorAuth(this.totpCode);
+                this.$buefy.notification.open(morphToNotification(response));
+                this.$router.push('/');
+            } catch(e) {
+                this.failedValidation = true;
+            }
+            this.submitting = false;
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import './login.scss';
+
+    .qr-code {
+        padding: 1rem 0;
+    }
+
+    .qr-code ::v-deep .b-skeleton {
+        max-width: 200px;
+    }
+
+    .two-factor-setup {
+        position: relative;
+    }
+</style>

package/src/components/auth/VerifyEmail.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="box container">
+        <LoginLogo />
+
+          <h1 class="subtitle has-text-centered">
+            You need to verify your email address to continue
+          </h1>
+
+          <transition name="fade">
+            <div v-if="sent" class="content">
+              <p>An email has been sent to your inbox with a confirmation link. You need to open the link to continue.</p>
+              <p>If you don't receive the email in the next few minutes, we can try and send it again.</p>
+              <b-button type="is-link" @click="send">Retry</b-button>
+            </div>
+            <div v-else-if="sendFailure" class="content">
+              <p>The email failed to send.</p>
+              <b-button type="is-link" @click="send">Retry</b-button>
+            </div>
+            <div v-else class="content has-text-centered">
+              <p>Sending verification email...</p>
+              <b-progress ></b-progress>
+            </div>
+          </transition>
+    </div>
+</template>
+
+<script>
+import LoginLogo from './LoginLogo.vue';
+import AuthApi from "../../AuthApi";
+
+export default {
+  name: "VerifyEmail",
+  components: { LoginLogo },
+  data() {
+    return {
+      authApi: new AuthApi(this.$buefy),
+      sent: false,
+      sendFailure: false
+    }
+  },
+  async created() {
+    await this.send()
+  },
+  methods: {
+    async send() {
+      this.sent = false;
+      try {
+        await this.authApi.sendEmailVerification();
+        this.sent = true;
+      } catch(e) {
+        if(e.response && e.response.code === 'already_verified') {
+          this.$buefy.notification.open({
+            message: 'Email address already verified',
+            type: 'is-info',
+            queue: false,
+            duration: 4000
+          });
+          await this.$router.push({path: '/'});
+        } else {
+          this.sendFailure = true;
+          throw e;
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+    @import './login.scss';
+</style>

package/src/components/auth/WelcomeFloat.vue

@@ -0,0 +1,87 @@
+<template>
+    <!--    {{ Preferencesimport Vuex from 'vuex';::get('appearance.auth::theme', 'autumn') }}-->
+    <div class="login-fullscreen">
+        <b-loading :active="theme === null"></b-loading>
+        <transition name="fade">
+            <div v-if="theme !== null" :class="'login-background login-theme-' + theme">
+                <transition name="slide-left" mode="out-in">
+                    <router-view></router-view>
+                </transition>
+            </div>
+        </transition>
+
+
+    </div>
+</template>
+
+<script>
+import AuthApi from "../../AuthApi";
+
+export default {
+    name: "WelcomeFloat",
+    data() {
+        return {
+            theme: null,
+            authApi: new AuthApi(this.$buefy)
+        }
+    },
+    async created() {
+        let preferences = await this.authApi.getLoginPreferences();
+        this.theme = preferences.theme;
+    }
+}
+</script>
+
+<style scoped>
+    .login-fullscreen {
+        height: 100%;
+        overflow: auto;
+    }
+
+    .login-background {
+        min-height: 100%;
+        background-attachment: fixed;
+        background-size: cover;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow-y: auto;
+    }
+
+    .login-theme-autumn {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/autumn-min.jpg');
+    }
+
+    .login-theme-city {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/city-min.jpg');
+    }
+
+    .login-theme-clouds {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/clouds-min.jpg');
+    }
+
+    .login-theme-coast {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/coast-min.jpg');
+    }
+
+    .login-theme-speckles {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/speckles-min.jpg');
+    }
+
+    .login-theme-trees {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/trees-min.jpg');
+    }
+
+    .login-theme-waves {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/waves.jpg');
+    }
+
+    .login-theme-yosemite {
+        background-image: url('/vendor/oxygen/ui-theme/img/bg/yosemite-falls-min.jpg');
+    }
+
+    .login-theme-white {
+        background-color: white;
+    }
+
+</style>

package/src/components/auth/login.scss

@@ -0,0 +1,17 @@
+.login-justify-content {
+   display: flex;
+   flex-direction: row-reverse;
+   justify-content: space-between;
+   align-items: center;
+}
+
+.login-fullscreen .container {
+   flex-grow: 0;
+   margin: 2rem auto;
+   width: 25em;
+}
+
+.login-fullscreen .container.is-wider {
+   width: 90%;
+   max-width: 55em;
+}

package/src/components/media/MediaChooseDirectory.vue

@@ -0,0 +1,129 @@
+<template>
+    <b-dropdown
+        ref="dropdown"
+        position="is-top-left"
+        append-to-body
+        aria-role="menu"
+        trap-focus
+        class="choose-directory-dropdown"
+    >
+        <template #trigger>
+            <b-button size="is-small" rounded icon-left="folder-open">
+                <span v-if="buttonText">{{ buttonText }}</span>
+            </b-button>
+        </template>
+
+
+        <b-dropdown-item
+            aria-role="menu-item"
+            :focusable="false"
+            custom
+            paddingless>
+            <div class="modal-card" style="width: 30rem; overflow: visible;">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Choose a directory</p>
+                </header>
+                <section class="modal-card-body" style="overflow: visible;">
+                    <b-field>
+                        <b-autocomplete
+                            v-model="searchQuery"
+                            :disabled="isLoading"
+                            open-on-focus
+                            :data="filteredDirectoriesList"
+                            :custom-formatter="data => getDirectoryPathString(data)"
+                            placeholder="Search for directories..."
+                            clearable
+                            @select="selectDirectory">
+                            <template #empty>No results found</template>
+                        </b-autocomplete>
+                    </b-field>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button
+                        label="Close"
+                        @click="close"/>
+                    <b-button
+                        :disabled="selectedDirectory === null"
+                        label="Move"
+                        type="is-primary"
+                        @click="submit"/>
+                </footer>
+            </div>
+        </b-dropdown-item>
+    </b-dropdown>
+</template>
+
+<script>
+import MediaDirectoryApi, {getDirectoryPathString} from "../../MediaDirectoryApi";
+
+export default {
+    name: "MediaChooseDirectory",
+    props: {
+        buttonText: {
+            type: String,
+            default: "Move to directory"
+        }
+    },
+    data() {
+        return {
+            mediaDirectoryApi: new MediaDirectoryApi(this.$buefy),
+            newDirectory: null,
+            isLoading: false,
+            searchQuery: '',
+            directoriesList: [],
+            selectedDirectory: null,
+            getDirectoryPathString: getDirectoryPathString
+        }
+    },
+    computed: {
+        filteredDirectoriesList() {
+            let query = this.searchQuery ? this.searchQuery.toLowerCase() : '';
+            if(!query) { return this.directoriesList; }
+            return this.directoriesList.filter((option) => {
+                return option.name.toLowerCase().indexOf(query) >= 0
+                    || option.fullPath.toLowerCase().indexOf(query) >= 0;
+            })
+        }
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            this.isLoading = true;
+            let data = await this.mediaDirectoryApi.list(false, 1, null);
+            this.directoriesList = data.items;
+            this.directoriesList.sort((a, b) => {
+                return getDirectoryPathString(a).localeCompare(getDirectoryPathString(b))
+            });
+            this.isLoading = false;
+        },
+        debounceFetchData() {
+            clearTimeout(this.searchDebounce)
+            this.searchDebounce = setTimeout(() => {
+                this.fetchData();
+            }, 400);
+        },
+        submit() {
+            this.$emit('submit', this.selectedDirectory);
+            this.close();
+        },
+        selectDirectory(option) {
+            this.selectedDirectory = option;
+        },
+        close() {
+            this.selectedDirectory = null;
+            this.searchQuery = '';
+            this.$refs.dropdown.toggle();
+        }
+    }
+}
+</script>
+
+<style>
+    .dropdown-content {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+</style>

package/src/components/media/MediaDirectory.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="media-item card" :class="directory.selected ? 'media-item-selected' : ''">
+        <div class="card-image media-icon-container cursor-pointer" @click.exact="select(true)" @click.shift.exact="select(false)">
+            <b-icon icon="folder" size="is-large" class="media-icon"></b-icon>
+        </div>
+        <div class="card-content">
+            <p class="title is-4 cursor-pointer has-text-centered" @click.exact="select(true)" @click.shift.exact="select(false)">{{ directory.name }}</p>
+            <p v-if="displayFullPath" class="subtitle is-6 cursor-pointer has-text-centered" @click.exact="select(true)" @click.shift.exact="select(false)">inside '{{ directoryPath }}'</p>
+            <div v-if="directory.selected" class="content media-item-toolbar">
+                <b-button v-if="directory.selected" icon-left="pencil-alt" size="is-small" rounded @click.stop="renameDirectory">Rename</b-button>
+                <MediaChooseDirectory v-if="directory.selected" button-text="Move" @submit="moveToDirectory">
+                </MediaChooseDirectory>
+                <b-button v-if="directory.selected" icon-left="trash" size="is-small" type="is-danger" rounded outlined @click.stop="confirmDeleteDirectory">Delete</b-button>
+            </div>
+        </div>
+
+        <b-modal :active.sync="isEditModalActive" trap-focus has-modal-card width="80%">
+            <div class="modal-card" style="width: auto">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Rename Directory</p>
+                </header>
+                <section class="modal-card-body">
+                    <b-field label="Name" label-position="inside">
+                        <b-input v-model="newName"></b-input>
+                    </b-field>
+                    <b-field label="Slug" label-position="inside">
+                        <b-input v-model="newSlug"></b-input>
+                    </b-field>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button @click="isEditModalActive = false">Cancel</b-button>
+                    <b-button type="is-primary" @click="doRenameDirectory">Rename</b-button>
+                </footer>
+            </div>
+        </b-modal>
+
+        <!--                <b-button type="is-light" expanded @click="currentPath = dir.fullPath"></b-button>-->
+    </div>
+
+</template>
+
+<script>
+import MediaDirectoryApi, {getDirectoryPathString} from "../../MediaDirectoryApi";
+import {morphToNotification} from "../../api";
+import MediaChooseDirectory from "./MediaChooseDirectory.vue";
+
+export default {
+    name: "MediaDirectory",
+    components: { MediaChooseDirectory },
+    props: {
+        directory: { type: Object, required: true },
+        displayFullPath: Boolean
+    },
+    data() {
+        return {
+            isEditModalActive: false,
+            newName: '',
+            newSlug: '',
+            mediaDirectoryApi: new MediaDirectoryApi(this.$buefy)
+        }
+    },
+    computed: {
+        directoryPath() {
+            return getDirectoryPathString(this.directory.parentDirectory);
+        }
+    },
+    methods: {
+        select(toggle) {
+            // if already selected, then navigate into a directory
+            if(this.directory.selected) {
+                this.$emit('navigate', { currentPath: this.directory.fullPath })
+                return;
+            }
+            this.$emit('select', this.directory, toggle);
+        },
+        renameDirectory() {
+            this.newName = this.directory.name;
+            this.newSlug = this.directory.slug;
+            this.isEditModalActive = true;
+        },
+        doRenameDirectory() {
+            this.$emit('rename', this.directory, this.newName);
+            this.isRenaming = false;
+        },
+        async confirmDeleteDirectory() {
+            await this.mediaDirectoryApi.confirmForceDelete(this.directory.id);
+            this.$emit('delete');
+        },
+        async moveToDirectory(directory) {
+            console.log('move to directory', directory);
+            let data = await this.mediaDirectoryApi.update({
+                id: this.directory.id,
+                parentDirectory: directory
+            });
+            this.$buefy.toast.open(morphToNotification(data));
+            this.$emit('move', this.directory);
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import "./media.scss";
+
+    .media-item-selected .title {
+        margin-bottom: 1.5rem;
+    }
+</style>

package/src/components/media/MediaInsertModal.vue

@@ -0,0 +1,88 @@
+<template>
+    <b-modal :active.sync="active" trap-focus has-modal-card aria-role="dialog" aria-modal auto-focus width="80%" class="media-insert-modal">
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <slot name="title"><p class="modal-card-title">Choose an item to insert</p></slot>
+            </header>
+            <section class="modal-card-body">
+                <MediaList :current-path="currentPath" :in-trash="inTrash" :search-query="searchQuery" @navigate="onNavigate" @double-click-action="doInsert" @select-files="items => selectedFiles = items" />
+            </section>
+            <footer class="modal-card-foot is-flex">
+                <div class="is-flex-grow-1"></div>
+                <b-button @click="emitClose">Close</b-button>
+                <b-button :disabled="selectedFiles.length === 0 || (!multiselectAllowed && selectedFiles.length > 1)" type="is-primary" @click="doInsert">
+                    <span v-if="selectedFiles.length === 0">{{ actionVerb }}</span>
+                    <span v-else-if="selectedFiles.length === 1">{{actionVerb }} item</span>
+                    <span v-else-if="multiselectAllowed">{{ actionVerb }} {{ selectedFiles }} items</span>
+                    <span v-else>Select only a single item</span>
+                </b-button>
+            </footer>
+        </div>
+    </b-modal>
+</template>
+
+<script>
+import MediaList from './MediaList.vue';
+
+export default {
+    name: "MediaInsertModal",
+    components: { MediaList },
+    props: {
+        active: Boolean,
+        multiselectAllowed: {
+            type: Boolean,
+            default: true
+        },
+        actionVerb: {
+            type: String,
+            default: 'Insert'
+        }
+    },
+    data() {
+        return {
+            currentPath: '',
+            inTrash: false,
+            searchQuery: null,
+            selectedFiles: []
+        }
+    },
+    watch: {
+        active: function(active) {
+            this.$emit('update:active', active);
+        }
+    },
+    methods: {
+        onNavigate(options) {
+            this.currentPath = options.currentPath ? options.currentPath : '';
+            this.inTrash = !!options.inTrash;
+            this.searchQuery = options.searchQuery ? options.searchQuery : null;
+        },
+        emitClose() {
+            this.$emit('close');
+        },
+        doInsert() {
+            this.$emit('select', this.selectedFiles);
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .modal-card {
+        width: 100%;
+        height: 100%;
+        max-width: 1600px;
+    }
+
+    .modal-card-body {
+        padding: 0;
+    }
+
+    .media-insert-modal ::v-deep .animation-content {
+        width: 80%;
+        height: 80%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>