@sowell/quasar-app-extension-auth 0.3.3 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",

package/src/assets/SowellWhite.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4618.08 2000"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><path class="cls-1" d="M911.22,744.78,784.79,469.21a55.7,55.7,0,0,0-73-29h0a55.71,55.71,0,0,0-29,73l68.77,159.65a277,277,0,0,0-284.24,90.77c-4.06,9.52-2.92,16.64-2.92,27.08,0,34.12,29.12,57.23,63.74,57.23a63,63,0,0,0,42.07-16c27.57-23.58,71-51.37,110.07-51.37A157.72,157.72,0,1,1,523,950.41c.91-22.79,2-37.55,2-37.55a60.23,60.23,0,0,0-117.2-19.57l-.25-.12c-.09.54-.17,1.09-.26,1.64a60.14,60.14,0,0,0-2.76,18.05c0,1,0,2.08.08,3.11q-1,12-1.06,24.23a275.89,275.89,0,0,0,75.76,190.2l200.91,270.54L895.5,1114h0c38.41-47.51,57.15-108.11,61.44-173.83C963,846.67,911.22,744.78,911.22,744.78Z"/><path class="cls-1" d="M896,473.08a55.72,55.72,0,0,0-60.24-50.43h0a55.48,55.48,0,0,0-41.32,24.66L908.31,710.4Z"/><path class="cls-1" d="M1724.45,732.58q-31.7-38.19-84.63-56.85t-116.31-18.67q-85.08,0-148,26.91t-96.35,75.52q-33.42,48.62-33.42,111.1,0,59.89,30,100.26t72,63.79q42.09,23.44,108.93,49.48,52.1,20.84,80.73,35.15t47.74,35.59q19.08,21.29,19.1,50.78,0,47.74-41.67,74.21t-115.44,26.48q-71.19,0-110.67-19.1t-39.5-58.15a124.05,124.05,0,0,1,1.3-18.23,96.12,96.12,0,0,0,1.31-12.15,156.89,156.89,0,0,0,2.6-30.38q0-19.08-14.75-31.25t-38.2-12.15q-32.12,0-48.6,25.17t-16.5,72.91q0,90.29,69.44,134.11t184.89,43.83q130.2,0,207.88-55.12T1724,1188.28q0-54.67-28.21-92a211.31,211.31,0,0,0-68.14-59q-39.93-21.69-105.89-48.61-54.69-21.69-85.07-37.32t-50.78-39.06q-20.4-23.44-20.39-56.42,0-49.49,39.49-76.82t114.14-27.34q52.93,0,88.54,19.09t35.58,55.56q0,6.95-2.6,33a165.72,165.72,0,0,0-2.6,30.38q0,19.09,15.19,33T1691,936.56q32.12,0,48.61-27.77t16.5-82.46Q1756.14,770.78,1724.45,732.58Z"/><path class="cls-1" d="M2247.83,1138.8q6.08,11.29,6.08,28.65,0,41.65-25.17,49.47-52.08,18.24-114.58,20.84-16.5,72.91-65.1,116.74t-110.23,43.84q-52.1,0-89-25.17t-56-66.84q-19.11-41.67-19.1-90.27,0-66,25.18-117.62t69.43-80.72q44.28-29.07,98.09-29.08,66,0,106.33,45.57t47.3,112.41q40.8-2.61,97.22-17.36a50.9,50.9,0,0,1,12.15-1.74Q2241.75,1127.52,2247.83,1138.8Zm-253.89,145q20.38-22.56,27.35-65.1a119.73,119.73,0,0,1-41.24-47.74,141.4,141.4,0,0,1-14.32-62.5,150.1,150.1,0,0,1,2.61-27.77H1964q-34.73,0-57.72,33.42t-23,94.18q0,47.74,18.66,72.91t43.84,25.17Q1973.54,1306.33,1993.94,1283.76Z"/><path class="cls-1" d="M3290.69,1027.7q9.11,8.68,9.11,22.57a63.43,63.43,0,0,1-13.45,39.93q-13.47,17.37-42.1,18.22-68.58.88-123.25-10.41-60.78,129.35-146.26,214.83t-168.83,85.5q-76.39,0-114.58-81.16t-43.4-217.43q-52.08,151-117.61,224.81T2391,1398.34q-83.33,0-125.86-103.73t-42.53-279.06q0-127.6,22.56-280.37,6.06-43.38,22.14-60.32t50.77-16.93q26.05,0,40.37,11.29t14.32,41.66q0,6.09-1.74,23.44-26,177.95-26,302.93,0,116.32,20,179.67t53.81,63.37q30.38,0,73.35-63.8t85.5-189.22q42.51-125.43,72-299,6.95-39.91,25.61-55.12t50.77-15.19q26.89,0,39.5,11.72t12.58,35.15q0,13.91-1.73,21.7a1668,1668,0,0,0-24.31,283q0,96.36,6.51,153.64t25.18,87.23q18.64,30,54.25,30,41.66,0,92.87-62.93t93.75-156.68q-53-33-79.86-85.49T2917.88,854.1q0-68.55,21.27-115.88t58.15-70.74q36.88-23.43,82-23.44,55.55,0,88.1,39.93T3200,793.34q0,98.1-42.53,217.87,44.27,7.81,104.16,7.81Q3281.58,1019,3290.69,1027.7Zm-230.45-53.82q33.84-97.2,33.85-160.58,0-36.45-9.55-53.38t-26-16.92q-23.43,0-38.19,27.34T3005.55,848Q3005.55,933.1,3060.24,973.88Z"/><path class="cls-1" d="M3610.52,1210.85q6.51,10.41,6.51,28.64,0,34.73-16.49,53.82-32.11,39.06-90.7,72a251.55,251.55,0,0,1-125.43,33q-91.14,0-141.48-49.48t-50.35-135.41q0-59.9,25.17-111.53t69.88-82q44.68-30.37,101.12-30.38,50.33,0,80.72,30t30.38,81.15q0,59.9-43,102.86t-145.39,68.14q21.69,39.93,82.46,39.93,39.06,0,89-27.34a293.75,293.75,0,0,0,86.36-71.62q10.42-12.13,23.44-12.15Q3604,1200.43,3610.52,1210.85Zm-290.78-98.95q-22.12,37.32-22.13,90.27v1.74q51.21-12.15,80.72-36.46t29.52-56.42q0-16.48-9.12-26.48t-24.74-10Q3341.88,1074.57,3319.74,1111.9Z"/><path class="cls-1" d="M3893.48,1210.85q6.51,10.41,6.51,28.64,0,34.73-16.49,53.82-37.34,46-81.16,75.52T3703,1398.34q-76.39,0-113.28-69.44t-36.89-179.68q0-105.88,27.35-241.3t80.72-232.63q53.38-97.2,127.16-97.21,41.67,0,65.54,38.62t23.87,110.67q0,103.3-57.29,239.57t-155.37,270q6.06,35.59,20,50.78t36.46,15.19q35.58,0,62.49-20.4t68.57-69.88q10.42-12.13,23.44-12.15Q3887,1200.43,3893.48,1210.85Zm-169.69-474.8q-25.18,72.06-44.27,178.81t-20.83,204.85q61.62-101.57,98.08-203.55T3793.23,730q0-66-24.3-66Q3749,664,3723.79,736.05Z"/><path class="cls-1" d="M4099.62,1262.93q10.43,0,16.93,11.72t6.51,28.21q0,36.45-26,58.15-45.15,37.34-102.42,37.33-82.48,0-120.66-69t-38.19-180.11q0-105.88,27.34-241.3t80.73-232.63q53.38-97.2,127.16-97.21,41.67,0,65.53,38.62t23.87,110.67q0,103.3-56.85,239.57T3948.59,1236q6.06,35.6,21.7,51.21t42.53,15.63q14.76,0,33.42-8.68a140.58,140.58,0,0,0,34.29-22.57Q4090.07,1262.94,4099.62,1262.93Zm-92.87-526.88q-25.18,72.06-44.27,178.81t-20.83,204.85q61.62-101.57,98.08-203.55T4076.19,730q0-66-24.31-66Q4031.92,664,4006.75,736.05Z"/><path class="cls-1" d="M2005.65,993.36c-93.11-25.76-193.38,42.95-224,153.48s20.1,221,113.21,246.78,193.37-42.95,224-153.48S2098.76,1019.12,2005.65,993.36Zm16.79,207.13c-5.47,63.19-40.87,111.75-79.07,108.44s-64.73-57.22-59.26-120.42,40.87-111.75,79.07-108.44S2027.91,1137.29,2022.44,1200.49Z"/><path class="cls-1" d="M1968.34,1080.65s-20.76,90.46,53,138c0,0,58.5,35.43,169.7,9.11-.15,0,61.23-3.75,62.92-41.61,1,1.46,4-65.4-15.78-61.15-.73,0-97.9,22.83-117,21.61,0,0-83.92,16.25-76.64-82-.73,0,4.37-19.66-35-17.48C2010.24,1047.83,1970.44,1037.78,1968.34,1080.65Z"/><path class="cls-1" d="M1967.47,988.64l-4.29,91.43s-64.5-7.27-79.07,108.44c0,0-15.27,101,59.26,120.42,0,0,56.5,4.8,73.75-77.43,0,0,23.34-145.87-53.46-151.42l4.43-91.44s132-6.48,157.77,156.2c0,0,21.37,120.89-76.8,209.66,0,0-91.61,93.2-209.2,10.58.47.39-79.61-50.21-65.88-177.19-.15,1.56,3.06-93.83,82.89-158.89C1857.2,1028.74,1894.18,990.79,1967.47,988.64Z"/><path class="cls-2" d="M2995.67,1120.2q-30.43,56-64.77,98.23-51.22,63-92.87,62.94-35.61,0-54.25-29.95t-25.18-87.24q-6.51-57.29-6.51-153.63a1668,1668,0,0,1,24.31-283q1.72-7.82,1.73-21.7,0-23.43-12.58-35.15T2726.05,659q-32.12,0-50.77,15.19t-25.61,55.12q-29.52,173.61-72,299t-85.5,189.23q-43,63.79-73.35,63.8-33.86,0-53.81-63.37t-20-179.67q0-125,26-302.94,1.74-17.35,1.74-23.43,0-30.37-14.32-41.67T2318.09,659q-34.73,0-50.77,16.92t-22.14,60.33q-22.57,152.79-22.56,280.36,0,175.35,42.53,279.07T2391,1399.41q73.75,0,139.31-73.78t117.61-224.81q5.22,136.29,43.4,217.44t114.58,81.15q83.33,0,168.83-85.49,78.41-78.42,136-193.72s85-154.73,88.6-302.86c-.13,2.29,17.23-93.24-41.87-144.11-1.64-1.53-36.09-49.42-130.92-20.19-1.19.44-100.28,31.42-109,168.67,0-1.09-16.78,177.3,107.08,239,0,0,58.89,42.88,177,47,1.39.07,96,12,98.16-46.37,1.21,1.09,10.52-39.07-29-41.8-1-.11-162.72,5.8-223.5-56.63.27.26-54-42.29-40-147.53,0-.07,8.82-71.81,51.11-72.4,0,0,32.06-3.76,35.59,54.4C3094.44,799,3101.17,915.54,2995.67,1120.2Z"/></svg>

package/src/components/pages/WebAuth.vue

@@ -0,0 +1,301 @@
+<template>
+  <q-layout>
+    <div class="row window-height">
+      <div class="column col content-center justify-center bgWhite">
+        <div style="max-width:500px">
+          <h4 class="title">{{ $t('auth.title') }}</h4>
+          <div class="subtitle">{{ $t('auth.subtitle') }}</div>
+          <q-form @submit="onSubmit">
+            <div>
+              <div
+                class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold"
+              >
+                {{ $t('auth.email') }}
+              </div>
+              <q-input
+                v-model.trim="email"
+                type="email"
+                :rules="validations['email']"
+                lazy-rules
+                dense
+                outlined
+                input-class="text-subtitle2 text-weight-medium"
+              />
+              <div
+                class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold"
+              >
+                {{ $t('auth.password') }}
+              </div>
+              <q-input
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                :rules="validations['password']"
+                lazy-rules
+                dense
+                outlined
+                input-class="text-subtitle2 text-weight-bold"
+              >
+                <template #append>
+                  <q-icon
+                    :name="showPassword ? ionEyeSharp : ionEyeOffSharp"
+                    class="cursor-pointer q-mr-sm lightenDark"
+                    @click="showPassword = !showPassword"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="row justify-between items-center">
+              <q-btn
+                :label="$t('auth.login')"
+                color="primary"
+                no-caps
+                unelevated
+                text-color="white"
+                :loading="loading"
+                type="submit"
+                :disable="submitBtnDisabled"
+                class="submitBtn text-subtitle2 text-weight-bold"
+              />
+              <div class="cursor-pointer text-primary text-subtitle2" @click="forgottenPassword = true">{{ $t('auth.forgottenPassword') }}</div>
+            </div>
+          </q-form>
+        </div>
+      </div>
+      <div class="column col bgBlue justify-center content-center">
+        <img src="../../assets/SowellWhite.svg" class="logoWhite"/>
+      </div>
+    </div>
+    <div>
+      <q-dialog
+        v-model="forgottenPassword"
+        full-height
+        :maximized="true"
+        transition-show="fade"
+        transition-hide="fade"
+        persistent
+      >
+        <send-email @resetPassword="resetPassword" />
+      </q-dialog>
+      <q-dialog v-model="isReset" persistent>
+        <sowell-message
+          :emailResetPassword="emailResetPassword"
+          :sendEmailSuccess="sendEmailSuccess"
+          :loading="loading"
+          @retypeEmail="retypeEmail"
+        />
+      </q-dialog>
+    </div>
+  </q-layout>
+</template>
+
+<script lang="ts">
+import isEmail from "validator/es/lib/isEmail";
+import { defineComponent, ref, onMounted, computed } from "vue";
+import { $api, $prompts, $router, $store } from "../../injects";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import { AxiosError, AxiosResponse } from "axios";
+import prompts from "app/quasar.extensions.json";
+import SendEmail from "../dialogs/SendEmail.vue";
+import SowellMessage from "../dialogs/Message.vue";
+import {
+  ionMailOutline,
+  ionLockClosedOutline,
+  ionEyeSharp,
+  ionEyeOffSharp,
+  ionAlertCircleOutline,
+  ionCloseOutline
+} from "@quasar/extras/ionicons-v5";
+
+interface HeadersInterface {
+  headers: {
+    "x-requested-roles"?: string
+  }
+}
+export default defineComponent({
+  name: 'Auth',
+  components: { SendEmail, SowellMessage },
+  setup() {
+    const {
+      "@sowell/auth": { X_REQUESTED_ROLES },
+    } = prompts;
+    const email = ref("");
+    const password = ref("");
+    const loading = ref(false);
+    const showPassword = ref(false);
+    const forgottenPassword = ref(false);
+    const isReset = ref(false);
+    const sendEmailSuccess = ref(false);
+    const emailResetPassword = ref("");
+    const { post } = $api();
+    const {
+      LOCAL_SUCCESS_REDIRECTION_ROUTE,
+      AUTH_SERVER_SIGNING_ROUTE,
+      AUTH_SERVER_RESET_PASSWORD_ROUTE,
+      APP_SERVER_BASE_URL,
+    } = $prompts();
+    const $q = useQuasar();
+    const { push, replace } = $router();
+    const { dispatch, getters } = $store();
+    const { t } = useI18n();
+
+    onMounted(() => {
+      if (getters["token/getRaw"]) {
+        replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+      }
+    });
+
+    const validations = ref({
+      email: [
+        (val: string) => !!val || t("auth.emailPresenceError"),
+        (val: string) => isEmail(val.trim()) || t("auth.emailValidationError"),
+      ],
+      password: [(val: string) => !!val || t("auth.passwordPresenceError")],
+    });
+
+    const resetPassword = (email: string) => {
+      const data = {
+        auth: {
+          email,
+          base: APP_SERVER_BASE_URL,
+        },
+      };
+
+
+      post(AUTH_SERVER_RESET_PASSWORD_ROUTE, data)
+        .then(() => {
+          forgottenPassword.value = false;
+          isReset.value = true;
+          sendEmailSuccess.value = true;
+        })
+        .catch(() => {
+          isReset.value = true;
+        });
+    };
+
+    const retypeEmail = () => {
+      forgottenPassword.value = true
+    }
+
+    const onSubmit = () => {
+      loading.value = true;
+      const data = {
+        auth: {
+          email: email.value,
+          password: password.value,
+        },
+      };
+      const options: HeadersInterface = {
+        headers:{}
+      };
+      // @ts-ignore
+      let requestedRoles = window.Cypress ? window.Cypress.requestedRoles : X_REQUESTED_ROLES;
+      if (requestedRoles) options.headers["x-requested-roles"] = requestedRoles;
+
+      post(AUTH_SERVER_SIGNING_ROUTE, data, options)
+        .then((response: AxiosResponse) => {
+          const token = response.data.jwt;
+          dispatch("token/updateRaw", token);
+          push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+        })
+        .catch((error: AxiosError) => {
+          loading.value = false;
+          switch (error.response?.status) {
+            case 403:
+              $q.notify({
+                message: t("auth.403"),
+                color: "negative",
+                icon: ionAlertCircleOutline,
+                position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
+              });
+              break;
+            case 404:
+              $q.notify({
+                message: t("auth.404"),
+                color: "negative",
+                icon: ionAlertCircleOutline,
+                position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
+              });
+              break;
+            default:
+              $q.notify({
+                message: t("auth.loginFailed"),
+                color: "negative",
+                icon: ionAlertCircleOutline,
+                position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
+              });
+          }
+        });
+    };
+
+    const submitBtnDisabled = computed(() => !(
+        email.value &&
+        isEmail(email.value) &&
+        password.value &&
+        password.value.length > 5
+      )
+    )
+    return {
+      email,
+      password,
+      loading,
+      showPassword,
+      validations,
+      submitBtnDisabled,
+      onSubmit,
+      forgottenPassword,
+      emailResetPassword,
+      resetPassword,
+      isReset,
+      retypeEmail,
+      sendEmailSuccess,
+      ionMailOutline,
+      ionLockClosedOutline,
+      ionEyeSharp,
+      ionEyeOffSharp,
+    }
+  },
+})
+</script>
+
+<style scoped>
+.bgWhite {
+  background: #FFFFFF
+}
+.bgBlue {
+  background: var(--q-primary)
+}
+.lightenDark {
+  color: rgba(0, 0, 0, 0.24)
+}
+.title {
+  margin: 0px 0px 16px 0px;
+}
+.subtitle {
+  margin-bottom: 104px
+}
+.logoWhite {
+  width: 30%
+}
+.submitBtn {
+  width: 254px;
+}
+</style>

package/src/routes/index.ts

@@ -3,14 +3,16 @@ import prompts from "app/quasar.extensions.json";
 import { RouteRecordRaw } from "vue-router";
 
 const {
-  "@sowell/auth": { LOCAL_LOGIN_ROUTE, LOCAL_UPDATE_PASSWORD_ROUTE },
+  "@sowell/auth": { LOCAL_LOGIN_ROUTE, LOCAL_UPDATE_PASSWORD_ROUTE, X_REQUESTED_ROLES },
 } = prompts;
 
+const webAuthRoles = ['superadmin','clean_manager'];
+
 const routes: RouteRecordRaw[] = [
   {
     path: LOCAL_LOGIN_ROUTE,
     // @ts-ignore
-    component: () => import("@sowell/auth/pages/Auth.vue"),
+    component: () => import(`@sowell/auth/pages/${webAuthRoles.includes(X_REQUESTED_ROLES) ? 'WebAuth.vue' :'Auth.vue'}`),
   },
   {
     path: LOCAL_UPDATE_PASSWORD_ROUTE,