@oxygen-cms/ui 1.5.0

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

@@ -0,0 +1,32 @@
+<template>
+    <div class="full-height scroll-container pad">
+        <div class="card">
+            <div class="card-content">
+                <UserProfileForm :user="user" @update:user="updateUser" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import AuthApi from "../AuthApi";
+import UserProfileForm from "./UserProfileForm.vue";
+
+export default {
+    name: "ViewProfile",
+    components: {UserProfileForm},
+    data() {
+        return {
+            authApi: new AuthApi(this.$buefy)
+        }
+    },
+    computed: {
+        user() { return this.$store.state.user; }
+    },
+    methods: {
+        updateUser(user) {
+            this.$store.commit('setUser', user);
+        }
+    }
+}
+</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 v-model="username" name="username" ref="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 v-model="totpCode" name="totpCode" type="number" placeholder="e.g.: 123456" minlength="6" required @keyup.enter.native="submitLogin" ref="totpCode" />
+            </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>

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>