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

package/src/components/dialogs/Message.vue

@@ -2,7 +2,7 @@
   <q-card style="max-width: 343px; border-radius: 10px; background: #f4f5f6">
     <q-card-section class="text-center q-mt-lg">
       <img
-        v-if="sendEmailSuccess && !passwordUpdated"
+        v-if="emailSended"
         src="../../assets/mailbox.svg"
         style="width: 175px; height: 150px"
       />
@@ -12,7 +12,7 @@
         style="width: 100px; height: 80px"
       />
       <img
-        v-if="!sendEmailSuccess && !passwordUpdated"
+        v-if="emailNotSend"
         src="../../assets/error.svg"
         style="width: 100px; height: 80px"
       />
@@ -24,26 +24,14 @@
         style="font-size: 24px; font-weight: 600"
         data-cy="resetErrorMessage"
       >
-        {{
-          sendEmailSuccess
-            ? $t("auth.emailVerification")
-            : !passwordUpdated
-            ? $t("auth.loginFailed")
-            : $t("auth.passwordChanged")
-        }}
+        {{ messageTitle }}
       </div>
       <div
         data-cy="resetMessage"
         class="text-subtitle1 q-mt-sm text-center"
         style="font-size: 16px; font-weight: 400"
       >
-        {{
-          sendEmailSuccess
-            ? $t("auth.emailSent")
-            : !passwordUpdated
-            ? $t("auth.emailNotRecognize")
-            : $t("auth.passwordUpdated")
-        }}
+        {{ messageSubtitle }}
       </div>
       <div
         class="q-mt-sm text-center q-mb-xl"
@@ -55,7 +43,7 @@
     </q-card-section>
     <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg">
       <q-btn
-        v-if="!sendEmailSuccess && !passwordUpdated"
+        v-if="emailNotSend"
         data-cy="submit-login"
         :label="$t('auth.reSend')"
         color="primary"
@@ -72,7 +60,7 @@
         unelevated
         style="background: #fff"
         flat
-        @click="passwordUpdated ? $emit('goToLoginPage') : ''"
+        @click="handlePasswordUpdate"
         no-caps
         :label="$t('auth.close')"
         color="dark"
@@ -83,21 +71,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   props: {
     emailResetPassword: {
       type: String,
-      required: true,
     },
     sendEmailSuccess: {
       type: Boolean,
-      required: true,
     },
     loading: {
       type: Boolean,
-      required: true,
     },
     passwordUpdated: {
       type: Boolean,
@@ -105,10 +91,48 @@ export default defineComponent({
   },
   emit: ["retypeEmail", "goToLoginPage"],
   setup(props: any, { emit }: any) {
+    const { t } = useI18n();
+
+    const messageSubtitle = computed(() =>
+      props.sendEmailSuccess
+        ? t("auth.emailSent")
+        : !props.passwordUpdated
+        ? t("auth.emailNotRecognize")
+        : t("auth.passwordUpdated"),
+    );
+    const messageTitle = computed(() =>
+      props.sendEmailSuccess
+        ? t("auth.emailVerification")
+        : !props.passwordUpdated
+        ? t("auth.loginFailed")
+        : t("auth.passwordChanged"),
+    );
+
+    const emailNotSend = computed(
+      () => !props.sendEmailSuccess && !props.passwordUpdated,
+    );
+    const emailSended = computed(
+      () => props.sendEmailSuccess && !props.passwordUpdated,
+    );
+
     const retypeEmail = () => {
       emit("retypeEmail");
     };
-    return { retypeEmail };
+
+    const handlePasswordUpdate = () =>{
+      if(props.passwordUpdated){
+        emit("goToLoginPage")
+      }
+    }
+
+    return {
+      messageSubtitle,
+      messageTitle,
+      emailNotSend,
+      emailSended,
+      handlePasswordUpdate,
+      retypeEmail,
+    };
   },
 });
 </script>

package/src/components/dialogs/SendEmail.vue

@@ -48,7 +48,7 @@
             autofocus
           >
             <template #prepend>
-              <q-icon :name="ionMailOutline" />
+              <q-icon :name="icons.ionMailOutline" />
             </template>
           </q-input>
         </div>
@@ -57,7 +57,7 @@
       <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg row justify-center">
         <q-btn
           color="primary"
-          :icon="ionPaperPlaneOutline"
+          :icon="icons.ionPaperPlaneOutline"
           style="max-width: 330px"
           data-cy="sendEmails"
           no-caps
@@ -87,11 +87,14 @@ export default defineComponent({
     const sendEmail = () => {
       emit("resetPassword", email.value);
     };
+
     return {
-      sendEmail,
       email,
-      ionMailOutline,
-      ionPaperPlaneOutline,
+      sendEmail,
+      icons: {
+        ionMailOutline,
+        ionPaperPlaneOutline,
+      },
     };
   },
 });

package/src/components/dialogs/WebSendEmail.vue

@@ -0,0 +1,108 @@
+<template>
+  <q-card>
+    <q-page class="row bg-white">
+      <div class="col-6 q-pa-xl row justify-center">
+        <div class="left-side full-width full-height">
+          <img
+            class="logo"
+            src="../../assets/Sowell-logo.svg"
+            alt="Logo sowell"
+          />
+          <div class="bottom column justify-center full-height">
+            <div
+              class="q-mb-sm"
+              style="font-size: 34px; font-weight: 600; line-height: 40px"
+            >
+              {{ FORGOTTEN_PASSWORD_TITLE }}
+            </div>
+            <div class="text-subtitle1 q-mt-sm q-mb-lg">
+              {{ FORGOTTEN_PASSWORD_SUBTITLE }}
+            </div>
+            <div class="q-mt-lg q-ml-xs q-mb-xs text-semi-bold">
+              {{ $t("auth.email") }}
+            </div>
+            <q-input
+              v-model="email"
+              dense
+              outlined
+              bg-color="white"
+              data-cy="emailReset"
+              autofocus
+            />
+            <div class="q-mt-lg row">
+              <q-btn
+                color="primary"
+                :icon-right="icons.ionPaperPlaneOutline"
+                style="max-width: 330px"
+                data-cy="sendEmails"
+                align="center"
+                no-caps
+                unelevated
+                :label="$t('common.reset')"
+                class="btn-min"
+                @click="sendEmail"
+                v-close-popup
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-6 bg-image row justify-center items-center">
+        <img
+          class="illustration"
+          src="../../assets/Illustration-password.svg"
+          alt=""
+        />
+      </div>
+    </q-page>
+  </q-card>
+</template>
+
+<script lang="ts">
+// @ts-ignore
+import { defineComponent, ref } from "vue";
+import prompts from "app/quasar.extensions.json";
+import { ionPaperPlaneOutline } from "@quasar/extras/ionicons-v5";
+
+export default defineComponent({
+  name: "WebSendMail",
+  emit: ["resetPassword"],
+  setup(props: any, { emit }: any) {
+    const {
+      "@sowell/auth": { FORGOTTEN_PASSWORD_TITLE, FORGOTTEN_PASSWORD_SUBTITLE },
+    } = prompts;
+    const email = ref("");
+    const sendEmail = () => {
+      emit("resetPassword", email.value);
+    };
+    return {
+      email,
+      FORGOTTEN_PASSWORD_TITLE,
+      FORGOTTEN_PASSWORD_SUBTITLE,
+      sendEmail,
+      icons: {
+        ionPaperPlaneOutline,
+      },
+    };
+  },
+});
+</script>
+
+<style>
+.bg-image {
+  background: #eef8fd;
+  height: 100vh !important;
+}
+.bottom {
+  margin-top: -80px;
+}
+.logo {
+  width: 210px;
+}
+.left-side {
+  max-width: 500px;
+}
+.illustration {
+  width: 600px;
+}
+</style>

package/src/components/dialogs/sw-info-dialog.vue

@@ -0,0 +1,87 @@
+<template>
+  <q-card>
+    <q-card-section class="top">
+      <div class="full-width button-close row justify-end">
+        <q-btn
+          unelevated
+          :icon="icons.ionCloseOutline"
+          flat
+          round
+          no-caps
+          color="dark"
+          v-close-popup
+        />
+      </div>
+      <div class="row justify-center">
+        <img :src="image" />
+      </div>
+    </q-card-section>
+
+    <q-card-section class="content q-pl-lg q-pr-lg">
+      <h5 class="q-mt-sm q-mb-md text-center text-dark">
+        {{ title }}
+      </h5>
+      <div class="text-subtitle1 q-mt-sm text-center text-dark">
+        {{ content }}
+      </div>
+    </q-card-section>
+    <q-card-actions class="row full-width justify-center q-mb-lg">
+      <q-btn
+        class="bg-white submitBtn"
+        unelevated
+        outline
+        no-caps
+        :label="$t('auth.close')"
+        @click="passwordUpdated ? $emit('goToLoginPage') : ''"
+        color="primary"
+        v-close-popup
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import userNotFound from "../../assets/User-not-found.svg";
+import passwordUpdated from "../../assets/Ok-illustration.svg";
+import emailVerification from "../../assets/Email-sent.svg";
+import { ionCloseOutline } from "@quasar/extras/ionicons-v5";
+
+export default defineComponent({
+  name: "swInfoDialog",
+  props: {
+    title: { type: String, required: true },
+    content: { type: String, required: true },
+    image: { type: String, required: true },
+    passwordUpdated: { type: Boolean },
+  },
+  emit: ["goToLoginPage"],
+  setup(props: any) {
+    const image = computed(() => {
+      switch (props.image) {
+        case "userNotFound":
+          return userNotFound;
+
+        case "passwordUpdated":
+          return passwordUpdated;
+
+        case "emailVerification":
+          return emailVerification;
+      }
+    });
+    return { image, icons: { ionCloseOutline } };
+  },
+});
+</script>
+<style lang="sass">
+.top
+  background: #EEF8FD
+
+img
+  width: 277px
+
+.submitBtn
+  width: 254px
+
+.content
+  max-width: 429px
+</style>

package/src/components/pages/Auth.vue

@@ -47,7 +47,7 @@
               :input-style="{ fontSize: '14px', fontWeight: '500' }"
             >
               <template #prepend>
-                <q-icon :name="ionMailOutline" />
+                <q-icon :name="icons.ionMailOutline" />
               </template>
             </q-input>
           </div>
@@ -69,11 +69,13 @@
               :input-style="{ fontSize: '14px', fontWeight: '600' }"
             >
               <template #prepend>
-                <q-icon :name="ionLockClosedOutline" />
+                <q-icon :name="icons.ionLockClosedOutline" />
               </template>
               <template #append>
                 <q-icon
-                  :name="showPassword ? ionEyeOffOutline : ionEyeOutline "
+                  :name="
+                    showPassword ? icons.ionEyeOffOutline : icons.ionEyeOutline
+                  "
                   class="cursor-pointer q-mr-sm"
                   @click="showPassword = !showPassword"
                 />
@@ -128,171 +130,51 @@
 </template>
 
 <script lang="ts">
-import isEmail from "validator/es/lib/isEmail";
-import { defineComponent, ref, onMounted } 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 { defineComponent } from "vue";
+
 import SendEmail from "../dialogs/SendEmail.vue";
 import SowellMessage from "../dialogs/Message.vue";
-import {
-  ionMailOutline,
-  ionLockClosedOutline,
-  ionEyeOutline,
-  ionEyeOffOutline,
-  ionAlertCircleOutline,
-  ionCloseOutline
-} from "@quasar/extras/ionicons-v5";
-
-interface HeadersInterface {
-  headers: {
-    "x-requested-roles"?: string
-  }
-}
+import { useAuth } from "composables/auth";
 
 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,
+      email,
+      password,
+      loading,
+      showPassword,
+      validations,
+      forgottenPassword,
+      emailResetPassword,
+      isReset,
+      sendEmailSuccess,
+      authState,
       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")],
-    });
+      onSubmit,
+      retypeEmail,
+      isSubmitBtnDisabled,
+      icons,
+    } = useAuth();
 
-    const resetPassword = (email: string) => {
+    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;
+      try {
+        forgottenPassword.value = false;
+        await authState.resetPassword(data).then(() => {
           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 isSubmitBtnDisabled = () => {
-      return !(
-        email.value &&
-        isEmail(email.value) &&
-        password.value &&
-        password.value.length > 5
-      );
+      } catch {
+        sendEmailSuccess.value = false;
+        isReset.value = true;
+      }
     };
 
     return {
@@ -301,18 +183,15 @@ export default defineComponent({
       loading,
       showPassword,
       validations,
-      isSubmitBtnDisabled,
-      onSubmit,
       forgottenPassword,
       emailResetPassword,
-      resetPassword,
       isReset,
-      retypeEmail,
       sendEmailSuccess,
-      ionMailOutline,
-      ionLockClosedOutline,
-      ionEyeOutline,
-      ionEyeOffOutline,
+      onSubmit,
+      resetPassword,
+      isSubmitBtnDisabled,
+      retypeEmail,
+      icons,
     };
   },
 });