@sowell/quasar-app-extension-auth 0.4.9 → 0.4.10

package/package.json

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

package/src/components/dialogs/SendEmail.vue

@@ -2,6 +2,7 @@
   <q-card
     class="row justify-center full-height q-pl-sm q-pr-sm"
     style="background: #f4f5f6"
+    data-testid="ask-password-change-form"
   >
     <q-page class="column" style="max-width: 447px">
       <q-card-section>
@@ -40,6 +41,7 @@
             </div>
           </div>
           <q-input
+            data-testid="email-input"
             v-model="email"
             dense
             borderless
@@ -56,6 +58,7 @@
       <q-space class="mobile" />
       <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg row justify-center">
         <q-btn
+          data-testid="submit-btn"
           color="primary"
           :icon="icons.ionPaperPlaneOutline"
           style="max-width: 330px"

package/src/components/dialogs/WebSendEmail.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card>
+  <q-card data-testid="ask-password-change-form">
     <q-page class="row bg-white">
       <div class="col-6 q-pa-xl row justify-center center">
         <div class="left-side full-width full-height">
@@ -22,6 +22,7 @@
               {{ $t("auth.email") }}
             </div>
             <q-input
+              data-testid="email-input"
               v-model="email"
               dense
               outlined
@@ -31,6 +32,7 @@
             />
             <div class="q-mt-lg row justify-between items-center">
               <q-btn
+                data-testid="submit-btn"
                 color="primary"
                 :icon-right="icons.ionPaperPlaneOutline"
                 style="max-width: 330px"
@@ -46,6 +48,7 @@
               />
 
               <q-btn
+                data-testid="back-btn"
                 color="primary"
                 style="max-width: 330px"
                 data-cy="close_send_email"
@@ -124,8 +127,8 @@ export default defineComponent({
   .bg-image {
     display: none;
   }
-  .center{
+  .center {
     width: 100%;
   }
 }
-</style>
+</style>

package/src/components/pages/Auth.vue

@@ -98,6 +98,7 @@
             class="q-mb-lg q-mt-xl text-primary"
             @click="forgottenPassword = true"
             data-cy="forgot-password"
+            data-testid="ask-password-change-btn"
             style="font-size: 16px; font-weight: 500; cursor: pointer"
           >
             {{ $t("auth.forgottenPassword") }}
@@ -143,6 +144,7 @@
           transition-show="fade"
           transition-hide="fade"
           persistent
+          data-testid="ask-password-change-modal"
         >
           <send-email @resetPassword="resetPassword" />
         </q-dialog>

package/src/components/pages/AuthReporter.vue

@@ -99,6 +99,7 @@
               <div
                 class="q-mb-xl q-mt-lg text-primary text-center"
                 @click="forgottenPassword = true"
+                data-testid="ask-password-change-btn"
                 data-cy="forgot-password"
                 style="font-size: 14px; cursor: pointer; width: 350px"
               >
@@ -116,6 +117,7 @@
           transition-show="fade"
           transition-hide="fade"
           persistent
+          data-testid="ask-password-change-modal"
         >
           <send-email @resetPassword="resetPassword" />
         </q-dialog>

package/src/components/pages/WebAuth.vue

@@ -105,6 +105,7 @@
                 />
                 <div
                   class="cursor-pointer text-primary text-subtitle2"
+                  data-testid="ask-password-change-btn"
                   data-cy="forgot-password"
                   @click="forgottenPassword = true"
                 >
@@ -140,6 +141,7 @@
         transition-show="fade"
         transition-hide="fade"
         persistent
+        data-testid="ask-password-change-modal"
       >
         <web-send-email @resetPassword="resetPassword" />
       </q-dialog>
@@ -151,14 +153,15 @@
           :isOtp="isOtp"
         >
           <q-btn
+            :data-testid="infoDialog.canGoNext ? 'next-btn' : 'close-btn'"
             v-if="isOtp"
             class="bg-white submitBtn"
             unelevated
             outline
             no-caps
-            :label="$t('auth.next')"
+            :label="infoDialog.canGoNext ? $t('auth.next') : $t('auth.close')"
             color="primary"
-            @click="goToOtpValidation"
+            @click="handleInfoDialog"
             v-close-popup
           />
         </sw-info-dialog>
@@ -245,6 +248,7 @@ export default defineComponent({
           await authState.resetPassword(data).then(() => {
             localStorage.setItem("emailResetPassword", email);
             infoDialog.value = {
+              canGoNext: true,
               title: t("auth.mailVerificationTitle"),
               content:
                 IS_OTP.toLowerCase() === "y"
@@ -259,11 +263,12 @@ export default defineComponent({
           isNotification.value = false;
 
           infoDialog.value = {
+            canGoNext: false,
             title: t("auth.userNotFoundTitle"),
             content: t("auth.userNotFoundSubtitle"),
             image: "userNotFound",
           };
-          
+
           isNotification.value = true;
         }
       }
@@ -273,6 +278,12 @@ export default defineComponent({
       onSubmit("SoWell");
     };
 
+    const handleInfoDialog = () => {
+      if (infoDialog.value.canGoNext) {
+        goToOtpValidation()
+      }
+    }
+
     return {
       email,
       infoDialog,
@@ -289,7 +300,7 @@ export default defineComponent({
       WELCOME_SUBTITLE,
       WELCOME_TITLE,
       isSubmitBtnDisabled,
-      goToOtpValidation,
+      handleInfoDialog,
       retypeEmail,
       onSubmit,
       icons,