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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -40,7 +40,8 @@
     "test": "test"
   },
   "dependencies": {
-    "@capacitor/core": "^4.6.2",
+    "@capacitor/core": "^7.0.0",
+    "@capacitor/inappbrowser": "^2.3.1",
     "@quasar/extras": "^1.15.2",
     "axios": "^0.21.1",
     "buffer": "^6.0.3",

package/src/components/dialogs/SendEmail.vue

@@ -22,7 +22,7 @@
           class="q-mb-sm"
           style="font-size: 34px; font-weight: 600; line-height: 40px"
         >
-          {{ $t("auth.forgottenPassword") }}
+          <span v-html="$t('auth.forgottenPassword').replace(/ (?!.* )/, '&nbsp;')" />
         </div>
         <div
           class="text-subtitle1 q-mt-sm q-mb-lg"

package/src/components/pages/AuthReporter.vue

@@ -1,7 +1,7 @@
 <template>
   <q-layout
     class="column justify-start items-center q-pb-lg bg-white"
-    style="min-height: 100vh; max-width: 100vw; overflow-x: hidden">
+    style="min-height: 90vh; max-width: 100vw; overflow-x: hidden">
     <div class="background-logo-container">
       <img
         src="../../assets/Background-logo.svg"
@@ -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>
@@ -28,7 +28,7 @@
                 type="email"
                 borderless
                 :rules="validations['email']"
-                placeholder="Yourname@gmail.com"
+                placeholder="yourname@gmail.com"
                 lazy-rules
                 class="q-px-none q-mt-sm"
                 :class="{ 'input-error': errorEmailMessage }"
@@ -47,7 +47,6 @@
                 v-model="password"
                 :type="showPassword ? 'text' : 'password'"
                 :rules="validations['password']"
-                placeholder="********"
                 lazy-rules
                 borderless
                 class="q-px-none q-mt-sm"
@@ -79,7 +78,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 +87,11 @@
               </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 +130,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>
@@ -183,10 +177,16 @@
         </q-dialog>
       </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">
-        {{ $t("common.privacyPolicy") }}
-      </div>
+    <div
+      class="row justify-between full-width items-center q-px-md q-mt-auto absolute-bottom">
+      <q-btn
+        flat
+        no-caps
+        class="footer-text q-px-none"
+        :ripple="false"
+        @click="goToPrivacyPolicy"
+        :label="$t('common.privacyPolicy')"
+        style="text-decoration: underline" />
       <div class="row justify-end footer-text">
         {{ `VERSION ${appVersion.versionNumber}` }}
       </div>
@@ -196,6 +196,10 @@
 
 <script lang="ts">
 import { defineComponent, reactive, onMounted, computed } from "vue"
+import {
+  InAppBrowser,
+  DefaultSystemBrowserOptions
+} from "@capacitor/inappbrowser"
 import * as packageInfo from "app/package.json"
 import SendEmail from "../dialogs/SendEmail.vue"
 import SowellMessage from "../dialogs/Message.vue"
@@ -216,6 +220,7 @@ export default defineComponent({
       validations,
       errorEmailMessage,
       errorPasswordMessage,
+      apiErrorMessage,
       forgottenPassword,
       emailResetPassword,
       isReset,
@@ -270,8 +275,11 @@ export default defineComponent({
       }
     }
 
-    const goToPrivacyPolicy = () => {
-      window.open("https://sowell.app/privacy-policy-sowell/", "_blank")
+    const goToPrivacyPolicy = async () => {
+      await InAppBrowser.openInSystemBrowser({
+        url: "https://sowell.app/privacy-policy-sowell/",
+        options: DefaultSystemBrowserOptions
+      })
     }
 
     onMounted(() => {
@@ -290,6 +298,7 @@ export default defineComponent({
       validations,
       errorEmailMessage,
       errorPasswordMessage,
+      apiErrorMessage,
       forgottenPassword,
       emailResetPassword,
       isReset,
@@ -334,14 +343,13 @@ export default defineComponent({
 }
 
 .sowell-logo {
-  padding: 40px 0 0 20px;
+  padding: 34px 0 0 20px;
 }
 
 .title {
   margin-top: 120px;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 700;
-
   color: #41c4ff;
   line-height: normal;
   z-index: 1;
@@ -405,8 +413,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 +452,7 @@ export default defineComponent({
 @media (max-width: 389px) {
   .title {
     margin-top: 80px;
-    font-size: 28px;
+    font-size: 24px;
     margin-left: 16px;
     margin-right: 16px;
   }
@@ -449,7 +461,8 @@ export default defineComponent({
     padding: 12px 0 0 16px;
   }
 
-  .login-page .input-container, .login-page .button-container {
+  .login-page .input-container,
+  .login-page .button-container {
     margin-left: 16px !important;
     margin-right: 16px !important;
   }
@@ -465,12 +478,12 @@ export default defineComponent({
   .login-button div {
     font-size: 14px !important;
   }
-  
+
   .error_input {
     min-height: 50px;
     padding: 4px 12px;
   }
-  
+
   .error-placeholder {
     min-height: 25px;
   }

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,