@sowell/quasar-app-extension-auth 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -21,6 +21,7 @@
     "yarn": ">= 1.6.0"
   },
   "devDependencies": {
+    "@quasar/app-webpack": "^4.0.0-beta.16",
     "@quasar/cli": "^2.2.3",
     "@types/node": "^16.9.1",
     "@types/validator": "^13.6.3",
@@ -42,6 +43,7 @@
     "@quasar/extras": "^1.15.2",
     "axios": "^0.21.1",
     "buffer": "^6.0.3",
+    "crypto-js": "^4.2.0",
     "pinia": "^2.0.12",
     "qs": "^6.10.1",
     "validator": "^13.6.0",

package/src/boot/axios.ts

@@ -1,5 +1,4 @@
 // FIXME: find another way to call this path
-//@ts-ignore
 import prompts from "app/quasar.extensions.json";
 import axios from "axios";
 import { boot } from "quasar/wrappers";

package/src/boot/register.ts

@@ -1,4 +1,3 @@
-//@ts-ignore
 import prompts from "app/quasar.extensions.json";
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";

package/src/boot/router.ts

@@ -1,4 +1,3 @@
-//@ts-ignore
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";
 import newRoutes from "../routes";

package/src/boot/store.ts

@@ -1,4 +1,3 @@
-//@ts-ignore
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";
 

package/src/components/pages/AdminAuth.vue

@@ -119,8 +119,6 @@
 </template>
 
 <script lang="ts">
-// 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"

package/src/components/pages/Auth.vue

@@ -154,17 +154,11 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent, reactive, onMounted } from "vue"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import * as packageInfo from "app/package.json"
 
 import SendEmail from "../dialogs/SendEmail.vue"
 import SowellMessage from "../dialogs/Message.vue"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import MicrosoftLogo from "../../assets/logo-microsoft.svg"
 
 import { useAuth } from "composables/auth"

package/src/components/pages/AuthReporter.vue

@@ -159,11 +159,7 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent, reactive, onMounted, computed } from "vue"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import * as packageInfo from "app/package.json"
 import SendEmail from "../dialogs/SendEmail.vue"
 import SowellMessage from "../dialogs/Message.vue"

package/src/components/pages/OtpValidation.vue

@@ -75,8 +75,6 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent, ref, computed } from "vue"
 import { useQuasar } from "quasar"
 import { useI18n } from "vue-i18n"

package/src/components/pages/ResetPassword.vue

@@ -77,8 +77,6 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { defineComponent } from "vue"
 import SowellMessage from "../dialogs/Message.vue"
 import { useResetPassword } from "composables/resetPassword"

package/src/components/pages/WebAuth.vue

@@ -22,24 +22,21 @@
                 :icon="`img:${MicrosoftLogo}`"
                 class="full-width q-mt-lg"
                 @click="msalAuth"
-                outline
-              />
+                outline />
               <div
                 style="
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   margin-top: 16px;
-                "
-              >
+                ">
                 <div
                   style="
                     width: 20%;
                     border: 1px solid #bcc3c7;
                     height: 1px;
                     margin-right: 16px;
-                  "
-                ></div>
+                  "></div>
                 <div class="text-weight-bold">{{ $t("common.or") }}</div>
                 <div
                   style="
@@ -47,8 +44,7 @@
                     border: 1px solid #bcc3c7;
                     height: 1px;
                     margin-left: 16px;
-                  "
-                ></div>
+                  "></div>
               </div>
             </div>
             <q-form @submit="handleSubmit">
@@ -64,8 +60,7 @@
                   data-cy="email"
                   dense
                   outlined
-                  input-class="text-subtitle2 text-weight-medium"
-                />
+                  input-class="text-subtitle2 text-weight-medium" />
                 <div class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold">
                   {{ $t("auth.password") }}
                 </div>
@@ -77,16 +72,14 @@
                   lazy-rules
                   dense
                   outlined
-                  input-class="text-subtitle2 text-weight-bold"
-                >
+                  input-class="text-subtitle2 text-weight-bold">
                   <template #append>
                     <q-icon
                       :name="
                         showPassword ? icons.ionEyeOffSharp : icons.ionEyeSharp
                       "
                       class="cursor-pointer q-mr-sm lightenDark"
-                      @click="showPassword = !showPassword"
-                    />
+                      @click="showPassword = !showPassword" />
                   </template>
                 </q-input>
               </div>
@@ -101,14 +94,12 @@
                   :loading="loading"
                   type="submit"
                   :disable="isSubmitBtnDisabled() || loading || msalLoading"
-                  class="submitBtn text-subtitle2 text-weight-bold"
-                />
+                  class="submitBtn text-subtitle2 text-weight-bold" />
                 <div
                   class="cursor-pointer text-primary text-subtitle2"
                   data-testid="ask-password-change-btn"
                   data-cy="forgot-password"
-                  @click="forgottenPassword = true"
-                >
+                  @click="forgottenPassword = true">
                   {{ $t("auth.forgottenPassword") }}
                 </div>
               </div>
@@ -119,18 +110,15 @@
       <div
         class="column col justify-center content-center mobile"
         :style="IS_MANAGER ? 'background: #eef8fd' : ''"
-        :class="!IS_MANAGER ? 'bgBlue' : ''"
-      >
+        :class="!IS_MANAGER ? 'bgBlue' : ''">
         <img
           v-if="IS_MANAGER"
           src="../../assets/illustration-login.svg"
-          class="q-pl-md q-pr-md logoWhite"
-        />
+          class="q-pl-md q-pr-md logoWhite" />
         <img
           v-else
           src="../../assets/SowellWhite.svg"
-          class="q-pl-md q-pr-md logoWhite"
-        />
+          class="q-pl-md q-pr-md logoWhite" />
       </div>
     </div>
     <div>
@@ -141,9 +129,10 @@
         transition-show="fade"
         transition-hide="fade"
         persistent
-        data-testid="ask-password-change-modal"
-      >
-        <web-send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
+        data-testid="ask-password-change-modal">
+        <web-send-email
+          @resetPassword="resetPassword"
+          @close="() => (forgottenPassword = false)" />
       </q-dialog>
       <q-dialog v-model="isNotification" persistent>
         <sw-info-dialog
@@ -151,8 +140,7 @@
           :content="infoDialog.content"
           :image="infoDialog.image"
           :isOtp="isOtp"
-          @close="() => isNotification = false"
-        >
+          @close="() => (isNotification = false)">
           <q-btn
             :data-testid="infoDialog.canGoNext ? 'next-btn' : 'close-btn'"
             v-if="isOtp"
@@ -163,8 +151,7 @@
             :label="infoDialog.canGoNext ? $t('auth.next') : $t('auth.close')"
             color="primary"
             @click="handleInfoDialog"
-            v-close-popup
-          />
+            v-close-popup />
         </sw-info-dialog>
       </q-dialog>
     </div>
@@ -181,6 +168,7 @@ import WebSendEmail from "../dialogs/WebSendEmail.vue"
 
 import { useAuth } from "composables/auth"
 import MicrosoftLogo from "../../assets/logo-microsoft.svg"
+import { AxiosError } from "axios"
 
 export default defineComponent({
   name: "Auth",
@@ -212,9 +200,12 @@ export default defineComponent({
       msalAuth
     } = useAuth()
 
-    const IS_MANAGER = ["manager", "clean_manager", "incivility_manager", "admin"].includes(
-      X_REQUESTED_ROLES
-    )
+    const IS_MANAGER = [
+      "manager",
+      "clean_manager",
+      "incivility_manager",
+      "admin"
+    ].includes(X_REQUESTED_ROLES)
     const isNotification = ref(false)
     const infoDialog = ref({
       title: "",
@@ -237,7 +228,7 @@ export default defineComponent({
         const data = {
           auth: {
             email,
-            base: APP_SERVER_BASE_URL,
+            base: APP_SERVER_BASE_URL
           }
         }
         try {
@@ -255,14 +246,22 @@ export default defineComponent({
             forgottenPassword.value = false
             isNotification.value = true
           })
-        } catch {
-          isNotification.value = false
-
-          infoDialog.value = {
-            canGoNext: false,
-            title: t("auth.userNotFoundTitle"),
-            content: t("auth.userNotFoundSubtitle"),
-            image: "userNotFound"
+        } catch (error) {
+          if ((error as AxiosError).response?.status === 403) {
+            // NOTE: 403 is returned when the user is not allowed to reset the password
+            infoDialog.value = {
+              canGoNext: false,
+              title: t("auth.forbidden.title"),
+              content: t("auth.forbidden.subtitle"),
+              image: "userNotFound"
+            }
+          } else {
+            infoDialog.value = {
+              canGoNext: false,
+              title: t("auth.userNotFoundTitle"),
+              content: t("auth.userNotFoundSubtitle"),
+              image: "userNotFound"
+            }
           }
 
           isNotification.value = true

package/src/composables/auth.ts

@@ -9,7 +9,9 @@ import {
   ionEyeSharp,
   ionEyeOffSharp,
 } from "@quasar/extras/ionicons-v5"
-import { Platform } from "quasar"
+import { Platform, useQuasar } from "quasar"
+
+import { encrypt, decrypt } from "../utils/encryption"
 
 import {
   $prompts,
@@ -37,6 +39,7 @@ export function useAuth() {
   }
 
   const { t } = useI18n()
+  const { localStorage } = useQuasar()
   const {
     LOCAL_SUCCESS_REDIRECTION_ROUTE,
     APP_SERVER_BASE_URL,
@@ -142,11 +145,9 @@ export function useAuth() {
       // 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 })
-        )
+
+        data.auth.password = encrypt(password.value);
+        localStorage.set("credentials",{ ...data.auth, provider: provider })
       }
       push(LOCAL_SUCCESS_REDIRECTION_ROUTE)
     } catch (err) {
@@ -166,13 +167,20 @@ export function useAuth() {
   }
 
   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
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      password.value = JSON.parse(localStorage.getItem("credentials")).password
+    if (localStorage.has("credentials")) {
+      const credentials = localStorage.getItem("credentials")
+      email.value = credentials.email
+      password.value = credentials.password
+    }
+  }
+
+  const tryAutoLogin = async () => {
+    if (localStorage.has("credentials")) {
+      const credentials = localStorage.getItem("credentials")
+      const decryptedPassword = decrypt(credentials.password);
+      email.value = credentials.email
+      password.value = decryptedPassword
+      await onSubmit()
     }
   }
 
@@ -204,6 +212,7 @@ export function useAuth() {
     if (Platform.is.capacitor) {
       deviceReady()
     }
+    tryAutoLogin()
   })
 
   return {

package/src/routes/index.ts

@@ -1,8 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import prompts from "app/quasar.extensions.json"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
 import { RouteRecordRaw } from "vue-router"
 
 const {

package/src/utils/encryption.ts

@@ -0,0 +1,9 @@
+import CryptoJS from "crypto-js";
+
+export function encrypt(password: string): string {
+  return CryptoJS.AES.encrypt(password, process.env.ENCRYPTION_KEY).toString()
+}
+
+export function decrypt(encryptedPassword: string): string {
+    return CryptoJS.AES.decrypt(encryptedPassword, process.env.ENCRYPTION_KEY).toString(CryptoJS.enc.Utf8)
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { encrypt, decrypt } from "./encryption"

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
+  "extends": "@quasar/app-webpack/tsconfig-preset.json",
   "compilerOptions": {
+    "experimentalDecorators": true,
+    "baseUrl": ".",
     "allowJs": true,
     "target": "ES2020",
     "lib": [
@@ -13,4 +16,4 @@
       "node"
     ]
   }
-}
+}