@fishawack/lab-velocity 2.0.0-beta.1 → 2.0.0-beta.3

package/_Build/vue/modules/AuthModule/routes/loginsso.vue

@@ -0,0 +1,134 @@
+<template>
+    <template v-if="stage === 1">
+        <h1 class="h2 h2--small">Sign in</h1>
+        <p class="AM-mb-3 AM-mt-2">Enter your email address to continue.</p>
+
+        <form @submit.prevent="submit" class="form" id="memberLoginForm">
+            <el-input
+                class="AM-mb-3"
+                label="Email"
+                placeholder="Enter your email address"
+                name="email"
+                type="email"
+                required
+                v-model="form.email"
+                :error="form.errors"
+            />
+
+            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+            <div style="position: absolute; left: -5000px" aria-hidden="true">
+                <input
+                    ref="honeypot"
+                    type="text"
+                    name="b_0e1715593ad9366bc5d3ad8be_7aca058f12"
+                    tabindex="-1"
+                    value=""
+                />
+            </div>
+
+            <el-button
+                native-type="submit"
+                type="primary"
+                :disabled="loading || !isValidEmail(form.email)"
+                @click="onSubmit"
+            >
+                Continue
+            </el-button>
+
+            <p class="disclaimer AM-mt-3">
+                Having trouble signing in?
+                <a :href="$store.state.auth.contact" class="underline"
+                    >Contact us</a
+                >
+            </p>
+        </form>
+    </template>
+    <template v-else>
+        <h1 class="h2 h2--small">Sign in with SSO</h1>
+        <p class="AM-mt-2">
+            Redirecting you to your organisation’s Single Sign-On (SSO) gateway
+            <span class="AM-color-highlight"
+                >in {{ countdown }} seconds...</span
+            >
+        </p>
+        <p class="disclaimer AM-mt-3">
+            <a :href="redirect_url" class="underline">Go to SSO gateway</a>
+        </p>
+    </template>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: "",
+                    device_name: "Mobile device",
+                    remember: true,
+                },
+                { resetOnSuccess: false },
+            ),
+            countdown: 3,
+            loading: false,
+            redirect_url: null,
+            stage: 1,
+        };
+    },
+
+    methods: {
+        async onSubmit() {
+            if (this.loading) return;
+
+            this.loading = true;
+
+            try {
+                const res = await this.form.post(`/hydrate/sso/check`);
+                if (res["redirect_url"]) {
+                    this.redirect_url = res["redirect_url"];
+                    this.setRedirect();
+                } else {
+                    this.$router.push({
+                        name: "auth.logincreds",
+                        query: { email: this.form.email },
+                    });
+                }
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+        setRedirect() {
+            this.stage = 2;
+            let vue = this;
+            setTimeout(function () {
+                vue.setCountdown();
+            }, 1000);
+        },
+        setCountdown() {
+            this.countdown--;
+            if (this.countdown === 0) {
+                window.location = this.redirect_url;
+            } else {
+                let vue = this;
+                setTimeout(function () {
+                    vue.setCountdown();
+                }, 1000);
+            }
+        },
+        isValidEmail(email) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(email);
+        },
+    },
+
+    mounted() {},
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/logout.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+    metaInfo() {
+        return {
+            title: "Logout",
+        };
+    },
+
+    async mounted() {
+        try {
+            await this.$store.dispatch("logout", {
+                errors: this.$root.errors,
+            });
+        } catch {
+            /* empty */
+        } finally {
+            this.$router.push({ name: "auth.login" });
+        }
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/logoutheadless.vue

@@ -0,0 +1,27 @@
+<template>
+    <p v-text="done ? 'Logged out' : 'Logging out...'" />
+</template>
+
+<script>
+export default {
+    metaInfo() {
+        return {
+            title: "Logout",
+        };
+    },
+
+    data: () => ({
+        done: false,
+    }),
+
+    async mounted() {
+        try {
+            await this.$store.dispatch("logout", {
+                errors: this.$root.errors,
+            });
+        } finally {
+            this.done = true;
+        }
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/register.vue

@@ -0,0 +1,174 @@
+<template>
+    <h1 class="h2 h2--small">Register</h1>
+    <p class="AM-mb-3 AM-mt-2">
+        Please enter your personal details to complete your registration.
+    </p>
+
+    <form
+        @submit.prevent="submit"
+        :class="form.errors && form.errors.any() ? 'form error' : 'form'"
+        id="memberLoginForm"
+    >
+        <el-input
+            class="AM-mb-2"
+            label="Full name"
+            placeholder="Enter your full name"
+            name="name"
+            required
+            v-model="form.name"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="AM-mb-2"
+            label="Email"
+            placeholder="Enter your email address"
+            name="email"
+            type="email"
+            required
+            v-model="form.email"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="AM-mb-2"
+            label="Password"
+            name="password"
+            placeholder="Create a unique password"
+            autocomplete="new-password"
+            type="password"
+            required
+            v-model="form.password"
+            :error="form.errors"
+        />
+
+        <VPasswordValidation
+            :password="form.password"
+            @passwordValid="updatePasswordValidity"
+        />
+
+        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+        <div style="position: absolute; left: -5000px" aria-hidden="true">
+            <input
+                ref="honeypot"
+                type="text"
+                name="b_0e1715593ad9366bc5d3ad8be_7aca058f12"
+                tabindex="-1"
+                value=""
+            />
+        </div>
+
+        <elButton
+            native-type="submit"
+            type="primary"
+            :disabled="
+                loading ||
+                form.name?.length < 1 ||
+                form.email?.length < 5 ||
+                !isPasswordValid
+            "
+            @click="onSubmit"
+        >
+            Register
+        </elButton>
+
+        <p class="disclaimer AM-mt-3">
+            Having trouble registering?
+            <a :href="$store.state.auth.contact" class="underline"
+                >Contact us</a
+            >
+        </p>
+    </form>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    data() {
+        return {
+            form: new Form(
+                {
+                    name: "",
+                    email: "",
+                    password: "",
+                },
+                { resetOnSuccess: false },
+            ),
+            loading: false,
+            isPasswordValid: false,
+        };
+    },
+
+    methods: {
+        async onSubmit() {
+            if (this.loading) return;
+
+            this.loading = true;
+
+            try {
+                const res = await this.form.post("/register");
+
+                if (res["logged-in"]) {
+                    try {
+                        await this.$store.dispatch("logout", {
+                            errors: this.$root.errors,
+                        });
+                    } catch (e) {}
+
+                    await this.form.post("/register");
+                }
+                if (res["redirect"]) {
+                    // Redirect here
+                    this.$router.push({
+                        name: `auth.login`,
+                        query: { company: res["company"] },
+                    });
+                    this.$notify.error({
+                        title: "Domain is SSO enabled",
+                        message: "Sign in with your company email address",
+                        duration: 10000,
+                    });
+                } else {
+                    await this.postLogin();
+                }
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async postLogin() {
+            const { data: user } = await this.$store.dispatch("getUser", {
+                errors: this.$root.errors,
+            });
+
+            if (window.dataLayer) {
+                window.dataLayer.push({ event: "login", user });
+            }
+
+            if (this.$store.state.auth.intended) {
+                this.$router.push(this.$store.state.auth.intended);
+            } else {
+                this.$router.push({
+                    name: `auth.verify`,
+                });
+                // Problem Here
+            }
+
+            this.$store.commit("setIntended", null);
+        },
+        updatePasswordValidity(isValid) {
+            this.isPasswordValid = isValid;
+        },
+    },
+
+    components: {
+        VPasswordValidation: require("./../components/VPasswordValidation.vue")
+            .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/reset.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2 h2--small">Reset password</h1>
+            <form class="form" @submit.prevent="submit">
+                <div v-if="!form.successful">
+                    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                        <strong class="">Email: {{ form?.email }}</strong>
+                    </p>
+                    <p class="AM-mt-0.5">
+                        Please create a new password. Passwords you have used
+                        previously aren’t permitted.
+                    </p>
+                    <el-input
+                        v-model="form.password"
+                        class="AM-mt-3"
+                        label="New Password"
+                        placeholder="Enter new password"
+                        name="password"
+                        :error="form.errors"
+                        type="password"
+                        autocomplete="new-password"
+                        required
+                    />
+
+                    <VPasswordValidation
+                        :password="form.password"
+                        @passwordValid="updatePasswordValidity"
+                    />
+
+                    <el-input
+                        class="hidden"
+                        v-model="form.token"
+                        name="token"
+                        :error="form.errors"
+                        type="hidden"
+                        required
+                    />
+
+                    <elButton
+                        native-type="submit"
+                        type="primary"
+                        :disabled="form.processing || !isPasswordValid"
+                        :loading="form.processing"
+                        @click="onSubmit"
+                    >
+                        <span v-text="'Reset password'" />
+                    </elButton>
+                </div>
+                <div v-else>
+                    <h4 class="mt" v-text="`Success!`" />
+                    <p v-text="`Your password has been reset.`" />
+                </div>
+                <p class="disclaimer AM-mt-3">
+                    <router-link
+                        class="color-1 underline"
+                        :to="{ name: 'auth.login' }"
+                    >
+                        Back to Sign in
+                    </router-link>
+                </p>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: "",
+                    password: "",
+                    token: "",
+                },
+                { resetOnSuccess: false },
+            ),
+            isPasswordValid: false,
+        };
+    },
+
+    mounted() {
+        this.form.email = this.$route.query.email;
+        this.form.token = this.$route.query.token;
+    },
+
+    methods: {
+        async onSubmit() {
+            try {
+                const res = await this.form.post("/reset-password");
+
+                this.$router.push({
+                    name: "auth.success-reset",
+                    query: { email: this.form.email },
+                });
+            } catch (e) {
+                if (
+                    e.response &&
+                    e.response.status === 422 &&
+                    e.response.data.message ===
+                        "This password reset token is invalid."
+                ) {
+                    this.$router.push({
+                        name: "auth.expired-reset",
+                        query: { email: this.form.email },
+                    });
+                }
+                this.$root.errors(e);
+            }
+        },
+
+        updatePasswordValidity(isValid) {
+            this.isPasswordValid = isValid;
+        },
+    },
+
+    metaInfo() {
+        return {
+            title: "Reset Password",
+        };
+    },
+
+    components: {
+        VPasswordValidation: require("./../components/VPasswordValidation.vue")
+            .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/success-forgot.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="relative">
+        <section id="forgotPasswordForm">
+            <h1 class="h2 h2--small">Reset password</h1>
+
+            <form class="form" @submit.prevent="submit">
+                <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                    <strong class="">Email: {{ form?.email }}</strong>
+                </p>
+                <p class="AM-mt">
+                    If this account exists we have sent an email containing
+                    instructions for resetting the password.
+                    <strong>Please check your inbox.</strong>
+                </p>
+                <p class="AM-mt-3 AM-mb">
+                    Haven’t received the email after 10 minutes?
+                </p>
+
+                <el-input
+                    class="hidden"
+                    v-model="form.email"
+                    label="Email address"
+                    name="email"
+                    :error="form.errors"
+                    type="email"
+                    placeholder="Email"
+                    required
+                />
+
+                <elButton
+                    native-type="submit"
+                    type="primary"
+                    :disabled="form.processing"
+                    :loading="form.processing"
+                    @click="onSubmit"
+                >
+                    Re-send instructions
+                </elButton>
+
+                <p class="disclaimer AM-mt-3">
+                    <router-link
+                        class="color-1 underline"
+                        :to="{ name: `auth.login` }"
+                    >
+                        Back to Sign in
+                    </router-link>
+                </p>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    data: () => ({
+        form: new Form(
+            {
+                email: "",
+            },
+            { resetOnSuccess: false },
+        ),
+        notification: null,
+    }),
+
+    methods: {
+        async onSubmit() {
+            try {
+                if (this.notification) {
+                    this.notification.close();
+                    this.notification = null;
+                }
+
+                await this.form.post("/forgot-password");
+
+                this.$notify({
+                    type: "success",
+                    message: "Email has been re-sent",
+                    duration: 10000,
+                    class: "el-notification--success el-notification--right-override",
+                });
+            } catch (e) {
+                if (e.response && e.response.status === 422) {
+                    this.notification = this.$notify({
+                        type: "warning",
+                        message: "Please allow 10 minutes before re-requesting",
+                        duration: 0,
+                        class: "el-notification--warning el-notification--right-override",
+                    });
+                } else {
+                    this.$root.errors(e);
+                }
+            }
+        },
+    },
+
+    mounted() {
+        this.form.email = this.$route.query.email;
+
+        // If a user has come here directly then send them off to the original forgot screen to enter an email
+        if (!this.form.email) {
+            this.$router.push({
+                name: `auth.forgot`,
+            });
+        }
+    },
+
+    metaInfo() {
+        return {
+            title: "Forgot Password | Success",
+        };
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/success-reset.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2 h2--small">Success</h1>
+
+            <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                <strong class="">Email: {{ $route.query.email }}</strong>
+            </p>
+            <p class="AM-mt">
+                Your password has been reset. Please sign in to continue.
+            </p>
+
+            <elButton
+                tag="router-link"
+                type="primary"
+                :to="{ name: 'auth.login' }"
+            >
+                <span v-text="'Sign in'" />
+            </elButton>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+    metaInfo() {
+        return {
+            title: "Reset Password | Success",
+        };
+    },
+    components: {
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/success-verify.vue

@@ -0,0 +1,32 @@
+<template>
+    <h1 class="h2 h2--small">Verification complete</h1>
+    <p class="mb-0">
+        <strong
+            >Welcome to {{ $root.appName }},
+            {{ $store.state?.auth?.user?.name }}!</strong
+        >
+    </p>
+    <p>Your account has been verified successfully.</p>
+
+    <elButton
+        tag="router-link"
+        type="primary"
+        :to="{ name: $store.state.auth.redirect }"
+    >
+        <span v-text="'Continue'" />
+    </elButton>
+</template>
+
+<script>
+export default {
+    mounted() {
+        this.$store.dispatch("getUser", {
+            errors: this.$root.errors,
+        });
+    },
+    components: {
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    // Problem in this file
+};
+</script>