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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.4.0",
+  "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>
@@ -27,7 +27,6 @@
                 v-model.trim="email"
                 type="email"
                 borderless
-                dense
                 :rules="validations['email']"
                 placeholder="Yourname@gmail.com"
                 lazy-rules
@@ -51,7 +50,6 @@
                 placeholder="********"
                 lazy-rules
                 borderless
-                dense
                 class="q-px-none q-mt-sm"
                 :class="{ 'input-error': errorPasswordMessage }"
                 :input-style="{ fontSize: '13px', fontWeight: '500' }">
@@ -81,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") }}
@@ -90,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">
@@ -129,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>
@@ -186,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">
@@ -204,6 +193,7 @@ import SowellMessage from "../dialogs/Message.vue"
 import ErrorMessage from "../ErrorMessage.vue"
 import { useAuth } from "composables/auth"
 import { AxiosError } from "axios"
+import { useQuasar } from "quasar"
 
 export default defineComponent({
   name: "Auth",
@@ -217,6 +207,7 @@ export default defineComponent({
       validations,
       errorEmailMessage,
       errorPasswordMessage,
+      apiErrorMessage,
       forgottenPassword,
       emailResetPassword,
       isReset,
@@ -234,6 +225,8 @@ export default defineComponent({
       goToOtpValidation
     } = useAuth()
 
+    const { localStorage } = useQuasar()
+
     const handleSubmit = () => {
       onSubmit()
     }
@@ -275,8 +268,10 @@ export default defineComponent({
 
     onMounted(() => {
       appVersion.versionNumber = packageInfo.version
-      const lastUserEmail = localStorage.getItem("lastUser")
-      if (lastUserEmail) email.value = lastUserEmail
+      if (localStorage.has("lastUser")) {
+        const lastUserEmail = localStorage.getItem("lastUser")
+        if (lastUserEmail) email.value = lastUserEmail
+      }
     })
 
     return {
@@ -287,6 +282,7 @@ export default defineComponent({
       validations,
       errorEmailMessage,
       errorPasswordMessage,
+      apiErrorMessage,
       forgottenPassword,
       emailResetPassword,
       isReset,
@@ -336,17 +332,21 @@ export default defineComponent({
 
 .title {
   margin-top: 120px;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 700;
-
   color: #41c4ff;
   line-height: normal;
   z-index: 1;
 }
 
-div.q-field__control {
+.login-page .q-field__control-container {
+  padding: 4px;
+}
+
+.login-page div.q-field__control {
   padding: 0;
   border: 1px solid #d5d7da;
+  height: 55px;
 }
 
 .q-field--with-bottom {
@@ -397,8 +397,12 @@ div.q-field__control {
   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) {
@@ -432,7 +436,7 @@ div.q-field__control {
 @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,