@fishawack/lab-velocity 1.0.0 → 1.1.1

package/AuthModule/components/VPasswordValidation.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="mt-2">
+        <p class="font-700 mb-0.5">Your password must contain:</p>
+        <p class="flex m-0">
+            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7"
+                v-if="passwordLengthValid" />
+            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
+            At least 8 characters
+        </p>
+        <p class="flex m-0">
+            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7" v-if="hasLetter" />
+            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
+            At least one letter
+        </p>
+        <p class="flex mt-0 ml-0 mr-0 mb-3">
+            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7" v-if="hasNumberOrSymbol" />
+            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
+            At least one number or symbol
+        </p>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        password: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        passwordLengthValid() {
+            return this.password?.length >= 8;
+        },
+        hasLetter() {
+            return this.tests.letter.test(this.password);
+        },
+        hasNumberOrSymbol() {
+            return this.tests.number.test(this.password) || this.tests.symbol.test(this.password);
+        },
+        passwordValid() {
+            return this.passwordLengthValid && this.hasLetter && this.hasNumberOrSymbol;
+        },
+    },
+    data() {
+        return {
+            tests: {
+                letter: /[a-zA-Z]+/,
+                number: /[0-9]+/,
+                symbol: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/,
+            }
+        };
+    },
+    watch: {
+        password(newPassword) {
+            this.$emit('passwordValid', this.passwordValid);
+        },
+    },
+    methods: {
+    },
+    mounted() {
+        this.$emit('passwordValid', this.passwordValid);
+    },
+}
+</script>

package/AuthModule/js/routes.js

@@ -0,0 +1,104 @@
+"use strict";
+export function authRoutes(node, store, nested = 'auth') {
+    return {
+        path: '/'+nested,
+        name: nested,
+        component: require("../routes/container.vue").default,
+        redirect: (to) => {
+            return { name: `${nested}.login` };
+        },
+        children: [
+            {
+                path: "login-creds",
+                component: node
+                    ? ""
+                    : require("../routes/login.vue")
+                          .default,
+                name: `${nested}.logincreds`
+            },
+            {
+                path: "login",
+                component: node
+                    ? ""
+                    : require("../routes/loginsso.vue")
+                          .default,
+                name: `${nested}.login`
+            },
+            {
+                path: "callback",
+                component: node
+                    ? ""
+                    : require("../routes/logincallback.vue")
+                          .default,
+                name: `${nested}.callback`
+            },
+            {
+                path: "forgot",
+                component: require("../routes/forgot.vue").default,
+                name: `${nested}.forgot`,
+            },
+            {
+                path: "reset",
+                component: require("../routes/reset.vue").default,
+                name: `${nested}.reset`,
+                props: true,
+            },
+            {
+                path: "force-reset",
+                component: require("../routes/force-reset.vue").default,
+                name: `${nested}.force-reset`,
+                props: true,
+            },
+            {
+                path: "register",
+                component: require("../routes/register.vue").default,
+                name: `${nested}.register`,
+            },
+            {
+                path: "verify",
+                component: require("../routes/verify.vue").default,
+                name: `${nested}.verify`,
+            },
+            {
+                path: "verified",
+                component: require("../routes/success-verify.vue").default,
+                name: `${nested}.success-verify`,
+            },
+            {
+                path: "expired-verification",
+                component: require("../routes/expired-verification.vue").default,
+                name: `${nested}.expired-verification`,
+            },
+            {
+                path: "expired-reset",
+                component: require("../routes/expired-reset.vue").default,
+                name: `${nested}.expired-reset`,
+            },
+            {
+                path: "success-reset",
+                component: require("../routes/success-reset.vue").default,
+                name: `${nested}.success-reset`,
+            },
+            {
+                path: "success-forgot",
+                component: require("../routes/success-forgot.vue").default,
+                name: `${nested}.success-forgot`,
+            },
+            {
+                path: "account-exists",
+                component: require("../routes/account-exists.vue").default,
+                name: `${nested}.account-exists`,
+            },
+        ],
+        props: true,
+        nav: {
+            visible: true,
+        },
+        meta: {
+            guest: true,
+            header: true,
+            footer: false,
+            fullpageModal: true,
+        },
+    }
+}

package/AuthModule/routes/account-exists.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2">Account already exists</h1>
+            
+            <p class="mt mb-0 color-21">
+                <strong class="">Company: {{ $route.query.company }}</strong>
+            </p>
+            <p class="mt-0.5">
+                Your company already has an active account.
+            </p>
+
+            <router-link
+                :to="{name: `${$store.state.authBase}.login`}"
+                class="button button--primary px-2"
+            >
+                <span v-text="'Sign in'" />
+            </router-link>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+    metaInfo() {
+        return {
+            title: "Account Exists | Error",
+        };
+    },
+};
+</script>

package/AuthModule/routes/container.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="AuthModule">
+        <section class="AuthModule__Content">
+            <div class="AuthModule__logo__container">
+                <router-link to="/" class="logo" aria-label="Go to home page">
+                    <GSvg
+                        class="AuthModule__logo"
+                        :name="logoName"
+                        embed
+                        asis
+                        role="presentation"
+                        tabindex="-1"
+                    />
+                </router-link>
+            </div>
+            <div class="AuthModule__form">
+                <router-view />
+            </div>
+        </section>
+        <div class="pin right-0 bottom-0 mr-3">
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    mounted() {
+
+    },
+    data() {
+        return {
+              logoName: process.env.HYDRATE_LOGO,
+        }
+    },
+
+    components: {
+        
+    },
+};
+</script>

package/AuthModule/routes/expired-reset.vue

@@ -0,0 +1,76 @@
+<template>
+    <h1 class="h2">Sorry, your password reset has expired</h1>
+
+    <p class="mt mb-0 color-21">
+        <strong class="">Email: {{ form?.email }}</strong>
+    </p>
+    <p class="mt-0.5">
+        For security, password reset requests are only <strong>active for 1&nbsp;hour</strong>. If you still want to reset your password, please request a new password reset-link.</p>
+
+    <form class="form"
+        @submit.prevent="submit"
+    >
+        <el-input
+            class="input--full 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"
+        >
+            Request new reset-link
+        </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>
+</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 }
+        ),
+    }),
+
+    methods: {
+        async submit() {
+            try {
+                await this.form.post("/forgot-password");
+
+                this.$router.push({
+                    name: `${this.$store.state.authBase}.success-forgot`,
+                    query: { email: this.form.email },
+                });
+            } catch (e) {
+                this.$root.errors(e);
+            }
+        },
+    },
+
+    mounted(){
+        this.form.email = this.$route.query.email;
+    }
+};
+</script>

package/AuthModule/routes/expired-verification.vue

@@ -0,0 +1,100 @@
+<template>
+    <h1 class="h2">Verification link expired</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">
+            This email verification link has expired. Not to worry, we can email you a new one.
+        </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 verification link
+        </button>
+    </form>
+
+    <p class="disclaimer mt-2">
+        Having trouble singing in?
+        <a :href="contact" class="underline">Contact us</a>
+    </p>
+</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,
+        contact:  process.env.HYDRATE_CONTACT ?? 'mailto:EP@avalerehealth.com',
+    }),
+
+    methods: {
+        async submit() {
+            try {
+                if (this.notification) {
+                    this.notification.close();
+                    this.notification = null;
+                }
+
+                await this.form.post("/email/verification-notification");
+
+                this.$notify.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 === 429) {
+                    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 if (e.response && e.response.status === 422) {
+                    this.notification = this.$notify({
+                        type: "error",
+                        message: e.response.data.message,
+                        duration: 0,
+                        class: 'el-notification--error el-notification--right-override'
+                    });
+                }
+                else {
+                    this.$root.errors(e);
+                }
+            }
+        },
+    },
+
+    async mounted() {
+        this.form.email = this.$route.query.email;
+    },
+};
+</script>

package/AuthModule/routes/force-reset.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2">Welcome</h1>
+            <form class="form" @submit.prevent="submit">
+                <div v-if="!form.successful">
+                    <p class="mt mb-0 color-21">
+                        <strong class="">Email: {{ $store.state.user?.email }}</strong>
+                    </p>
+                    <p class="mt-0.5">
+                        <strong>Hello {{ $store.state.user?.name }}</strong>, and welcome to Policy 360. To maintain security, anyone signing in with a one-time-password must <strong>create a new password</strong> the first time they access the Policy 360 portal.
+                    </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" />
+
+                    <button
+                        type="submit"
+                        :disabled="form.processing || !isPasswordValid"
+                        :loading="form.processing"
+                        class="button button--primary mt-1.5"
+                    >
+                        <span v-text="'Update password'" />
+                    </button>
+                </div>
+                <div v-else>
+                    <h4 class="mt" v-text="`Success!`" />
+                    <strong class="">Email: {{ user?.email }}</strong>
+                    <p v-text="`Your password has been updated.`" />
+                    <p class="disclaimer mb-2.5">
+                        <router-link
+                            class="color-1 underline"
+                            :to="{ name: `${$store.state.authBase}.login` }"
+                        >
+                            Continue
+                        </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 {
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: this.$store.state.user?.email,
+                    password: '',
+                },
+                { resetOnSuccess: false }
+            ),
+            isPasswordValid: false,
+        };
+    },
+
+    mounted() {
+
+        this.$store.dispatch("getUser", {
+            errors: this.$root.errors,
+        });
+    },
+
+    methods: {
+        async submit() {
+            this.loading = true;
+
+            try {
+                await this.form.put('/user/password');
+                await this.login();
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+        async login() {
+            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");
+                }
+                this.$router.push({name: `${this.$store.state.authBase}.callback`,query: {authenticated: true}});
+
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        updatePasswordValidity(isValid) {
+            this.isPasswordValid = isValid;
+        },
+    },
+
+    metaInfo() {
+        return {
+            title: "Reset Password",
+        };
+    },
+
+    components: {
+        VPasswordValidation: require("./../components/VPasswordValidation.vue").default,
+        elInput: elInput,
+    },
+};
+</script>

package/AuthModule/routes/forgot.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="relative">
+        <section id="forgotPasswordForm">
+            <h1 class="h2">Reset password</h1>
+            <form class="form" @submit.prevent="submit">
+                <p class="mt-0.5">
+                    Enter the email address associated with your account to continue.
+                </p>
+
+                <el-input
+                    v-if="!form.successful"
+                    class="mt-2 mb-2.5"
+                    v-model="form.email"
+                    label="Email "
+                    placeholder="Enter email address"
+                    name="email"
+                    :error="form.errors"
+                    type="email"
+                    required
+                />
+
+                <button
+                    type="submit"
+                    :disabled="form.processing || !form.email || form.email?.length < 5"
+                    :loading="form.processing"
+                    class="button button--primary"
+                >
+                    Continue
+                </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 }
+        ),
+    }),
+
+    methods: {
+        async submit() {
+            try {
+                await this.form.post("/forgot-password");
+
+                this.$router.push({
+                    name: `${this.$store.state.authBase}.success-forgot`,
+                    query: { email: this.form.email },
+                });
+            } catch (e) {
+                this.$root.errors(e);
+            }
+        },
+    },
+
+    mounted() {
+        this.form.email = this.$route.query.email;
+    },
+
+    metaInfo() {
+        return {
+            title: "Forgot Password",
+        };
+    },
+};
+</script>