@sowell/quasar-app-extension-auth 1.1.2 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@quasar/app-webpack": "^4.0.0-beta.16",
     "@quasar/cli": "^2.2.3",
+    "@types/crypto-js": "^4.2.2",
     "@types/node": "^16.9.1",
     "@types/validator": "^13.6.3",
     "@typescript-eslint/eslint-plugin": "^5.10.0",

package/src/components/pages/Auth.vue

@@ -162,7 +162,6 @@ import SowellMessage from "../dialogs/Message.vue"
 import MicrosoftLogo from "../../assets/logo-microsoft.svg"
 
 import { useAuth } from "composables/auth"
-import { send } from "process"
 
 export default defineComponent({
   name: "Auth",

package/src/components/pages/AuthReporter.vue

@@ -95,6 +95,41 @@
                 style="font-size: 14px; cursor: pointer; width: 350px">
                 {{ $t("auth.forgottenPassword") }}
               </div>
+              <div v-if="USE_SSO">
+                <div
+                  style="
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                  ">
+                  <div
+                    style="
+                      width: 35%;
+                      border: 1px solid #bcc3c7;
+                      height: 1px;
+                    "></div>
+                  <div class="text-weight-bold">{{ $t("common.or") }}</div>
+                  <div
+                    style="
+                      width: 35%;
+                      border: 1px solid #bcc3c7;
+                      height: 1px;
+                    "></div>
+                </div>
+                <q-btn
+                  data-cy="submit-sso-login"
+                  :label="$t('auth.msalLogin')"
+                  color="primary"
+                  no-caps
+                  unelevated
+                  text-color="black"
+                  :loading="msalLoading"
+                  :disable="msalLoading || loading"
+                  :icon="`img:${MicrosoftLogo}`"
+                  class="full-width q-mt-lg"
+                  @click="msalAuth"
+                  outline />
+              </div>
             </div>
           </q-form>
         </div>
@@ -154,6 +189,7 @@ import SendEmail from "../dialogs/SendEmail.vue"
 import SowellMessage from "../dialogs/Message.vue"
 import { useAuth } from "composables/auth"
 import { AxiosError } from "axios"
+import MicrosoftLogo from "../../assets/logo-microsoft.svg"
 
 export default defineComponent({
   name: "Auth",
@@ -175,6 +211,9 @@ export default defineComponent({
       APP_SERVER_BASE_URL,
       IS_OTP,
       icons,
+      USE_SSO,
+      msalAuth,
+      msalLoading,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
@@ -209,8 +248,7 @@ export default defineComponent({
         if ((error as AxiosError).response?.status === 403) {
           // NOTE: 403 is returned when the user is not allowed to reset the password
           sendEmailCode.value = 403
-        }
-        else {
+        } else {
           sendEmailCode.value = 404
         }
         isReset.value = true
@@ -239,6 +277,10 @@ export default defineComponent({
       goToOtpValidation,
       isSubmitBtnDisabled,
       retypeEmail,
+      msalLoading,
+      USE_SSO,
+      msalAuth,
+      MicrosoftLogo,
       handleSubmit,
       resetPassword
     }

package/src/components/pages/WebResetPassword.vue

@@ -8,10 +8,7 @@
             class="q-mb-sm q-mr-md"
             style="width: 190px" />
         </div>
-        <div
-          class="column justify-center full-height"
-          style="max-width: 550px; margin-top: -90px">
-          <div></div>
+        <div class="column justify-center full-height" style="max-width: 550px">
           <div
             class="text-subtitle1 q-mt-lg"
             style="font-size: 34px; font-weight: 600; line-height: 34px">
@@ -43,10 +40,11 @@
                 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" />
                 </template>
@@ -108,7 +106,7 @@ export default defineComponent({
       canSubmit,
       passwordUpdated,
       showPassword,
-      icons, 
+      icons,
       goToLoginPage,
       onSubmit
     }

package/src/utils/encryption.ts

@@ -1,9 +1,15 @@
-import CryptoJS from "crypto-js";
+import CryptoJS from "crypto-js"
 
 export function encrypt(password: string): string {
-  return CryptoJS.AES.encrypt(password, process.env.ENCRYPTION_KEY).toString()
+  const key = process.env.ENCRYPTION_KEY
+  if (!key) throw new Error(" is not defined")
+  return CryptoJS.AES.encrypt(password, key).toString()
 }
 
 export function decrypt(encryptedPassword: string): string {
-    return CryptoJS.AES.decrypt(encryptedPassword, process.env.ENCRYPTION_KEY).toString(CryptoJS.enc.Utf8)
+  const key = process.env.ENCRYPTION_KEY
+  if (!key) throw new Error("ENCRYPTION_KEY is not defined")
+  return CryptoJS.AES.decrypt(encryptedPassword, key).toString(
+    CryptoJS.enc.Utf8
+  )
 }