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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.1.1",
+  "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/dialogs/Message.vue

@@ -1,21 +1,20 @@
 <template>
-  <q-card style="max-width: 343px; border-radius: 10px; background: #f4f5f6" data-testid="feedback-dialog">
+  <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"
         src="../../assets/mailbox.svg"
-        style="width: 175px; height: 150px"
-      />
+        style="width: 175px; height: 150px" />
       <img
         v-if="passwordUpdated"
         src="../../assets/success.svg"
-        style="width: 100px; height: 80px"
-      />
+        style="width: 100px; height: 80px" />
       <img
         v-if="emailNotSend"
         src="../../assets/error.svg"
-        style="width: 100px; height: 80px"
-      />
+        style="width: 100px; height: 80px" />
     </q-card-section>
 
     <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
@@ -23,29 +22,26 @@
         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"
-      >
+        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"
-      >
+        style="font-size: 16px; font-weight: 400">
         {{ messageSubtitle }}
       </div>
       <div
         class="q-mt-sm text-center q-mb-xl"
         style="font-size: 15px; color: #737676"
-        v-if="sendEmailSuccess"
-      >
+        v-if="sendEmailCode === 200">
         {{ emailResetPassword }}
       </div>
     </q-card-section>
     <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg">
       <q-btn
-        v-if="emailNotSend"
+        v-if="emailNotSend && sendEmailCode !== 403"
         data-cy="submit-login"
         :label="$t('auth.reSend')"
         color="primary"
@@ -55,8 +51,7 @@
         unelevated
         type="submit"
         @click="retypeEmail"
-        class="full-width"
-      />
+        class="full-width" />
       <slot>
         <q-btn
           data-testid="close-btn"
@@ -68,24 +63,23 @@
           no-caps
           :label="$t('auth.close')"
           color="dark"
-          v-close-popup
-        />
+          v-close-popup />
       </slot>
     </q-card-actions>
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
-import { useI18n } from "vue-i18n";
+import { defineComponent, computed } from "vue"
+import { useI18n } from "vue-i18n"
 
 export default defineComponent({
   props: {
     emailResetPassword: {
       type: String
     },
-    sendEmailSuccess: {
-      type: Boolean
+    sendEmailCode: {
+      type: Number
     },
     loading: {
       type: Boolean
@@ -98,34 +92,40 @@ export default defineComponent({
   setup(props: any, { emit }: any) {
     const { t } = useI18n()
 
-    const messageSubtitle = computed(() =>
-      props.sendEmailSuccess
+    const messageSubtitle = computed(() => {
+      if (props.sendEmailCode === 403) {
+        return t("auth.forbidden.subtitle")
+      }
+      return props.sendEmailCode === 200
         ? t("auth.emailSent")
         : !props.passwordUpdated
         ? t("auth.emailNotRecognize")
         : t("auth.passwordUpdated")
-    )
-    const messageTitle = computed(() =>
-      props.sendEmailSuccess
+    })
+    const messageTitle = computed(() => {
+      if (props.sendEmailCode === 403) {
+        return t("auth.forbidden.title")
+      }
+      return props.sendEmailCode === 200
         ? t("auth.emailVerification")
         : !props.passwordUpdated
         ? t("auth.loginFailed")
         : t("auth.passwordChanged")
-    )
+    })
 
     const emailNotSend = computed(
-      () => !props.sendEmailSuccess && !props.passwordUpdated
+      () => props.sendEmailCode !== 200 && !props.passwordUpdated
     )
     const emailSended = computed(
-      () => props.sendEmailSuccess && !props.passwordUpdated
+      () => props.sendEmailCode === 200 && !props.passwordUpdated
     )
 
     const retypeEmail = () => {
       emit("retypeEmail")
     }
 
-    const handlePasswordUpdate = () =>{
-      if(props.passwordUpdated){
+    const handlePasswordUpdate = () => {
+      if (props.passwordUpdated) {
         emit("goToLoginPage")
       } else {
         emit("close")

package/src/components/pages/Auth.vue

@@ -134,7 +134,7 @@
         <q-dialog v-model="isReset" persistent>
           <sowell-message
             :emailResetPassword="emailResetPassword"
-            :sendEmailSuccess="sendEmailSuccess"
+            :sendEmailCode="sendEmailCode"
             :loading="loading"
             @retypeEmail="retypeEmail" 
             @close="() => isReset= false"/>
@@ -177,7 +177,7 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       authState,
       APP_SERVER_BASE_URL,
       icons,
@@ -201,11 +201,11 @@ export default defineComponent({
       try {
         forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
-          sendEmailSuccess.value = true
+          sendEmailCode.value = 200
           isReset.value = true
         })
       } catch {
-        sendEmailSuccess.value = false
+        sendEmailCode.value = 404
         isReset.value = true
       }
     }
@@ -228,7 +228,7 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       icons,
       appVersion,
       USE_SSO,

package/src/components/pages/AuthReporter.vue

@@ -7,13 +7,11 @@
             <img
               src="../../assets/Logo.svg"
               class="q-mb-sm q-mr-md"
-              style="width: 27px; height: 47px"
-            />
+              style="width: 27px; height: 47px" />
             <img
               src="../../assets/Sowell.svg"
               class="q-mb-sm"
-              style="width: 146px; height: 38px"
-            />
+              style="width: 146px; height: 38px" />
           </div>
         </div>
         <div class="login-page">
@@ -21,8 +19,7 @@
             <div>
               <div
                 class="q-ml-xs q-mb-xs"
-                style="font-size: 14px; font-weight: 600"
-              >
+                style="font-size: 14px; font-weight: 600">
                 {{ $t("auth.email") }}
               </div>
               <q-input
@@ -32,8 +29,7 @@
                 borderless
                 :rules="validations['email']"
                 lazy-rules
-                :input-style="{ fontSize: '14px', fontWeight: '500' }"
-              >
+                :input-style="{ fontSize: '14px', fontWeight: '500' }">
                 <template #prepend>
                   <q-icon :name="icons.ionMailOutline" />
                 </template>
@@ -42,8 +38,7 @@
             <div>
               <div
                 class="q-ml-xs q-mb-xs"
-                style="font-size: 14px; font-weight: 600"
-              >
+                style="font-size: 14px; font-weight: 600">
                 {{ $t("auth.password") }}
               </div>
               <q-input
@@ -54,8 +49,7 @@
                 lazy-rules
                 borderless
                 dense
-                :input-style="{ fontSize: '14px', fontWeight: '600' }"
-              >
+                :input-style="{ fontSize: '14px', fontWeight: '600' }">
                 <template #prepend>
                   <q-icon :name="icons.ionLockClosedOutline" />
                 </template>
@@ -67,15 +61,13 @@
                         : icons.ionEyeOutline
                     "
                     class="cursor-pointer q-mr-sm"
-                    @click="showPassword = !showPassword"
-                  />
+                    @click="showPassword = !showPassword" />
                 </template>
               </q-input>
             </div>
             <div
               v-if="errorEmailMessage || errorPasswordMessage"
-              class="q-pl-sm text-red column justify-center error_input"
-            >
+              class="q-pl-sm text-red column justify-center error_input">
               <div>{{ errorEmailMessage }}</div>
               <div>{{ errorPasswordMessage }}</div>
             </div>
@@ -89,8 +81,7 @@
                   :loading="loading"
                   type="submit"
                   class="full-width q-mt-lg"
-                  :disable="isSubmitBtnDisabled()"
-                >
+                  :disable="isSubmitBtnDisabled()">
                   <div style="font-weight: 600; font-size: 16px">
                     {{ $t("auth.login") }}
                   </div>
@@ -101,10 +92,44 @@
                 @click="forgottenPassword = true"
                 data-testid="ask-password-change-btn"
                 data-cy="forgot-password"
-                style="font-size: 14px; cursor: pointer; width: 350px"
-              >
+                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>
@@ -117,20 +142,20 @@
           transition-show="fade"
           transition-hide="fade"
           persistent
-          data-testid="ask-password-change-modal"
-        >
-          <send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
+          data-testid="ask-password-change-modal">
+          <send-email
+            @resetPassword="resetPassword"
+            @close="() => (forgottenPassword = false)" />
         </q-dialog>
         <q-dialog v-model="isReset" persistent>
           <sowell-message
             :emailResetPassword="emailResetPassword"
-            :sendEmailSuccess="sendEmailSuccess"
+            :sendEmailCode="sendEmailCode"
             :loading="loading"
             @retypeEmail="retypeEmail"
-            @close="() => isReset = false"
-          >
+            @close="() => (isReset = false)">
             <q-btn
-              v-if="sendEmailSuccess && isOtp"
+              v-if="sendEmailCode === 200 && isOtp"
               data-testid="next-btn"
               class="q-mt-md full-width"
               unelevated
@@ -140,8 +165,7 @@
               no-caps
               :label="$t('auth.next')"
               color="dark"
-              v-close-popup
-            />
+              v-close-popup />
           </sowell-message>
         </q-dialog>
       </div>
@@ -164,6 +188,8 @@ import * as packageInfo from "app/package.json"
 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",
@@ -180,11 +206,14 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       authState,
       APP_SERVER_BASE_URL,
       IS_OTP,
       icons,
+      USE_SSO,
+      msalAuth,
+      msalLoading,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
@@ -206,20 +235,25 @@ export default defineComponent({
         auth: {
           email,
           base: APP_SERVER_BASE_URL
-        },
+        }
       }
       try {
         forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
           localStorage.setItem("emailResetPassword", email)
-          sendEmailSuccess.value = true
+          sendEmailCode.value = 200
           isReset.value = true
         })
-      } catch {
-        sendEmailSuccess.value = false
+      } catch (error) {
+        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 {
+          sendEmailCode.value = 404
+        }
         isReset.value = true
       }
-    };
+    }
 
     onMounted(() => {
       appVersion.versionNumber = packageInfo.version
@@ -236,13 +270,17 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isReset,
-      sendEmailSuccess,
+      sendEmailCode,
       icons,
       appVersion,
       isOtp,
       goToOtpValidation,
       isSubmitBtnDisabled,
       retypeEmail,
+      msalLoading,
+      USE_SSO,
+      msalAuth,
+      MicrosoftLogo,
       handleSubmit,
       resetPassword
     }
@@ -264,4 +302,3 @@ export default defineComponent({
   display: none;
 }
 </style>
-

package/src/composables/auth.ts

@@ -61,7 +61,7 @@ export function useAuth() {
   const showPassword = ref(false)
   const forgottenPassword = ref(false)
   const isReset = ref(false)
-  const sendEmailSuccess = ref(false)
+  const sendEmailCode = ref(0)
   const emailResetPassword = ref("")
   const errorEmailMessage = ref("")
   const errorPasswordMessage = ref("")
@@ -227,7 +227,7 @@ export function useAuth() {
     forgottenPassword,
     emailResetPassword,
     isReset,
-    sendEmailSuccess,
+    sendEmailCode,
     authState,
     APP_SERVER_BASE_URL,
     WELCOME_TITLE,