@fishawack/lab-velocity 1.1.2 → 1.2.0

package/AuthModule/routes/register.vue

@@ -1,10 +1,10 @@
 <template>
-    <h1 class="h2">Register</h1>
-    <p class="mb-2">Please enter your personal details to complete your registration.</p>
+    <h1 class="h2 h2--small">Register</h1>
+    <p class="AM-mb-3 AM-mt-2">Please enter your personal details to complete your registration.</p>
 
     <form @submit.prevent="submit" :class="form.errors && form.errors.any() ? 'form error' : 'form'" id="memberLoginForm">
         <el-input
-            class="mb-2.5"
+            class="AM-mb-2"
             label="Full name"
             placeholder="Enter your full name"
             name="name"
@@ -14,7 +14,7 @@
         />
         
         <el-input
-            class="mb-2.5"
+            class="AM-mb-2"
             label="Email"
             placeholder="Enter your email address"
             name="email"
@@ -25,7 +25,7 @@
         />
 
         <el-input
-            class="mb-2.5"
+            class="AM-mb-2"
             label="Password"
             name="password"
             placeholder="Create a unique password"
@@ -49,15 +49,15 @@
             />
         </div>
 
-        <button
-            type="submit"
+        <elButton
+            type="primary"
             :disabled="loading || (form.name?.length < 1 || form.email?.length < 5 || !isPasswordValid)"
-            class="button button--primary"
+            @click="onSubmit"
         >
             Register
-        </button>
+        </elButton>
 
-        <p class="disclaimer mt-2">
+        <p class="disclaimer AM-mt-3">
             Having trouble registering?
             <a :href="contact" class="underline">Contact us</a>
         </p>
@@ -66,7 +66,6 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
     data() {
@@ -86,7 +85,7 @@ export default {
     },
     
     methods: {
-        async submit() {
+        async onSubmit() {
             if (this.loading) return;
 
             this.loading = true;
@@ -107,7 +106,7 @@ export default {
                 console.log(res);
                 if(res['redirect']) {
                     // Redirect here
-                    this.$router.push({ name: `${this.$store.state.authBase}.account-exists`, query: {company:res['company']} });
+                    this.$router.push({ name: `${this.$store.state.auth.authBase}.account-exists`, query: {company:res['company']} });
                 } else  {
                     await this.postLogin();
                 }
@@ -133,7 +132,7 @@ export default {
             if (this.$store.state.intended) {
                 this.$router.push(this.$store.state.intended);
             } else {
-                this.$router.push({ name: `${this.$store.state.authBase}.verify` });
+                this.$router.push({ name: `${this.$store.state.auth.authBase}.verify` });
                 // Problem Here
             }
 
@@ -146,7 +145,8 @@ export default {
 
     components: {
         VPasswordValidation: require("./../components/VPasswordValidation.vue").default,
-        elInput: elInput
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
 };
 </script>

package/AuthModule/routes/reset.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="relative">
         <section id="resetPasswordForm">
-            <h1 class="h2">Reset password</h1>
+            <h1 class="h2 h2--small">Reset password</h1>
             <form class="form" @submit.prevent="submit">
                 <div v-if="!form.successful">
-                    <p class="mt mb-0 color-21">
+                    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
                         <strong class="">Email: {{ form?.email }}</strong>
                     </p>
-                    <p class="mt-0.5">
+                    <p class="AM-mt-0.5">
                         Please create a new password. Passwords you have used previously aren’t permitted.
                     </p>
                     <el-input
                         v-model="form.password"
-                        class="mt-2"
+                        class="AM-mt-3"
                         label="New Password"
                         placeholder="Enter new password"
                         name="password"
@@ -25,6 +25,7 @@
                     <VPasswordValidation :password="form.password" @passwordValid="updatePasswordValidity" />
 
                     <el-input
+                        class="hidden"
                         v-model="form.token"
                         name="token"
                         :error="form.errors"
@@ -32,27 +33,28 @@
                         required
                     />
 
-                    <button
-                        type="submit"
+                    <elButton
+                        type="primary"
                         :disabled="form.processing || !isPasswordValid"
                         :loading="form.processing"
-                        class="button button--primary mt-1.5"
+                        @click="onSubmit"
+
                     >
                         <span v-text="'Reset password'" />
-                    </button>
+                    </elButton>
                 </div>
                 <div v-else>
                     <h4 class="mt" v-text="`Success!`" />
                     <p v-text="`Your password has been reset.`" />
-                    <p class="disclaimer mb-2.5">
-                        <router-link
-                            class="color-1 underline"
-                            :to="{ name: `${$store.state.authBase}.login` }"
-                        >
-                            Back to Sign in
-                        </router-link>
-                    </p>
                 </div>
+                <p class="disclaimer AM-mt-3">
+                    <router-link
+                        class="color-1 underline"
+                        :to="{ name: `${$store.state.auth.authBase}.login` }"
+                    >
+                        Back to Sign in
+                    </router-link>
+                </p>
             </form>
         </section>
     </div>
@@ -60,10 +62,8 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
-    components: {},
     data() {
         return {
             form: new Form(
@@ -84,18 +84,18 @@ export default {
     },
 
     methods: {
-        async submit() {
+        async onSubmit() {
             try {
                 const res = await this.form.post("/reset-password");
 
                 this.$router.push({
-                    name: `${this.$store.state.authBase}.success-reset`,
+                    name: `${this.$store.state.auth.authBase}.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.") {
                     this.$router.push({
-                        name: `${this.$store.state.authBase}.expired-reset`,
+                        name: `${this.$store.state.auth.authBase}.expired-reset`,
                         query: { email: this.form.email },
                     });
                 }
@@ -116,7 +116,8 @@ export default {
 
     components: {
         VPasswordValidation: require("./../components/VPasswordValidation.vue").default,
-        elInput: elInput
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
 };
 </script>

package/AuthModule/routes/success-forgot.vue

@@ -1,21 +1,21 @@
 <template>
     <div class="relative">
         <section id="forgotPasswordForm">
-            <h1 class="h2">Reset password</h1>
+            <h1 class="h2 h2--small">Reset password</h1>
 
             <form class="form" @submit.prevent="submit">
-                <p class="mt mb-0 color-21">
+                <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
                     <strong class="">Email: {{ form?.email }}</strong>
                 </p>
-                <p class="mt-0.5">
+                <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>
-                <p class="mt-0.5">
+                <p class="AM-mt-3 AM-mb">
                     Haven’t received the email after 10 minutes?
                 </p>
-
+  
                 <el-input
-                    class="mt-2 mb-2.5 hidden"
+                    class="hidden"
                     v-model="form.email"
                     label="Email address"
                     name="email"
@@ -25,19 +25,19 @@
                     required
                 />
 
-                <button
-                    type="submit"
+                <elButton
+                    type="primary"
                     :disabled="form.processing"
                     :loading="form.processing"
-                    class="button button--primary"
+                    @click="onSubmit"
                 >
                     Re-send instructions
-                </button>
+                </elButton>
 
-                <p class="disclaimer mt-2">
+                <p class="disclaimer AM-mt-3">
                     <router-link
                         class="color-1 underline"
-                        :to="{ name: `${$store.state.authBase}.login` }"
+                        :to="{ name: `${$store.state.auth.authBase}.login` }"
                     >
                         Back to Sign in
                     </router-link>
@@ -49,11 +49,11 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
     components: {
-        elInput: elInput
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
     data: () => ({
         form: new Form(
@@ -66,7 +66,7 @@ export default {
     }),
 
     methods: {
-        async submit() {
+        async onSubmit() {
             try {
                 if (this.notification) {
                     this.notification.close();
@@ -103,7 +103,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.authBase}.forgot`,
+                name: `${this.$store.state.auth.authBase}.forgot`,
             });
         }
     },

package/AuthModule/routes/success-reset.vue

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

package/AuthModule/routes/success-verify.vue

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

package/AuthModule/routes/verify.vue

@@ -1,19 +1,19 @@
 <template>
-    <h1 class="h2">Verify your email address</h1>
+    <h1 class="h2 h2--small">Verify your email address</h1>
 
     <form class="form" @submit.prevent="submit">
-        <p class="mt mb-0 color-21">
+        <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
             <strong class="">Email: {{ user?.email }}</strong>
         </p>
-        <p class="mt-0.5">
+        <p class="AM-mt-0.5">
             <strong>Please check your inbox</strong> for a Verification email from Expert Partnership. Click the link in that email to verify your email address and complete your registration.
         </p>
-        <p class="mt-0.5">
+        <p class="AM-mt-0.5 AM-mb-0">
             Haven’t received the email after 10 minutes?
         </p>
 
         <el-input
-            class="mt-2 mb-2.5 hidden"
+            class="hidden"
             v-model="form.email"
             label="Email address"
             name="email"
@@ -23,16 +23,17 @@
             required
         />
 
-        <button
-            type="submit"
+        <elButton
+            class="AM-mt AM-mb-3"
+            type="primary"
             :disabled="form.processing"
             :loading="form.processing"
-            class="button button--primary"
+            @click="onSubmit"
         >
             Re-send verification link
-        </button>
+        </elButton>
 
-        <p class="disclaimer mt-1.5">
+        <p class="disclaimer AM-mt-1.5">
             Having trouble singing in?
             <a :href="contact" class="underline">Contact us</a>
         </p>
@@ -41,11 +42,11 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
     components: {
-        elInput: elInput
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
     data: () => ({
         user: null,
@@ -60,7 +61,7 @@ export default {
     }),
 
     methods: {
-        async submit() {
+        async onSubmit() {
             try {
                 if (this.notification) {
                     this.notification.close();

package/_variables.scss

@@ -1,6 +1,6 @@
 @import "@fishawack/lab-ui/_variables.scss";
-
 // Set global variables here, e.g $color6: red;
+@import "./modules/AuthVariables";
 
 
 $primaryFont: 'Inter';
@@ -29,4 +29,5 @@ $color9: #ff0000;
 $color10: #dcdbdb;
 $color11: #8C8C8C; //Used
 $color12: #5C5C5C;
-$colorAlert: #D53A3A;
+$colorAlert: #D53A3A;
+$color13: #3C976E;

package/general.scss

@@ -28,6 +28,8 @@
 @import "./components/_alert.scss";
 @import "./components/_collapse.scss";
 @import "./components/_tooltip.scss";
+@import "./components/_loader.scss";
+@import "./modules/_AuthModule.scss";
 
 
 @import "./_base.scss";

package/modules/_AuthModule.scss

@@ -1,3 +1,5 @@
+@import "../components/button";
+
 // AuthModule
 .AuthModule {
     position: fixed;
@@ -7,19 +9,6 @@
     background: url('../media/content/images/hero-login-large.jpg') center top no-repeat;
     background-size: cover;
     z-index: 10;
-    &:after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-image: radial-gradient(circle at 15% 105%, #00e677de, rgba(0, 230, 118, 0) 35%);
-        z-index: 0;
-        @include breakpoint (max-width $mobileMax) {
-            background-image: radial-gradient(circle at 15% 90%, #00e677de, rgba(0, 230, 118, 0) 50%);
-        }
-    }
 
     .logo {
         width: 13.3rem;
@@ -43,23 +32,28 @@
         transform: translate(-50%, 0);
         padding: 24px;
         width: calc(100% - 80px);
-        .h2 {
-            font-size: 2.4rem;
-            line-height: 3.2rem;
+        h2 .h2 {
+            font-size: get-ratio(24px);
+            line-height: get-ratio(32px);
         }
     }
 
     h2, .h2 {
-        line-height: 4.4rem;
+        line-height: get-ratio(50px);
+        font-size: get-ratio(48px);
+    }
+    .h2--small {
+        font-size: get-ratio(36px);
+        line-height: get-ratio(44px);
     }
 
     p {
-        font-size: 1.4rem;
-        line-height: 2rem;
-        margin-bottom: 2rem;
+        font-size: get-ratio(14px);
+        line-height: get-ratio(20px);
+        margin-bottom: get-ratio(24px);
         letter-spacing: -0.1px;
         &.disclaimer {
-            font-size: 1.2rem;
+            font-size: get-ratio(12px);
             color: rgba($color1, 0.5);
             margin: 0;
         }
@@ -72,9 +66,11 @@
         }
     }
 
-    .button {
+    .vel-button {
         max-width: 200px;
         width: 200px;
+        padding: 9px 23.5px;
+        font-size: 14px;
         @include breakpoint (max-width $mobileMax) {
             max-width: unset;
             width: 100%;
@@ -85,28 +81,41 @@
         &.error {
             .form__input {
                 .el-input__wrapper {
-                    border: 0.2rem solid $color20;
+                    border: 0.2rem solid red;
                 }
             }
             .form__input.error {
                 border:none;
                 .el-input__wrapper {
-                    border: 0.2rem solid $color10;
+                    border: 0.2rem solid red;
                 }
             }
         }
         &__icon-container{
             position: absolute;
             top: 50%;
-            right: get-ratio($spacing * 1.5);
+            right: $spacing * 1.5;
             transform: translateY(-50%);
             display: flex;
         }
         &__action-icon {
-            margin-left: get-ratio($spacing * 0.5);
+            margin-left: $spacing * 0.5;
             cursor: pointer;
         }
     }
+    .vel-basic__label {
+        font-size: get-ratio(12px);
+        color: rgba($color1, 0.5);
+    }
+    .vel-basic__textbox {
+        --el-border-color:#CFD8DD;
+        font-size: get-ratio(14px);
+        padding-bottom: $am-spacing * 2.5;
+
+        .el-input__inner {
+            --el-input-inner-height:38px;
+        }
+    }
 }
 
 .AuthModule__logo__container {
@@ -126,4 +135,56 @@
     max-width: 1024px;
     width: 100%;
     height: 100%;
+}
+
+
+.AM-mb{
+    margin-bottom: $am-spacing !important;
+}
+.AM-mt{
+    margin-top: $am-spacing !important;
+}
+.AM-pb{
+    padding-bottom: $am-spacing !important;
+}
+.AM-pt{
+    padding-top: $am-spacing !important;
+}
+@for $i from 1 through 5 {
+
+    .AM-mb-#{$i - 1} {
+        margin-bottom: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-mb-#{$i - 1}\.5 {
+        margin-bottom: ($i - .5) * $am-spacing !important;
+    }
+
+    .AM-mt-#{$i - 1} {
+        margin-top: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-mt-#{$i - 1}\.5 {
+        margin-top: ($i - .5) * $am-spacing !important;
+    }
+
+    .AM-pt-#{$i - 1} {
+        padding-top: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-pt-#{$i - 1}\.5 {
+        padding-top: ($i - .5) * $am-spacing !important;
+    }
+
+    .AM-pb-#{$i - 1} {
+        padding-bottom: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-pb-#{$i - 1}\.5 {
+        padding-bottom: ($i - .5) * $am-spacing !important;
+    }
+}
+
+.AM-color-highlight {
+    color: $am-highlight;
 }

package/modules/_AuthVariables.scss

@@ -0,0 +1,2 @@
+$am-spacing: 8px;
+$am-highlight: #3C976E;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",
     "content": "npm run content --prefix node_modules/@fishawack/core/",
     "start": "npm run production && npm run story:dev",
+    "start-modules": "npm start --prefix node_modules/@fishawack/core/",
     "production": "npm run production --prefix node_modules/@fishawack/core/ && npm run story:build",
     "test": "npm test --prefix node_modules/@fishawack/core/",
     "package": "npm run package --prefix node_modules/@fishawack/core/",
@@ -13,7 +14,7 @@
     "mail": "npm run mail --prefix node_modules/@fishawack/core/",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
-    "preversion": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./ && cp -r _Build/vue/modules/** ./"
+    "preversion": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./ && cp -r _Build/vue/modules/AuthModule ./"
   },
   "license": "BSD-3-Clause",
   "author": {
@@ -52,6 +53,7 @@
     "@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"
   },