@fishawack/lab-velocity 1.11.1 → 2.0.0-beta.10

package/{AuthModule → _Build/vue/modules/AuthModule}/routes/reset.vue

@@ -4,15 +4,16 @@
             <h1 class="h2 h2--small">Reset password</h1>
             <form class="form" @submit.prevent="submit">
                 <div v-if="!form.successful">
-                    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                    <p class="mt-2 mb-0 color-highlight">
                         <strong class="">Email: {{ form?.email }}</strong>
                     </p>
-                    <p class="AM-mt-0.5">
-                        Please create a new password. Passwords you have used previously aren’t permitted.
+                    <p class="mt-0.5">
+                        Please create a new password. Passwords you have used
+                        previously aren’t permitted.
                     </p>
                     <el-input
                         v-model="form.password"
-                        class="AM-mt-3"
+                        class="mt-3"
                         label="New Password"
                         placeholder="Enter new password"
                         name="password"
@@ -22,7 +23,10 @@
                         required
                     />
 
-                    <VPasswordValidation :password="form.password" @passwordValid="updatePasswordValidity" />
+                    <VPasswordValidation
+                        :password="form.password"
+                        @passwordValid="updatePasswordValidity"
+                    />
 
                     <el-input
                         class="hidden"
@@ -34,11 +38,11 @@
                     />
 
                     <elButton
+                        native-type="submit"
                         type="primary"
                         :disabled="form.processing || !isPasswordValid"
                         :loading="form.processing"
                         @click="onSubmit"
-
                     >
                         <span v-text="'Reset password'" />
                     </elButton>
@@ -47,10 +51,10 @@
                     <h4 class="mt" v-text="`Success!`" />
                     <p v-text="`Your password has been reset.`" />
                 </div>
-                <p class="disclaimer AM-mt-3">
+                <p class="disclaimer mt-3">
                     <router-link
                         class="color-1 underline"
-                        :to="{ name: `${$store.state.auth.authBase}.login` }"
+                        :to="{ name: 'auth.login' }"
                     >
                         Back to Sign in
                     </router-link>
@@ -68,11 +72,11 @@ export default {
         return {
             form: new Form(
                 {
-                    email: '',
-                    password: '',
-                    token: '',
+                    email: "",
+                    password: "",
+                    token: "",
                 },
-                { resetOnSuccess: false }
+                { resetOnSuccess: false },
             ),
             isPasswordValid: false,
         };
@@ -89,17 +93,22 @@ export default {
                 const res = await this.form.post("/reset-password");
 
                 this.$router.push({
-                    name: `${this.$store.state.auth.authBase}.success-reset`,
+                    name: "auth.success-reset",
                     query: { email: this.form.email },
                 });
             } catch (e) {
-                if (e.response && e.response.status === 422 && e.response.data.message === "This password reset token is invalid.") {
+                if (
+                    e.response &&
+                    e.response.status === 422 &&
+                    e.response.data.message ===
+                        "This password reset token is invalid."
+                ) {
                     this.$router.push({
-                        name: `${this.$store.state.auth.authBase}.expired-reset`,
+                        name: "auth.expired-reset",
                         query: { email: this.form.email },
                     });
                 }
-                this.$root.errors(e);
+                console.log(e);
             }
         },
 
@@ -115,9 +124,10 @@ export default {
     },
 
     components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue").default,
-        elInput: require('../../form/basic.vue').default,
-        elButton: require('../../basic/Button.vue').default,
+        VPasswordValidation: require("./../components/VPasswordValidation.vue")
+            .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
     },
 };
 </script>

package/{AuthModule → _Build/vue/modules/AuthModule}/routes/success-forgot.vue

@@ -4,16 +4,18 @@
             <h1 class="h2 h2--small">Reset password</h1>
 
             <form class="form" @submit.prevent="submit">
-                <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                <p class="mt-2 mb-0 color-highlight">
                     <strong class="">Email: {{ form?.email }}</strong>
                 </p>
-                <p class="AM-mt">
-                    If this account exists we have sent an email containing instructions for resetting the password. <strong>Please check your inbox.</strong>
+                <p class="mt">
+                    If this account exists we have sent an email containing
+                    instructions for resetting the password.
+                    <strong>Please check your inbox.</strong>
                 </p>
-                <p class="AM-mt-3 AM-mb">
+                <p class="mt-3 mb">
                     Haven’t received the email after 10 minutes?
                 </p>
-  
+
                 <el-input
                     class="hidden"
                     v-model="form.email"
@@ -26,6 +28,7 @@
                 />
 
                 <elButton
+                    native-type="submit"
                     type="primary"
                     :disabled="form.processing"
                     :loading="form.processing"
@@ -34,10 +37,10 @@
                     Re-send instructions
                 </elButton>
 
-                <p class="disclaimer AM-mt-3">
+                <p class="disclaimer mt-3">
                     <router-link
                         class="color-1 underline"
-                        :to="{ name: `${$store.state.auth.authBase}.login` }"
+                        :to="{ name: `auth.login` }"
                     >
                         Back to Sign in
                     </router-link>
@@ -49,18 +52,19 @@
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
 
 export default {
     components: {
-        elInput: require('../../form/basic.vue').default,
-        elButton: require('../../basic/Button.vue').default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
     },
     data: () => ({
         form: new Form(
             {
                 email: "",
             },
-            { resetOnSuccess: false }
+            { resetOnSuccess: false },
         ),
         notification: null,
     }),
@@ -75,23 +79,22 @@ export default {
 
                 await this.form.post("/forgot-password");
 
-                this.$notify({
+                ElNotification({
                     type: "success",
                     message: "Email has been re-sent",
                     duration: 10000,
-                    class: 'el-notification--success el-notification--right-override'
+                    class: "el-notification--success el-notification--right-override",
                 });
             } catch (e) {
                 if (e.response && e.response.status === 422) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "warning",
-                        message: 'Please allow 10 minutes before re-requesting',
+                        message: "Please allow 10 minutes before re-requesting",
                         duration: 0,
-                        class: 'el-notification--warning el-notification--right-override'
+                        class: "el-notification--warning el-notification--right-override",
                     });
-                }
-                else {
-                    this.$root.errors(e);
+                } else {
+                    console.log(e);
                 }
             }
         },
@@ -103,7 +106,7 @@ export default {
         // If a user has come here directly then send them off to the original forgot screen to enter an email
         if (!this.form.email) {
             this.$router.push({
-                name: `${this.$store.state.auth.authBase}.forgot`,
+                name: `auth.forgot`,
             });
         }
     },

package/{AuthModule → _Build/vue/modules/AuthModule}/routes/success-reset.vue

@@ -2,18 +2,18 @@
     <div class="relative">
         <section id="resetPasswordForm">
             <h1 class="h2 h2--small">Success</h1>
-            
-            <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+
+            <p class="mt-2 mb-0 color-highlight">
                 <strong class="">Email: {{ $route.query.email }}</strong>
             </p>
-            <p class="AM-mt">
+            <p class="mt">
                 Your password has been reset. Please sign in to continue.
             </p>
 
             <elButton
                 tag="router-link"
                 type="primary"
-                :to="{name: `${$store.state.auth.authBase}.login`}"
+                :to="{ name: 'auth.login' }"
             >
                 <span v-text="'Sign in'" />
             </elButton>
@@ -29,7 +29,7 @@ export default {
         };
     },
     components: {
-        elButton: require('../../basic/Button.vue').default,
-    }
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/success-verify.vue

@@ -0,0 +1,30 @@
+<template>
+    <h1 class="h2 h2--small">Verification complete</h1>
+    <p class="mb-0">
+        <strong
+            >Welcome to {{ $root.appName }},
+            {{ $store.state?.auth?.user?.name }}!</strong
+        >
+    </p>
+    <p>Your account has been verified successfully.</p>
+
+    <elButton
+        tag="router-link"
+        type="primary"
+        :to="{ name: $store.state.auth.redirect }"
+    >
+        <span v-text="'Continue'" />
+    </elButton>
+</template>
+
+<script>
+export default {
+    mounted() {
+        this.$store.dispatch("getUser");
+    },
+    components: {
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    // Problem in this file
+};
+</script>

package/{AuthModule → _Build/vue/modules/AuthModule}/routes/verify.vue

@@ -2,15 +2,15 @@
     <h1 class="h2 h2--small">Verify your email address</h1>
 
     <form class="form" @submit.prevent="submit">
-        <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+        <p class="mt-2 mb-0 color-highlight">
             <strong class="">Email: {{ user?.email }}</strong>
         </p>
-        <p class="AM-mt-0.5">
-            <strong>Please check your inbox</strong> for a Verification email from {{ $store.state?.auth?.platformName }}. Click the link in that email to verify your email address and complete your registration.
-        </p>
-        <p class="AM-mt-0.5 AM-mb-0">
-            Haven’t received the email after 10 minutes?
+        <p class="mt-0.5">
+            <strong>Please check your inbox</strong> for a Verification email
+            from {{ $root.appName }}. Click the link in that email to verify
+            your email address and complete your registration.
         </p>
+        <p class="mt-0.5 mb-0">Haven’t received the email after 10 minutes?</p>
 
         <el-input
             class="hidden"
@@ -24,7 +24,8 @@
         />
 
         <elButton
-            class="AM-mt AM-mb-3"
+            class="mt mb-3"
+            native-type="submit"
             type="primary"
             :disabled="form.processing"
             :loading="form.processing"
@@ -33,20 +34,23 @@
             Re-send verification link
         </elButton>
 
-        <p class="disclaimer AM-mt-1.5">
+        <p class="disclaimer mt-1.5">
             Having trouble singing in?
-            <a :href="contact" class="underline">Contact us</a>
+            <a :href="$store.state.auth.contact" class="underline"
+                >Contact us</a
+            >
         </p>
     </form>
 </template>
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
 
 export default {
     components: {
-        elInput: require('../../form/basic.vue').default,
-        elButton: require('../../basic/Button.vue').default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
     },
     data: () => ({
         user: null,
@@ -54,10 +58,9 @@ export default {
             {
                 email: "",
             },
-            { resetOnSuccess: false }
+            { resetOnSuccess: false },
         ),
         notification: null,
-        contact:  process.env.HYDRATE_CONTACT ?? 'mailto:EP@avalerehealth.com',
     }),
 
     methods: {
@@ -70,39 +73,36 @@ export default {
 
                 await this.form.post("/email/verification-notification");
 
-                this.$notify({
+                ElNotification({
                     type: "success",
                     message: "Email has been re-sent",
                     duration: 10000,
-                    class: 'el-notification--success el-notification--right-override'
+                    class: "el-notification--success el-notification--right-override",
                 });
             } catch (e) {
                 if (e.response && e.response.status === 429) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "warning",
-                        message: 'Please allow 10 minutes before re-requesting',
+                        message: "Please allow 10 minutes before re-requesting",
                         duration: 0,
-                        class: 'el-notification--warning el-notification--right-override'
+                        class: "el-notification--warning el-notification--right-override",
                     });
                 } else if (e.response && e.response.status === 422) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "error",
                         message: e.response.data.message,
                         duration: 0,
-                        class: 'el-notification--error el-notification--right-override'
+                        class: "el-notification--error el-notification--right-override",
                     });
-                }
-                else {
-                    this.$root.errors(e);
+                } else {
+                    console.log(e);
                 }
             }
         },
     },
 
     async mounted() {
-        this.user = await this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.user = await this.$store.dispatch("getUser");
 
         this.form.email = this.user.email;
     },

package/_base.scss

@@ -3,4 +3,3 @@
 @import "element-plus/theme-chalk/el-message";
 @import "element-plus/theme-chalk/el-notification";
 @import "element-plus/theme-chalk/el-overlay";
-@import "./components/input.scss";

package/_defaults.scss

@@ -2,20 +2,8 @@
 
 @import "@fishawack/lab-ui/_defaults.scss";
 
-$colors: variables.dynamic('color', module-variables("variables"));
+$colors: variables.dynamic("color", module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
-$spacing: 8px;
-.container {
-    margin-left: 0;
-    padding: 0px 5 * $spacing;
-}
-
-
-body {
-    font-family: $primaryFont, sans-serif;
-    font-size: get-ratio(16px);
-    line-height: 1.5;
-    color: $color1;
-    background-color: $color3;
-}
+$fontColor: $color1;
+$fontFamily: $primaryFont, sans-serif;

package/_variables.scss

@@ -1,25 +1,21 @@
 @import "@fishawack/lab-ui/_variables.scss";
-// Set global variables here, e.g $color6: red;
-@import "./modules/AuthVariables";
-
-
-$primaryFont: 'Inter';
-$primaryFontThin: 'Inter-Thin';
-$primaryFontExtraLight: 'Inter-ExtraLight';
-$primaryFontLight: 'Inter-Light';
-$primaryFontRegular: 'Inter-Regular';
-$primaryFontMedium: 'Inter-Medium';
-$primaryFontSemiBold: 'Inter-SemiBold';
-$primaryFontBold: 'Inter-Bold';
 
+// Set global variables here, e.g $color6: red;
+$primaryFont: "Inter";
+$primaryFontThin: "Inter-Thin";
+$primaryFontExtraLight: "Inter-ExtraLight";
+$primaryFontLight: "Inter-Light";
+$primaryFontRegular: "Inter-Regular";
+$primaryFontMedium: "Inter-Medium";
+$primaryFontSemiBold: "Inter-SemiBold";
+$primaryFontBold: "Inter-Bold";
+$secondaryFont: "NotoSerif";
+$secondaryFontMedium: "NotoSerif-Medium";
 
-$secondaryFont: 'NotoSerif';
-$secondaryFontMedium: 'NotoSerif-Medium';
 // Colors
-
-$color1: #2D2D2D;
+$color1: #2d2d2d;
 $color2: #333333;
-$color3: #F7F7F7;
+$color3: #f7f7f7;
 $color4: #e6e6e6;
 $color5: #cccccc;
 $color6: #999999;
@@ -27,7 +23,14 @@ $color7: #666666;
 $color8: #f2f2f2; //Used
 $color9: #ff0000;
 $color10: #dcdbdb;
-$color11: #8C8C8C; //Used
-$color12: #5C5C5C;
-$color13: #3C976E;
-$colorAlert: #D53A3A;
+$color11: #8c8c8c; //Used
+$color12: #5c5c5c;
+$color13: #3c976e;
+$colorAlert: #d53a3a;
+
+// Spacing
+$spacing: 8px;
+
+// Auth
+$am-spacing: 8px;
+$am-highlight: #3c976e;

package/components/_alert.scss

@@ -1,5 +1,5 @@
 @import "element-plus/theme-chalk/el-alert";
 
 .vel-alert {
-    --el-color-error: #D53A3A;
-}
+    --el-color-error: #d53a3a;
+}

package/components/_auth.scss

@@ -0,0 +1,163 @@
+.AuthModule {
+    position: fixed;
+    background-color: black;
+    height: 100vh;
+    width: 100%;
+    background: url("../media/content/images/hero-auth-background-desktop.jpg")
+        center top no-repeat;
+    background-size: cover;
+    z-index: 10;
+
+    .logo {
+        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 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    min-width: 320px;
+    width: 460px;
+    padding: 48px 40px 40px;
+    z-index: 1;
+
+    @include breakpoint(max-width $mobileMax) {
+        top: 84px;
+        transform: translate(-50%, 0);
+        padding: 24px;
+        width: calc(100% - 80px);
+
+        h2 .h2 {
+            font-size: 24px;
+            line-height: 32px;
+        }
+    }
+
+    h2,
+    .h2 {
+        line-height: 50px;
+        font-size: 48px;
+    }
+
+    .h2--small {
+        font-size: 36px;
+        line-height: 44px;
+    }
+
+    p {
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 24px;
+        letter-spacing: -0.1px;
+
+        &.disclaimer {
+            font-size: 12px;
+            color: rgba($color1, 0.5);
+            margin: 0;
+        }
+
+        a {
+            color: $color1;
+        }
+
+        &.form__error {
+            font-size: 12px;
+            line-height: 18px;
+        }
+    }
+
+    .vel-button {
+        max-width: 200px;
+        width: 200px;
+        padding: 9px 23.5px;
+        font-size: 14px;
+
+        @include breakpoint(max-width $mobileMax) {
+            max-width: unset;
+            width: 100%;
+        }
+    }
+
+    .form {
+        &.error {
+            .form__input {
+                .el-input__wrapper {
+                    border: 0.4px solid red;
+                }
+            }
+
+            .form__input.error {
+                border: none;
+
+                .el-input__wrapper {
+                    border: 0.4px solid red;
+                }
+            }
+        }
+    }
+
+    .vel-basic__label {
+        font-size: 12px;
+        color: rgba($color1, 0.5);
+    }
+
+    .vel-basic__textbox {
+        --el-border-color: #cfd8dd;
+        --el-input-text-color: #666666;
+        --el-input-focus-border-color: #cfd8dd;
+        --el-input-hover-border-color: #cfd8dd;
+        font-size: 14px;
+
+        .el-input__inner {
+            --el-input-inner-height: 38px;
+        }
+    }
+
+    .el-button--primary {
+        --el-button-text-color: #ffffff;
+    }
+
+    input,
+    input:focus {
+        @extend .el-input__inner;
+    }
+}
+
+.AuthModule__logo__container {
+    position: absolute;
+    top: 48px;
+    left: 0%;
+}
+
+.AuthModule__logo {
+    position: relative;
+}
+
+.AuthModule__Content {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 1024px;
+    width: 100%;
+    height: 100%;
+}
+
+.color-highlight {
+    color: green;
+}