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

package/.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
-    'plugin:vue/vue3-strongly-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-essential',
     'prettier'
   ],
   parserOptions: {
@@ -14,7 +15,7 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module'
   },
-  plugins: ['vue'],
+  plugins: ['vue', '@typescript-eslint'],
   rules: {
     'comma-dangle': ['error', 'only-multiline'],
     'space-before-function-paren': [
@@ -22,6 +23,9 @@ module.exports = {
       { anonymous: 'always', named: 'never', asyncArrow: 'always' }
     ],
     semi: 'off',
-    'no-unreachable': 'off'
+    quotes: ['error', 'double'],
+    'no-unreachable': 'off',
+    'array-bracket-spacing': ['error', 'never'],
+    'func-call-spacing': ['error', 'never']
   }
 };

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "semi": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "arrowParens": "always",
+  "bracketSameLine": true,
+  "bracketSpacing": true
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -22,17 +22,16 @@
   },
   "devDependencies": {
     "@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",
-    "cypress-cucumber-preprocessor": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-cypress": "^2.11.1",
     "eslint-plugin-vue": "^7.0.0",
     "jwt-decode": "^3.1.2",
-    "quasar": "^2.6.2",
-    "vue": "3.4.21",
+    "quasar": "^2.8.4",
     "typescript": "^4.4.2"
   },
   "directories": {
@@ -40,7 +39,7 @@
   },
   "dependencies": {
     "@capacitor/core": "^4.6.2",
-    "@quasar/extras": "^1.13.4",
+    "@quasar/extras": "^1.15.2",
     "axios": "^0.21.1",
     "buffer": "^6.0.3",
     "pinia": "^2.0.12",

package/src/components/dialogs/Message.vue

@@ -82,51 +82,53 @@ import { useI18n } from "vue-i18n";
 export default defineComponent({
   props: {
     emailResetPassword: {
-      type: String,
+      type: String
     },
     sendEmailSuccess: {
-      type: Boolean,
+      type: Boolean
     },
     loading: {
-      type: Boolean,
+      type: Boolean
     },
     passwordUpdated: {
-      type: Boolean,
-    },
+      type: Boolean
+    }
   },
-  emit: ["retypeEmail", "goToLoginPage"],
+  emit: ["retypeEmail", "goToLoginPage", "close"],
   setup(props: any, { emit }: any) {
-    const { t } = useI18n();
+    const { t } = useI18n()
 
     const messageSubtitle = computed(() =>
       props.sendEmailSuccess
         ? t("auth.emailSent")
         : !props.passwordUpdated
         ? t("auth.emailNotRecognize")
-        : t("auth.passwordUpdated"),
-    );
+        : t("auth.passwordUpdated")
+    )
     const messageTitle = computed(() =>
       props.sendEmailSuccess
         ? t("auth.emailVerification")
         : !props.passwordUpdated
         ? t("auth.loginFailed")
-        : t("auth.passwordChanged"),
-    );
+        : t("auth.passwordChanged")
+    )
 
     const emailNotSend = computed(
       () => !props.sendEmailSuccess && !props.passwordUpdated
-    );
+    )
     const emailSended = computed(
       () => props.sendEmailSuccess && !props.passwordUpdated
-    );
+    )
 
     const retypeEmail = () => {
-      emit("retypeEmail");
-    };
+      emit("retypeEmail")
+    }
 
     const handlePasswordUpdate = () =>{
       if(props.passwordUpdated){
         emit("goToLoginPage")
+      } else {
+        emit("close")
       }
     }
 
@@ -136,8 +138,8 @@ export default defineComponent({
       emailNotSend,
       emailSended,
       handlePasswordUpdate,
-      retypeEmail,
-    };
-  },
-});
+      retypeEmail
+    }
+  }
+})
 </script>

package/src/components/dialogs/SendEmail.vue

@@ -1,19 +1,21 @@
 <template>
-  <q-card
+  <div
     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">
+    <div class="column" style="max-width: 447px">
       <q-card-section>
-        <q-btn
-          class="q-pt-md"
-          flat
-          dense
-          size="10px"
-          icon="arrow_back_ios_new"
-          v-close-popup
-        />
+        <div>
+          <q-btn
+            class="q-py-md"
+            flat
+            dense
+            size="10px"
+            icon="arrow_back_ios_new"
+             @click="emit('close')"
+          />
+        </div>
       </q-card-section>
       <q-card-section class="">
         <div
@@ -71,36 +73,38 @@
           v-close-popup
         />
       </q-card-actions>
-    </q-page>
-  </q-card>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref } from "vue"
 import {
   ionMailOutline,
   ionPaperPlaneOutline,
-} from "@quasar/extras/ionicons-v5";
+} from "@quasar/extras/ionicons-v5"
 
 export default defineComponent({
-  emit: ["resetPassword"],
+  emit: ["resetPassword", "close"],
   setup(props: any, { emit }: any) {
-    const email = ref("");
+    const email = ref("")
     const sendEmail = () => {
-      emit("resetPassword", email.value);
-    };
+      emit("resetPassword", email.value)
+    }
 
     return {
       email,
       sendEmail,
+      emit,
       icons: {
         ionMailOutline,
         ionPaperPlaneOutline,
-      },
-    };
-  },
-});
+      }
+    }
+  }
+})
 </script>
 <style scoped>
 @media screen and (min-width: 450px) {

package/src/components/dialogs/WebSendEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <q-card data-testid="ask-password-change-form">
-    <q-page class="row bg-white">
+    <div class="row bg-white">
       <div class="col-6 q-pa-xl row justify-center center">
         <div class="left-side full-width full-height">
           <img
@@ -58,6 +58,7 @@
                 :label="$t('auth.login')"
                 class="btn-min"
                 v-close-popup
+                @click="emit('close')"
               />
             </div>
           </div>
@@ -70,38 +71,40 @@
           alt=""
         />
       </div>
-    </q-page>
+    </div>
   </q-card>
 </template>
 
 <script lang="ts">
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { defineComponent, ref } from "vue";
-import prompts from "app/quasar.extensions.json";
-import { ionPaperPlaneOutline } from "@quasar/extras/ionicons-v5";
+import { defineComponent, ref } from "vue"
+import prompts from "app/quasar.extensions.json"
+import { ionPaperPlaneOutline } from "@quasar/extras/ionicons-v5"
 
 export default defineComponent({
   name: "WebSendMail",
-  emit: ["resetPassword"],
+  emit: ["resetPassword", "close"],
   setup(props: any, { emit }: any) {
     const {
       "@sowell/auth": { FORGOTTEN_PASSWORD_TITLE, FORGOTTEN_PASSWORD_SUBTITLE },
-    } = prompts;
-    const email = ref("");
+    } = prompts
+    const email = ref("")
     const sendEmail = () => {
-      emit("resetPassword", email.value);
-    };
+      emit("resetPassword", email.value)
+    }
     return {
       email,
       FORGOTTEN_PASSWORD_TITLE,
       FORGOTTEN_PASSWORD_SUBTITLE,
       sendEmail,
+      emit,
       icons: {
-        ionPaperPlaneOutline,
-      },
-    };
-  },
-});
+        ionPaperPlaneOutline
+      }
+    }
+  }
+})
 </script>
 
 <style scoped>

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

@@ -14,7 +14,7 @@
         />
       </div>
       <div class="row justify-center">
-        <img :src="image" />
+        <img :src="imageValue" />
       </div>
     </q-card-section>
 
@@ -42,7 +42,7 @@
             outline
             no-caps
             :label="$t('auth.close')"
-            @click="passwordUpdated ? $emit('goToLoginPage') : ''"
+            @click="passwordUpdated ? $emit('goToLoginPage') : $emit('close')"
             color="primary"
             v-close-popup
           />
@@ -67,9 +67,9 @@ export default defineComponent({
     passwordUpdated: { type: Boolean },
     isOtp: { type: Boolean, default: false, required: false },
   },
-  emit: ["goToLoginPage"],
+  emit: ["goToLoginPage", "close"],
   setup(props: any) {
-    const image = computed(() => {
+    const imageValue = computed(() => {
       switch (props.image) {
         case "userNotFound":
           return userNotFound;
@@ -79,9 +79,12 @@ export default defineComponent({
 
         case "emailVerification":
           return emailVerification;
+        default: 
+          return null
       }
-    });
-    return { image, icons: { ionCloseOutline } };
+    })
+
+    return { imageValue, icons: { ionCloseOutline } };
   },
 });
 </script>

package/src/components/pages/AdminAuth.vue

@@ -92,7 +92,7 @@
         transition-hide="fade"
         persistent
       >
-        <web-send-email @resetPassword="resetPassword" />
+        <web-send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
       </q-dialog>
       <q-dialog v-model="isNotification" persistent>
         <sw-info-dialog
@@ -119,26 +119,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";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+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";
-
-interface HeadersInterface {
-  headers: {
-    "x-requested-roles"?: string;
-  };
-}
+import { useAuth } from "composables/auth"
 export default defineComponent({
   name: "Auth",
   components: { WebSendEmail, SwInfoDialog },
   setup() {
-    const { t } = useI18n();
-    const authState = useAuthState();
+    const { t } = useI18n()
+    const authState = useAuthState()
 
     const {
       email,
@@ -153,25 +149,25 @@ export default defineComponent({
       X_REQUESTED_ROLES,
       IS_OTP,
       APP_SERVER_BASE_URL,
+      icons,
       goToOtpValidation,
       onSubmit,
       retypeEmail,
-      isSubmitBtnDisabled,
-      icons,
-    } = useAuth();
+      isSubmitBtnDisabled
+    } = useAuth()
 
     const handleSubmit = () => {
       onSubmit()
     }
 
-    const IS_ADMIN = ["admin"].includes(X_REQUESTED_ROLES);
-    const isNotification = ref(false);
-    const requestedOtp = ref(false);
+    const IS_ADMIN = ["admin"].includes(X_REQUESTED_ROLES)
+    const isNotification = ref(false)
+    const requestedOtp = ref(false)
     const infoDialog = ref({
       title: "",
       content: "",
-      image: "",
-    });
+      image: ""
+    })
 
     const submitBtnDisabled = computed(
       () =>
@@ -181,41 +177,41 @@ 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 = {
               title: t("auth.mailVerificationTitle"),
               content:
                 IS_OTP.toLowerCase() === "y"
                   ? t("auth.otpValidationCode")
                   : t("auth.mailVerificationSubtitle"),
-              image: "emailVerification",
-            };
-            forgottenPassword.value = false;
-            isNotification.value = true;
-            requestedOtp.value = true;
-          });
+              image: "emailVerification"
+            }
+            forgottenPassword.value = false
+            isNotification.value = true
+            requestedOtp.value = true
+          })
         } catch {
-          requestedOtp.value = false;
+          requestedOtp.value = false
           infoDialog.value = {
             title: t("auth.userNotFoundTitle"),
             content: t("auth.userNotFoundSubtitle"),
-            image: "userNotFound",
-          };
-          isNotification.value = true;
+            image: "userNotFound"
+          }
+          isNotification.value = true
         }
       }
-    };
+    }
 
     return {
       email,
@@ -231,16 +227,16 @@ export default defineComponent({
       IS_ADMIN,
       WELCOME_SUBTITLE,
       WELCOME_TITLE,
-      isSubmitBtnDisabled,
       requestedOtp,
+      icons,
+      isSubmitBtnDisabled,
       goToOtpValidation,
       resetPassword,
       retypeEmail,
-      handleSubmit,
-      icons,
-    };
-  },
-});
+      handleSubmit
+    }
+  }
+})
 </script>
 
 <style scoped>