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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "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
     }