@oxygen-cms/ui 1.4.0 → 1.5.2

package/src/components/auth/PasswordRemind.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="box container">
+        <LoginLogo />
+
+        <h1 class="subtitle has-text-centered">
+            <span v-if="success">
+                Password reset link sent!
+            </span>
+            <span v-else>Forgot Password</span>
+        </h1>
+
+        <transition name="fade" mode="out-in">
+            <div v-if="!success">
+                <p>Enter the email address associated with your account, and we'll send you a link to reset your password.</p>
+                <br />
+                <b-field label="Email Address" label-position="inside">
+                    <b-input v-model="accountEmail" name="email" type="email" required @keyup.enter.native="submitForm"></b-input>
+                </b-field>
+
+                <div class="login-justify-content">
+                    <b-button type="is-primary" :loading="submitting" @click="submitForm">Send Reminder Email</b-button>
+                    <router-link to="/auth/login">
+                        Back to Login
+                    </router-link>
+                </div>
+            </div>
+            <div v-else>
+                <p>Please check your email for further instructions on how to complete the process.</p>
+            </div>
+        </transition>
+
+
+    </div>
+</template>
+
+<script>
+
+import LoginLogo from "./LoginLogo.vue";
+import AuthApi from "../../AuthApi";
+import {morphToNotification} from "../../api";
+
+export default {
+    name: "PasswordRemind",
+    components: { LoginLogo },
+    data() {
+        return {
+            authApi: new AuthApi(this.$buefy),
+            accountEmail: '',
+            success: false,
+            submitting: false,
+        }
+    },
+    methods: {
+        async submitForm() {
+            try {
+                this.submitting = true;
+                let response = await this.authApi.sendReminderEmail(this.accountEmail);
+                this.$buefy.notification.open(morphToNotification(response));
+                this.success = true;
+            } catch(e) {
+                // let the user try again
+            }
+            this.submitting = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/auth/PasswordReset.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="box container">
+        <LoginLogo />
+
+        <h1 class="subtitle has-text-centered">
+            <span v-if="successfullyReset">Password Reset Successful!</span>
+            <span v-else-if="hasRequiredParams">Reset Your Password</span>
+            <span v-else>Invalid password reset link</span>
+        </h1>
+
+        <div v-if="successfullyReset" class="content">
+            <p>
+                Your password reset request was successful. You should now be able to login with your new password.
+            </p>
+            <div class="is-flex is-justify-content-center">
+                <b-button tag="router-link" to="/auth/login" type="is-success">Login</b-button>
+            </div>
+        </div>
+        <div v-else-if="hasRequiredParams">
+            <div class="content">
+                <p>Enter a new, secure password to use for this account.<br />It is recommended you use a password manager to keep your passwords unique and random.</p>
+            </div>
+
+            <b-field label="New Password" label-position="inside">
+                <b-input v-model="password" type="password"></b-input>
+            </b-field>
+
+            <b-field label="New Password Again" label-position="inside"
+                     :type="passwordsMatch ? '' : 'is-danger'"
+                     :message="passwordsMatch ? '' : 'Passwords do not match'">
+                <b-input v-model="passwordConfirmation" type="password" @keyup.native.enter="submit"></b-input>
+            </b-field>
+
+            <div class="login-justify-content">
+                <b-button type="is-primary" :disabled="!passwordsMatch" :loading="submitting" @click="submit">Reset</b-button>
+                <router-link to="/auth/login">
+                    Back to Login
+                </router-link>
+            </div>
+        </div>
+        <div v-else class="content">
+            <p>One or more required parameters were missing from the link. Double-check that you have used the correct password reset link.</p>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import LoginLogo from "./LoginLogo.vue";
+import AuthApi from "../../AuthApi";
+import {morphToNotification} from "../../api";
+export default {
+    name: "PasswordReset",
+    components: {LoginLogo},
+    data() {
+        return {
+            authApi: new AuthApi(this.$buefy),
+            password: '',
+            passwordConfirmation: '',
+            submitting: false,
+            successfullyReset: false
+        };
+    },
+    computed: {
+        hasRequiredParams() {
+            return this.$route.query.email && this.$route.query.token;
+        },
+        passwordsMatch() {
+            return this.password === this.passwordConfirmation;
+        }
+    },
+    methods: {
+        async submit() {
+            let req = {
+                password: this.password,
+                password_confirmation: this.passwordConfirmation,
+                email: this.$route.query.email,
+                token: this.$route.query.token
+            };
+            console.log(req);
+            this.submitting = true;
+            try {
+                let data = await this.authApi.resetPassword(req);
+                this.$buefy.notification.open(morphToNotification(data));
+                this.successfullyReset = true;
+            } catch(e) {
+                // let the user try again
+            }
+            this.submitting = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

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/{MediaChooseDirectory.vue → media/MediaChooseDirectory.vue}

@@ -1,10 +1,10 @@
 <template>
     <b-dropdown
+        ref="dropdown"
         position="is-top-left"
         append-to-body
         aria-role="menu"
         trap-focus
-        ref="dropdown"
         class="choose-directory-dropdown"
     >
         <template #trigger>
@@ -26,8 +26,8 @@
                 <section class="modal-card-body" style="overflow: visible;">
                     <b-field>
                         <b-autocomplete
-                            :disabled="isLoading"
                             v-model="searchQuery"
+                            :disabled="isLoading"
                             open-on-focus
                             :data="filteredDirectoriesList"
                             :custom-formatter="data => getDirectoryPathString(data)"
@@ -55,10 +55,16 @@
 </template>
 
 <script>
-import MediaDirectoryApi, {getDirectoryPathString} from "../MediaDirectoryApi";
+import MediaDirectoryApi, {getDirectoryPathString} from "../../MediaDirectoryApi";
 
 export default {
     name: "MediaChooseDirectory",
+    props: {
+        buttonText: {
+            type: String,
+            default: "Move to directory"
+        }
+    },
     data() {
         return {
             mediaDirectoryApi: new MediaDirectoryApi(this.$buefy),
@@ -70,15 +76,6 @@ export default {
             getDirectoryPathString: getDirectoryPathString
         }
     },
-    props: {
-        buttonText: {
-            type: String,
-            default: "Move to directory"
-        }
-    },
-    created() {
-        this.fetchData()
-    },
     computed: {
         filteredDirectoriesList() {
             let query = this.searchQuery ? this.searchQuery.toLowerCase() : '';
@@ -89,6 +86,9 @@ export default {
             })
         }
     },
+    created() {
+        this.fetchData()
+    },
     methods: {
         async fetchData() {
             this.isLoading = true;

package/src/components/{MediaDirectory.vue → media/MediaDirectory.vue}

@@ -5,10 +5,10 @@
         </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 class="subtitle is-6 cursor-pointer has-text-centered" v-if="displayFullPath" @click.exact="select(true)" @click.shift.exact="select(false)">inside '{{ directoryPath }}'</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" @submit="moveToDirectory" button-text="Move">
+                <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>
@@ -30,7 +30,7 @@
                 <footer class="modal-card-foot is-flex">
                     <div class="is-flex-grow-1"></div>
                     <b-button @click="isEditModalActive = false">Cancel</b-button>
-                    <b-button @click="doRenameDirectory" type="is-primary">Rename</b-button>
+                    <b-button type="is-primary" @click="doRenameDirectory">Rename</b-button>
                 </footer>
             </div>
         </b-modal>
@@ -41,14 +41,15 @@
 </template>
 
 <script>
-import MediaDirectoryApi, {getDirectoryPathString} from "../MediaDirectoryApi";
-import {morphToNotification} from "../api";
+import MediaDirectoryApi, {getDirectoryPathString} from "../../MediaDirectoryApi";
+import {morphToNotification} from "../../api";
 import MediaChooseDirectory from "./MediaChooseDirectory.vue";
 
 export default {
-    name: "MediaDirectory.vue",
+    name: "MediaDirectory",
+    components: { MediaChooseDirectory },
     props: {
-        directory: Object,
+        directory: { type: Object, required: true },
         displayFullPath: Boolean
     },
     data() {
@@ -64,7 +65,6 @@ export default {
             return getDirectoryPathString(this.directory.parentDirectory);
         }
     },
-    components: { MediaChooseDirectory },
     methods: {
         select(toggle) {
             // if already selected, then navigate into a directory

package/src/components/{MediaInsertModal.vue → media/MediaInsertModal.vue}

@@ -5,12 +5,12 @@
                 <slot name="title"><p class="modal-card-title">Choose an item to insert</p></slot>
             </header>
             <section class="modal-card-body">
-                <MediaList @navigate="onNavigate" @double-click-action="doInsert" @select-files="items => selectedFiles = items" :current-path="currentPath" :in-trash="inTrash" :search-query="searchQuery" />
+                <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 @click="doInsert" :disabled="selectedFiles.length === 0 || (!multiselectAllowed && selectedFiles.length > 1)" type="is-primary">
+                <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>