@sowell/quasar-app-extension-auth 0.3.5 → 0.3.8

package/src/components/pages/WebAuth.vue

@@ -1,67 +1,93 @@
 <template>
   <q-layout>
     <div class="row window-height">
-      <div class="column col content-center justify-center">
-        <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 class="col column content-center bgWhite">
+        <div class="q-mt-xl">
+          <img
+            src="../../assets/Sowell-logo.svg"
+            style="width: 210px"
+            class="logoWhite"
+          />
+        </div>
+        <div class="column col content-center justify-center bgWhite">
+          <div style="max-width: 500px">
+            <h4 class="title">{{ WELCOME_TITLE }}</h4>
+            <div class="subtitle">{{ WELCOME_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
+                   data-cy="email"
+                  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']"
+                  data-cy="password"
+                  lazy-rules
+                  dense
+                  outlined
+                  input-class="text-subtitle2 text-weight-bold"
+                >
+                  <template #append>
+                    <q-icon
+                      :name="
+                        showPassword ? icons.ionEyeSharp : icons.ionEyeOffSharp
+                      "
+                      class="cursor-pointer q-mr-sm lightenDark"
+                      @click="showPassword = !showPassword"
+                    />
+                  </template>
+                </q-input>
               </div>
-              <q-input
-                v-model.trim="email"
-                type="email"
-                :rules="validations['email']"
-                lazy-rules
-                dense
-                standout
-                input-class="text-subtitle2 text-weight-medium"
-              />
-              <div
-                class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold"
-              >
-                {{ $t('auth.password') }}
+              <div class="row justify-between items-center">
+                <q-btn
+                  :label="$t('auth.login')"
+                  color="primary"
+                  no-caps
+                  unelevated
+                  data-cy="submit-login"
+                  text-color="white"
+                  :loading="loading"
+                  type="submit"
+                  :disable="isSubmitBtnDisabled()"
+                  class="submitBtn text-subtitle2 text-weight-bold"
+                />
+                <div
+                  class="cursor-pointer text-primary text-subtitle2"
+                   data-cy="forgot-password"
+                  @click="forgottenPassword = true"
+                >
+                  {{ $t("auth.forgottenPassword") }}
+                </div>
               </div>
-              <q-input
-                v-model="password"
-                :type="showPassword ? 'text' : 'password'"
-                :rules="validations['password']"
-                lazy-rules
-                dense
-                standout
-                input-class="text-subtitle2 text-weight-bold"
-              >
-                <template #append>
-                  <q-icon
-                    :name="showPassword ? ionEyeSharp : ionEyeOffSharp"
-                    class="cursor-pointer q-mr-sm"
-                    @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"
-              />
-              <div class="cursor-pointer" @click="forgottenPassword = true">{{ $t('auth.forgottenPassword') }}</div>
-            </div>
-          </q-form>
+            </q-form>
+          </div>
         </div>
       </div>
-      <div class="column col bgBlue justify-center content-center">
-        <img src="../../assets/SowellWhite.svg" class="logoWhite"/>
+      <div
+        class="column col justify-center content-center"
+        :style="isManager ? 'background: #eef8fd' : ''"
+        :class="!isManager ? 'bgBlue' : ''"
+      >
+        <img
+          v-if="isManager"
+          src="../../assets/illustration-login.svg"
+          style="width: 600px"
+        />
+        <img v-else src="../../assets/SowellWhite.svg" class="logoWhite" />
       </div>
     </div>
     <div>
@@ -73,14 +99,13 @@
         transition-hide="fade"
         persistent
       >
-        <send-email @resetPassword="resetPassword" />
+        <web-send-email @resetPassword="resetPassword" />
       </q-dialog>
-      <q-dialog v-model="isReset" persistent>
-        <sowell-message
-          :emailResetPassword="emailResetPassword"
-          :sendEmailSuccess="sendEmailSuccess"
-          :loading="loading"
-          @retypeEmail="retypeEmail"
+      <q-dialog v-model="isNotification" persistent>
+        <sw-info-dialog
+          :title="infoDialog.title"
+          :content="infoDialog.content"
+          :image="infoDialog.image"
         />
       </q-dialog>
     </div>
@@ -89,203 +114,132 @@
 
 <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 { defineComponent, ref, computed } from "vue";
+import { useAuthState } from "../../injects";
 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";
+import SwInfoDialog from "../dialogs/sw-info-dialog.vue";
+import WebSendEmail from "../dialogs/WebSendEmail.vue";
+
+import { useAuth } from "composables/auth";
 
 interface HeadersInterface {
   headers: {
-    "x-requested-roles"?: string
-  }
+    "x-requested-roles"?: string;
+  };
 }
 export default defineComponent({
-  name: 'Auth',
-  components: { SendEmail, SowellMessage },
+  name: "Auth",
+  components: { WebSendEmail, SwInfoDialog },
   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();
+    const authState = useAuthState();
 
-    onMounted(() => {
-      if (getters["token/getRaw"]) {
-        replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
-      }
-    });
+    const {
+      email,
+      password,
+      loading,
+      showPassword,
+      validations,
+      forgottenPassword,
+      emailResetPassword,
+      WELCOME_TITLE,
+      WELCOME_SUBTITLE,
+      X_REQUESTED_ROLES,
+      APP_SERVER_BASE_URL,
+      onSubmit,
+      retypeEmail,
+      isSubmitBtnDisabled,
+      icons,
+    } = useAuth();
 
-    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 isNotification = ref(false);
+    const infoDialog = ref({
+      title: "",
+      content: "",
+      image: "",
     });
 
-    const resetPassword = (email: string) => {
+    const submitBtnDisabled = computed(
+      () =>
+        !(
+          email.value &&
+          isEmail(email.value) &&
+          password.value &&
+          password.value.length > 5
+        ),
+    );
+    const isManager = computed(() => X_REQUESTED_ROLES === "clean_manager");
+    const resetPassword = async (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,
-                  },
-                ],
-              });
-          }
-        });
+      try {
+        await authState.resetPassword(data);
+        forgottenPassword.value = false;
+        infoDialog.value = {
+          title: t("auth.mailVerificationTitle"),
+          content: t("auth.mailVerificationSubtitle"),
+          image: "emailVerification",
+        };
+        forgottenPassword.value = false;
+        isNotification.value = true;
+      } catch {
+        infoDialog.value = {
+          title: t("auth.userNotFoundTitle"),
+          content: t("auth.userNotFoundSubtitle"),
+          image: "userNotFound",
+        };
+        isNotification.value = true;
+      }
     };
 
-    const submitBtnDisabled = computed(() => !(
-        email.value &&
-        isEmail(email.value) &&
-        password.value &&
-        password.value.length > 5
-      )
-    )
     return {
       email,
+      infoDialog,
       password,
       loading,
       showPassword,
       validations,
       submitBtnDisabled,
-      onSubmit,
       forgottenPassword,
       emailResetPassword,
+      isNotification,
+      isManager,
+      WELCOME_SUBTITLE,
+      WELCOME_TITLE,
+      isSubmitBtnDisabled,
       resetPassword,
-      isReset,
       retypeEmail,
-      sendEmailSuccess,
-      ionMailOutline,
-      ionLockClosedOutline,
-      ionEyeSharp,
-      ionEyeOffSharp,
-    }
+      onSubmit,
+      icons,
+    };
   },
-})
+});
 </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
+  margin-bottom: 80px;
 }
 .logoWhite {
-  width: 30%
+  width: 30%;
+}
+.submitBtn {
+  width: 254px;
 }
 </style>

package/src/components/pages/WebResetPassword.vue

@@ -0,0 +1,128 @@
+<template>
+  <q-layout>
+    <q-page class="q-pa-md row justify-center">
+      <div>
+        <div class="q-mt-xl">
+          <img
+            src="../../assets/Sowell-logo.svg"
+            class="q-mb-sm q-mr-md"
+            style="width: 190px"
+          />
+        </div>
+        <div
+          class="column justify-center full-height"
+          style="max-width: 550px; margin-top: -90px"
+        >
+          <div></div>
+          <div
+            class="text-subtitle1 q-mt-lg"
+            style="font-size: 34px; font-weight: 600; line-height: 34px"
+          >
+            {{ $t("auth.passwordRecovery") }}
+          </div>
+          <div
+            class="text-subtitle1 q-mt-lg q-mb-lg"
+            style="font-size: 16px; font-weight: 400; line-height: 24px"
+          >
+            {{ $t("auth.recommendPassword") }}
+          </div>
+          <q-form class="column form" @submit="onSubmit">
+            <div>
+              <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
+                {{ $t("auth.newPassword") }}
+              </div>
+              <q-input
+                id="password"
+                v-model="password"
+                data-cy="reset-password"
+                :rules="validations['passwordRules']"
+                outlined
+                :type="showPassword ? 'text' : 'password'"
+                bg-color="white"
+                dense
+                class="full-width q-mb-md"
+              >
+                <template #append>
+                  <q-icon
+                    :name="
+                      showPassword
+                        ? icons.ionEyeOffOutline
+                        : icons.ionEyeOutline
+                    "
+                    class="cursor-pointer q-mr-sm"
+                    @click="showPassword = !showPassword"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <q-space class="mobile" />
+            <div>
+              <q-btn
+                :label="$t('common.register')"
+                color="primary"
+                :loading="loading"
+                type="submit"
+                no-caps
+                class="submitBtn"
+                data-cy="send-new-password"
+                :disable="!canSubmit"
+              />
+            </div>
+          </q-form>
+        </div>
+      </div>
+      <q-dialog v-model="passwordUpdated" persistent>
+        <sw-info-dialog
+          :title="$t('auth.passwordChanged')"
+          :content="$t('auth.passwordUpdated')"
+          :image="'passwordUpdated'"
+          :passwordUpdated="passwordUpdated"
+          @goToLoginPage="goToLoginPage"
+        />
+      </q-dialog>
+    </q-page>
+  </q-layout>
+</template>
+
+<script lang="ts">
+//@ts-ignore
+import { defineComponent } from "vue";
+import SwInfoDialog from "../dialogs/sw-info-dialog.vue";
+import { useResetPassword } from "composables/resetPassword";
+
+export default defineComponent({
+  name: "ResetPassword",
+  components: { SwInfoDialog },
+  setup() {
+    const {
+      password,
+      loading,
+      passwordUpdated,
+      showPassword,
+      validations,
+      canSubmit,
+      onSubmit,
+      goToLoginPage,
+      icons
+    } = useResetPassword();
+
+    return {
+      password,
+      validations,
+      loading,
+      canSubmit,
+      passwordUpdated,
+      showPassword,
+      goToLoginPage,
+      onSubmit,
+      icons
+    };
+  },
+});
+</script>
+
+<style scoped>
+.submitBtn {
+  width: 254px;
+}
+</style>