@fishawack/lab-velocity 1.2.2 → 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/AuthRoutes.js

@@ -123,13 +123,16 @@ export function authRoutes(node, store, nested = 'auth') {
 export function configureRoutes(router) {
 
     router.beforeEach((to, from, next) => {
-        const { authenticated, user, authBase, redirect } = store.state.auth;
+        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`) {

package/AuthModule/js/AuthStore.js

@@ -6,6 +6,7 @@ const store = {
         return {
             authBase : process.env.HYDRATE_ROUTE ?? 'auth',
             authenticated : false,
+            forcePasswordChange: false,
             intended: null,
             user: null,
             redirect: process.env.HYDRATE_REDIRECT ?? 'index'
@@ -30,6 +31,9 @@ const store = {
         setIntended(state, value) {
             state.intended = value;
         },
+        setForcePasswordChange(state, value) {
+            state.forcePasswordChange = value;
+        }
     },
 
     actions: {
@@ -42,6 +46,7 @@ const store = {
                 })
                 .then((res) => {
                     commit("setUser", res.data.data);
+                    commit("setForcePasswordChange",res.data.data?.force_password_change);
                     return res.data.data;
                 })
                 .catch(errors);
@@ -50,6 +55,7 @@ const store = {
         logout({ commit }, { errors }) {
             commit("setAuth", false);
             commit("setUser", null);
+            commit("setForcePasswordChange", false);
 
             return axios.post("/logout");
         },

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>
@@ -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/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']} });

package/modules/_AuthModule.scss

@@ -1,4 +1,5 @@
 @import "../components/button";
+@import "./modal";
 
 // AuthModule
 .AuthModule {

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.2",
+  "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"
   },