@fishawack/lab-velocity 1.2.1 → 1.3.0

package/AuthModule/components/AuthModal.vue

@@ -0,0 +1,105 @@
+<template>
+	<div :class="{'active': open}"
+        class="modal modal--auth">
+
+        <div class="modal__container"
+            v-on:click.self="close">
+
+            <div class="modal__box AuthModule__form" :class="boxCls">
+                    <component v-if="compName"
+                        :is="compName"
+                        v-bind="compProps"
+                        @close="close"
+                    />
+            </div>
+            <button class="button button--modal" @click="open = false"></button>
+        </div>
+
+    </div>
+</template>
+
+<script>
+"use strict";
+
+export default {
+    name: "AuthModal",
+
+    data() {
+        return {
+            open: false,
+            compName: null,
+            compProps: null,
+            cb: null,
+            boxCls: null,
+            validComponents: {
+                "force-reset" : 'VForceReset',
+                "password-change" : 'VPasswordChange'
+            }
+        };
+    },
+
+    methods: {
+        reset(){
+            this.compName = null;
+            this.compProps = null;
+            this.boxCls = null;
+            this.cb = null;
+        },
+        close() {
+            if(this.compName === 'VForceReset') {
+                if(!this.$store.state.auth.forcePasswordChange) {
+                    this.open = false;
+                }
+            } else  {
+                this.open = false;
+            }
+        }
+    },
+
+    created() {
+        this.$emitter.on('AuthModal', (comp) => {
+            this.compName = this.validComponents[comp.type];
+            this.open = comp;
+            
+        });
+
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.open = false;
+            }
+        });
+    },
+
+    watch: {
+        open(isOpen) {
+            this.$emitter.emit('toggleBackgroundScroll', isOpen);
+
+            if(this.cb){
+                this.cb();
+            }
+
+            if (!isOpen) {
+                this.reset();
+            }
+        },
+        '$route'(to,from) {
+            if(from.fullPath !== to.fullPath) {
+                this.open = false;
+            }
+        },
+        '$store.state.auth.forcePasswordChange': {
+            async handler(forcePasswordChange) {
+                if(forcePasswordChange) {
+                    this.compName = this.validComponents["force-reset"];
+                    this.open = comp;
+                }
+            }
+        }
+    },
+
+    components: {
+        VForceReset: require("../routes/force-reset.vue").default,
+        VPasswordChange: require("../routes/change-password.vue").default,
+    }
+};
+</script>

package/AuthModule/js/AuthAxios.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-export default function setAxiosDefaults() {
+function setAxiosDefaults() {
     axios.defaults.baseURL = process.env.APP_URL;
     axios.defaults.withCredentials = true;
     axios.defaults.withXSRFToken = true;
@@ -22,4 +22,6 @@ axios.interceptors.response.use(null, (error) => {
     }
 
     return Promise.reject(error);
-});
+});
+
+setAxiosDefaults();

package/AuthModule/js/AuthRoutes.js

@@ -100,5 +100,60 @@ export function authRoutes(node, store, nested = 'auth') {
             footer: false,
             fullpageModal: true,
         },
+    },
+    {
+        path: "/admin",
+        redirect: () => {
+            const { authenticated } = store.state.auth;
+
+            if (!authenticated) {
+                store.commit("setAuth", true);
+                window.location = `${process.env.APP_URL}/login`;
+            } else {
+                window.location = `${process.env.APP_URL}/`;
+            }
+        },
+        name: "admin",
+        meta: {
+            guest: true,
+        },
     }]
+}
+
+export function configureRoutes(router) {
+
+    router.beforeEach((to, from, next) => {
+        const { authenticated, user, authBase, redirect, forcePasswordChange } = store.state.auth;
+
+        const admin = to.path.includes("/admin");
+
+        if (to.query.verified) {
+            next({ name: `${authBase}.success-verify` });
+        } else if (authenticated) {
+            if(forcePasswordChange) {
+                next(false);
+            }
+            if (admin && !user?.admin) {
+                next({ name: redirect });
+            } else if (to.name === "login" || to.name === `${authBase}.login`) {
+                next({ name: redirect });
+            } else if (
+                !user?.email_verified_at &&
+                to.matched.some((d) => d.meta.guest) !== true
+            ) {
+                next({ name: `${authBase}.verify` });
+            } else {
+                next();
+            }
+        } else {
+            if (to.matched.some((d) => d.meta.guest) === true) {
+                next();
+            } else if (admin) {
+                next({ name: "login" });
+            } else {
+                next({ name: `${authBase}.login` });
+            }
+        }
+    });
+
 }

package/AuthModule/js/AuthStore.js

@@ -1,64 +1,64 @@
 "use strict";
 import axios from "axios";
-import { createStore } from "vuex";
-import VuexPersistedState from 'vuex-persistedstate';
 
-export function initAuthStore(store) {
+const store = {
+    state() {
+        return {
+            authBase : process.env.HYDRATE_ROUTE ?? 'auth',
+            authenticated : false,
+            forcePasswordChange: false,
+            intended: null,
+            user: null,
+            redirect: process.env.HYDRATE_REDIRECT ?? 'index'
+        }
+    },
 
-    store.registerModule('auth',{
-        state() {
-            return {
-                authBase : process.env.HYDRATE_ROUTE ?? 'auth',
-                authenticated : false,
-                intended: null,
-                user: null,
-                redirect: process.env.HYDRATE_REDIRECT ?? 'index'
+    mutations: {
+        setAuth(state, value) {
+            state.authenticated = value;
+
+            if (!value) {
+                this.commit("setUser", null);
+            }
+        },
+        setUser(state, value) {
+            state.user = value;
+
+            if(window.dataLayer){
+                window.dataLayer.push({ event: "logic", user: value });
             }
         },
+        setIntended(state, value) {
+            state.intended = value;
+        },
+        setForcePasswordChange(state, value) {
+            state.forcePasswordChange = value;
+        }
+    },
 
-        mutations: {
-            setAuth(state, value) {
-                state.authenticated = value;
-    
-                if (!value) {
-                    this.commit("setUser", null);
-                }
-            },
-            setUser(state, value) {
-                console.log("we are setting the user");
-                console.log(value);
-                state.user = value;
-    
-                if(window.dataLayer){
-                    window.dataLayer.push({ event: "logic", user: value });
-                }
-            },
-            setIntended(state, value) {
-                state.intended = value;
-            },
+    actions: {
+        getUser({ commit }, { errors, query = "" }) {
+            return axios
+                .get(`/api/user/self${query}`, {
+                    params: {
+                        include: "company"
+                    }
+                })
+                .then((res) => {
+                    commit("setUser", res.data.data);
+                    commit("setForcePasswordChange",res.data.data?.force_password_change);
+                    return res.data.data;
+                })
+                .catch(errors);
         },
 
-        actions: {
-            getUser({ commit }, { errors, query = "" }) {
-                return axios
-                    .get(`/api/user/self${query}`, {
-                        params: {
-                            include: "company"
-                        }
-                    })
-                    .then((res) => {
-                        commit("setUser", res.data.data);
-                        return res.data.data;
-                    })
-                    .catch(errors);
-            },
-    
-            logout({ commit }, { errors }) {
-                commit("setAuth", false);
-                commit("setUser", null);
-    
-                return axios.post("/logout");
-            },
+        logout({ commit }, { errors }) {
+            commit("setAuth", false);
+            commit("setUser", null);
+            commit("setForcePasswordChange", false);
+
+            return axios.post("/logout");
         },
-    });
-}
+    },
+};
+export default store;

package/AuthModule/js/FakeAPI.js

@@ -0,0 +1,84 @@
+import axios from "axios";
+
+
+axios.interceptors.request.use(
+    request => {
+            throw { isLocal: true, data: retrieveResponse(request) };
+    },
+    error => {
+      return Promise.resolve(error);
+    }
+  );
+
+  axios.interceptors.response.use(
+    response => {
+      return response; 
+    },
+    error => {
+        return Promise.resolve(error);
+    }
+  );
+
+function retrieveResponse(request) {
+  return fakes[request.url][request.method];
+}
+
+const fakes =  {
+  "/api/user/self": {
+    "get" : {
+      "data":{
+        "id": 2,
+        "company_id": 1,
+        "created_at": "2025-04-14T15:11:11.000000Z",
+        "updated_at": "2025-04-16T16:45:55.000000Z",
+        "newsletter": null,
+        "admin": 1,
+        "name": "Jeremy Viner",
+        "email": "jeremy.viner@avalerehealth.com",
+        "email_verified_at": "2025-04-16T16:45:55.000000Z",
+        "brands": [],
+        "company": {
+            "id": 1,
+            "name": "Company 0",
+            "created_at": "2025-04-14T15:08:50.000000Z",
+            "updated_at": "2025-04-14T15:08:50.000000Z",
+            "domains": [
+                "okuneva.com",
+                "bogisich.info",
+                "avalerehealth.com"
+            ],
+            "brands": [
+                1
+            ],
+            "events": [],
+            "therapy_areas": [],
+            "event_therapy_areas": [],
+            "event_therapy_area_media_types": [],
+            "users_count": null,
+            "sso_client_id": "5ea409fc-8dcf-423e-b7fa-867422859ea4",
+            "sso_client_secret": "aSS8Q~ss0r-uh.fPLHUXVXp2kIs5IfwTjzomrb_I",
+            "sso_tenant": "4a33c544-865e-44a4-836f-bc51800f6c5e",
+            "sso_type": "azure"
+        }
+      }
+    }
+  },
+  "/user/password": {
+    "put": {
+
+    }
+  },
+  "/logged-in": {
+    "get":{"logged-in":true},
+  },
+  "/logout": {
+    "post": {
+
+    }
+  },
+  "/login" : {
+    "post": {
+      "two_factor": false
+    }
+  }
+}

package/AuthModule/routes/change-password.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2 h2--small" v-html="!form.successful ? 'Change password' : 'Success'" />
+            <form class="form" @submit.prevent="submit">
+                <div v-if="!form.successful">
+                    <p class="AM-mt-2 AM-mb-0">
+                        Please complete the fields below to change your password.
+                    </p>
+                    <el-input
+                        v-model="form.password"
+                        class="AM-mt-3"
+                        label="New Password"
+                        placeholder="Enter your new password"
+                        name="password"
+                        :error="form.errors"
+                        type="password"
+                        autocomplete="new-password"
+                        required
+                    />
+
+                    <VPasswordValidation :password="form.password" @passwordValid="updatePasswordValidity" />
+                    <div class="flex AM-mt-3">
+                        <elButton
+                            class=""
+                            type="primary"
+                            :disabled="form.processing || !isPasswordValid"
+                            :loading="form.processing"
+                            @click="onSubmit"
+                        >
+                            <span v-text="'Change password'" />
+                        </elButton>
+
+                        <elButton
+                            class=""
+                            type="secondary"
+                            @click="handleButton"
+                        >
+                            <span v-text="'Cancel'" />
+                        </elButton>
+                    </div>
+                </div>
+                <div v-else>
+                    <strong class="">Email: {{ $store.state.auth?.user?.email }}</strong>
+                    <p v-text="`Your password has been updated.`" />
+                    <elButton
+                        class=""
+                        type="secondary"
+                        @click="handleButton"
+                    >
+                        <span v-text="'Continue'" />
+                    </elButton>
+                </div>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: this.$store.state.auth.user?.email,
+                    password: '',
+                },
+                { resetOnSuccess: false }
+            ),
+            isPasswordValid: false,
+        };
+    },
+
+    mounted() {
+
+        this.$store.dispatch("getUser", {
+            errors: this.$root.errors,
+        });
+    },
+
+    methods: {
+        async onSubmit() {
+            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");
+                }
+
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        updatePasswordValidity(isValid) {
+            this.isPasswordValid = isValid;
+        },
+        handleButton() {
+            this.$emit('close');
+        }
+    },
+
+    metaInfo() {
+        return {
+            title: "Reset Password",
+        };
+    },
+
+    components: {
+        VPasswordValidation: require("./../components/VPasswordValidation.vue").default,
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
+    },
+};
+</script>

package/AuthModule/routes/force-reset.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="relative">
         <section id="resetPasswordForm">
-            <h1 class="h2">Welcome</h1>
+            <h1 class="h2 h2--small" v-html="!form.successful ? 'Welcome' : 'Success'" />
             <form class="form" @submit.prevent="submit">
                 <div v-if="!form.successful">
                     <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
@@ -35,17 +35,14 @@
                     </elButton>
                 </div>
                 <div v-else>
-                    <h4 class="mt" v-text="`Success!`" />
-                    <strong class="">Email: {{ user?.email }}</strong>
+                    <strong class="">Email: {{ $store.state.auth?.user?.email }}</strong>
                     <p v-text="`Your password has been updated.`" />
-                    <p class="disclaimer AM-mb-2.5">
-                        <router-link
-                            class="color-1 underline"
-                            :to="{ name: `${$store.state.auth.authBase}.login` }"
-                        >
-                            Continue
-                        </router-link>
-                    </p>
+                    <elButton
+                        type="primary"
+                        @click="handleButton"
+                    >
+                        Continue
+                    </elButton>
                 </div>
             </form>
         </section>
@@ -61,7 +58,7 @@ export default {
         return {
             form: new Form(
                 {
-                    email: this.$store.state.user?.email,
+                    email: this.$store.state.auth.user?.email,
                     password: '',
                 },
                 { resetOnSuccess: false }
@@ -105,7 +102,6 @@ export default {
 
                     await this.form.post("/login");
                 }
-                this.$router.push({name: `${this.$store.state.auth.authBase}.callback`,query: {authenticated: true}});
 
             } catch (e) {
                 this.$root.errors(e);
@@ -117,6 +113,9 @@ export default {
         updatePasswordValidity(isValid) {
             this.isPasswordValid = isValid;
         },
+        handleButton() {
+            this.$emit('close');
+        }
     },
 
     metaInfo() {

package/AuthModule/routes/login.vue

@@ -117,8 +117,8 @@ export default {
                 window.dataLayer.push({ event: "login", user });
             }
 
-            if (this.$store.state.intended) {
-                this.$router.push(this.$store.state.intended);
+            if (this.$store.state.auth.intended) {
+                this.$router.push(this.$store.state.auth.intended);
             } else {
                 this.$router.push({ name: "members" });
                 // Problem here

package/AuthModule/routes/logincallback.vue

@@ -29,11 +29,10 @@ export default {
                 window.dataLayer.push({ event: "login", user });
             }
 
-            if (this.$store.state.intended) {
-                this.$router.push(this.$store.state.intended);
+            if (this.$store.state.auth.intended) {
+                this.$router.push(this.$store.state.auth.intended);
             } else {
-                this.$router.push({ name: "members" });
-                // Problem Here
+                this.$router.push({ name: this.$store.state.auth.redirect });
             }
 
             this.$store.commit("setIntended", null);

package/AuthModule/routes/loginsso.vue

@@ -28,7 +28,7 @@
 
             <el-button
                 type="primary"
-                :disabled="loading || (form.email?.length < 5 || form.password?.length < 8 )"
+                :disabled="loading || (!isValidEmail(form.email))"
                 @click="onSubmit"
             >
                 Continue
@@ -112,7 +112,12 @@ export default {
                     vue.setCountdown();
                 },1000);
             }
+        },
+        isValidEmail(email) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(email);
         }
+
     },
 
     mounted() {

package/AuthModule/routes/register.vue

@@ -103,7 +103,6 @@ export default {
                     await this.form.post("/register");
 
                 }
-                console.log(res);
                 if(res['redirect']) {
                     // Redirect here
                     this.$router.push({ name: `${this.$store.state.auth.authBase}.account-exists`, query: {company:res['company']} });
@@ -129,8 +128,8 @@ export default {
                 window.dataLayer.push({ event: "login", user });
             }
 
-            if (this.$store.state.intended) {
-                this.$router.push(this.$store.state.intended);
+            if (this.$store.state.auth.intended) {
+                this.$router.push(this.$store.state.auth.intended);
             } else {
                 this.$router.push({ name: `${this.$store.state.auth.authBase}.verify` });
                 // Problem Here

package/modules/_AuthModule.scss

@@ -1,4 +1,5 @@
 @import "../components/button";
+@import "./modal";
 
 // AuthModule
 .AuthModule {
@@ -6,7 +7,7 @@
     background-color: black;
     height: 100vh;
     width: 100%;
-    background: url('../media/content/images/hero-login-large.jpg') center top no-repeat;
+    background: url('../media/content/images/hero-auth-background-desktop.jpg') center top no-repeat;
     background-size: cover;
     z-index: 10;
 
@@ -14,6 +15,12 @@
         width: 13.3rem;
         z-index: 99;
     }
+    @include breakpoint (max-width $tabletMax) {
+        background: url('../media/content/images/hero-auth-background-tablet.jpg') center top no-repeat;
+    }
+    @include breakpoint (max-width $mobileMax) {
+        background: url('../media/content/images/hero-auth-background-mobile.jpg') center top no-repeat;
+    }
 }
 
 .AuthModule__form {

package/modules/_modal.scss

@@ -0,0 +1,21 @@
+@import "@fishawack/lab-ui/_modal.scss";
+
+.modal--auth {
+    background-color: transparent;
+
+    transition: all 500ms ease-in-out;
+
+    &::before{
+        content: '';
+        pointer-events: none;
+        z-index: 0 !important;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        background: #00000066;
+        backdrop-filter: blur(1.5rem);
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",
@@ -38,7 +38,9 @@
     "vue-loader": "^17.2.2",
     "vue-router": "^4.4.0",
     "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "form-backend-validation": "github:mikemellor11/form-backend-validation#master",
+    "mitt": "^3.0.1"
   },
   "dependencies": {
     "@tiptap/extension-link": "^2.11.2",
@@ -53,7 +55,6 @@
     "@tiptap/starter-kit": "^2.11.2",
     "@tiptap/vue-3": "^2.11.2",
     "element-plus": "^2.7.8",
-    "form-backend-validation": "github:mikemellor11/form-backend-validation#master",
     "quill": "^1.3.7",
     "sanitize-html": "^2.13.1"
   },