@fishawack/lab-velocity 1.3.1 → 1.4.0

package/AuthModule/components/AuthModal.vue

@@ -12,7 +12,6 @@
                         @close="close"
                     />
             </div>
-            <button class="button button--modal" @click="open = false"></button>
         </div>
 
     </div>
@@ -91,7 +90,7 @@ export default {
             async handler(forcePasswordChange) {
                 if(forcePasswordChange) {
                     this.compName = this.validComponents["force-reset"];
-                    this.open = comp;
+                    this.open = true;
                 }
             }
         }
@@ -100,6 +99,12 @@ export default {
     components: {
         VForceReset: require("../routes/force-reset.vue").default,
         VPasswordChange: require("../routes/change-password.vue").default,
+    },
+    mounted() {
+        if(this.$store.state.auth.forcePasswordChange) {
+            this.compName = this.validComponents["force-reset"];
+            this.open = true;
+        }
     }
 };
 </script>

package/AuthModule/js/AuthRoutes.js

@@ -24,6 +24,14 @@ export function authRoutes(node, store, nested = 'auth') {
                           .default,
                 name: `${nested}.login`
             },
+            {
+                path: "force-login",
+                component: node
+                    ? ""
+                    : require("../routes/loginheadless.vue")
+                          .default,
+                name: `${nested}.force-login`
+            },
             {
                 path: "callback",
                 component: node
@@ -123,19 +131,19 @@ export function authRoutes(node, store, nested = 'auth') {
 export function configureRoutes(router) {
 
     router.beforeEach((to, from, next) => {
-        const { authenticated, user, authBase, redirect, forcePasswordChange } = store.state.auth;
+        const { authenticated, user, authBase, redirect, forcePasswordChange, autoLogin } = 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`) {
+                if(autoLogin) {
+                    next({ name: `${authBase}.force-login` });
+                }
                 next({ name: redirect });
             } else if (
                 !user?.email_verified_at &&

package/AuthModule/js/AuthStore.js

@@ -9,7 +9,8 @@ const store = {
             forcePasswordChange: false,
             intended: null,
             user: null,
-            redirect: process.env.HYDRATE_REDIRECT ?? 'index'
+            redirect: process.env.HYDRATE_REDIRECT ?? 'index',
+            autoLogin: process.env.HYDRATE_ADMIN ?? false,
         }
     },
 

package/AuthModule/routes/change-password.vue

@@ -17,6 +17,7 @@
                         required
                         v-model="form.current_password"
                         :error="form.errors"
+                        :password="true"
                     />
                     <el-input
                         v-model="form.password"
@@ -28,6 +29,7 @@
                         type="password"
                         autocomplete="new-password"
                         required
+                        :password="true"
                     />
 
                     <VPasswordValidation :password="form.password" @passwordValid="updatePasswordValidity" />
@@ -125,6 +127,7 @@ export default {
                 this.$root.errors(e);
             } finally {
                 this.loading = false;
+                this.postLogin();
             }
         },
 
@@ -133,7 +136,15 @@ export default {
         },
         handleButton() {
             this.$emit('close');
-        }
+        },
+        
+        async postLogin() {
+            this.$store.commit("setAuth", true);
+
+            const { data: user } = await this.$store.dispatch("getUser", {
+                errors: this.$root.errors,
+            });
+        },
     },
 
     metaInfo() {

package/AuthModule/routes/force-reset.vue

@@ -107,8 +107,17 @@ export default {
                 this.$root.errors(e);
             } finally {
                 this.loading = false;
+                await this.postLogin();
             }
         },
+        
+        async postLogin() {
+            this.$store.commit("setAuth", true);
+
+            const { data: user } = await this.$store.dispatch("getUser", {
+                errors: this.$root.errors,
+            });
+        },
 
         updatePasswordValidity(isValid) {
             this.isPasswordValid = isValid;

package/AuthModule/routes/loginheadless.vue

@@ -0,0 +1,16 @@
+<template>
+    <!-- Set Spinner -->
+     <div class="mx-auto">
+        <VLoader class="mx-auto" />
+        <p v-text="`Logging in...`"/>
+     </div>
+</template>
+
+
+<script>
+    export default {
+        mounted(){
+            window.location = '/login';
+        }
+    }
+</script>

package/components/_basic.scss

@@ -19,4 +19,34 @@
     &__error {
         color: $colorAlert;
     }
+}
+
+.form__icon-container {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    display: flex;
+
+    .icon {
+        display: flex;
+    }
+}
+
+.input--password {
+    .el-input-group__append {
+        border: none;
+        box-shadow: none;
+        background-color: transparent;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        padding: 0px;
+    }
+    .icon {
+        width: 24px;
+        min-width: 24px;
+        padding-bottom: 24px;
+        fill: #cfd8dd !important
+    }
 }

package/form/basic.vue

@@ -6,13 +6,13 @@
 
         <el-input
             v-bind="{ ...$attrs, class: undefined }"
-            :class="[`${baseClass}__textbox`]"
+            :class="[`${baseClass}__textbox`, type=== 'password' ? 'input--password': '']"
             :name="name"
             :id="name"
             :disabled="disabled"
             :minlength="minlength"
             :maxlength="maxlength"
-            :type="type"
+            :type="type === 'password' && visibility ? 'text' : type"
             :placeholder="placeholder"
             v-model="content"
             :required="required"
@@ -24,8 +24,13 @@
             <template v-if="prepend" #prepend>
                 <slot name="prepend" />
             </template>
-            <template v-if="append" #append>
+            <template v-if="append || type === 'password'" #append>
                 <slot name="append" />
+
+                <div v-if="type === 'password'" class="form__icon-container">
+                    <GSvg name="icon-error" class="form__error-icon icon" embed artboard v-if="error && error.first(name)" />
+                    <GSvg :name="visibility ? 'icon-visibility' : 'icon-visibility-off'" class="form__action-icon icon  pointer" embed artboard @click="visibility = !visibility" />
+                </div>
             </template>
         </el-input>
     </XInput>
@@ -67,7 +72,12 @@ export default {
         formatter: {
             type: Function,
             default: null,
-        },
+        }
+    },
+    data() {
+        return {
+            visibility: false
+        }
     },
 
     components: {

package/modules/_AuthModule.scss

@@ -1,4 +1,5 @@
 @import "../components/button";
+@import "../components/basic";
 @import "./modal";
 
 // AuthModule
@@ -98,17 +99,17 @@
                 }
             }
         }
-        &__icon-container{
-            position: absolute;
-            top: 50%;
-            right: $spacing * 1.5;
-            transform: translateY(-50%);
-            display: flex;
-        }
-        &__action-icon {
-            margin-left: $spacing * 0.5;
-            cursor: pointer;
-        }
+        // &__icon-container{
+        //     position: absolute;
+        //     top: 50%;
+        //     right: $spacing * 1.5;
+        //     transform: translateY(-50%);
+        //     display: flex;
+        // }
+        // &__action-icon {
+        //     margin-left: $spacing * 0.5;
+        //     cursor: pointer;
+        // }
     }
     .vel-basic__label {
         font-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",