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

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

@@ -0,0 +1,113 @@
+<template>
+    <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">
+            <strong class="">Email: {{ user?.email }}</strong>
+        </p>
+        <p class="AM-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="AM-mt-0.5 AM-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="AM-mt AM-mb-3"
+            native-type="submit"
+            type="primary"
+            :disabled="form.processing"
+            :loading="form.processing"
+            @click="onSubmit"
+        >
+            Re-send verification link
+        </elButton>
+
+        <p class="disclaimer AM-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";
+
+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");
+
+                this.$notify({
+                    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 = this.$notify({
+                        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 = this.$notify({
+                        type: "error",
+                        message: e.response.data.message,
+                        duration: 0,
+                        class: "el-notification--error el-notification--right-override",
+                    });
+                } else {
+                    this.$root.errors(e);
+                }
+            }
+        },
+    },
+
+    async mounted() {
+        this.user = await this.$store.dispatch("getUser", {
+            errors: this.$root.errors,
+        });
+
+        this.form.email = this.user.email;
+    },
+};
+</script>

package/package.json

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

package/components/_alert.scss

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

package/components/_basic.scss

@@ -1,55 +0,0 @@
-@import "element-plus/theme-chalk/el-input";
-
-.el-input {
-    font-size: 1rem;
-
-    .el-input__wrapper {
-        // padding: .5 * $spacing $spacing;
-    }
-
-    .el-input__inner {
-        --el-input-inner-height: 46px;
-    }
-    .el-input-group__append,
-    .el-input-group__prepend {
-        padding: 0 2 * $spacing;
-    }
-}
-
-.vel-basic {
-    &__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;
-        height: 40px;
-        min-height: fit-content;
-    }
-    .icon {
-        width: 24px;
-        min-width: 24px;
-        padding: 0px !important;
-        fill: #cfd8dd !important;
-    }
-}

package/components/_breadcrumbs.scss

@@ -1,39 +0,0 @@
-@import "element-plus/theme-chalk/el-breadcrumb";
-@import "element-plus/theme-chalk/el-breadcrumb-item";
-.vel-breadcrumb {
-    .el-breadcrumb__separator {
-        display: none;
-        margin: 0px $spacing;
-    }
-
-    .el-breadcrumb__separator,
-    .el-breadcrumb__inner {
-        font-size: get-ratio(16px);
-        line-height: get-ratio(24px);
-    }
-
-    .el-breadcrumb__inner {
-        &.is-link {
-            text-decoration: underline;
-            font-weight: 500;
-            color: $color2;
-            text-transform: capitalize;
-
-            &:hover {
-                color: $color12;
-            }
-        }
-    }
-
-    .el-breadcrumb__item {
-        &:last-child {
-            .el-breadcrumb__inner {
-                &.is-link {
-                    color: $color2;
-                    font-weight: 400;
-                    text-decoration: none;
-                }
-            }
-        }
-    }
-}

package/components/_button.scss

@@ -1,304 +0,0 @@
-@import "element-plus/theme-chalk/el-button";
-
-.vel-button {
-    height: auto;
-    --el-border-radius-base: 0px;
-    --el-font-size-base: get-ratio(16px);
-
-    .is-round {
-        --el-border-radius-base: 999px;
-    }
-
-    // colors
-    &.el-button--default {
-        --el-color-primary: #ffffff;
-
-        // text color
-        --el-text-color-regular: #{$color2};
-        --el-button-hover-text-color: #{$color1};
-        --el-button-active-text-color: #{$color1};
-        --el-button-disabled-text-color: #bdbdbd;
-
-        // background color
-        --el-button-bg-color: #ffffff;
-        --el-button-hover-bg-color: #{$color8};
-        --el-button-active-text-color: #{$color1};
-        --el-button-disabled-bg-color: #ffffff;
-
-        // border color
-        --el-button-border-color: #{$color5};
-        --el-button-hover-border-color: #afafaf;
-        --el-button-active-border-color: #{$color1};
-        --el-button-disabled-border-color: #{$color4};
-
-        &.is-loading {
-            --el-text-color-regular: #a4a4a4;
-            --el-button-border-color: #{$color4};
-        }
-
-        &.is-plain {
-            --el-color-primary: #ffffff;
-
-            // text color
-            --el-text-color-regular: #{$color2};
-            --el-button-hover-text-color: #{$color1};
-            --el-button-active-text-color: #{$color1};
-            --el-button-disabled-text-color: #bdbdbd;
-
-            // background color
-            --el-button-bg-color: #ffffff;
-            --el-button-hover-bg-color: ##ffffff;
-            --el-button-active-text-color: #{$color1};
-            --el-button-disabled-bg-color: #ffffff;
-
-            // border color
-            --el-button-border-color: #{$color5};
-            --el-button-hover-border-color: #{$color1};
-            --el-button-active-border-color: #{$color1};
-            --el-button-disabled-border-color: #{$color4};
-
-            &.is-loading {
-                --el-text-color-regular: #a4a4a4;
-                --el-button-border-color: #{$color4};
-            }
-        }
-    }
-
-    &.el-button--primary {
-        --el-color-primary: #{$color1};
-
-        // text color
-        --el-text-color-regular: #ffffff;
-        --el-button-hover-text-color: #ffffff;
-        --el-button-active-text-color: #ffffff;
-        --el-button-disabled-text-color: #ffffff;
-
-        // background color
-        --el-button-bg-color: #{$color1};
-        --el-button-hover-bg-color: #{$color12};
-        --el-button-active-bg-color: #090909;
-        --el-button-disabled-bg-color: #afafaf;
-
-        // border color
-        --el-button-border-color: transparent;
-        --el-button-hover-border-color: transparent;
-        --el-button-active-border-color: transparent;
-        --el-button-disabled-border-color: transparent;
-
-        &.is-loading {
-            --el-text-color-regular: #a4a4a4;
-            --el-button-border-color: transparent;
-            --el-button-bg-color: #5c5c5c;
-        }
-
-        &.is-plain {
-            --el-color-primary: #{$color1};
-
-            // text color
-            --el-text-color-regular: #{$color1};
-            --el-button-hover-text-color: #ffffff;
-            --el-button-active-text-color: #ffffff;
-            --el-button-disabled-text-color: #ffffff;
-            --el-color-primary-light-5: #757575;
-
-            // background color
-            --el-button-bg-color: #f2f2f2;
-            --el-button-hover-bg-color: #{$color1};
-            --el-button-active-bg-color: #090909;
-            --el-button-disabled-bg-color: #{$color8};
-            --el-color-primary-light-9: #{$color8};
-
-            // border color
-            --el-button-border-color: #757575;
-            --el-button-hover-border-color: transparent;
-            --el-button-active-border-color: transparent;
-            --el-button-disabled-border-color: #d5d5d5;
-            --el-color-primary-light-8: #d5d5d5;
-
-            &.is-loading {
-                --el-text-color-regular: #{$color12};
-                --el-button-border-color: #757575;
-                --el-button-bg-color: #{$color8};
-            }
-        }
-
-        &.is-text,
-        &.is-link {
-            // text color
-            --el-button-hover-link-text-color: #{$color12};
-            --el-button-active-color: #090909;
-
-            &.is-disabled {
-                --el-color-primary-light-5: #bdbdbd;
-            }
-        }
-    }
-
-    &.el-button--danger {
-        --el-color-primary: #{$colorAlert};
-
-        // text color
-        --el-text-color-regular: #ffffff;
-        --el-button-hover-text-color: #ffffff;
-        --el-button-active-text-color: #ffffff;
-        --el-button-disabled-text-color: #ffffff;
-
-        // background color
-        --el-button-bg-color: #{$colorAlert};
-        --el-button-hover-bg-color: #df6b6b;
-        --el-button-active-bg-color: #b42929;
-        --el-button-disabled-bg-color: #ea9c9c;
-
-        // border color
-        --el-button-border-color: transparent;
-        --el-button-hover-border-color: transparent;
-        --el-button-active-border-color: transparent;
-        --el-button-disabled-border-color: transparent;
-
-        &.is-loading {
-            --el-text-color-regular: #ffffff;
-            --el-button-border-color: transparent;
-            --el-button-bg-color: #df6b6b;
-        }
-
-        &.is-plain {
-            // border: 2px solid orange !important;
-            --el-color-primary: #{$colorAlert};
-
-            // text color
-            --el-button-text-color: #d53a3a;
-            --el-text-color-regular: #d53a3a;
-            --el-button-hover-text-color: #ffffff;
-            --el-button-active-text-color: #ffffff;
-            --el-button-disabled-text-color: ##ea9c9c;
-
-            // background color
-            --el-button-bg-color: #fcf1f1;
-            --el-button-hover-bg-color: #d53a3a;
-            --el-button-active-bg-color: #b42929;
-            --el-button-disabled-bg-color: #fcf1f1;
-
-            // border color
-            --el-button-border-color: #ea9c9c;
-            --el-button-hover-border-color: transparent;
-            --el-button-active-border-color: transparent;
-            --el-button-disabled-border-color: #f9e1e1;
-
-            &.is-loading {
-                --el-text-color-regular: ##df6b6b;
-                --el-button-border-color: #ea9c9c;
-                --el-button-bg-color: #fcf1f1;
-            }
-        }
-    }
-
-    &.el-button--success {
-    }
-
-    &.el-button--info {
-    }
-
-    &.el-button--warning {
-    }
-
-    .vel-icon {
-        fill: currentColor;
-        path {
-            fill: currentColor;
-        }
-    }
-
-    // sizes & spacing
-    &.el-button--default,
-    &.el-button--primary,
-    &.el-button--danger,
-    &.el-button--success,
-    &.el-button--warning,
-    &.el-button--info {
-        // line-height: 1;
-        padding: get-ratio(11px) $spacing * 2;
-    }
-
-    &.el-button--large {
-        // line-height: 1;
-        padding: get-ratio(15px) $spacing * 2;
-    }
-
-    &.el-button--small {
-        // line-height: 1;
-        padding: get-ratio(5px) $spacing;
-    }
-
-    // shapes
-
-    &.is-circle,
-    &.is-square {
-        width: auto;
-        & [class*="el-icon"] + span {
-            margin-left: 0;
-        }
-        &.el-button--default,
-        &.el-button--primary,
-        &.el-button--danger,
-        &.el-button--success,
-        &.el-button--warning,
-        &.el-button--info {
-            padding: get-ratio(11px);
-        }
-
-        &.el-button--large {
-            padding: get-ratio(15px);
-        }
-
-        &.el-button--small {
-            padding: get-ratio(5px);
-        }
-    }
-    // Fix for improper spacing
-    .el-icon.is-loading {
-        + span:empty {
-            margin-left: 0px;
-        }
-    }
-}
-
-.vel-button {
-    &[disabled="true"] {
-        pointer-events: none !important;
-    }
-
-    &--iconRight {
-        .el-icon {
-            order: 2;
-        }
-
-        > span {
-            order: 1;
-            margin: 0 0.5rem 0 0;
-        }
-    }
-
-    &--iconOnly1 {
-        > span {
-            margin: 0;
-        }
-
-        .vel-icon {
-            width: 1.5 * $spacing;
-            height: 1.5 * $spacing;
-        }
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-
-        &.el-button--small {
-            padding: $spacing $spacing * 2;
-        }
-
-        &.el-button--large {
-            padding: 2 * $spacing 2.5 * $spacing;
-        }
-    }
-}

package/components/_cascader.scss

@@ -1,12 +0,0 @@
-@import "element-plus/theme-chalk/el-cascader";
-@import "element-plus/theme-chalk/el-cascader-panel";
-@import "element-plus/theme-chalk/el-popper";
-
-.el-cascader-panel {
-    font-size: 1rem;
-}
-
-.el-cascader-node {
-    line-height: get-ratio(40px);
-    height: get-ratio(40px);
-}

package/components/_checkbox.scss

@@ -1,41 +0,0 @@
-@import "element-plus/theme-chalk/el-checkbox";
-@import "element-plus/theme-chalk/el-checkbox-button";
-
-.vel-checkbox,
-.el-checkbox {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: $spacing * 0.5;
-    flex-wrap: wrap;
-    align-items: baseline;
-
-    &__label {
-        order: 2;
-    }
-    &__checkbox {
-        order: 1;
-        .el-checkbox__input {
-            &.is-checked {
-                .el-checkbox__inner {
-                    background-color: black;
-                }
-            }
-        }
-    }
-    &__error {
-        order: 3;
-        flex-basis: 100%;
-        color: $colorAlert;
-    }
-}
-
-.vel-checkbox-group,
-.vel-checkbox {
-    &--vertical {
-        .vel-checkbox-group__wrapper {
-            display: flex;
-            flex-direction: column;
-        }
-    }
-}

package/components/_chip.scss

@@ -1,24 +0,0 @@
-.chip {
-    border: solid 1px currentColor;
-    border-radius: 4px;
-    background-color: #f0f9eb;
-    padding: get-ratio(2px) get-ratio(10px);
-    font-size: get-ratio(12px);
-    line-height: get-ratio(18px);
-    box-sizing: border-box;
-
-    &.deactive,
-    &--inherited {
-        color: #909399 !important;
-        border-color: #dedfe0 !important;
-        background-color: #f4f4f5 !important;
-    }
-}
-
-.chip--round {
-    display: inline-block;
-    text-indent: -100000px;
-    width: get-ratio(22px);
-    height: get-ratio(22px);
-    border-radius: 100%;
-}

package/components/_collapse.scss

@@ -1,24 +0,0 @@
-@import "element-plus/theme-chalk/el-collapse";
-@import "element-plus/theme-chalk/el-collapse-item";
-
-.el-collapse-item__header {
-    align-items: center;
-    --el-collapse-header-font-size: get-ratio(16px);
-    .vel-icon {
-        vertical-align: middle;
-        width: 13px;
-        min-width: 13px;
-        fill: currentColor;
-        margin-right: 0.25rem;
-
-        svg {
-            vertical-align: middle;
-        }
-    }
-}
-
-.el-collapse {
-    --el-collapse-header-bg-color: transparent;
-    --el-collapse-content-bg-color: transparent;
-    --el-collapse-border-color: transparent;
-}

package/components/_datepicker.scss

@@ -1,52 +0,0 @@
-@import "element-plus/theme-chalk/el-date-picker";
-
-.vel-datepicker {
-    // --el-input-height:38px;
-
-    // &.el-input--large {
-    --el-input-height: 46px;
-    // }
-
-    &__error {
-        color: $colorAlert;
-    }
-}
-
-.vel-popper {
-    @include breakpoint(max-width $mobileMax) {
-        min-width: 280px;
-        max-width: 325px;
-        width: auto;
-        .el-date-range-picker {
-            width: 100%;
-            .el-picker-panel__body {
-                width: 100%;
-                min-width: 100%;
-                & > div {
-                    width: auto;
-                    min-width: auto;
-                    border: none;
-                }
-            }
-        }
-    }
-}
-
-.vel-date-picker,
-.el-date-picker {
-    &.has-sidebar {
-        width: auto;
-
-        .el-picker-panel__body-wrapper {
-            display: flex;
-        }
-    }
-    .el-picker-panel__sidebar {
-        width: auto;
-        position: relative;
-    }
-    .el-picker-panel__body {
-        margin-left: 0px;
-        position: relative !important;
-    }
-}