@oxygen-cms/ui 1.4.0 → 1.5.2

package/src/components/UserProfileForm.vue

@@ -0,0 +1,214 @@
+<template>
+    <div>
+        <div class="media">
+            <div class="media-left has-background-grey-light centered-icon">
+                <b-icon icon="user" size="is-large" class="has-text-grey-lighter"></b-icon>
+            </div>
+            <div class="media-content">
+                <GenericEditableField :api="usersApi" :data="user" label="Full Name" field-name="fullName" @update:data="user => $emit('update:user', user)">
+                    <template #display="{ value, edit }">
+                        <p class="title is-4">
+                            {{ value }} <b-button rounded size="is-small" type="is-light" icon-left="pencil-alt" @click="edit"></b-button>
+                        </p>
+                    </template>
+                </GenericEditableField>
+                <p class="subtitle is-6">
+                    {{ user.email }}
+                    <b-tooltip label="To change email addresses, please contact your administrator." position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
+                </p>
+            </div>
+        </div>
+
+        <div class="content">
+            <div class="level level-left">
+                <strong class="mr-2">Username:</strong>
+                <span>{{ user.username }}
+                    <b-tooltip label="To change username, please contact your administrator." position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
+                </span>
+            </div>
+            <div class="level level-left"><strong class="mr-2">Group: </strong>
+                <transition name="fade" mode="out-in">
+                        <span v-if="user">{{ user.group.name }}
+                            <b-tooltip :label="user.group.description" position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
+                        </span>
+                    <b-skeleton v-else width="20%" :animated="true" />
+                </transition>
+            </div>
+            <div class="level level-left"><strong class="mr-2">Joined: </strong>
+                <transition name="fade" mode="out-in">
+                    <UserJoined v-if="user" :user="user" />
+                    <b-skeleton v-else width="20%" :animated="true" />
+                </transition>
+            </div>
+        </div>
+
+        <b-modal :closable="false" :active.sync="isUserPreferencesModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title"><b-icon icon="cogs" size="is-normal" class="push-right"></b-icon>User Preferences</p>
+                </header>
+                <section class="modal-card-body">
+                    <UserPreferences />
+                </section>
+            </div>
+        </b-modal>
+
+        <b-button v-if="admin" @click="isUserPreferencesModalActive = true">Open User Preferences...</b-button>
+
+        <ShowIfPermitted v-if="!admin" :keys="['user.general', 'user.editor']">
+            <b-notification :closable="false" class="bottom-margin">
+                <h2 class="subtitle">User Preferences</h2>
+                <p>You can modify and personalize certain aspects of this administration interface to suit your own preferences.</p>
+                <br />
+                <b-button @click="isUserPreferencesModalActive = true">Open User Preferences...</b-button>
+            </b-notification>
+        </ShowIfPermitted>
+
+        <b-notification v-if="!admin" :closable="false">
+            <h2 class="subtitle">Change Password</h2>
+            <p>
+                Choosing a strong password will help keep your account safe.<br>
+                Try to use as many different characters, numbers and symbols as you possibly can, and make sure you don't use the password anywhere else.
+            </p>
+            <br>
+            <b-button type="is-info is-link" @click="isChangePasswordModalActive = true">Change your password now.</b-button>
+        </b-notification>
+
+        <b-notification v-if="!admin" :closable="false">
+            <h2 class="subtitle">Terminate Account</h2>
+            <p>If you are sure you delete <strong>your entire account and everything associated with it</strong>, then click the button below.</p>
+            <br>
+            <b-button type="is-danger" @click="deleteAccount">Delete your account</b-button>
+        </b-notification>
+
+        <b-modal
+            :active.sync="isChangePasswordModalActive"
+            has-modal-card
+            trap-focus
+            :destroy-on-hide="false"
+            aria-role="dialog"
+            aria-modal>
+            <template #default>
+                <div class="modal-card" style="width: 30em;">
+                    <header class="modal-card-head">
+                        <p class="modal-card-title">Change Password</p>
+                    </header>
+                    <section class="modal-card-body">
+                        <b-field label="Old password" label-position="inside">
+                            <b-input
+                                v-model="oldPassword"
+                                type="password"
+                                password-reveal
+                                placeholder="Old password"
+                                required>
+                            </b-input>
+                        </b-field>
+                        <b-field label="New password" label-position="inside">
+                            <b-input
+                                v-model="newPassword"
+                                type="password"
+                                password-reveal
+                                placeholder="New password"
+                                required>
+                            </b-input>
+                        </b-field>
+
+                        <b-field label="New password again" label-position="inside">
+                            <b-input
+                                v-model="newPasswordAgain"
+                                type="password"
+                                password-reveal
+                                placeholder="New password again"
+                                required
+                                @keyup.enter.native="changePassword">
+                            </b-input>
+                        </b-field>
+                    </section>
+                    <footer class="modal-card-foot" style="justify-content: flex-end;">
+                        <b-button @click="isChangePasswordModalActive = false;">Close</b-button>
+                        <b-button tag="input" native-type="submit" class="button is-primary" value="Change Password" @click="changePassword" />
+                    </footer>
+                </div>
+            </template>
+        </b-modal>
+    </div>
+</template>
+
+<script>
+import {morphToNotification} from "../api";
+import UserJoined from "./UserJoined.vue";
+import ShowIfPermitted from "./preferences/ShowIfPermitted.vue";
+import UserPreferences from "./preferences/UserPreferences.vue";
+import UsersApi from "../UsersApi";
+import AuthApi from "../AuthApi";
+import GenericEditableField from "./GenericEditableField.vue";
+
+export default {
+    name: "UserProfileForm",
+    components: {GenericEditableField, ShowIfPermitted, UserJoined, UserPreferences },
+    props: {
+        user: {
+            type: Object,
+            required: true
+        },
+        admin: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: 'update:user',
+    data() {
+        return {
+            oldPassword: '',
+            newPassword: '',
+            newPasswordAgain: '',
+            isChangePasswordModalActive: false,
+            isUserPreferencesModalActive: false,
+            authApi: new AuthApi(this.$buefy),
+            usersApi: new UsersApi(this.$buefy)
+        }
+    },
+    methods: {
+        async changePassword() {
+            let response = await this.authApi.changePassword(this.oldPassword, this.newPassword, this.newPasswordAgain);
+            this.$buefy.toast.open(morphToNotification(response));
+            if(response.status === 'success') {
+                this.oldPassword = '';
+                this.newPassword = '';
+                this.newPasswordAgain = '';
+                this.isChangePasswordModalActive = false;
+            }
+        },
+        deleteAccount() {
+            this.$buefy.dialog.confirm({
+                title: 'Deleting account',
+                message: 'Are you sure you want to <b>delete</b> your account? This action may not be reversible.',
+                type: 'is-danger',
+                hasIcon: true,
+                onConfirm: async () => {
+                    await this.usersApi.delete(this.user.id);
+                    await this.authApi.logout();
+                    this.$store.commit('setUser', null);
+                    await this.$router.push('/auth/logout');
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+@import './util.css';
+
+.centered-icon {
+    width: 3.5em; height: 3.5em; display: flex; justify-content: center; align-items: center;
+}
+
+.bottom-margin {
+    margin-bottom: 1.5rem;
+}
+
+.push-right {
+    margin-right: 1rem;
+}
+</style>

package/src/components/ViewProfile.vue

@@ -2,243 +2,31 @@
     <div class="full-height scroll-container pad">
         <div class="card">
             <div class="card-content">
-                <div class="media">
-                    <div class="media-left has-background-grey-light centered-icon">
-                        <b-icon icon="user" size="is-large" class="has-text-grey-lighter"></b-icon>
-                    </div>
-                    <div class="media-content">
-                        <transition name="fade" mode="out-in">
-                            <p class="title is-4" v-if="user && editingFullName === null">{{ user.fullName }} <b-button rounded size="is-small" type="is-light" icon-left="pencil-alt" @click="editFullName"></b-button></p>
-                            <b-field v-else-if="user" label="Full Name" label-position="inside" class="not-full-width">
-                                <b-input v-model="editingFullName"></b-input>
-                                <p class="control">
-                                    <b-button type="is-primary" :loading="updatingFullName" @click="submitFullName">Change</b-button>
-                                </p>
-                            </b-field>
-                            <b-skeleton size="is-medium" width="40%" :animated="true" v-else></b-skeleton>
-                        </transition>
-                        <transition name="fade" mode="out-in">
-                            <p class="subtitle is-6" v-if="user">
-                                {{ user.email }}
-                                <b-tooltip label="To change email addresses, please contact your administrator." position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
-                            </p>
-                            <b-skeleton width="30%" :animated="true" v-else></b-skeleton>
-                        </transition>
-                    </div>
-                </div>
-
-                <div class="content">
-                    <div class="level level-left">
-                        <strong class="mr-2">Username:</strong>
-                        <transition name="fade" mode="out-in">
-                            <span v-if="user">{{ user.username }}
-                                <b-tooltip label="To change username, please contact your administrator." position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
-                            </span>
-                            <b-skeleton width="20%" :animated="true" v-else />
-                        </transition>
-                    </div>
-                    <div class="level level-left"><strong class="mr-2">Group: </strong>
-                    <transition name="fade" mode="out-in">
-                    <span v-if="user">{{ user.group.name }}
-                        <b-tooltip :label="user.group.description" position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
-                    </span>
-                    <b-skeleton width="20%" :animated="true" v-else />
-                    </transition>
-                    </div>
-                    <div class="level level-left"><strong class="mr-2">Joined: </strong>
-                        <transition name="fade" mode="out-in">
-                            <span v-if="user">{{ joined }}, on {{ joinedAbs }}</span>
-                            <b-skeleton width="20%" :animated="true" v-else />
-                        </transition>
-                    </div>
-                </div>
-
-                <ShowIfPermitted :keys="['user.general', 'user.editor']">
-                    <b-modal :closable="false" :active.sync="isUserPreferencesModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
-                        <div class="modal-card">
-                            <header class="modal-card-head">
-                                <p class="modal-card-title"><b-icon icon="cogs" size="is-normal" class="push-right"></b-icon>User Preferences</p>
-                            </header>
-                            <section class="modal-card-body">
-                                <UserPreferences></UserPreferences>
-                            </section>
-                        </div>
-                    </b-modal>
-                    <b-notification :closable="false" class="bottom-margin">
-                        <h2 class="subtitle">User Preferences</h2>
-                        <p>You can modify and personalize certain aspects of this administration interface to suit your own preferences.</p>
-                        <br />
-                        <b-button @click="isUserPreferencesModalActive = true">Open User Preferences...</b-button>
-                    </b-notification>
-                </ShowIfPermitted>
-
-                <b-notification :closable="false">
-                    <h2 class="subtitle">Change Password</h2>
-                    <p>
-                        Choosing a strong password will help keep your account safe.<br>
-                        Try to use as many different characters, numbers and symbols as you possibly can, and make sure you don't use the password anywhere else.
-                    </p>
-                    <br>
-                    <b-button @click="isChangePasswordModalActive = true" type="is-info is-link">Change your password now.</b-button>
-                </b-notification>
-
-                <b-notification :closable="false">
-                    <h2 class="subtitle">Terminate Account</h2>
-                    <p>If you are sure you delete <strong>your entire account and everything associated with it</strong>, then click the button below.</p>
-                    <br>
-                    <b-button type="is-danger" @click="deleteAccount">Permanently delete your account</b-button>
-                </b-notification>
+                <UserProfileForm :user="user" @update:user="updateUser" />
             </div>
         </div>
-
-        <b-modal
-            :active.sync="isChangePasswordModalActive"
-            has-modal-card
-            trap-focus
-            :destroy-on-hide="false"
-            aria-role="dialog"
-            aria-modal>
-            <template #default="props">
-                <div class="modal-card" style="width: 30em;">
-                    <header class="modal-card-head">
-                        <p class="modal-card-title">Change Password</p>
-                    </header>
-                    <section class="modal-card-body">
-                        <b-field label="Old password" label-position="inside">
-                            <b-input
-                                type="password"
-                                v-model="oldPassword"
-                                password-reveal
-                                placeholder="Old password"
-                                required>
-                            </b-input>
-                        </b-field>
-                        <b-field label="New password" label-position="inside">
-                            <b-input
-                                type="password"
-                                v-model="newPassword"
-                                password-reveal
-                                placeholder="New password"
-                                required>
-                            </b-input>
-                        </b-field>
-
-                        <b-field label="New password again" label-position="inside">
-                            <b-input
-                                type="password"
-                                v-model="newPasswordAgain"
-                                password-reveal
-                                placeholder="New password again"
-                                required>
-                            </b-input>
-                        </b-field>
-                    </section>
-                    <footer class="modal-card-foot" style="justify-content: flex-end;">
-                        <b-button @click="isChangePasswordModalActive = false;">Close</b-button>
-                        <b-button tag="input" native-type="submit" class="button is-primary" @click="changePassword" value="Change Password" />
-                    </footer>
-                </div>
-            </template>
-        </b-modal>
     </div>
 </template>
 
 <script>
 import AuthApi from "../AuthApi";
-import Internationalize from "../Internationalize";
-import {morphToNotification} from "../api";
-import UserPreferences from "./preferences/UserPreferences.vue";
-import ShowIfPermitted from "./preferences/ShowIfPermitted.vue";
+import UserProfileForm from "./UserProfileForm.vue";
 
 export default {
     name: "ViewProfile",
-    components: {ShowIfPermitted, UserPreferences},
+    components: {UserProfileForm},
     data() {
         return {
-            user: null,
-            editingFullName: null,
-            updatingFullName: false,
-            oldPassword: '',
-            newPassword: '',
-            newPasswordAgain: '',
-            isChangePasswordModalActive: false,
-            isUserPreferencesModalActive: false,
             authApi: new AuthApi(this.$buefy)
         }
     },
-    created() {
-        this.fetchUserDetails()
-    },
     computed: {
-        joined() {
-            const rtf1 = new Intl.RelativeTimeFormat('en', { style: 'narrow' });
-            return rtf1.format(
-                Math.floor((new Date(this.user.createdAt) - new Date()) / (1000 * 24 * 60 * 60)),
-                'day'
-        );
-        },
-        joinedAbs() {
-            return Internationalize.formatDate(this.user.createdAt);
-        }
+        user() { return this.$store.state.user; }
     },
     methods: {
-        async fetchUserDetails() {
-            this.user = (await this.authApi.userDetails()).user;
-        },
-        editFullName() {
-            this.editingFullName = this.user.fullName;
-        },
-        async submitFullName() {
-            this.updatingFullName = true;
-            let response = await this.authApi.updateFullName(this.editingFullName);
-            this.updatingFullName = false;
-            this.$buefy.toast.open(morphToNotification(response));
-            this.user = response.item;
-            this.editingFullName = null;
-        },
-        async changePassword() {
-            let response = await this.authApi.changePassword(this.oldPassword, this.newPassword, this.newPasswordAgain);
-            this.$buefy.toast.open(morphToNotification(response));
-            if(response.status === 'success') {
-                this.oldPassword = '';
-                this.newPassword = '';
-                this.newPasswordAgain = '';
-                this.isChangePasswordModalActive = false;
-            }
-
-        },
-        deleteAccount() {
-            this.$buefy.dialog.confirm({
-                title: 'Deleting account',
-                message: 'Are you sure you want to <b>delete</b> your account? This action cannot be undone.',
-                type: 'is-danger',
-                hasIcon: true,
-                onConfirm: async () => {
-                    let response = await this.authApi.terminateAccount();
-                    window.location = '/';
-                }
-            })
+        updateUser(user) {
+            this.$store.commit('setUser', user);
         }
     }
 }
-</script>
-
-<style scoped>
-    @import './util.css';
-
-    .centered-icon {
-        width: 3.5em; height: 3.5em; display: flex; justify-content: center; align-items: center;
-    }
-
-    .not-full-width {
-        width: 20rem;
-    }
-
-    .bottom-margin {
-        margin-bottom: 1.5rem;
-    }
-
-    .push-right {
-        margin-right: 1rem;
-    }
-</style>
+</script>

package/src/components/auth/Auth404.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="box container is-flex is-flex-direction-column is-align-items-center">
+        <h1 class="title mt-6 mb-6">Page Not Found</h1>
+        <b-button tag="router-link" to="/" type="is-success">Back to Home</b-button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Auth404"
+}
+</script>
+
+<style scoped>
+    @import './login.scss';
+</style>

package/src/components/auth/Login.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="box container">
+        <LoginLogo />
+
+        <div v-if="!wantsTotpCode">
+            <b-notification has-icon icon="exclamation-triangle" type="is-danger is-light" :active="!submitting && hasFailedLogin" :closable="false" class="incorrect-login">
+                Username or password incorrect
+            </b-notification>
+
+            <b-field label="Username" label-position="inside" :type="!submitting && hasFailedLogin ? 'is-danger' : ''">
+                <b-input ref="username" v-model="username" name="username"></b-input>
+            </b-field>
+
+            <b-field label="Password" label-position="inside" :type="!submitting && hasFailedLogin ? 'is-danger' : ''">
+                <b-input v-model="password" name="password" type="password" @keyup.enter.native="submitLogin"></b-input>
+            </b-field>
+
+            <br>
+
+<!--                {{ URL::route(Blueprint::get('Password')->getRouteName('getRemind')) }} -->
+            <div class="login-justify-content">
+                <b-button type="is-primary" tag="input" value="Login" :loading="submitting" @click="submitLogin"></b-button>
+                <router-link to="/auth/forgot-password">Forgot Password</router-link>
+            </div>
+        </div>
+
+        <div v-else>
+            <h2 class="subtitle">Two-factor authentication is required</h2>
+            <p>To continue, open up your Authenticator app and issue your 2FA code.</p>
+
+            <br>
+
+            <b-field key="totpCode" label="2FA Code" label-position="inside" :type="!submitting && hasFailedLogin ? 'is-danger' : ''" :message="!submitting && hasFailedLogin ? 'Incorrect code. Try again.' : ''">
+                <b-input ref="totpCode" v-model="totpCode" name="totpCode" type="number" placeholder="e.g.: 123456" minlength="6" required @keyup.enter.native="submitLogin" />
+            </b-field>
+
+            <br>
+
+            <div class="login-justify-content">
+                <b-button type="is-primary" :disabled="confirmCodeDisabled" :loading="submitting" @click="submitLogin">Confirm code</b-button>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import LoginLogo from "./LoginLogo.vue";
+import AuthApi from "../../AuthApi";
+
+export default {
+    name: "Login",
+    components: { LoginLogo },
+    data() {
+        return {
+            authApi: new AuthApi(this.$buefy),
+            username: '',
+            password: '',
+            wantsTotpCode: false,
+            totpCode: '',
+            hasFailedLogin: false,
+            submitting: false
+        }
+    },
+    computed: {
+        confirmCodeDisabled() {
+            return this.totpCode.length !== 6;
+        }
+    },
+    created() {
+        console.log(this.$store.state.user);
+        if(this.$store.state.loginStatus === true) {
+            this.$buefy.notification.open({
+                message: 'You\'re already logged in!',
+                type: 'is-info',
+                duration: 4000
+            });
+            this.$router.push({ path: '/' });
+        }
+    },
+    mounted() {
+        this.$refs.username.focus();
+    },
+    methods: {
+        async submitLogin() {
+            try {
+                this.submitting = true;
+                let response = await this.authApi.login(this.username, this.password, this.totpCode !== '' ? this.totpCode : null);
+                this.submitting = false;
+                this.hasFailedLogin = false;
+                this.$store.commit('setUser', response.user);
+                if(this.$route.query.location) {
+                  window.location = this.$route.query.location;
+                }
+                this.$buefy.notification.open({
+                  message: "You're now logged in.",
+                  type: 'is-info',
+                  queue: false
+                });
+                await this.$router.push(this.$route.query.redirect ?? { path: '/' });
+            } catch(e) {
+                this.submitting = false;
+                if(e.response && e.response.code === 'account_deactivated') {
+                    this.hasFailedLogin = true;
+                    this.$buefy.notification.open({
+                        message: 'Your account is deactivated. Please contact the site administrator for help on how to regain access to your account.',
+                        type: 'is-warning',
+                        queue: false,
+                        duration: 10000
+                    });
+                }
+                if(e.response && ['incorrect_username_password', 'no_username'].includes(e.response.code)) {
+                    this.password = '';
+                    this.hasFailedLogin = true;
+                } else if(e.response && e.response.code === 'two_factor_auth_failed') {
+                    // if we are trying to enter a 2FA code again, then count the previous attempt as "failed"
+                    this.hasFailedLogin = this.wantsTotpCode;
+                    this.wantsTotpCode = true;
+                    this.$nextTick(() => {
+                        this.$refs.totpCode.focus();
+                    });
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+    @import "./login.scss";
+
+    .incorrect-login ::v-deep .media {
+        align-items: center;
+    }
+</style>

package/src/components/auth/LoginLogo.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="is-flex is-align-items-center is-justify-content-center login-welcome">
+        <img src="../../../assets/oxygen-icon.png" alt="Oxygen CMS" class="app-logo">
+        <span class="app-title">
+            Oxygen CMS
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "LoginLogo"
+}
+</script>
+
+<style scoped>
+    .app-title {
+        font-weight: 200;
+        font-size: 2.2rem;
+    }
+
+    .app-logo {
+        margin-right: 0.75rem;
+        width: 4rem;
+    }
+
+    .login-welcome {
+        padding: 3rem 0;
+    }
+</style>

package/src/components/auth/Logout.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="box container">
+        <h1 class="subtitle has-text-centered">
+            You've been logged out
+        </h1>
+
+        <div class="login-justify-content">
+            <b-button tag="a" href="/" type="is-text">
+                Return to Home
+            </b-button>
+            <b-button to="/auth/login" tag="router-link" type="is-primary">
+                Login Again
+            </b-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Logout"
+}
+</script>
+
+<style scoped>
+
+</style>