@fishawack/lab-velocity 2.0.0-beta.1 → 2.0.0-beta.11

package/_Build/vue/modules/AuthModule/routes/reset.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2 h2--small">Reset password</h1>
+            <form class="form" @submit.prevent="submit">
+                <div v-if="!form.successful">
+                    <p class="mt-2 mb-0 color-highlight">
+                        <strong class="">Email: {{ form?.email }}</strong>
+                    </p>
+                    <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="mt-3"
+                        label="New Password"
+                        placeholder="Enter new password"
+                        name="password"
+                        :error="form.errors"
+                        type="password"
+                        autocomplete="new-password"
+                        required
+                    />
+
+                    <VPasswordValidation
+                        :password="form.password"
+                        @passwordValid="updatePasswordValidity"
+                    />
+
+                    <el-input
+                        class="hidden"
+                        v-model="form.token"
+                        name="token"
+                        :error="form.errors"
+                        type="hidden"
+                        required
+                    />
+
+                    <elButton
+                        native-type="submit"
+                        type="primary"
+                        :disabled="form.processing || !isPasswordValid"
+                        :loading="form.processing"
+                        @click="onSubmit"
+                    >
+                        <span v-text="'Reset password'" />
+                    </elButton>
+                </div>
+                <div v-else>
+                    <h4 class="mt" v-text="`Success!`" />
+                    <p v-text="`Your password has been reset.`" />
+                </div>
+                <p class="disclaimer mt-3">
+                    <router-link
+                        class="color-1 underline"
+                        :to="{ name: 'auth.login' }"
+                    >
+                        Back to Sign in
+                    </router-link>
+                </p>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: "",
+                    password: "",
+                    token: "",
+                },
+                { resetOnSuccess: false },
+            ),
+            isPasswordValid: false,
+        };
+    },
+
+    mounted() {
+        this.form.email = this.$route.query.email;
+        this.form.token = this.$route.query.token;
+    },
+
+    methods: {
+        async onSubmit() {
+            try {
+                const res = await this.form.post("/reset-password");
+
+                this.$router.push({
+                    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."
+                ) {
+                    this.$router.push({
+                        name: "auth.expired-reset",
+                        query: { email: this.form.email },
+                    });
+                }
+                console.log(e);
+            }
+        },
+
+        updatePasswordValidity(isValid) {
+            this.isPasswordValid = isValid;
+        },
+    },
+
+    metaInfo() {
+        return {
+            title: "Reset Password",
+        };
+    },
+
+    components: {
+        VPasswordValidation: require("./../components/VPasswordValidation.vue")
+            .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+};
+</script>

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

@@ -0,0 +1,120 @@
+<template>
+    <div class="relative">
+        <section id="forgotPasswordForm">
+            <h1 class="h2 h2--small">Reset password</h1>
+
+            <form class="form" @submit.prevent="submit">
+                <p class="mt-2 mb-0 color-highlight">
+                    <strong class="">Email: {{ form?.email }}</strong>
+                </p>
+                <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="mt-3 mb">
+                    Haven’t received the email after 10 minutes?
+                </p>
+
+                <el-input
+                    class="hidden"
+                    v-model="form.email"
+                    label="Email address"
+                    name="email"
+                    :error="form.errors"
+                    type="email"
+                    placeholder="Email"
+                    required
+                />
+
+                <elButton
+                    native-type="submit"
+                    type="primary"
+                    :disabled="form.processing"
+                    :loading="form.processing"
+                    @click="onSubmit"
+                >
+                    Re-send instructions
+                </elButton>
+
+                <p class="disclaimer mt-3">
+                    <router-link
+                        class="color-1 underline"
+                        :to="{ name: `auth.login` }"
+                    >
+                        Back to Sign in
+                    </router-link>
+                </p>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
+
+export default {
+    components: {
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    data: () => ({
+        form: new Form(
+            {
+                email: "",
+            },
+            { resetOnSuccess: false },
+        ),
+        notification: null,
+    }),
+
+    methods: {
+        async onSubmit() {
+            try {
+                if (this.notification) {
+                    this.notification.close();
+                    this.notification = null;
+                }
+
+                await this.form.post("/forgot-password");
+
+                ElNotification({
+                    type: "success",
+                    message: "Email has been re-sent",
+                    duration: 10000,
+                    class: "el-notification--success el-notification--right-override",
+                });
+            } catch (e) {
+                if (e.response && e.response.status === 422) {
+                    this.notification = ElNotification({
+                        type: "warning",
+                        message: "Please allow 10 minutes before re-requesting",
+                        duration: 0,
+                        class: "el-notification--warning el-notification--right-override",
+                    });
+                } else {
+                    console.log(e);
+                }
+            }
+        },
+    },
+
+    mounted() {
+        this.form.email = this.$route.query.email;
+
+        // 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: `auth.forgot`,
+            });
+        }
+    },
+
+    metaInfo() {
+        return {
+            title: "Forgot Password | Success",
+        };
+    },
+};
+</script>

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

@@ -0,0 +1,35 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1 class="h2 h2--small">Success</h1>
+
+            <p class="mt-2 mb-0 color-highlight">
+                <strong class="">Email: {{ $route.query.email }}</strong>
+            </p>
+            <p class="mt">
+                Your password has been reset. Please sign in to continue.
+            </p>
+
+            <elButton
+                tag="router-link"
+                type="primary"
+                :to="{ name: 'auth.login' }"
+            >
+                <span v-text="'Sign in'" />
+            </elButton>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+    metaInfo() {
+        return {
+            title: "Reset Password | Success",
+        };
+    },
+    components: {
+        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/_Build/vue/modules/AuthModule/routes/verify.vue

@@ -0,0 +1,110 @@
+<template>
+    <h1 class="h2 h2--small">Verify your email address</h1>
+
+    <form class="form" @submit.prevent="submit">
+        <p class="mt-2 mb-0 color-highlight">
+            <strong class="">Email: {{ user?.email }}</strong>
+        </p>
+        <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"
+            v-model="form.email"
+            label="Email address"
+            name="email"
+            :error="form.errors"
+            type="email"
+            placeholder="Email "
+            required
+        />
+
+        <elButton
+            class="mt mb-3"
+            native-type="submit"
+            type="primary"
+            :disabled="form.processing"
+            :loading="form.processing"
+            @click="onSubmit"
+        >
+            Re-send verification link
+        </elButton>
+
+        <p class="disclaimer mt-1.5">
+            Having trouble singing in?
+            <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("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    data: () => ({
+        user: null,
+        form: new Form(
+            {
+                email: "",
+            },
+            { resetOnSuccess: false },
+        ),
+        notification: null,
+    }),
+
+    methods: {
+        async onSubmit() {
+            try {
+                if (this.notification) {
+                    this.notification.close();
+                    this.notification = null;
+                }
+
+                await this.form.post("/email/verification-notification");
+
+                ElNotification({
+                    type: "success",
+                    message: "Email has been re-sent",
+                    duration: 10000,
+                    class: "el-notification--success el-notification--right-override",
+                });
+            } catch (e) {
+                if (e.response && e.response.status === 429) {
+                    this.notification = ElNotification({
+                        type: "warning",
+                        message: "Please allow 10 minutes before re-requesting",
+                        duration: 0,
+                        class: "el-notification--warning el-notification--right-override",
+                    });
+                } else if (e.response && e.response.status === 422) {
+                    this.notification = ElNotification({
+                        type: "error",
+                        message: e.response.data.message,
+                        duration: 0,
+                        class: "el-notification--error el-notification--right-override",
+                    });
+                } else {
+                    console.log(e);
+                }
+            }
+        },
+    },
+
+    async mounted() {
+        this.user = await this.$store.dispatch("getUser");
+
+        this.form.email = this.user.email;
+    },
+};
+</script>

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

@@ -5,16 +5,5 @@
 $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,7 +1,6 @@
 @import "@fishawack/lab-ui/_variables.scss";
-// Set global variables here, e.g $color6: red;
-@import "./modules/AuthVariables";
 
+// Set global variables here, e.g $color6: red;
 $primaryFont: "Inter";
 $primaryFontThin: "Inter-Thin";
 $primaryFontExtraLight: "Inter-ExtraLight";
@@ -10,11 +9,10 @@ $primaryFontRegular: "Inter-Regular";
 $primaryFontMedium: "Inter-Medium";
 $primaryFontSemiBold: "Inter-SemiBold";
 $primaryFontBold: "Inter-Bold";
-
 $secondaryFont: "NotoSerif";
 $secondaryFontMedium: "NotoSerif-Medium";
-// Colors
 
+// Colors
 $color1: #2d2d2d;
 $color2: #333333;
 $color3: #f7f7f7;
@@ -29,3 +27,10 @@ $color11: #8c8c8c; //Used
 $color12: #5c5c5c;
 $color13: #3c976e;
 $colorAlert: #d53a3a;
+
+// Spacing
+$spacing: 8px;
+
+// Auth
+$am-spacing: 8px;
+$am-highlight: #3c976e;

package/{modules/_AuthModule.scss → components/_auth.scss}

@@ -1,11 +1,3 @@
-@import "./AuthVariables";
-@import "element-plus/theme-chalk/base";
-@import "../components/input.scss";
-@import "../components/button";
-@import "../components/basic";
-@import "./modal";
-
-// AuthModule
 .AuthModule {
     position: fixed;
     background-color: black;
@@ -20,10 +12,12 @@
         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;
@@ -46,6 +40,7 @@
         transform: translate(-50%, 0);
         padding: 24px;
         width: calc(100% - 80px);
+
         h2 .h2 {
             font-size: 24px;
             line-height: 32px;
@@ -57,6 +52,7 @@
         line-height: 50px;
         font-size: 48px;
     }
+
     .h2--small {
         font-size: 36px;
         line-height: 44px;
@@ -67,14 +63,17 @@
         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;
@@ -86,6 +85,7 @@
         width: 200px;
         padding: 9px 23.5px;
         font-size: 14px;
+
         @include breakpoint(max-width $mobileMax) {
             max-width: unset;
             width: 100%;
@@ -99,43 +99,38 @@
                     border: 0.4px solid red;
                 }
             }
+
             .form__input.error {
                 border: none;
+
                 .el-input__wrapper {
                     border: 0.4px solid red;
                 }
             }
         }
-        // &__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;
         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;
-        padding-bottom: $am-spacing * 2.5;
+
         .el-input__inner {
             --el-input-inner-height: 38px;
         }
     }
+
     .el-button--primary {
         --el-button-text-color: #ffffff;
     }
+
     input,
     input:focus {
         @extend .el-input__inner;
@@ -147,9 +142,11 @@
     top: 48px;
     left: 0%;
 }
+
 .AuthModule__logo {
     position: relative;
 }
+
 .AuthModule__Content {
     position: absolute;
     z-index: 1;
@@ -161,52 +158,6 @@
     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 - 0.5) * $am-spacing !important;
-    }
-
-    .AM-mt-#{$i - 1} {
-        margin-top: ($i - 1) * $am-spacing !important;
-    }
-
-    .AM-mt-#{$i - 1}\.5 {
-        margin-top: ($i - 0.5) * $am-spacing !important;
-    }
-
-    .AM-pt-#{$i - 1} {
-        padding-top: ($i - 1) * $am-spacing !important;
-    }
-
-    .AM-pt-#{$i - 1}\.5 {
-        padding-top: ($i - 0.5) * $am-spacing !important;
-    }
-
-    .AM-pb-#{$i - 1} {
-        padding-bottom: ($i - 1) * $am-spacing !important;
-    }
-
-    .AM-pb-#{$i - 1}\.5 {
-        padding-bottom: ($i - 0.5) * $am-spacing !important;
-    }
-}
-
-.AM-color-highlight {
-    color: $am-highlight;
+.color-highlight {
+    color: green;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.1",
+    "version": "2.0.0-beta.11",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -62,14 +62,9 @@
     },
     "files": [
         "*.scss",
-        "*.vue",
-        "form",
         "components",
-        "layout",
-        "navigation",
-        "basic",
-        "modules",
-        "AuthModule"
+        "_Build/vue/components",
+        "_Build/vue/modules/AuthModule"
     ],
     "main": "index.js",
     "release": {