@fishawack/lab-velocity 1.3.0 → 1.3.2

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

@@ -130,9 +130,6 @@ export function configureRoutes(router) {
         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/routes/change-password.vue

@@ -7,9 +7,21 @@
                     <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="Current password"
+                        placeholder="Enter your current password"
+                        name="current_password"
+                        type="password"
+                        required
+                        v-model="form.current_password"
+                        :error="form.errors"
+                        :password="true"
+                    />
+                    <el-input
+                        v-model="form.password"
+                        class="AM-mt-2 AM-mb-2"
                         label="New Password"
                         placeholder="Enter your new password"
                         name="password"
@@ -17,6 +29,7 @@
                         type="password"
                         autocomplete="new-password"
                         required
+                        :password="true"
                     />
 
                     <VPasswordValidation :password="form.password" @passwordValid="updatePasswordValidity" />
@@ -66,6 +79,7 @@ export default {
                 {
                     email: this.$store.state.auth.user?.email,
                     password: '',
+                    current_password: ''
                 },
                 { resetOnSuccess: false }
             ),
@@ -113,6 +127,7 @@ export default {
                 this.$root.errors(e);
             } finally {
                 this.loading = false;
+                this.postLogin();
             }
         },
 
@@ -121,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

@@ -51,7 +51,6 @@
 
 <script>
 import Form from "form-backend-validation";
-import store from "../js/AuthStore";
 
 export default {
     data() {
@@ -60,6 +59,7 @@ export default {
                 {
                     email: this.$store.state.auth.user?.email,
                     password: '',
+                    otp: true,
                 },
                 { resetOnSuccess: false }
             ),
@@ -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/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/modules/_modal.scss

@@ -19,3 +19,6 @@
         right: 0;
     }
 }
+.AuthModule__form.modal__box {
+    position: absolute;
+}

package/package.json

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