@sowell/quasar-app-extension-auth 1.4.1 → 1.4.2

package/package.json

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

package/src/components/pages/AuthReporter.vue

@@ -18,7 +18,7 @@
       <div class="column">
         <div class="login-page">
           <q-form @submit="handleSubmit">
-            <div style="margin-top: 20px" class="q-mx-lg input-container">
+            <div style="margin-top: 22px" class="q-mx-lg input-container">
               <div class="input-label">
                 {{ $t("auth.email") }}
               </div>
@@ -79,7 +79,7 @@
                   text-color="white"
                   :loading="loading"
                   type="submit"
-                  class="full-width q-mt-md login-button"
+                  class="full-width q-mt-lg login-button"
                   :disable="isSubmitBtnDisabled()">
                   <div style="font-weight: 500; font-size: 18px">
                     {{ $t("auth.login") }}
@@ -88,7 +88,7 @@
               </div>
               <div
                 class="forgot-password-link self-start"
-                style="font-weight: 500; margin: 12px 0"
+                style="font-weight: 500; margin: 12px 0; text-decoration: underline;"
                 @click="forgottenPassword = true"
                 data-testid="ask-password-change-btn"
                 data-cy="forgot-password">
@@ -127,19 +127,10 @@
             </div>
             <div class="error-message-container">
               <div
-                v-if="errorEmailMessage || errorPasswordMessage"
+                v-if="apiErrorMessage"
                 class="text-red column justify-center error_input">
                 <ErrorMessage
-                  v-if="errorEmailMessage && !errorPasswordMessage"
-                  :message="errorEmailMessage"
-                  class="error-message-item" />
-                <ErrorMessage
-                  v-if="errorPasswordMessage && !errorEmailMessage"
-                  :message="errorPasswordMessage"
-                  class="error-message-item" />
-                <ErrorMessage
-                  v-if="errorEmailMessage && errorPasswordMessage"
-                  :message="$t('auth.emailOrPasswordIncorrect')"
+                  :message="apiErrorMessage"
                   class="error-message-item" />
               </div>
               <div v-else class="error-placeholder q-mt-sm"></div>
@@ -184,7 +175,7 @@
       </div>
     </div>
     <div class="row justify-between full-width items-center q-px-md q-mt-auto">
-      <div class="row justify-end footer-text" @click="goToPrivacyPolicy" style="cursor: pointer">
+      <div class="row justify-end footer-text" @click="goToPrivacyPolicy" style="cursor: pointer; text-decoration: underline;">
         {{ $t("common.privacyPolicy") }}
       </div>
       <div class="row justify-end footer-text">
@@ -216,6 +207,7 @@ export default defineComponent({
       validations,
       errorEmailMessage,
       errorPasswordMessage,
+      apiErrorMessage,
       forgottenPassword,
       emailResetPassword,
       isReset,
@@ -290,6 +282,7 @@ export default defineComponent({
       validations,
       errorEmailMessage,
       errorPasswordMessage,
+      apiErrorMessage,
       forgottenPassword,
       emailResetPassword,
       isReset,
@@ -339,9 +332,8 @@ export default defineComponent({
 
 .title {
   margin-top: 120px;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 700;
-
   color: #41c4ff;
   line-height: normal;
   z-index: 1;
@@ -405,8 +397,12 @@ export default defineComponent({
   gap: 6px;
 }
 
-.login-page .q-field__messages {
-  display: none;
+.login-page .q-field--error .q-field__bottom {
+  color: #EF476F;
+}
+
+.login-page .q-field__bottom {
+  padding: 4px 0px;
 }
 
 .login-page .q-field--error .q-field__append .q-icon:not(.cursor-pointer) {
@@ -440,7 +436,7 @@ export default defineComponent({
 @media (max-width: 389px) {
   .title {
     margin-top: 80px;
-    font-size: 28px;
+    font-size: 24px;
     margin-left: 16px;
     margin-right: 16px;
   }

package/src/composables/auth.ts

@@ -65,9 +65,11 @@ export function useAuth() {
   const emailResetPassword = ref("")
   const errorEmailMessage = ref("")
   const errorPasswordMessage = ref("")
+  const apiErrorMessage = ref("")
   const validations = ref({
     email: [
       (val: string) => {
+        apiErrorMessage.value = ""
         errorEmailMessage.value = !!val ? "" : t("auth.emailPresenceError")
         return !!val || t("auth.emailPresenceError")
       },
@@ -80,6 +82,7 @@ export function useAuth() {
     ],
     password: [
       (val: string) => {
+        apiErrorMessage.value = ""
         errorPasswordMessage.value = !!val
           ? ""
           : t("auth.passwordPresenceError")
@@ -105,6 +108,8 @@ export function useAuth() {
   }
 
   const onSubmit = async (provider = "SoWell") => {
+    apiErrorMessage.value = ""
+    
     if (provider === "SoWell") {
       loading.value = true
     }
@@ -139,9 +144,15 @@ export function useAuth() {
     if (requestedRoles) options.headers["x-requested-roles"] = requestedRoles
 
     try {
-      await authState.signin(data, options)
+      const token = await authState.signin(data, options)
       loading.value = false
       msalLoading.value = false
+      
+      if (!token) {
+        apiErrorMessage.value = t("auth.loginFailed")
+        return
+      }
+      
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (!window.Cypress) {
@@ -152,9 +163,23 @@ export function useAuth() {
       }
       push(LOCAL_SUCCESS_REDIRECTION_ROUTE)
     } catch (err) {
-      console.error("onSubmit", err)
       loading.value = false
       msalLoading.value = false
+      
+      if (err && typeof err === "object" && "response" in err) {
+        const axiosError = err as any
+        if (axiosError.response?.status === 401) {
+          apiErrorMessage.value = t("auth.loginFailed")
+        } else if (axiosError.response?.status === 403) {
+          apiErrorMessage.value = t("auth.403")
+        } else if (axiosError.response?.status === 404) {
+          apiErrorMessage.value = t("auth.404")
+        } else if (axiosError.code === "ERR_NETWORK") {
+          apiErrorMessage.value = t("auth.offlineMessage")
+        } else {
+          apiErrorMessage.value = t("auth.loginFailed")
+        }
+      }
     }
   }
 
@@ -225,6 +250,7 @@ export function useAuth() {
     validations,
     errorEmailMessage,
     errorPasswordMessage,
+    apiErrorMessage,
     forgottenPassword,
     emailResetPassword,
     isReset,