@sowell/quasar-app-extension-auth 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -21,6 +21,7 @@
     "yarn": ">= 1.6.0"
   },
   "devDependencies": {
+    "@quasar/app-webpack": "^4.0.0-beta.16",
     "@quasar/cli": "^2.2.3",
     "@types/node": "^16.9.1",
     "@types/validator": "^13.6.3",

package/src/boot/axios.ts

@@ -1,5 +1,4 @@
 // FIXME: find another way to call this path
-//@ts-ignore
 import prompts from "app/quasar.extensions.json";
 import axios from "axios";
 import { boot } from "quasar/wrappers";

package/src/boot/register.ts

@@ -1,4 +1,3 @@
-//@ts-ignore
 import prompts from "app/quasar.extensions.json";
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";

package/src/boot/router.ts

@@ -1,4 +1,3 @@
-//@ts-ignore
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";
 import newRoutes from "../routes";

package/src/boot/store.ts

@@ -1,4 +1,3 @@
-//@ts-ignore
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";
 

package/src/components/dialogs/Message.vue

@@ -1,21 +1,20 @@
 <template>
-  <q-card style="max-width: 343px; border-radius: 10px; background: #f4f5f6" data-testid="feedback-dialog">
+  <q-card
+    style="max-width: 343px; border-radius: 10px; background: #f4f5f6"
+    data-testid="feedback-dialog">
     <q-card-section class="text-center q-mt-lg">
       <img
         v-if="emailSended"
         src="../../assets/mailbox.svg"
-        style="width: 175px; height: 150px"
-      />
+        style="width: 175px; height: 150px" />
       <img
         v-if="passwordUpdated"
         src="../../assets/success.svg"
-        style="width: 100px; height: 80px"
-      />
+        style="width: 100px; height: 80px" />
       <img
         v-if="emailNotSend"
         src="../../assets/error.svg"
-        style="width: 100px; height: 80px"
-      />
+        style="width: 100px; height: 80px" />
     </q-card-section>
 
     <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
@@ -23,29 +22,26 @@
         class="text-subtitle1 q-mt-sm q-mb-md text-center text-dark"
         style="font-size: 24px; font-weight: 600"
         data-cy="resetErrorMessage"
-        data-testid="header-dialog"
-      >
+        data-testid="header-dialog">
         {{ messageTitle }}
       </div>
       <div
         data-cy="resetMessage"
         data-testid="message-dialog"
         class="text-subtitle1 q-mt-sm text-center"
-        style="font-size: 16px; font-weight: 400"
-      >
+        style="font-size: 16px; font-weight: 400">
         {{ messageSubtitle }}
       </div>
       <div
         class="q-mt-sm text-center q-mb-xl"
         style="font-size: 15px; color: #737676"
-        v-if="sendEmailSuccess"
-      >
+        v-if="sendEmailCode === 200">
         {{ emailResetPassword }}
       </div>
     </q-card-section>
     <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg">
       <q-btn
-        v-if="emailNotSend"
+        v-if="emailNotSend && sendEmailCode !== 403"
         data-cy="submit-login"
         :label="$t('auth.reSend')"
         color="primary"
@@ -55,8 +51,7 @@
         unelevated
         type="submit"
         @click="retypeEmail"
-        class="full-width"
-      />
+        class="full-width" />
       <slot>
         <q-btn
           data-testid="close-btn"
@@ -68,24 +63,23 @@
           no-caps
           :label="$t('auth.close')"
           color="dark"
-          v-close-popup
-        />
+          v-close-popup />
       </slot>
     </q-card-actions>
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
-import { useI18n } from "vue-i18n";
+import { defineComponent, computed } from "vue"
+import { useI18n } from "vue-i18n"
 
 export default defineComponent({
   props: {
     emailResetPassword: {
       type: String
     },
-    sendEmailSuccess: {
-      type: Boolean
+    sendEmailCode: {
+      type: Number
     },
     loading: {
       type: Boolean
@@ -98,34 +92,40 @@ export default defineComponent({
   setup(props: any, { emit }: any) {
     const { t } = useI18n()
 
-    const messageSubtitle = computed(() =>
-      props.sendEmailSuccess
+    const messageSubtitle = computed(() => {
+      if (props.sendEmailCode === 403) {
+        return t("auth.forbidden.subtitle")
+      }
+      return props.sendEmailCode === 200
         ? t("auth.emailSent")
         : !props.passwordUpdated
         ? t("auth.emailNotRecognize")
         : t("auth.passwordUpdated")
-    )
-    const messageTitle = computed(() =>
-      props.sendEmailSuccess
+    })
+    const messageTitle = computed(() => {
+      if (props.sendEmailCode === 403) {
+        return t("auth.forbidden.title")
+      }
+      return props.sendEmailCode === 200
         ? t("auth.emailVerification")
         : !props.passwordUpdated
         ? t("auth.loginFailed")
         : t("auth.passwordChanged")
-    )
+    })
 
     const emailNotSend = computed(
-      () => !props.sendEmailSuccess && !props.passwordUpdated
+      () => props.sendEmailCode !== 200 && !props.passwordUpdated
     )
     const emailSended = computed(
-      () => props.sendEmailSuccess && !props.passwordUpdated
+      () => props.sendEmailCode === 200 && !props.passwordUpdated
     )
 
     const retypeEmail = () => {
       emit("retypeEmail")
     }
 
-    const handlePasswordUpdate = () =>{
-      if(props.passwordUpdated){
+    const handlePasswordUpdate = () => {
+      if (props.passwordUpdated) {
         emit("goToLoginPage")
       } else {
         emit("close")

package/src/components/pages/AdminAuth.vue

@@ -119,8 +119,6 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent, ref, computed } from "vue"
 import { useI18n } from "vue-i18n"
 import isEmail from "validator/es/lib/isEmail"

package/src/components/pages/Auth.vue

@@ -134,7 +134,7 @@
         <q-dialog v-model="isReset" persistent>
           <sowell-message
             :emailResetPassword="emailResetPassword"
-            :sendEmailSuccess="sendEmailSuccess"
+            :sendEmailCode="sendEmailCode"
             :loading="loading"
             @retypeEmail="retypeEmail" 
             @close="() => isReset= false"/>
@@ -154,20 +154,15 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent, reactive, onMounted } from "vue"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import * as packageInfo from "app/package.json"
 
 import SendEmail from "../dialogs/SendEmail.vue"
 import SowellMessage from "../dialogs/Message.vue"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import MicrosoftLogo from "../../assets/logo-microsoft.svg"
 
 import { useAuth } from "composables/auth"
+import { send } from "process"
 
 export default defineComponent({
   name: "Auth",
@@ -183,7 +178,7 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       authState,
       APP_SERVER_BASE_URL,
       icons,
@@ -207,11 +202,11 @@ export default defineComponent({
       try {
         forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
-          sendEmailSuccess.value = true
+          sendEmailCode.value = 200
           isReset.value = true
         })
       } catch {
-        sendEmailSuccess.value = false
+        sendEmailCode.value = 404
         isReset.value = true
       }
     }
@@ -234,7 +229,7 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       icons,
       appVersion,
       USE_SSO,

package/src/components/pages/AuthReporter.vue

@@ -7,13 +7,11 @@
             <img
               src="../../assets/Logo.svg"
               class="q-mb-sm q-mr-md"
-              style="width: 27px; height: 47px"
-            />
+              style="width: 27px; height: 47px" />
             <img
               src="../../assets/Sowell.svg"
               class="q-mb-sm"
-              style="width: 146px; height: 38px"
-            />
+              style="width: 146px; height: 38px" />
           </div>
         </div>
         <div class="login-page">
@@ -21,8 +19,7 @@
             <div>
               <div
                 class="q-ml-xs q-mb-xs"
-                style="font-size: 14px; font-weight: 600"
-              >
+                style="font-size: 14px; font-weight: 600">
                 {{ $t("auth.email") }}
               </div>
               <q-input
@@ -32,8 +29,7 @@
                 borderless
                 :rules="validations['email']"
                 lazy-rules
-                :input-style="{ fontSize: '14px', fontWeight: '500' }"
-              >
+                :input-style="{ fontSize: '14px', fontWeight: '500' }">
                 <template #prepend>
                   <q-icon :name="icons.ionMailOutline" />
                 </template>
@@ -42,8 +38,7 @@
             <div>
               <div
                 class="q-ml-xs q-mb-xs"
-                style="font-size: 14px; font-weight: 600"
-              >
+                style="font-size: 14px; font-weight: 600">
                 {{ $t("auth.password") }}
               </div>
               <q-input
@@ -54,8 +49,7 @@
                 lazy-rules
                 borderless
                 dense
-                :input-style="{ fontSize: '14px', fontWeight: '600' }"
-              >
+                :input-style="{ fontSize: '14px', fontWeight: '600' }">
                 <template #prepend>
                   <q-icon :name="icons.ionLockClosedOutline" />
                 </template>
@@ -67,15 +61,13 @@
                         : icons.ionEyeOutline
                     "
                     class="cursor-pointer q-mr-sm"
-                    @click="showPassword = !showPassword"
-                  />
+                    @click="showPassword = !showPassword" />
                 </template>
               </q-input>
             </div>
             <div
               v-if="errorEmailMessage || errorPasswordMessage"
-              class="q-pl-sm text-red column justify-center error_input"
-            >
+              class="q-pl-sm text-red column justify-center error_input">
               <div>{{ errorEmailMessage }}</div>
               <div>{{ errorPasswordMessage }}</div>
             </div>
@@ -89,8 +81,7 @@
                   :loading="loading"
                   type="submit"
                   class="full-width q-mt-lg"
-                  :disable="isSubmitBtnDisabled()"
-                >
+                  :disable="isSubmitBtnDisabled()">
                   <div style="font-weight: 600; font-size: 16px">
                     {{ $t("auth.login") }}
                   </div>
@@ -101,8 +92,7 @@
                 @click="forgottenPassword = true"
                 data-testid="ask-password-change-btn"
                 data-cy="forgot-password"
-                style="font-size: 14px; cursor: pointer; width: 350px"
-              >
+                style="font-size: 14px; cursor: pointer; width: 350px">
                 {{ $t("auth.forgottenPassword") }}
               </div>
             </div>
@@ -117,20 +107,20 @@
           transition-show="fade"
           transition-hide="fade"
           persistent
-          data-testid="ask-password-change-modal"
-        >
-          <send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
+          data-testid="ask-password-change-modal">
+          <send-email
+            @resetPassword="resetPassword"
+            @close="() => (forgottenPassword = false)" />
         </q-dialog>
         <q-dialog v-model="isReset" persistent>
           <sowell-message
             :emailResetPassword="emailResetPassword"
-            :sendEmailSuccess="sendEmailSuccess"
+            :sendEmailCode="sendEmailCode"
             :loading="loading"
             @retypeEmail="retypeEmail"
-            @close="() => isReset = false"
-          >
+            @close="() => (isReset = false)">
             <q-btn
-              v-if="sendEmailSuccess && isOtp"
+              v-if="sendEmailCode === 200 && isOtp"
               data-testid="next-btn"
               class="q-mt-md full-width"
               unelevated
@@ -140,8 +130,7 @@
               no-caps
               :label="$t('auth.next')"
               color="dark"
-              v-close-popup
-            />
+              v-close-popup />
           </sowell-message>
         </q-dialog>
       </div>
@@ -159,15 +148,12 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent, reactive, onMounted, computed } from "vue"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import * as packageInfo from "app/package.json"
 import SendEmail from "../dialogs/SendEmail.vue"
 import SowellMessage from "../dialogs/Message.vue"
 import { useAuth } from "composables/auth"
+import { AxiosError } from "axios"
 
 export default defineComponent({
   name: "Auth",
@@ -184,7 +170,7 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       authState,
       APP_SERVER_BASE_URL,
       IS_OTP,
@@ -210,20 +196,26 @@ export default defineComponent({
         auth: {
           email,
           base: APP_SERVER_BASE_URL
-        },
+        }
       }
       try {
         forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
           localStorage.setItem("emailResetPassword", email)
-          sendEmailSuccess.value = true
+          sendEmailCode.value = 200
           isReset.value = true
         })
-      } catch {
-        sendEmailSuccess.value = false
+      } catch (error) {
+        if ((error as AxiosError).response?.status === 403) {
+          // NOTE: 403 is returned when the user is not allowed to reset the password
+          sendEmailCode.value = 403
+        }
+        else {
+          sendEmailCode.value = 404
+        }
         isReset.value = true
       }
-    };
+    }
 
     onMounted(() => {
       appVersion.versionNumber = packageInfo.version
@@ -240,7 +232,7 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       icons,
       appVersion,
       isOtp,
@@ -268,4 +260,3 @@ export default defineComponent({
   display: none;
 }
 </style>
-

package/src/components/pages/OtpValidation.vue

@@ -75,8 +75,6 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent, ref, computed } from "vue"
 import { useQuasar } from "quasar"
 import { useI18n } from "vue-i18n"

package/src/components/pages/ResetPassword.vue

@@ -77,8 +77,6 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent } from "vue"
 import SowellMessage from "../dialogs/Message.vue"
 import { useResetPassword } from "composables/resetPassword"

package/src/components/pages/WebAuth.vue

@@ -22,24 +22,21 @@
                 :icon="`img:${MicrosoftLogo}`"
                 class="full-width q-mt-lg"
                 @click="msalAuth"
-                outline
-              />
+                outline />
               <div
                 style="
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   margin-top: 16px;
-                "
-              >
+                ">
                 <div
                   style="
                     width: 20%;
                     border: 1px solid #bcc3c7;
                     height: 1px;
                     margin-right: 16px;
-                  "
-                ></div>
+                  "></div>
                 <div class="text-weight-bold">{{ $t("common.or") }}</div>
                 <div
                   style="
@@ -47,8 +44,7 @@
                     border: 1px solid #bcc3c7;
                     height: 1px;
                     margin-left: 16px;
-                  "
-                ></div>
+                  "></div>
               </div>
             </div>
             <q-form @submit="handleSubmit">
@@ -64,8 +60,7 @@
                   data-cy="email"
                   dense
                   outlined
-                  input-class="text-subtitle2 text-weight-medium"
-                />
+                  input-class="text-subtitle2 text-weight-medium" />
                 <div class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold">
                   {{ $t("auth.password") }}
                 </div>
@@ -77,16 +72,14 @@
                   lazy-rules
                   dense
                   outlined
-                  input-class="text-subtitle2 text-weight-bold"
-                >
+                  input-class="text-subtitle2 text-weight-bold">
                   <template #append>
                     <q-icon
                       :name="
                         showPassword ? icons.ionEyeOffSharp : icons.ionEyeSharp
                       "
                       class="cursor-pointer q-mr-sm lightenDark"
-                      @click="showPassword = !showPassword"
-                    />
+                      @click="showPassword = !showPassword" />
                   </template>
                 </q-input>
               </div>
@@ -101,14 +94,12 @@
                   :loading="loading"
                   type="submit"
                   :disable="isSubmitBtnDisabled() || loading || msalLoading"
-                  class="submitBtn text-subtitle2 text-weight-bold"
-                />
+                  class="submitBtn text-subtitle2 text-weight-bold" />
                 <div
                   class="cursor-pointer text-primary text-subtitle2"
                   data-testid="ask-password-change-btn"
                   data-cy="forgot-password"
-                  @click="forgottenPassword = true"
-                >
+                  @click="forgottenPassword = true">
                   {{ $t("auth.forgottenPassword") }}
                 </div>
               </div>
@@ -119,18 +110,15 @@
       <div
         class="column col justify-center content-center mobile"
         :style="IS_MANAGER ? 'background: #eef8fd' : ''"
-        :class="!IS_MANAGER ? 'bgBlue' : ''"
-      >
+        :class="!IS_MANAGER ? 'bgBlue' : ''">
         <img
           v-if="IS_MANAGER"
           src="../../assets/illustration-login.svg"
-          class="q-pl-md q-pr-md logoWhite"
-        />
+          class="q-pl-md q-pr-md logoWhite" />
         <img
           v-else
           src="../../assets/SowellWhite.svg"
-          class="q-pl-md q-pr-md logoWhite"
-        />
+          class="q-pl-md q-pr-md logoWhite" />
       </div>
     </div>
     <div>
@@ -141,9 +129,10 @@
         transition-show="fade"
         transition-hide="fade"
         persistent
-        data-testid="ask-password-change-modal"
-      >
-        <web-send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
+        data-testid="ask-password-change-modal">
+        <web-send-email
+          @resetPassword="resetPassword"
+          @close="() => (forgottenPassword = false)" />
       </q-dialog>
       <q-dialog v-model="isNotification" persistent>
         <sw-info-dialog
@@ -151,8 +140,7 @@
           :content="infoDialog.content"
           :image="infoDialog.image"
           :isOtp="isOtp"
-          @close="() => isNotification = false"
-        >
+          @close="() => (isNotification = false)">
           <q-btn
             :data-testid="infoDialog.canGoNext ? 'next-btn' : 'close-btn'"
             v-if="isOtp"
@@ -163,8 +151,7 @@
             :label="infoDialog.canGoNext ? $t('auth.next') : $t('auth.close')"
             color="primary"
             @click="handleInfoDialog"
-            v-close-popup
-          />
+            v-close-popup />
         </sw-info-dialog>
       </q-dialog>
     </div>
@@ -181,6 +168,7 @@ import WebSendEmail from "../dialogs/WebSendEmail.vue"
 
 import { useAuth } from "composables/auth"
 import MicrosoftLogo from "../../assets/logo-microsoft.svg"
+import { AxiosError } from "axios"
 
 export default defineComponent({
   name: "Auth",
@@ -212,9 +200,12 @@ export default defineComponent({
       msalAuth
     } = useAuth()
 
-    const IS_MANAGER = ["manager", "clean_manager", "incivility_manager", "admin"].includes(
-      X_REQUESTED_ROLES
-    )
+    const IS_MANAGER = [
+      "manager",
+      "clean_manager",
+      "incivility_manager",
+      "admin"
+    ].includes(X_REQUESTED_ROLES)
     const isNotification = ref(false)
     const infoDialog = ref({
       title: "",
@@ -237,7 +228,7 @@ export default defineComponent({
         const data = {
           auth: {
             email,
-            base: APP_SERVER_BASE_URL,
+            base: APP_SERVER_BASE_URL
           }
         }
         try {
@@ -255,14 +246,22 @@ export default defineComponent({
             forgottenPassword.value = false
             isNotification.value = true
           })
-        } catch {
-          isNotification.value = false
-
-          infoDialog.value = {
-            canGoNext: false,
-            title: t("auth.userNotFoundTitle"),
-            content: t("auth.userNotFoundSubtitle"),
-            image: "userNotFound"
+        } catch (error) {
+          if ((error as AxiosError).response?.status === 403) {
+            // NOTE: 403 is returned when the user is not allowed to reset the password
+            infoDialog.value = {
+              canGoNext: false,
+              title: t("auth.forbidden.title"),
+              content: t("auth.forbidden.subtitle"),
+              image: "userNotFound"
+            }
+          } else {
+            infoDialog.value = {
+              canGoNext: false,
+              title: t("auth.userNotFoundTitle"),
+              content: t("auth.userNotFoundSubtitle"),
+              image: "userNotFound"
+            }
           }
 
           isNotification.value = true

package/src/composables/auth.ts

@@ -61,7 +61,7 @@ export function useAuth() {
   const showPassword = ref(false)
   const forgottenPassword = ref(false)
   const isReset = ref(false)
-  const sendEmailSuccess = ref(false)
+  const sendEmailCode = ref(0)
   const emailResetPassword = ref("")
   const errorEmailMessage = ref("")
   const errorPasswordMessage = ref("")
@@ -227,7 +227,7 @@ export function useAuth() {
     forgottenPassword,
     emailResetPassword,
     isReset,
-    sendEmailSuccess,
+    sendEmailCode,
     authState,
     APP_SERVER_BASE_URL,
     WELCOME_TITLE,

package/src/routes/index.ts

@@ -1,8 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import prompts from "app/quasar.extensions.json"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { RouteRecordRaw } from "vue-router"
 
 const {

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
+  "extends": "@quasar/app-webpack/tsconfig-preset.json",
   "compilerOptions": {
+    "experimentalDecorators": true,
+    "baseUrl": ".",
     "allowJs": true,
     "target": "ES2020",
     "lib": [
@@ -13,4 +16,4 @@
       "node"
     ]
   }
-}
+}