@fishawack/lab-velocity 1.0.0 → 1.1.1

package/AuthModule/routes/login.vue

@@ -0,0 +1,137 @@
+<template>
+    <h1 class="h2">Sign in</h1>
+    <p class="mb-2">Enter your password to continue.</p>
+
+    <form @submit.prevent="submit" class="form" id="memberLoginForm">
+        <el-input
+            class="mb-2.5"
+            label="Email"
+            placeholder="Enter your email address"
+            name="email"
+            type="email"
+            required
+            v-model="form.email"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="mb-2.5"
+            label="Password"
+            placeholder="Enter your password"
+            name="password"
+            type="password"
+            required
+            v-model="form.password"
+            :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>
+
+        <button
+            type="submit"
+            :disabled="loading || (form.email?.length < 5 || form.password?.length < 8 )"
+            class="button button--primary"
+        >
+            Continue
+        </button>
+
+        <p class="disclaimer mt-2">
+            Having trouble signing in?
+            <router-link class="color-1 underline" :to="{ name: `${$store.state.authBase}.forgot` }">
+                Reset password
+            </router-link>
+            or
+            <a :href="contact" class="underline">Contact us</a>
+        </p>
+    </form>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+import { default as elInput} from "../../form/basic.vue";
+
+export default {
+    components: {
+        elInput: elInput
+    },
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: this.$route.query.email ?? '',
+                    password: '',
+                    device_name: "Mobile device",
+                    remember: true,
+                },
+                { resetOnSuccess: false }
+            ),
+            loading: false,
+            contact:  process.env.HYDRATE_CONTACT ?? 'mailto:EP@avalerehealth.com',
+        };
+    },
+    
+    methods: {
+        async submit() {
+            if (this.loading) return;
+
+            this.loading = true;
+
+            try {
+                const res = await this.form.post("/login");
+
+                if (res["logged-in"]) {
+                    try {
+                        await this.$store.dispatch("logout", {
+                            errors: this.$root.errors,
+                        });
+                    } catch (e) {}
+
+                    await this.form.post("/login");
+                }
+
+                await this.postLogin();
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async postLogin() {
+            this.$store.commit("setAuth", true);
+
+            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.intended) {
+                this.$router.push(this.$store.state.intended);
+            } else {
+                this.$router.push({ name: "members" });
+                // Problem here
+            }
+
+            this.$store.commit("setIntended", null);
+        },
+    },
+
+    mounted() {
+        if (this.$route.query.authenticated) {
+            this.postLogin();
+        }
+    },
+};
+</script>

package/AuthModule/routes/logincallback.vue

@@ -0,0 +1,43 @@
+<template>
+    <!-- Set Spinner -->
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+
+        }
+    },
+    
+    methods: {
+        async postLogin() {
+            this.$store.commit("setAuth", true);
+
+            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.intended) {
+                this.$router.push(this.$store.state.intended);
+            } else {
+                this.$router.push({ name: "members" });
+                // Problem Here
+            }
+
+            this.$store.commit("setIntended", null);
+        },
+    },
+
+    mounted() {
+        if (this.$route.query.authenticated) {
+            this.postLogin();
+        }
+    },
+};
+</script>

package/AuthModule/routes/loginsso.vue

@@ -0,0 +1,121 @@
+<template>
+    <template v-if="stage === 1">
+        <h1 class="h2">Sign in</h1>
+        <p class="mb-2">Enter your email address to continue. </p>
+
+        <form @submit.prevent="submit" class="form" id="memberLoginForm">
+            <el-input
+                class="mb-2.5"
+                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>
+
+            <button
+                type="submit"
+                :disabled="loading || (form.email?.length < 5 || form.password?.length < 8 )"
+                class="button button--primary"
+            >
+                Continue
+            </button>
+
+            <p class="disclaimer mt-2">
+                Having trouble signing in?
+                <a :href="contact" class="underline">Contact us</a>
+            </p>
+        </form>
+    </template>
+    <template v-else>
+        <h1 class="h2">Sign in with SSO</h1>
+        <p>Redirecting you to your organisation’s Single Sign-On (SSO) gateway. Please wait a moment.</p>
+        <p>Redirecting <span class="color-11">in {{ countdown }} seconds...</span></p>
+    </template>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+import { default as elInput} from "../../form/basic.vue";
+
+export default {
+    components: {
+        elInput: elInput,
+    },
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: '',
+                    device_name: "Mobile device",
+                    remember: true,
+                },
+                { resetOnSuccess: false }
+            ),
+            countdown: 3,
+            loading: false,
+            redirect_url: null,
+            stage: 1,
+            contact:  process.env.HYDRATE_CONTACT ?? 'mailto:EP@avalerehealth.com',
+        };
+    },
+    
+    methods: {
+        async submit() {
+            if (this.loading) return;
+
+            this.loading = true;
+
+            try {
+                const res = await this.form.post(`/sso`);
+                if(res['redirect_url']) {
+                    this.redirect_url = res['redirect_url'];
+                    this.setRedirect();
+                } else {
+                    this.$router.push({name: `${this.$store.state.authBase}.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);
+            }
+        }
+    },
+
+    mounted() {
+        
+    },
+};
+</script>

package/AuthModule/routes/register.vue

@@ -0,0 +1,152 @@
+<template>
+    <h1 class="h2">Register</h1>
+    <p class="mb-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="mb-2.5"
+            label="Full name"
+            placeholder="Enter your full name"
+            name="name"
+            required
+            v-model="form.name"
+            :error="form.errors"
+        />
+        
+        <el-input
+            class="mb-2.5"
+            label="Email"
+            placeholder="Enter your email address"
+            name="email"
+            type="email"
+            required
+            v-model="form.email"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="mb-2.5"
+            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>
+
+        <button
+            type="submit"
+            :disabled="loading || (form.name?.length < 1 || form.email?.length < 5 || !isPasswordValid)"
+            class="button button--primary"
+        >
+            Register
+        </button>
+
+        <p class="disclaimer mt-2">
+            Having trouble registering?
+            <a :href="contact" class="underline">Contact us</a>
+        </p>
+    </form>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+import { default as elInput} from "../../form/basic.vue";
+
+export default {
+    data() {
+        return {
+            form: new Form(
+                {
+                    name: '',
+                    email: '',
+                    password: '',
+                },
+                { resetOnSuccess: false }
+            ),
+            loading: false,
+            isPasswordValid: false,
+            contact:  process.env.HYDRATE_CONTACT ?? 'mailto:EP@avalerehealth.com',
+        };
+    },
+    
+    methods: {
+        async submit() {
+            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");
+
+                }
+                console.log(res);
+                if(res['redirect']) {
+                    // Redirect here
+                    this.$router.push({ name: `${this.$store.state.authBase}.account-exists`, query: {company:res['company']} });
+                } else  {
+                    await this.postLogin();
+                }
+                
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async postLogin() {
+            this.$store.commit("setAuth", true);
+
+            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.intended) {
+                this.$router.push(this.$store.state.intended);
+            } else {
+                this.$router.push({ name: `${this.$store.state.authBase}.verify` });
+                // Problem Here
+            }
+
+            this.$store.commit("setIntended", null);
+        },
+        updatePasswordValidity(isValid) {
+            this.isPasswordValid = isValid;
+        },
+    },
+
+    components: {
+        VPasswordValidation: require("./../components/VPasswordValidation.vue").default,
+        elInput: elInput
+    },
+};
+</script>

package/AuthModule/routes/reset.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2">Reset password</h1>
+            <form class="form" @submit.prevent="submit">
+                <div v-if="!form.successful">
+                    <p class="mt mb-0 color-21">
+                        <strong class="">Email: {{ form?.email }}</strong>
+                    </p>
+                    <p class="mt-0.5">
+                        Please create a new password. Passwords you have used previously aren’t permitted.
+                    </p>
+                    <el-input
+                        v-model="form.password"
+                        class="mt-2"
+                        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
+                        v-model="form.token"
+                        name="token"
+                        :error="form.errors"
+                        type="hidden"
+                        required
+                    />
+
+                    <button
+                        type="submit"
+                        :disabled="form.processing || !isPasswordValid"
+                        :loading="form.processing"
+                        class="button button--primary mt-1.5"
+                    >
+                        <span v-text="'Reset password'" />
+                    </button>
+                </div>
+                <div v-else>
+                    <h4 class="mt" v-text="`Success!`" />
+                    <p v-text="`Your password has been reset.`" />
+                    <p class="disclaimer mb-2.5">
+                        <router-link
+                            class="color-1 underline"
+                            :to="{ name: `${$store.state.authBase}.login` }"
+                        >
+                            Back to Sign in
+                        </router-link>
+                    </p>
+                </div>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+import { default as elInput} from "../../form/basic.vue";
+
+export default {
+    components: {},
+    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 submit() {
+            try {
+                const res = await this.form.post("/reset-password");
+
+                this.$router.push({
+                    name: `${this.$store.state.authBase}.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: `${this.$store.state.authBase}.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: elInput
+    },
+};
+</script>

package/AuthModule/routes/success-forgot.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="relative">
+        <section id="forgotPasswordForm">
+            <h1 class="h2">Reset password</h1>
+
+            <form class="form" @submit.prevent="submit">
+                <p class="mt mb-0 color-21">
+                    <strong class="">Email: {{ form?.email }}</strong>
+                </p>
+                <p class="mt-0.5">
+                    If this account exists we have sent an email containing instructions for resetting the password. <strong>Please check your inbox.</strong>
+                </p>
+                <p class="mt-0.5">
+                    Haven’t received the email after 10 minutes?
+                </p>
+
+                <el-input
+                    class="mt-2 mb-2.5 hidden"
+                    v-model="form.email"
+                    label="Email address"
+                    name="email"
+                    :error="form.errors"
+                    type="email"
+                    placeholder="Email"
+                    required
+                />
+
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    :loading="form.processing"
+                    class="button button--primary"
+                >
+                    Re-send instructions
+                </button>
+
+                <p class="disclaimer mt-2">
+                    <router-link
+                        class="color-1 underline"
+                        :to="{ name: `${$store.state.authBase}.login` }"
+                    >
+                        Back to Sign in
+                    </router-link>
+                </p>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+import { default as elInput} from "../../form/basic.vue";
+
+export default {
+    components: {
+        elInput: elInput
+    },
+    data: () => ({
+        form: new Form(
+            {
+                email: "",
+            },
+            { resetOnSuccess: false }
+        ),
+        notification: null,
+    }),
+
+    methods: {
+        async submit() {
+            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: `${this.$store.state.authBase}.forgot`,
+            });
+        }
+    },
+
+    metaInfo() {
+        return {
+            title: "Forgot Password | Success",
+        };
+    },
+};
+</script>