@sowell/quasar-app-extension-auth 0.5.1 → 1.0.0

package/src/components/pages/WebAuth.vue

@@ -143,7 +143,7 @@
         persistent
         data-testid="ask-password-change-modal"
       >
-        <web-send-email @resetPassword="resetPassword" />
+        <web-send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
       </q-dialog>
       <q-dialog v-model="isNotification" persistent>
         <sw-info-dialog
@@ -151,6 +151,7 @@
           :content="infoDialog.content"
           :image="infoDialog.image"
           :isOtp="isOtp"
+          @close="() => isNotification = false"
         >
           <q-btn
             :data-testid="infoDialog.canGoNext ? 'next-btn' : 'close-btn'"
@@ -171,27 +172,22 @@
 </template>
 
 <script lang="ts">
-import isEmail from "validator/es/lib/isEmail";
-import { defineComponent, ref, computed } from "vue";
-import { useAuthState } from "../../injects";
-import { useI18n } from "vue-i18n";
-import SwInfoDialog from "../dialogs/sw-info-dialog.vue";
-import WebSendEmail from "../dialogs/WebSendEmail.vue";
+import { defineComponent, ref, computed } from "vue"
+import { useI18n } from "vue-i18n"
+import isEmail from "validator/es/lib/isEmail"
+import { useAuthState } from "../../injects"
+import SwInfoDialog from "../dialogs/sw-info-dialog.vue"
+import WebSendEmail from "../dialogs/WebSendEmail.vue"
 
-import { useAuth } from "composables/auth";
-import MicrosoftLogo from "../../assets/logo-microsoft.svg";
+import { useAuth } from "composables/auth"
+import MicrosoftLogo from "../../assets/logo-microsoft.svg"
 
-interface HeadersInterface {
-  headers: {
-    "x-requested-roles"?: string;
-  };
-}
 export default defineComponent({
   name: "Auth",
   components: { WebSendEmail, SwInfoDialog },
   setup() {
-    const { t } = useI18n();
-    const authState = useAuthState();
+    const { t } = useI18n()
+    const authState = useAuthState()
 
     const {
       email,
@@ -207,26 +203,26 @@ export default defineComponent({
       X_REQUESTED_ROLES,
       IS_OTP,
       APP_SERVER_BASE_URL,
+      icons,
+      USE_SSO,
       goToOtpValidation,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
-      icons,
-      USE_SSO,
-      msalAuth,
-    } = useAuth();
+      msalAuth
+    } = useAuth()
 
     const IS_MANAGER = ["manager", "clean_manager", "admin"].includes(
       X_REQUESTED_ROLES
-    );
-    const isNotification = ref(false);
+    )
+    const isNotification = ref(false)
     const infoDialog = ref({
       title: "",
       content: "",
-      image: "",
-    });
+      image: ""
+    })
 
-    const isOtp = computed(() => IS_OTP.toLowerCase() === "y");
+    const isOtp = computed(() => IS_OTP.toLowerCase() === "y")
     const submitBtnDisabled = computed(
       () =>
         !(
@@ -235,18 +231,18 @@ export default defineComponent({
           password.value &&
           password.value.length > 5
         )
-    );
+    )
     const resetPassword = async (email: string) => {
       if (email) {
         const data = {
           auth: {
             email,
             base: APP_SERVER_BASE_URL,
-          },
-        };
+          }
+        }
         try {
           await authState.resetPassword(data).then(() => {
-            localStorage.setItem("emailResetPassword", email);
+            localStorage.setItem("emailResetPassword", email)
             infoDialog.value = {
               canGoNext: true,
               title: t("auth.mailVerificationTitle"),
@@ -254,33 +250,35 @@ export default defineComponent({
                 IS_OTP.toLowerCase() === "y"
                   ? t("auth.otpValidationCode")
                   : t("auth.mailVerificationSubtitle"),
-              image: "emailVerification",
-            };
-            forgottenPassword.value = false;
-            isNotification.value = true;
-          });
+              image: "emailVerification"
+            }
+            forgottenPassword.value = false
+            isNotification.value = true
+          })
         } catch {
-          isNotification.value = false;
+          isNotification.value = false
 
           infoDialog.value = {
             canGoNext: false,
             title: t("auth.userNotFoundTitle"),
             content: t("auth.userNotFoundSubtitle"),
-            image: "userNotFound",
-          };
+            image: "userNotFound"
+          }
 
-          isNotification.value = true;
+          isNotification.value = true
         }
       }
-    };
+    }
 
     const handleSubmit = () => {
-      onSubmit("SoWell");
-    };
+      onSubmit("SoWell")
+    }
 
     const handleInfoDialog = () => {
       if (infoDialog.value.canGoNext) {
         goToOtpValidation()
+      } else {
+        isNotification.value = false
       }
     }
 
@@ -299,20 +297,20 @@ export default defineComponent({
       IS_MANAGER,
       WELCOME_SUBTITLE,
       WELCOME_TITLE,
-      isSubmitBtnDisabled,
-      handleInfoDialog,
-      retypeEmail,
-      onSubmit,
       icons,
       USE_SSO,
       MicrosoftLogo,
-      msalAuth,
       isOtp,
+      isSubmitBtnDisabled,
+      retypeEmail,
+      onSubmit,
+      msalAuth,
+      handleInfoDialog,
       resetPassword,
-      handleSubmit,
-    };
-  },
-});
+      handleSubmit
+    }
+  }
+})
 </script>
 
 <style scoped>

package/src/components/pages/WebResetPassword.vue

@@ -6,31 +6,26 @@
           <img
             src="../../assets/Sowell-logo.svg"
             class="q-mb-sm q-mr-md"
-            style="width: 190px"
-          />
+            style="width: 190px" />
         </div>
         <div
           class="column justify-center full-height"
-          style="max-width: 550px; margin-top: -90px"
-        >
+          style="max-width: 550px; margin-top: -90px">
           <div></div>
           <div
             class="text-subtitle1 q-mt-lg"
-            style="font-size: 34px; font-weight: 600; line-height: 34px"
-          >
+            style="font-size: 34px; font-weight: 600; line-height: 34px">
             {{ $t("auth.passwordRecovery") }}
           </div>
           <div
             class="text-subtitle1 q-mt-lg q-mb-lg"
-            style="font-size: 16px; font-weight: 400; line-height: 24px"
-          >
+            style="font-size: 16px; font-weight: 400; line-height: 24px">
             {{ $t("auth.recommendPassword") }}
           </div>
           <q-form
             class="column form"
             @submit="onSubmit"
-            data-testid="reset-password-form"
-          >
+            data-testid="reset-password-form">
             <div>
               <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
                 {{ $t("auth.newPassword") }}
@@ -45,18 +40,15 @@
                 :type="showPassword ? 'text' : 'password'"
                 bg-color="white"
                 dense
-                class="full-width q-mb-md"
-              >
+                class="full-width q-mb-md">
                 <template #append>
                   <q-icon
-                    :name="
-                      showPassword
-                        ? icons.ionEyeOffOutline
-                        : icons.ionEyeOutline
-                    "
+                    :name="showPassword
+              ? icons.ionEyeOffOutline
+              : icons.ionEyeOutline
+              "
                     class="cursor-pointer q-mr-sm"
-                    @click="showPassword = !showPassword"
-                  />
+                    @click="showPassword = !showPassword" />
                 </template>
               </q-input>
             </div>
@@ -71,8 +63,7 @@
                 no-caps
                 class="submitBtn"
                 data-cy="send-new-password"
-                :disable="!canSubmit"
-              />
+                :disable="!canSubmit" />
             </div>
           </q-form>
         </div>
@@ -83,18 +74,16 @@
           :content="$t('auth.passwordUpdated')"
           :image="'passwordUpdated'"
           :passwordUpdated="passwordUpdated"
-          @goToLoginPage="goToLoginPage"
-        />
+          @goToLoginPage="goToLoginPage" />
       </q-dialog>
     </div>
   </q-layout>
 </template>
 
 <script lang="ts">
-//@ts-ignore
-import { defineComponent } from "vue";
-import SwInfoDialog from "../dialogs/sw-info-dialog.vue";
-import { useResetPassword } from "composables/resetPassword";
+import { defineComponent } from "vue"
+import SwInfoDialog from "../dialogs/sw-info-dialog.vue"
+import { useResetPassword } from "composables/resetPassword"
 
 export default defineComponent({
   name: "ResetPassword",
@@ -107,10 +96,10 @@ export default defineComponent({
       showPassword,
       validations,
       canSubmit,
-      onSubmit,
-      goToLoginPage,
       icons,
-    } = useResetPassword();
+      onSubmit,
+      goToLoginPage
+    } = useResetPassword()
 
     return {
       password,
@@ -119,12 +108,12 @@ export default defineComponent({
       canSubmit,
       passwordUpdated,
       showPassword,
+      icons, 
       goToLoginPage,
-      onSubmit,
-      icons,
-    };
-  },
-});
+      onSubmit
+    }
+  }
+})
 </script>
 
 <style scoped>
@@ -132,4 +121,3 @@ export default defineComponent({
   width: 254px;
 }
 </style>
-

package/src/composables/auth.ts

@@ -1,6 +1,6 @@
-import { ref, onMounted, inject } from "vue";
-import isEmail from "validator/es/lib/isEmail";
-import { useI18n } from "vue-i18n";
+import { ref, onMounted, inject } from "vue"
+import isEmail from "validator/es/lib/isEmail"
+import { useI18n } from "vue-i18n"
 import {
   ionMailOutline,
   ionLockClosedOutline,
@@ -8,8 +8,8 @@ import {
   ionEyeOffOutline,
   ionEyeSharp,
   ionEyeOffSharp,
-} from "@quasar/extras/ionicons-v5";
-import { Platform } from "quasar";
+} from "@quasar/extras/ionicons-v5"
+import { Platform } from "quasar"
 
 import {
   $prompts,
@@ -17,26 +17,26 @@ import {
   SignInPayload,
   useAuthState,
   useMsalState,
-} from "../injects";
+} from "../injects"
 
 interface HeadersInterface {
   headers: {
-    "x-requested-roles"?: string;
-  };
+    "x-requested-roles"?: string
+  }
 }
 
 export function useAuth() {
-  const authState = useAuthState();
-  const msalState = useMsalState();
-  const device = inject("Device");
+  const authState = useAuthState()
+  const msalState = useMsalState()
+  const device = inject("Device")
   let deviceInfos = {
     manufacturer: "",
     model: "",
     platform: "",
-    version: "",
-  };
+    version: ""
+  }
 
-  const { t } = useI18n();
+  const { t } = useI18n()
   const {
     LOCAL_SUCCESS_REDIRECTION_ROUTE,
     APP_SERVER_BASE_URL,
@@ -46,112 +46,115 @@ export function useAuth() {
     IS_OTP,
     LOCAL_OTP_ROUTE,
     APP_VERSION,
-    USE_SSO,
-  } = $prompts();
-  const { push, replace } = $router();
+    USE_SSO
+  } = $prompts()
+  const { push, replace } = $router()
 
-  const email = ref("");
-  const password = ref("");
-  const msalToken = ref("");
-  const loading = ref(false);
-  const msalLoading = ref(false);
-  const showPassword = ref(false);
-  const forgottenPassword = ref(false);
-  const isReset = ref(false);
-  const sendEmailSuccess = ref(false);
-  const emailResetPassword = ref("");
-  const errorEmailMessage = ref("");
-  const errorPasswordMessage = ref("");
+  const email = ref("")
+  const password = ref("")
+  const msalToken = ref("")
+  const loading = ref(false)
+  const msalLoading = ref(false)
+  const showPassword = ref(false)
+  const forgottenPassword = ref(false)
+  const isReset = ref(false)
+  const sendEmailSuccess = ref(false)
+  const emailResetPassword = ref("")
+  const errorEmailMessage = ref("")
+  const errorPasswordMessage = ref("")
   const validations = ref({
     email: [
       (val: string) => {
-        errorEmailMessage.value = !!val ? "" : t("auth.emailPresenceError");
-        return !!val || t("auth.emailPresenceError");
+        errorEmailMessage.value = !!val ? "" : t("auth.emailPresenceError")
+        return !!val || t("auth.emailPresenceError")
       },
       (val: string) => {
         errorEmailMessage.value = isEmail(val.trim())
           ? ""
-          : t("auth.emailValidationError");
-        return isEmail(val.trim()) || t("auth.emailValidationError");
-      },
+          : t("auth.emailValidationError")
+        return isEmail(val.trim()) || t("auth.emailValidationError")
+      }
     ],
     password: [
       (val: string) => {
         errorPasswordMessage.value = !!val
           ? ""
-          : t("auth.passwordPresenceError");
-        return !!val || t("auth.passwordPresenceError");
-      },
-    ],
-  });
+          : t("auth.passwordPresenceError")
+        return !!val || t("auth.passwordPresenceError")
+      }
+    ]
+  })
 
   const retypeEmail = () => {
-    forgottenPassword.value = true;
-  };
+    forgottenPassword.value = true
+  }
 
   const deviceInfo = async () => {
     if (device) {
-      const info = await device.getInfo();
+      const info = await device.getInfo()
       deviceInfos = {
         manufacturer: info.manufacturer,
         model: info.model,
         platform: info.platform,
-        version: info.osVersion,
-      };
+        version: info.osVersion
+      }
     }
-  };
+  }
 
   const onSubmit = async (provider = "SoWell") => {
     if (provider === "SoWell") {
-      loading.value = true;
+      loading.value = true
     }
     const data: SignInPayload = {
       auth: {
         email: email.value,
         password: provider === "SoWell" ? password.value : undefined,
-        msalToken: provider === "MSAL" ? msalToken.value : undefined,
-      },
-    };
+        msalToken: provider === "MSAL" ? msalToken.value : undefined
+      }
+    }
     if (device && Platform.is.capacitor) {
       (data["device-clean"] = {
         manufacturer: deviceInfos.manufacturer,
         model: deviceInfos.model,
         platform: deviceInfos.platform,
-        version: deviceInfos.version,
+        version: deviceInfos.version
       }),
         (data["app-clean"] = {
-          versionNumber: APP_VERSION,
-        });
+          versionNumber: APP_VERSION
+        })
     }
     const options: HeadersInterface = {
-      headers: {},
-    };
+      headers: {}
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    let requestedRoles = window.Cypress
+    const requestedRoles = window.Cypress
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       ? // @ts-ignore
         window.Cypress.requestedRoles
-      : X_REQUESTED_ROLES;
-    if (requestedRoles) options.headers["x-requested-roles"] = requestedRoles;
+      : X_REQUESTED_ROLES
+    if (requestedRoles) options.headers["x-requested-roles"] = requestedRoles
 
     try {
-      await authState.signin(data, options);
-      loading.value = false;
-      msalLoading.value = false;
+      await authState.signin(data, options)
+      loading.value = false
+      msalLoading.value = false
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (!window.Cypress) {
         // FIXME: encrypt password
         localStorage.setItem(
           "credentials",
           JSON.stringify({ ...data.auth, provider: provider })
-        );
+        )
       }
-      push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+      push(LOCAL_SUCCESS_REDIRECTION_ROUTE)
     } catch (err) {
-      console.error("onSubmit", err);
-      loading.value = false;
-      msalLoading.value = false;
+      console.error("onSubmit", err)
+      loading.value = false
+      msalLoading.value = false
     }
-  };
+  }
 
   const isSubmitBtnDisabled = () => {
     return !(
@@ -159,47 +162,49 @@ export function useAuth() {
       isEmail(email.value) &&
       password.value &&
       password.value.length > 5
-    );
-  };
+    )
+  }
 
   const deviceReady = () => {
     if (localStorage.getItem("credentials")) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      email.value = JSON.parse(localStorage.getItem("credentials")).email;
+      email.value = JSON.parse(localStorage.getItem("credentials")).email
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      password.value = JSON.parse(localStorage.getItem("credentials")).password;
+      password.value = JSON.parse(localStorage.getItem("credentials")).password
     }
-  };
+  }
 
   const goToOtpValidation = () => {
-    push(LOCAL_OTP_ROUTE);
-  };
+    push(LOCAL_OTP_ROUTE)
+  }
 
   const msalAuth = () => {
-    msalLoading.value = true;
+    msalLoading.value = true
     msalState.signIn().then(
-      async (result) => {
-        email.value = result.email;
-        msalToken.value = result.token;
-        await onSubmit("MSAL");
-        msalLoading.value = false;
+      async (result: { email: string; token: string }) => {
+        email.value = result.email
+        msalToken.value = result.token
+        await onSubmit("MSAL")
+        msalLoading.value = false
       },
       () => {
-        msalLoading.value = false;
-        msalState.reset();
+        msalLoading.value = false
+        msalState.reset()
       }
-    );
-  };
+    )
+  }
 
   onMounted(async () => {
-    await deviceInfo();
+    await deviceInfo()
     if (authState.raw) {
-      replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+      replace(LOCAL_SUCCESS_REDIRECTION_ROUTE)
     }
     if (Platform.is.capacitor) {
-      deviceReady();
+      deviceReady()
     }
-  });
+  })
 
   return {
     email,
@@ -235,6 +240,6 @@ export function useAuth() {
       ionEyeOffOutline,
       ionEyeSharp,
       ionEyeOffSharp,
-    },
-  };
+    }
+  }
 }