@sowell/quasar-app-extension-auth 0.5.0 → 0.5.2

package/.eslintrc.js

@@ -2,29 +2,26 @@ module.exports = {
   env: {
     browser: true,
     commonjs: true,
-    es2021: true,
+    es2021: true
   },
   extends: [
-    "eslint:recommended",
-    "plugin:vue/vue3-strongly-recommended",
-    "prettier",
+    'eslint:recommended',
+    'plugin:vue/vue3-strongly-recommended',
+    'prettier'
   ],
   parserOptions: {
-    parser: "@typescript-eslint/parser",
+    parser: '@typescript-eslint/parser',
     ecmaVersion: 2018,
-    sourceType: "module",
+    sourceType: 'module'
   },
-  plugins: ["vue"],
+  plugins: ['vue'],
   rules: {
-    "comma-dangle": ["error", "only-multiline"],
-    "space-before-function-paren": [
-      "error",
-      { anonymous: "always", named: "never", asyncArrow: "always" },
+    'comma-dangle': ['error', 'only-multiline'],
+    'space-before-function-paren': [
+      'error',
+      { anonymous: 'always', named: 'never', asyncArrow: 'always' }
     ],
-    semi: "off",
-    "no-unreachable": "off",
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-  },
+    semi: 'off',
+    'no-unreachable': 'off'
+  }
 };

package/.github/workflows/publish.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Nodejs
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
+          node-version: "16"
           cache: yarn
           registry-url: https://registry.npmjs.org
       - name: publish

package/.github/workflows/remove-stale-branches.yml

@@ -0,0 +1,19 @@
+name: Remove stale branches
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 0 * * *" # Everday at midnight
+
+jobs:
+  remove-stale-branches:
+    name: Remove Stale Branches
+    runs-on: ubuntu-latest
+    steps:
+      - uses: fpicalausa/remove-stale-branches@v1.6.0
+        with:
+          dry-run: false # Check out the console output before setting this to false
+          days-before-branch-stale: 180
+          days-before-branch-delete: 0
+          operations-per-run: 50
+          exempt-authors-regex: "^dependabot"

package/README.md

@@ -53,28 +53,6 @@ The default is /users/passwords
 
 The default is Bearer but you can change it according to your needs
 
-10. Vuex mutation to set token
-
-The default is auth/setToken in the auth module.
-It can be changed from the moment it takes the token in parameter
-
-11. Vuex mutation to clear token and all user state
-
-The default is auth/clearToken in the auth module but can be changed
-
-12. Vuex mutation to set user information when resetting password (email or phone number)
-
-The default is auth/setInfosUser in auth module.
-It takes email or phone number, can be changed
-
-13. Vuex getter to return token
-
-The default is auth/getToken and return token, can be changed.
-
-14. Vuex getter to return user information
-
-The default is auth/getInfosUser and return email or phone number
-
 # Uninstall
 
 ```bash
@@ -173,8 +151,11 @@ Launch test E2E with Continuous integration mode and cypress test all file in di
 ```
 
 # netlify-plugin-cypress
+
 [![CircleCI](https://circleci.com/gh/cypress-io/netlify-plugin-cypress/tree/master.svg?style=svg&circle-token=9cbb587a5a0ae4ce28b011dd03d10d66de906708)](https://circleci.com/gh/cypress-io/netlify-plugin-cypress/tree/master) [![renovate-app badge][renovate-badge]][renovate-app] [![netlify-plugin-cypress](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/ixroqc/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/ixroqc/runs) [![Netlify Status](https://api.netlify.com/api/v1/badges/76892baf-2ad8-4642-b283-f2135963ff51/deploy-status)](https://app.netlify.com/sites/sad-lumiere-6a00a5/deploys)
+
 > Runs Cypress end-to-end tests on Netlify Build
+
 ## Install and use
 
 You can install this plugin in the Netlify UI from this [direct in-app installation link](https://app.netlify.com/plugins/netlify-plugin-cypress/install) or from the [Plugins directory](https://app.netlify.com/plugins).
@@ -189,8 +170,7 @@ yarn add -D netlify-plugin-cypress
 
 And then add the plugin's name to the list of build plugins in `netlify.toml` file as shown in the examples below.
 
-*note:* this plugin assumes you have already installed Cypress as a dev NPM dependency.
-
+_note:_ this plugin assumes you have already installed Cypress as a dev NPM dependency.
 
 ## How does it work
 
@@ -488,9 +468,10 @@ public/
 The `public` folder is served automatically and the following test successfully visits both the root and the `about.html` pages:
 
 ```js
-cy.visit('/')
-cy.visit('/pages/about') // visits the about.html
+cy.visit("/");
+cy.visit("/pages/about"); // visits the about.html
 ```
+
 **Warning:** be careful with verbose logging, since it can print all environment variables passed to the plugin, including tokens, API keys, and other secrets.
 
 Error: error:0308010C:digital envelope routines::unsupported
@@ -502,4 +483,4 @@ If you appreciate the work that went into this App Extension, make donation to [
 
 # License
 
-MIT (c) Sowell
+MIT (c) Sowell

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -10,7 +10,7 @@
     "dep": "cd dev && yarn",
     "test:link": "cd dev && yarn test:link",
     "test:browser": "cd dev && yarn test:browser",
-    "test": "cd dev && yarn ci"
+    "test": "cd dev && yarn test"
   },
   "keywords": [],
   "author": "SoWell SAS",
@@ -21,7 +21,7 @@
     "yarn": ">= 1.6.0"
   },
   "devDependencies": {
-    "@quasar/cli": "^1.2.2",
+    "@quasar/cli": "^2.2.3",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^3.1.0",
     "@types/node": "^16.9.1",
     "@types/validator": "^13.6.3",
@@ -32,7 +32,8 @@
     "eslint-plugin-vue": "^7.0.0",
     "jwt-decode": "^3.1.2",
     "quasar": "^2.6.2",
-    "typescript": "^5.3.3"
+    "vue": "3.4.21",
+    "typescript": "^4.4.2"
   },
   "directories": {
     "test": "test"
@@ -40,13 +41,11 @@
   "dependencies": {
     "@capacitor/core": "^4.6.2",
     "@quasar/extras": "^1.13.4",
-    "@typescript-eslint/parser": "^6.19.1",
     "axios": "^0.21.1",
     "buffer": "^6.0.3",
     "pinia": "^2.0.12",
     "qs": "^6.10.1",
     "validator": "^13.6.0",
-    "vue-router": "^4.0.0",
-    "vuex": "4.0"
+    "vue-router": "^4.0.0"
   }
 }

package/src/boot/router-guards.ts

@@ -2,6 +2,7 @@
 import prompts from "app/quasar.extensions.json";
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";
+import { LocalStorage } from "quasar";
 
 export default boot(({ app, router }: BootInterface) => {
   const {

package/src/boot/store.ts

@@ -1,10 +1,8 @@
 //@ts-ignore
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";
-import tokenModule from "../store";
 
 export default boot(({ app, store }: BootInterface) => {
   // Register store module
-  store.registerModule("token", tokenModule);
   app.provide("$store", store);
 });

package/src/components/dialogs/Message.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card style="max-width: 343px; border-radius: 10px; background: #f4f5f6">
+  <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"
@@ -23,11 +23,13 @@
         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"
       >
         {{ 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"
       >
@@ -57,6 +59,7 @@
       />
       <slot>
         <q-btn
+          data-testid="close-btn"
           class="q-mt-md full-width"
           unelevated
           style="background: #fff"

package/src/components/dialogs/SendEmail.vue

@@ -2,6 +2,7 @@
   <q-card
     class="row justify-center full-height q-pl-sm q-pr-sm"
     style="background: #f4f5f6"
+    data-testid="ask-password-change-form"
   >
     <q-page class="column" style="max-width: 447px">
       <q-card-section>
@@ -40,6 +41,7 @@
             </div>
           </div>
           <q-input
+            data-testid="email-input"
             v-model="email"
             dense
             borderless
@@ -56,6 +58,7 @@
       <q-space class="mobile" />
       <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg row justify-center">
         <q-btn
+          data-testid="submit-btn"
           color="primary"
           :icon="icons.ionPaperPlaneOutline"
           style="max-width: 330px"

package/src/components/dialogs/WebSendEmail.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card>
+  <q-card data-testid="ask-password-change-form">
     <q-page class="row bg-white">
       <div class="col-6 q-pa-xl row justify-center center">
         <div class="left-side full-width full-height">
@@ -22,6 +22,7 @@
               {{ $t("auth.email") }}
             </div>
             <q-input
+              data-testid="email-input"
               v-model="email"
               dense
               outlined
@@ -31,6 +32,7 @@
             />
             <div class="q-mt-lg row justify-between items-center">
               <q-btn
+                data-testid="submit-btn"
                 color="primary"
                 :icon-right="icons.ionPaperPlaneOutline"
                 style="max-width: 330px"
@@ -46,6 +48,7 @@
               />
 
               <q-btn
+                data-testid="back-btn"
                 color="primary"
                 style="max-width: 330px"
                 data-cy="close_send_email"
@@ -124,8 +127,8 @@ export default defineComponent({
   .bg-image {
     display: none;
   }
-  .center{
+  .center {
     width: 100%;
   }
 }
-</style>
+</style>

package/src/components/dialogs/sw-info-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card>
+  <q-card data-testid="feedback-dialog">
     <q-card-section class="top">
       <div class="full-width button-close row justify-end">
         <q-btn
@@ -14,15 +14,21 @@
         />
       </div>
       <div class="row justify-center">
-        <img :src="imageSVG" />
+        <img :src="image" />
       </div>
     </q-card-section>
 
     <q-card-section class="content q-pl-lg q-pr-lg">
-      <h5 class="q-mt-sm q-mb-md text-center text-dark">
+      <h5
+        class="q-mt-sm q-mb-md text-center text-dark"
+        data-testid="header-dialog"
+      >
         {{ title }}
       </h5>
-      <div class="text-subtitle1 q-mt-sm text-center text-dark">
+      <div
+        class="text-subtitle1 q-mt-sm text-center text-dark"
+        data-testid="message-dialog"
+      >
         {{ content }}
       </div>
     </q-card-section>
@@ -30,6 +36,7 @@
       <div>
         <slot>
           <q-btn
+            data-testid="close-btn"
             class="bg-white submitBtn"
             unelevated
             outline
@@ -52,7 +59,7 @@ import emailVerification from "../../assets/Email-sent.svg";
 import { ionCloseOutline } from "@quasar/extras/ionicons-v5";
 
 export default defineComponent({
-  name: "SwInfoDialog",
+  name: "swInfoDialog",
   props: {
     title: { type: String, required: true },
     content: { type: String, required: true },
@@ -60,9 +67,9 @@ export default defineComponent({
     passwordUpdated: { type: Boolean },
     isOtp: { type: Boolean, default: false, required: false },
   },
-  emits: ["goToLoginPage"],
+  emit: ["goToLoginPage"],
   setup(props: any) {
-    const imageSVG = computed(() => {
+    const image = computed(() => {
       switch (props.image) {
         case "userNotFound":
           return userNotFound;
@@ -72,11 +79,9 @@ export default defineComponent({
 
         case "emailVerification":
           return emailVerification;
-        default:
-          return "";
       }
     });
-    return { imageSVG, icons: { ionCloseOutline } };
+    return { image, icons: { ionCloseOutline } };
   },
 });
 </script>

package/src/components/pages/AdminAuth.vue

@@ -99,7 +99,7 @@
           :title="infoDialog.title"
           :content="infoDialog.content"
           :image="infoDialog.image"
-          :is-otp="true"
+          :isOtp="true"
         >
           <q-btn
             v-if="requestedOtp"
@@ -128,6 +128,11 @@ import WebSendEmail from "../dialogs/WebSendEmail.vue";
 
 import { useAuth } from "composables/auth";
 
+interface HeadersInterface {
+  headers: {
+    "x-requested-roles"?: string;
+  };
+}
 export default defineComponent({
   name: "Auth",
   components: { WebSendEmail, SwInfoDialog },

package/src/components/pages/Auth.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-layout>
-    <q-page class="column justify-center items-center">
+  <q-layout class="column justify-end items-center q-pb-lg">
+    <div>
       <div class="q-pa-lg">
         <div class="column justify-center items-center">
           <div class="row justify-center">
@@ -98,6 +98,7 @@
             class="q-mb-lg q-mt-xl text-primary"
             @click="forgottenPassword = true"
             data-cy="forgot-password"
+            data-testid="ask-password-change-btn"
             style="font-size: 16px; font-weight: 500; cursor: pointer"
           >
             {{ $t("auth.forgottenPassword") }}
@@ -143,6 +144,7 @@
           transition-show="fade"
           transition-hide="fade"
           persistent
+          data-testid="ask-password-change-modal"
         >
           <send-email @resetPassword="resetPassword" />
         </q-dialog>
@@ -155,7 +157,7 @@
           />
         </q-dialog>
       </div>
-    </q-page>
+    </div>
     <q-footer class="footer">
       <q-toolbar>
         <q-toolbar-title>
@@ -262,3 +264,4 @@ export default defineComponent({
   background: transparent;
 }
 </style>
+

package/src/components/pages/AuthReporter.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-layout>
-    <q-page class="column justify-end items-center">
+  <q-layout class="column justify-end items-center q-pb-lg">
+    <div>
       <div class="column">
         <div class="column justify-center" style="height: 35vh">
           <div class="row justify-center">
@@ -99,6 +99,7 @@
               <div
                 class="q-mb-xl q-mt-lg text-primary text-center"
                 @click="forgottenPassword = true"
+                data-testid="ask-password-change-btn"
                 data-cy="forgot-password"
                 style="font-size: 14px; cursor: pointer; width: 350px"
               >
@@ -116,6 +117,7 @@
           transition-show="fade"
           transition-hide="fade"
           persistent
+          data-testid="ask-password-change-modal"
         >
           <send-email @resetPassword="resetPassword" />
         </q-dialog>
@@ -127,7 +129,8 @@
             @retypeEmail="retypeEmail"
           >
             <q-btn
-              v-if="(sendEmailSuccess && isOtp)"
+              v-if="sendEmailSuccess && isOtp"
+              data-testid="next-btn"
               class="q-mt-md full-width"
               unelevated
               style="background: #fff"
@@ -141,7 +144,7 @@
           </sowell-message>
         </q-dialog>
       </div>
-    </q-page>
+    </div>
     <q-footer class="footer">
       <q-toolbar>
         <q-toolbar-title>
@@ -188,15 +191,15 @@ export default defineComponent({
     } = useAuth();
 
     const handleSubmit = () => {
-      onSubmit()
-    }
+      onSubmit();
+    };
 
     const appVersion = reactive({
       versionNumber: "",
     });
 
-    const isOtp = computed(() => IS_OTP.toLowerCase() === "y")
-    
+    const isOtp = computed(() => IS_OTP.toLowerCase() === "y");
+
     const resetPassword = async (email: string) => {
       const data = {
         auth: {
@@ -260,3 +263,4 @@ div.q-field__messages {
   display: none;
 }
 </style>
+

package/src/components/pages/OtpValidation.vue

@@ -1,18 +1,15 @@
 <template>
-  <q-layout>
-    <q-page class="q-pa-md row justify-center">
+  <q-layout class="q-pa-md row justify-center">
+    <div>
       <div>
         <div class="q-mt-xl">
           <img
             src="../../assets/Sowell-logo.svg"
-            class="q-mb-sm q-mr-md"
+            class="q-mb-sm"
             style="width: 190px"
           />
         </div>
-        <div
-          class="column justify-center full-height"
-          style="max-width: 550px; margin-top: -90px"
-        >
+        <div class="column justify-center full-height" style="max-width: 550px">
           <div></div>
           <div
             class="text-subtitle1 q-mt-lg"
@@ -27,12 +24,17 @@
           >
             {{ $t("auth.subtitleOtpValidation") }}
           </div>
-          <q-form class="column form" @submit="onSubmit">
+          <q-form
+            class="column form"
+            data-testid="otp-validation-form"
+            @submit="onSubmit"
+          >
             <div>
               <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
                 {{ $t("auth.validationCode") }}
               </div>
               <q-input
+                data-testid="otp-input"
                 v-model="otp"
                 dense
                 :borderless="isReporterUi"
@@ -46,6 +48,7 @@
             <q-space />
             <div class="row justify-between">
               <q-btn
+                data-testid="next-btn"
                 :label="$t('auth.next')"
                 color="primary"
                 :loading="loading"
@@ -54,12 +57,11 @@
                 class="submitBtn"
                 data-cy="send-new-otp"
                 :disable="canSubmit"
-                @click="onSubmit"
               />
               <q-btn
+                data-testid="back-btn"
                 :label="$t('auth.login')"
                 text-color="primary"
-                type="submit"
                 no-caps
                 data-cy="login-page"
                 @click="() => router.push(LOCAL_LOGIN_ROUTE)"
@@ -68,7 +70,7 @@
           </q-form>
         </div>
       </div>
-    </q-page>
+    </div>
   </q-layout>
 </template>
 
@@ -175,3 +177,4 @@ export default defineComponent({
   width: 254px;
 }
 </style>
+

package/src/components/pages/ResetPassword.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-layout>
-    <q-page class="q-pa-md row justify-center full-height">
+  <q-layout class="q-pa-md row justify-center full-height">
+    <div>
       <div style="max-width: 342px">
         <div>
           <q-btn
@@ -24,12 +24,17 @@
         >
           {{ $t("auth.recommendPassword") }}
         </div>
-        <q-form class="column form" @submit="onSubmit">
+        <q-form
+          class="column form"
+          @submit="onSubmit"
+          data-testid="reset-password-form"
+        >
           <div>
             <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
               {{ $t("auth.newPassword") }}
             </div>
             <q-input
+              data-testid="password-input"
               id="password"
               v-model="password"
               data-cy="reset-password"
@@ -47,6 +52,7 @@
           <q-space class="mobile" />
           <div>
             <q-btn
+              data-testid="submit-btn"
               :label="$t('common.register')"
               color="primary"
               :loading="loading"
@@ -65,7 +71,7 @@
           @goToLoginPage="goToLoginPage"
         />
       </q-dialog>
-    </q-page>
+    </div>
   </q-layout>
 </template>
 
@@ -100,7 +106,7 @@ export default defineComponent({
       validations,
       onSubmit,
       goToLoginPage,
-      icons
+      icons,
     };
   },
 });

package/src/components/pages/WebAuth.vue

@@ -105,6 +105,7 @@
                 />
                 <div
                   class="cursor-pointer text-primary text-subtitle2"
+                  data-testid="ask-password-change-btn"
                   data-cy="forgot-password"
                   @click="forgottenPassword = true"
                 >
@@ -140,6 +141,7 @@
         transition-show="fade"
         transition-hide="fade"
         persistent
+        data-testid="ask-password-change-modal"
       >
         <web-send-email @resetPassword="resetPassword" />
       </q-dialog>
@@ -151,14 +153,15 @@
           :isOtp="isOtp"
         >
           <q-btn
+            :data-testid="infoDialog.canGoNext ? 'next-btn' : 'close-btn'"
             v-if="isOtp"
             class="bg-white submitBtn"
             unelevated
             outline
             no-caps
-            :label="$t('auth.next')"
+            :label="infoDialog.canGoNext ? $t('auth.next') : $t('auth.close')"
             color="primary"
-            @click="goToOtpValidation"
+            @click="handleInfoDialog"
             v-close-popup
           />
         </sw-info-dialog>
@@ -245,6 +248,7 @@ export default defineComponent({
           await authState.resetPassword(data).then(() => {
             localStorage.setItem("emailResetPassword", email);
             infoDialog.value = {
+              canGoNext: true,
               title: t("auth.mailVerificationTitle"),
               content:
                 IS_OTP.toLowerCase() === "y"
@@ -259,11 +263,12 @@ export default defineComponent({
           isNotification.value = false;
 
           infoDialog.value = {
+            canGoNext: false,
             title: t("auth.userNotFoundTitle"),
             content: t("auth.userNotFoundSubtitle"),
             image: "userNotFound",
           };
-          
+
           isNotification.value = true;
         }
       }
@@ -273,6 +278,12 @@ export default defineComponent({
       onSubmit("SoWell");
     };
 
+    const handleInfoDialog = () => {
+      if (infoDialog.value.canGoNext) {
+        goToOtpValidation()
+      }
+    }
+
     return {
       email,
       infoDialog,
@@ -289,7 +300,7 @@ export default defineComponent({
       WELCOME_SUBTITLE,
       WELCOME_TITLE,
       isSubmitBtnDisabled,
-      goToOtpValidation,
+      handleInfoDialog,
       retypeEmail,
       onSubmit,
       icons,

package/src/components/pages/WebResetPassword.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-layout>
-    <q-page class="q-pa-md row justify-center">
+  <q-layout class="q-pa-md row justify-center">
+    <div>
       <div>
         <div class="q-mt-xl">
           <img
@@ -26,12 +26,17 @@
           >
             {{ $t("auth.recommendPassword") }}
           </div>
-          <q-form class="column form" @submit="onSubmit">
+          <q-form
+            class="column form"
+            @submit="onSubmit"
+            data-testid="reset-password-form"
+          >
             <div>
               <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
                 {{ $t("auth.newPassword") }}
               </div>
               <q-input
+                data-testid="password-input"
                 id="password"
                 v-model="password"
                 data-cy="reset-password"
@@ -58,6 +63,7 @@
             <q-space class="mobile" />
             <div>
               <q-btn
+                data-testid="submit-btn"
                 :label="$t('common.register')"
                 color="primary"
                 :loading="loading"
@@ -80,7 +86,7 @@
           @goToLoginPage="goToLoginPage"
         />
       </q-dialog>
-    </q-page>
+    </div>
   </q-layout>
 </template>
 
@@ -103,7 +109,7 @@ export default defineComponent({
       canSubmit,
       onSubmit,
       goToLoginPage,
-      icons
+      icons,
     } = useResetPassword();
 
     return {
@@ -115,7 +121,7 @@ export default defineComponent({
       showPassword,
       goToLoginPage,
       onSubmit,
-      icons
+      icons,
     };
   },
 });
@@ -126,3 +132,4 @@ export default defineComponent({
   width: 254px;
 }
 </style>
+

package/src/composables/auth.ts

@@ -65,7 +65,7 @@ export function useAuth() {
   const validations = ref({
     email: [
       (val: string) => {
-        errorEmailMessage.value = val ? "" : t("auth.emailPresenceError");
+        errorEmailMessage.value = !!val ? "" : t("auth.emailPresenceError");
         return !!val || t("auth.emailPresenceError");
       },
       (val: string) => {
@@ -77,7 +77,9 @@ export function useAuth() {
     ],
     password: [
       (val: string) => {
-        errorPasswordMessage.value = val ? "" : t("auth.passwordPresenceError");
+        errorPasswordMessage.value = !!val
+          ? ""
+          : t("auth.passwordPresenceError");
         return !!val || t("auth.passwordPresenceError");
       },
     ],

package/src/index.js

@@ -1,6 +1,6 @@
 "use strict";
 const path = require("path");
-function extendConf(conf, api) {
+function extendConf(conf) {
   const requiredPlugins = ["Notify"];
 
   requiredPlugins.forEach((plugin) => {
@@ -20,9 +20,7 @@ function extendConf(conf, api) {
   );
   conf.boot.push("~@sowell/quasar-app-extension-auth/src/boot/axios.ts");
 
-  if (api.hasWebpack) {
-    conf.build.transpileDependencies.push(/quasar-app-extension-auth[\\/]src/);
-  }
+  conf.build.transpileDependencies.push(/quasar-app-extension-auth[\\/]src/);
 
   console.log("Boot sowell auth");
 }
@@ -36,24 +34,9 @@ const chainWebpack = (ctx, chain) => {
     path.resolve(__dirname, "./composables")
   );
 };
-
-const aliasVite = (viteConf) => {
-  viteConf.define.global = {};
-  viteConf.resolve.alias = {
-    ...viteConf.resolve.alias,
-    "@sowell/auth": path.resolve(__dirname, "./components"),
-    composables: path.resolve(__dirname, "./composables"),
-  };
-};
-
 module.exports = function (api) {
   api.compatibleWith("quasar", "^2.0.0");
-  if (api.hasVite === true) {
-    api.compatibleWith("@quasar/app-vite", "^1.3.0");
-    api.extendViteConf(aliasVite);
-  } else {
-    api.compatibleWith("@quasar/app", "^3.0.0");
-    api.chainWebpack((chain) => chainWebpack(api.ctx, chain));
-  }
+  api.compatibleWith("@quasar/app", "^3.0.0");
+  api.chainWebpack((chain) => chainWebpack(api.ctx, chain));
   api.extendQuasarConf(extendConf);
 };

package/src/injects/index.ts

@@ -1,5 +1,4 @@
 export * from "./api";
 export * from "./prompts";
 export * from "./router";
-export * from "./store";
 export * from './states'

package/src/injects/prompts.ts

@@ -10,11 +10,6 @@ export interface PromptsInterface {
   AUTH_SERVER_RESET_PASSWORD_ROUTE: string;
   AUTH_SERVER_UPDATE_PASSWORD_ROUTE: string;
   AUTH_TYPE: string;
-  VUEX_SET_TOKEN_MUTATION: string;
-  VUEX_CLEAR_TOKEN_MUTATION: string;
-  VUEX_SET_INFOS_USER_MUTATION: string;
-  VUEX_GET_TOKEN_GETTER: string;
-  VUEX_GET_INFOS_USER_GETTER: string;
   X_REQUESTED_ROLES: string;
   WELCOME_TITLE: string;
   WELCOME_SUBTITLE: string;
@@ -23,7 +18,7 @@ export interface PromptsInterface {
   AUTH_SERVER_VERIFY_OTP: string;
   UI_PAGE: string;
   APP_VERSION: string;
-  USE_SSO: boolean
+  USE_SSO: boolean;
 }
 export const $prompts = (): PromptsInterface => {
   const $prompts = inject<Record<"@sowell/auth", PromptsInterface>>("$prompts");

package/src/injects/states.ts

@@ -1,5 +1,6 @@
 import { inject } from "vue";
 import { Store } from "pinia";
+import { AxiosResponse } from "axios";
 import { $prompts } from "../injects";
 
 export interface AuthStatePayload {
@@ -71,7 +72,22 @@ export interface ResetPasswordPayload {
   };
 }
 
-export const useAuthState = () => {
+export const useAuthState = (): Store<
+  "auth",
+  AuthState,
+  {
+    getIsValid(state: AuthState): boolean;
+  },
+  {
+    signin(
+      data: SignInPayload,
+      options: RequestOptions
+    ): Promise<AxiosResponse>;
+    msalSignin(): Promise<AxiosResponse>;
+    resetPassword(data: ResetPasswordPayload): Promise<AxiosResponse>;
+    updateRaw(value: string): void;
+  }
+> => {
   const authState = inject<Store<"auth", AuthState>>("authState");
   if (authState == undefined) {
     throw Error("Could not inject authState");

package/src/interfaces/Boot.ts

@@ -1,8 +1,6 @@
 import { Router } from "vue-router";
-import { Store } from "vuex";
 import { App } from "vue";
 export interface BootInterface {
   router: Router;
-  store: Store<any>;
   app: App<any>;
 }

package/src/prompts.js

@@ -64,20 +64,6 @@ module.exports = function () {
       message: "Authorization type",
       default: "Bearer",
     },
-    {
-      name: "VUEX_SET_TOKEN_MUTATION",
-      type: "input",
-      required: true,
-      message: "Vuex mutation to set token",
-      default: "auth/set_token",
-    },
-    {
-      name: "VUEX_CLEAR_TOKEN_MUTATION",
-      type: "input",
-      required: true,
-      message: "Vuex mutation to clear token",
-      default: "auth/clear_token",
-    },
     {
       name: "UI_PAGE",
       type: "input",
@@ -85,34 +71,6 @@ module.exports = function () {
       message: "Login page for mobile app",
       default: "",
     },
-    {
-      name: "VUEX_SET_EMAIL_MUTATION",
-      type: "input",
-      required: true,
-      message: "Vuex mutation to store user email when authenticated",
-      default: "auth/set_email_user",
-    },
-    {
-      name: "VUEX_SET_INFOS_USER_MUTATION",
-      type: "input",
-      required: true,
-      message: "Vuex mutation to set user information to reset password",
-      default: "auth/set_infos_user",
-    },
-    {
-      name: "VUEX_GET_TOKEN_GETTER",
-      type: "input",
-      required: true,
-      message: "Vuex getter token",
-      default: "auth/get_token",
-    },
-    {
-      name: "VUEX_GET_INFOS_USER_GETTER",
-      type: "input",
-      required: true,
-      message: "Vuex getter user information",
-      default: "auth/get_infos_user",
-    },
     {
       name: "X_REQUESTED_ROLES",
       type: "input",

package/src/routes/index.ts

@@ -1,13 +1,6 @@
 //@ts-ignore
 import prompts from "app/quasar.extensions.json";
 import { RouteRecordRaw } from "vue-router";
-import AdminAuth from "../components/pages/AdminAuth.vue";
-import WebAuth from "../components/pages/WebAuth.vue";
-import WebResetPassword from "../components/pages/WebResetPassword.vue";
-import ResetPaswword from "../components/pages/ResetPassword.vue";
-
-import Auth from "../components/pages/Auth.vue";
-import AuthReporter from "../components/pages/AuthReporter.vue";
 
 const {
   "@sowell/auth": {
@@ -27,50 +20,54 @@ let authPage = "";
 
 switch (UI_PAGE) {
   case "mobile_clean":
-    authPage = Auth;
+    authPage = "Auth.vue";
     break;
   case "reporter":
-    authPage = AuthReporter;
+    authPage = "AuthReporter.vue";
     break;
   case "admin":
-    authPage = AdminAuth;
+    authPage = "AdminAuth.vue";
     break;
   default:
-    authPage = Auth;
+    authPage = "Auth.vue";
     break;
 }
 
-const loginPage = (X_REQUESTED_ROLES: string) => {
+const loginPage = (X_REQUESTED_ROLES: string): string => {
   return X_REQUESTED_ROLES === "admin"
-    ? AdminAuth
+    ? "AdminAuth.vue"
     : webAuthRoles.includes(X_REQUESTED_ROLES)
-    ? WebAuth
-    : authPage;
+      ? "WebAuth.vue"
+      : authPage;
 };
 
-const isInRoles = (X_REQUESTED_ROLES: string) => {
+const isInRoles = (X_REQUESTED_ROLES: string): string => {
   return webAuthRoles.includes(X_REQUESTED_ROLES) ||
     AdminAuthRoles.includes(X_REQUESTED_ROLES)
-    ? WebResetPassword
-    : ResetPaswword;
+    ? "WebResetPassword.vue"
+    : "ResetPassword.vue";
 };
 
 const routes: RouteRecordRaw[] = [
   {
     path: LOCAL_LOGIN_ROUTE,
-    component: () => loginPage(X_REQUESTED_ROLES),
+    component: () =>
+      // @ts-ignore
+      import(`@sowell/auth/pages/${loginPage(X_REQUESTED_ROLES)}`),
   },
   {
     path: LOCAL_UPDATE_PASSWORD_ROUTE,
     name: "update_password",
-    component: () => isInRoles(X_REQUESTED_ROLES),
+    component: () =>
+      // @ts-ignore
+      import(`@sowell/auth/pages/${isInRoles(X_REQUESTED_ROLES)}`),
   },
   {
     path: LOCAL_OTP_ROUTE,
     name: "otp_validation",
     component: () =>
       // @ts-ignore
-      import("../components/pages/OtpValidation.vue"),
+      import("@sowell/auth/pages/OtpValidation.vue"),
   },
 ];
 

package/.github/workflows/main.yml

@@ -1,22 +0,0 @@
-name: Cypress Tests
-
-on: [push]
-
-jobs:
-  cypress-run:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Nodejs
-        uses: actions/setup-node@v4
-        with:
-          node-version: '18'
-          cache: yarn
-      - run: yarn install
-      - run: yarn dep
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          working-directory: dev
-          command: yarn ci

package/src/injects/store.ts

@@ -1,10 +0,0 @@
-import { inject } from "vue";
-import { Store } from "vuex";
-
-export const $store = (): Store<any> => {
-  const $store = inject<Store<any>>("$store");
-  if ($store == undefined) {
-    throw Error("Could not inject store");
-  }
-  return $store;
-};

package/src/store/index.ts

@@ -1,71 +0,0 @@
-import { Module, GetterTree, MutationTree, ActionTree } from "vuex";
-import { tokenStateInterface, payload } from "../interfaces";
-
-const state: tokenStateInterface = {
-  raw: "",
-  payload: {
-    company_hp: undefined,
-    exp: undefined,
-    gm_key: "",
-    roles: [],
-    sub: null
-  }
-}
-
-const getters: GetterTree<tokenStateInterface, any> = {
-  getRaw(state) {
-    return state.raw
-  },
-  getPayload(state) {
-    return state.payload
-  },
-  getIsValid(state) {
-    if (state.payload.exp) {
-      return new Date(state.payload.exp * 1000) >= new Date() ? true : false;
-    } else {
-      return false
-    }
-  }
-}
-
-const mutations: MutationTree<tokenStateInterface> = {
-  setRaw(state, value: string) {
-    state.raw = value
-  },
-  setPayload(state, value: payload) {
-    state.payload = {...value}
-  },
-  reset(state) {
-    state.raw = ""
-    state.payload = {
-      company_hp: undefined,
-      exp: undefined,
-      gm_key: "",
-      roles: [],
-      sub: null
-    }
-  }
-}
-
-const actions: ActionTree<tokenStateInterface, any> = {
-  updateRaw({ commit }, value: string) {
-    commit("setRaw", value);
-    let parseJwt: string
-    try {
-      parseJwt = JSON.parse(window.atob(value.split(".")[1]));
-    } catch (error) {
-      parseJwt = ""
-    }
-    commit("setPayload", parseJwt)
-  }
-}
-
-const tokenModule: Module<tokenStateInterface, any> = {
-  namespaced: true,
-  getters,
-  mutations,
-  actions,
-  state
-}
-
-export default tokenModule;