@sowell/quasar-app-extension-auth 1.8.3 → 1.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",

package/src/assets/restricted.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82" fill="none">
+  <path d="M20.467 13.2638C20.467 13.2638 32.783 22.7041 51.5063 5.05236C68.1346 -10.6241 81.7117 14.1097 81.8067 25.9544C81.9298 41.298 65.1784 53.5748 73.3078 63.6526C81.4372 73.7304 57.1861 90.3722 44.116 75.9698C27.8572 58.0538 23.4525 72.6106 14.185 72.6106C7.53374 72.6106 -6.12216 55.9168 3.09953 43.4971C10.8594 33.0461 6.6273 29.5776 4.57785 25.9544C1.62159 20.7288 8.64242 6.54534 20.467 13.2638Z" fill="#FFEFCF"/>
+  <path d="M63.1242 56.9728L44.1383 21.3586C42.7926 18.8336 39.2078 18.8336 37.861 21.3586L18.8762 56.9728C18.584 57.5209 18.4375 58.1363 18.4511 58.7587C18.4646 59.3811 18.6376 59.9894 18.9533 60.5241C19.269 61.0588 19.7165 61.5017 20.2522 61.8095C20.788 62.1174 21.3935 62.2797 22.0099 62.2806H59.9849C60.6017 62.2807 61.208 62.1191 61.7445 61.8116C62.281 61.5042 62.7293 61.0614 63.0457 60.5265C63.362 59.9916 63.5355 59.383 63.5493 58.7601C63.5631 58.1372 63.4166 57.5214 63.1242 56.9728V56.9728ZM41.0002 56.7669C40.5595 56.7669 40.1288 56.6349 39.7624 56.3876C39.396 56.1403 39.1104 55.7888 38.9418 55.3776C38.7732 54.9664 38.729 54.5139 38.815 54.0773C38.901 53.6408 39.1132 53.2397 39.4248 52.925C39.7364 52.6103 40.1333 52.3959 40.5655 52.3091C40.9977 52.2223 41.4457 52.2668 41.8528 52.4372C42.2599 52.6075 42.6079 52.896 42.8527 53.266C43.0975 53.6361 43.2282 54.0712 43.2282 54.5164C43.2282 54.8119 43.1706 55.1045 43.0586 55.3776C42.9466 55.6506 42.7825 55.8987 42.5756 56.1077C42.3687 56.3167 42.1231 56.4824 41.8528 56.5955C41.5825 56.7086 41.2928 56.7669 41.0002 56.7669ZM43.4198 34.1325L42.7804 47.8605C42.7804 48.338 42.5926 48.7959 42.2583 49.1336C41.924 49.4712 41.4707 49.6609 40.998 49.6609C40.5252 49.6609 40.0719 49.4712 39.7376 49.1336C39.4034 48.7959 39.2156 48.338 39.2156 47.8605L38.5761 34.1381C38.5618 33.8102 38.6129 33.4827 38.7265 33.1752C38.8401 32.8677 39.0138 32.5864 39.2373 32.3481C39.4608 32.1099 39.7295 31.9195 40.0274 31.7884C40.3253 31.6573 40.6463 31.5881 40.9712 31.5849H40.9946C41.3218 31.5847 41.6456 31.6515 41.9465 31.7812C42.2474 31.9109 42.5191 32.1009 42.7453 32.3396C42.9716 32.5783 43.1476 32.8608 43.2627 33.1701C43.3779 33.4794 43.4298 33.8091 43.4153 34.1392L43.4198 34.1325Z" fill="#FFBD3D"/>
+</svg>

package/src/components/dialogs/Message.vue

@@ -12,9 +12,13 @@
         src="../../assets/success.svg"
         style="width: 100px; height: 80px" />
       <img
-        v-if="emailNotSend"
+        v-if="emailNotSend && !isForbidden"
         src="../../assets/error.svg"
         style="width: 100px; height: 80px" />
+      <img
+        v-if="isForbidden"
+        src="../../assets/restricted.svg"
+        style="width: 82px; height: 82px" />
     </q-card-section>
 
     <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
@@ -30,7 +34,27 @@
         data-testid="message-dialog"
         class="text-subtitle1 q-mt-sm text-center"
         style="font-size: 16px; font-weight: 400">
-        {{ messageSubtitle }}
+        {{ messageSubtitleParts.before
+        }}<strong>{{ messageSubtitleParts.bold }}</strong
+        >{{ messageSubtitleParts.after }}
+      </div>
+      <div v-if="isForbidden" class="forbidden-sso-section">
+        <div class="forbidden-sso-label">{{ $t("auth.continueWith") }}</div>
+        <q-btn
+          data-testid="forbidden-sso-btn"
+          data-cy="submit-sso-login"
+          unelevated
+          no-caps
+          dense
+          :loading="msalLoading"
+          :disable="msalLoading"
+          class="forbidden-sso-button"
+          @click="onMsalAuth">
+          <img
+            src="../../assets/logo-microsoft.svg"
+            class="forbidden-sso-icon" />
+          {{ $t("auth.microsoft") }}
+        </q-btn>
       </div>
       <div
         class="q-mt-sm text-center q-mb-xl"
@@ -73,6 +97,8 @@
 import { defineComponent, computed } from "vue"
 import { useI18n } from "vue-i18n"
 
+const FORBIDDEN_MESSAGE_BOLD_KEYWORD = "Microsoft"
+
 export default defineComponent({
   props: {
     emailResetPassword: {
@@ -84,17 +110,22 @@ export default defineComponent({
     loading: {
       type: Boolean
     },
+    msalLoading: {
+      type: Boolean
+    },
     passwordUpdated: {
       type: Boolean
     }
   },
-  emit: ["retypeEmail", "goToLoginPage", "close"],
+  emit: ["retypeEmail", "goToLoginPage", "close", "msalAuth"],
   setup(props: any, { emit }: any) {
     const { t } = useI18n()
 
+    const isForbidden = computed(() => props.sendEmailCode === 403)
+
     const messageSubtitle = computed(() => {
       if (props.sendEmailCode === 403) {
-        return t("auth.forbidden.subtitle")
+        return t("auth.restrictedDescription")
       }
       return props.sendEmailCode === 200
         ? t("auth.emailSent")
@@ -104,7 +135,7 @@ export default defineComponent({
     })
     const messageTitle = computed(() => {
       if (props.sendEmailCode === 403) {
-        return t("auth.forbidden.title")
+        return t("auth.restrictedTitle")
       }
       return props.sendEmailCode === 200
         ? t("auth.emailVerification")
@@ -113,6 +144,23 @@ export default defineComponent({
         : t("auth.passwordChanged")
     })
 
+    // The forbidden message names "Microsoft" - it is emphasised the same way
+    // as on the magic link restricted screen.
+    const messageSubtitleParts = computed(() => {
+      const message = messageSubtitle.value
+      const keywordIndex = message.indexOf(FORBIDDEN_MESSAGE_BOLD_KEYWORD)
+      if (!isForbidden.value || keywordIndex === -1) {
+        return { before: message, bold: "", after: "" }
+      }
+      return {
+        before: message.slice(0, keywordIndex),
+        bold: FORBIDDEN_MESSAGE_BOLD_KEYWORD,
+        after: message.slice(
+          keywordIndex + FORBIDDEN_MESSAGE_BOLD_KEYWORD.length
+        )
+      }
+    })
+
     const emailNotSend = computed(
       () => props.sendEmailCode !== 200 && !props.passwordUpdated
     )
@@ -124,6 +172,10 @@ export default defineComponent({
       emit("retypeEmail")
     }
 
+    const onMsalAuth = () => {
+      emit("msalAuth")
+    }
+
     const handlePasswordUpdate = () => {
       if (props.passwordUpdated) {
         emit("goToLoginPage")
@@ -134,12 +186,49 @@ export default defineComponent({
 
     return {
       messageSubtitle,
+      messageSubtitleParts,
       messageTitle,
       emailNotSend,
       emailSended,
+      isForbidden,
       handlePasswordUpdate,
-      retypeEmail
+      retypeEmail,
+      onMsalAuth
     }
   }
 })
 </script>
+
+<style scoped lang="scss">
+.forbidden-sso-section {
+  margin-top: 24px;
+  text-align: center;
+}
+
+.forbidden-sso-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: #112240;
+  margin-bottom: 12px;
+}
+
+.forbidden-sso-button {
+  width: 180px;
+  height: 36px;
+  border-radius: 8px;
+  background: #ebeeef;
+  font-size: 12px;
+  font-weight: 600;
+  color: #112240;
+}
+
+.forbidden-sso-button:hover {
+  background: #e0e5e7;
+}
+
+.forbidden-sso-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+</style>

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

@@ -29,7 +29,8 @@
         class="text-subtitle1 q-mt-sm text-center text-dark"
         data-testid="message-dialog"
       >
-        {{ content }}
+        {{ contentParts.before
+        }}<strong>{{ contentParts.bold }}</strong>{{ contentParts.after }}
       </div>
     </q-card-section>
     <q-card-actions class="row full-width justify-center q-mb-lg">
@@ -56,6 +57,7 @@ import { defineComponent, computed } from "vue";
 import userNotFound from "../../assets/User-not-found.svg";
 import passwordUpdated from "../../assets/Ok-illustration.svg";
 import emailVerification from "../../assets/Email-sent.svg";
+import restricted from "../../assets/restricted.svg";
 import { ionCloseOutline } from "@quasar/extras/ionicons-v5";
 
 export default defineComponent({
@@ -66,6 +68,9 @@ export default defineComponent({
     image: { type: String, required: true },
     passwordUpdated: { type: Boolean },
     isOtp: { type: Boolean, default: false, required: false },
+    // Emphasises one word of `content` - used to bold "Microsoft" on the
+    // restricted / SSO-only message, like the magic link screens do.
+    boldKeyword: { type: String, default: "", required: false },
   },
   emit: ["goToLoginPage", "close"],
   setup(props: any) {
@@ -79,12 +84,29 @@ export default defineComponent({
 
         case "emailVerification":
           return emailVerification;
+
+        case "restricted":
+          return restricted;
         default: 
           return null
       }
     })
 
-    return { imageValue, icons: { ionCloseOutline } };
+    const contentParts = computed(() => {
+      const content = props.content as string;
+      const keyword = props.boldKeyword as string;
+      const keywordIndex = keyword ? content.indexOf(keyword) : -1;
+      if (keywordIndex === -1) {
+        return { before: content, bold: "", after: "" };
+      }
+      return {
+        before: content.slice(0, keywordIndex),
+        bold: keyword,
+        after: content.slice(keywordIndex + keyword.length),
+      };
+    });
+
+    return { imageValue, contentParts, icons: { ionCloseOutline } };
   },
 });
 </script>

package/src/components/pages/AdminAuth.vue

@@ -114,6 +114,7 @@
           :content="infoDialog.content"
           :image="infoDialog.image"
           :isOtp="true"
+          :boldKeyword="infoDialog.isForbidden ? 'Microsoft' : ''"
         >
           <q-btn
             v-if="requestedOtp"
@@ -134,6 +135,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue"
+import { AxiosError } from "axios"
 import { useI18n } from "vue-i18n"
 import isEmail from "validator/es/lib/isEmail"
 import { useAuthState } from "../../injects"
@@ -180,7 +182,8 @@ export default defineComponent({
     const infoDialog = ref({
       title: "",
       content: "",
-      image: ""
+      image: "",
+      isForbidden: false
     })
 
     const submitBtnDisabled = computed(
@@ -204,6 +207,7 @@ export default defineComponent({
           await authState.resetPassword(data).then(() => {
             localStorage.setItem("emailResetPassword", email)
             infoDialog.value = {
+              isForbidden: false,
               title: t("auth.mailVerificationTitle"),
               content:
                 IS_OTP.toLowerCase() === "y"
@@ -215,13 +219,25 @@ export default defineComponent({
             isNotification.value = true
             requestedOtp.value = true
           })
-        } catch {
+        } catch (error) {
           requestedOtp.value = false
-          infoDialog.value = {
-            title: t("auth.userNotFoundTitle"),
-            content: t("auth.userNotFoundSubtitle"),
-            image: "userNotFound"
-          }
+          // NOTE: 403 is returned when the company does not allow password reset
+          // (SSO-only account). The admin interface has no SSO entry point, so we
+          // only tell the user to reach out to their organisation.
+          infoDialog.value =
+            (error as AxiosError).response?.status === 403
+              ? {
+                  isForbidden: true,
+                  title: t("auth.restrictedTitle"),
+                  content: t("auth.restrictedDescription"),
+                  image: "restricted"
+                }
+              : {
+                  isForbidden: false,
+                  title: t("auth.userNotFoundTitle"),
+                  content: t("auth.userNotFoundSubtitle"),
+                  image: "userNotFound"
+                }
           isNotification.value = true
         }
       }

package/src/components/pages/Auth.vue

@@ -150,7 +150,9 @@
             :emailResetPassword="emailResetPassword"
             :sendEmailCode="sendEmailCode"
             :loading="loading"
-            @retypeEmail="retypeEmail" 
+            :msalLoading="msalLoading"
+            @retypeEmail="retypeEmail"
+            @msalAuth="msalAuth"
             @close="() => isReset= false"/>
         </q-dialog>
       </div>
@@ -169,6 +171,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive, onMounted } from "vue"
+import { AxiosError } from "axios"
 import * as packageInfo from "app/package.json"
 
 import SendEmail from "../dialogs/SendEmail.vue"
@@ -220,8 +223,11 @@ export default defineComponent({
           sendEmailCode.value = 200
           isReset.value = true
         })
-      } catch {
-        sendEmailCode.value = 404
+      } catch (error) {
+        // NOTE: 403 is returned when the company does not allow password reset
+        // (SSO-only account) - the dialog then offers the Microsoft login instead.
+        sendEmailCode.value =
+          (error as AxiosError).response?.status === 403 ? 403 : 404
         isReset.value = true
       }
     }

package/src/components/pages/AuthReporter.vue

@@ -169,7 +169,9 @@
             :emailResetPassword="emailResetPassword"
             :sendEmailCode="sendEmailCode"
             :loading="loading"
+            :msalLoading="msalLoading"
             @retypeEmail="retypeEmail"
+            @msalAuth="msalAuth"
             @close="() => (isReset = false)">
             <q-btn
               v-if="sendEmailCode === 200 && isOtp"

package/src/components/pages/FirstLogin.vue

@@ -23,28 +23,43 @@
       <template v-if="restricted">
         <div class="column items-center header-section">
           <div class="restricted-badge">
-            <svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82" fill="none" class="restricted-blob">
-              <path d="M20.467 13.2638C20.467 13.2638 32.783 22.7041 51.5063 5.05236C68.1346 -10.6241 81.7117 14.1097 81.8067 25.9544C81.9298 41.298 65.1784 53.5748 73.3078 63.6526C81.4372 73.7304 57.1861 90.3722 44.116 75.9698C27.8572 58.0538 23.4525 72.6106 14.185 72.6106C7.53374 72.6106 -6.12216 55.9168 3.09953 43.4971C10.8594 33.0461 6.6273 29.5776 4.57785 25.9544C1.62159 20.7288 8.64242 6.54534 20.467 13.2638Z" fill="#FFEFCF"/>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="82"
+              height="82"
+              viewBox="0 0 82 82"
+              fill="none">
+              <path
+                d="M20.467 13.2638C20.467 13.2638 32.783 22.7041 51.5063 5.05236C68.1346 -10.6241 81.7117 14.1097 81.8067 25.9544C81.9298 41.298 65.1784 53.5748 73.3078 63.6526C81.4372 73.7304 57.1861 90.3722 44.116 75.9698C27.8572 58.0538 23.4525 72.6106 14.185 72.6106C7.53374 72.6106 -6.12216 55.9168 3.09953 43.4971C10.8594 33.0461 6.6273 29.5776 4.57785 25.9544C1.62159 20.7288 8.64242 6.54534 20.467 13.2638Z"
+                fill="#FFEFCF" />
+              <path
+                d="M63.1242 56.9728L44.1383 21.3586C42.7926 18.8336 39.2078 18.8336 37.861 21.3586L18.8762 56.9728C18.584 57.5209 18.4375 58.1363 18.4511 58.7587C18.4646 59.3811 18.6376 59.9894 18.9533 60.5241C19.269 61.0588 19.7165 61.5017 20.2522 61.8095C20.788 62.1174 21.3935 62.2797 22.0099 62.2806H59.9849C60.6017 62.2807 61.208 62.1191 61.7445 61.8116C62.281 61.5042 62.7293 61.0614 63.0457 60.5265C63.362 59.9916 63.5355 59.383 63.5493 58.7601C63.5631 58.1372 63.4166 57.5214 63.1242 56.9728V56.9728ZM41.0002 56.7669C40.5595 56.7669 40.1288 56.6349 39.7624 56.3876C39.396 56.1403 39.1104 55.7888 38.9418 55.3776C38.7732 54.9664 38.729 54.5139 38.815 54.0773C38.901 53.6408 39.1132 53.2397 39.4248 52.925C39.7364 52.6103 40.1333 52.3959 40.5655 52.3091C40.9977 52.2223 41.4457 52.2668 41.8528 52.4372C42.2599 52.6075 42.6079 52.896 42.8527 53.266C43.0975 53.6361 43.2282 54.0712 43.2282 54.5164C43.2282 54.8119 43.1706 55.1045 43.0586 55.3776C42.9466 55.6506 42.7825 55.8987 42.5756 56.1077C42.3687 56.3167 42.1231 56.4824 41.8528 56.5955C41.5825 56.7086 41.2928 56.7669 41.0002 56.7669ZM43.4198 34.1325L42.7804 47.8605C42.7804 48.338 42.5926 48.7959 42.2583 49.1336C41.924 49.4712 41.4707 49.6609 40.998 49.6609C40.5252 49.6609 40.0719 49.4712 39.7376 49.1336C39.4034 48.7959 39.2156 48.338 39.2156 47.8605L38.5761 34.1381C38.5618 33.8102 38.6129 33.4827 38.7265 33.1752C38.8401 32.8677 39.0138 32.5864 39.2373 32.3481C39.4608 32.1099 39.7295 31.9195 40.0274 31.7884C40.3253 31.6573 40.6463 31.5881 40.9712 31.5849H40.9946C41.3218 31.5847 41.6456 31.6515 41.9465 31.7812C42.2474 31.9109 42.5191 32.1009 42.7453 32.3396C42.9716 32.5783 43.1476 32.8608 43.2627 33.1701C43.3779 33.4794 43.4298 33.8091 43.4153 34.1392L43.4198 34.1325Z"
+                fill="#FFBD3D" />
             </svg>
-            <div class="restricted-circle">
-              <q-icon name="lock" size="24px" color="white" />
-            </div>
           </div>
           <div class="title text-center q-mt-md">{{ $t("auth.restrictedTitle") }}</div>
-          <div class="subtitle text-center q-mt-sm">
-            {{ restrictedMessage || $t("auth.restrictedDescription") }}
+          <div class="subtitle text-center q-mt-sm" data-testid="restricted-message">
+            {{ restrictedMessageParts.before
+            }}<strong>{{ restrictedMessageParts.bold }}</strong
+            >{{ restrictedMessageParts.after }}
           </div>
         </div>
-        <q-btn
-          data-testid="restricted-back-btn"
-          color="primary"
-          unelevated
-          no-caps
-          text-color="white"
-          class="full-width q-mt-lg submit-button"
-          @click="goBackToLogin">
-          {{ $t("auth.backToLoginFull") }}
-        </q-btn>
+        <div class="restricted-sso-section">
+          <div class="restricted-sso-label">{{ $t("auth.continueWith") }}</div>
+          <q-btn
+            data-testid="restricted-sso-btn"
+            data-cy="submit-sso-login"
+            unelevated
+            no-caps
+            dense
+            :loading="msalLoading"
+            :disable="msalLoading"
+            class="sso-btn restricted-sso-button"
+            @click="msalAuth">
+            <img src="../../assets/logo-microsoft.svg" class="btn-icon" />
+            {{ $t("auth.microsoft") }}
+          </q-btn>
+        </div>
       </template>
 
       <template v-else-if="step === 'email'">
@@ -260,6 +275,15 @@ import {
   ionInformationCircleOutline
 } from "@quasar/extras/ionicons-v5"
 import { useMagicLink } from "composables/useMagicLink"
+import { useAuth } from "composables/auth"
+
+interface RestrictedMessageParts {
+  before: string
+  bold: string
+  after: string
+}
+
+const RESTRICTED_MESSAGE_BOLD_KEYWORD = "Microsoft"
 
 export default defineComponent({
   name: "FirstLogin",
@@ -277,7 +301,6 @@ export default defineComponent({
       isLoading,
       resendCountdown,
       restricted,
-      restrictedMessage,
       isActivateContext,
       maskedEmail,
       requestChannels,
@@ -288,11 +311,28 @@ export default defineComponent({
       openMailbox
     } = useMagicLink()
 
+    const { msalLoading, msalAuth } = useAuth()
+
     const icons = {
       ionWarningOutline,
       ionInformationCircleOutline
     }
 
+    const restrictedMessageParts = computed<RestrictedMessageParts>(() => {
+      const message = t("auth.restrictedDescription")
+      const keywordIndex = message.indexOf(RESTRICTED_MESSAGE_BOLD_KEYWORD)
+      if (keywordIndex === -1) {
+        return { before: message, bold: "", after: "" }
+      }
+      return {
+        before: message.slice(0, keywordIndex),
+        bold: RESTRICTED_MESSAGE_BOLD_KEYWORD,
+        after: message.slice(
+          keywordIndex + RESTRICTED_MESSAGE_BOLD_KEYWORD.length
+        )
+      }
+    })
+
     const translateOrFallback = (key: string, fallbackKey: string): string =>
       te(key) ? t(key) : t(fallbackKey)
 
@@ -333,7 +373,9 @@ export default defineComponent({
       isLoading,
       resendCountdown,
       restricted,
-      restrictedMessage,
+      restrictedMessageParts,
+      msalLoading,
+      msalAuth,
       isActivateContext,
       maskedEmail,
       icons,
@@ -448,26 +490,6 @@ export default defineComponent({
   height: 82px;
 }
 
-.restricted-blob {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.restricted-circle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 45px;
-  height: 45px;
-  border-radius: 9999px;
-  background: #ffce6e;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .title {
   font-size: 24px;
   font-weight: 600;
@@ -529,6 +551,39 @@ export default defineComponent({
   font-weight: 500;
 }
 
+.restricted-sso-section {
+  width: 100%;
+  margin-top: 40px;
+}
+
+.restricted-sso-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #112240;
+  margin-bottom: 12px;
+}
+
+.sso-btn {
+  font-size: 14px;
+  border-radius: 8px;
+  height: 50px;
+  font-weight: 600;
+  background: #ebeeef;
+  color: #112240;
+}
+
+.btn-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+
+.restricted-sso-button {
+  width: 180px;
+  height: 36px;
+  font-size: 12px;
+}
+
 .resend-button {
   border-radius: 15px;
   height: 56px;

package/src/components/pages/WebAuth.vue

@@ -154,10 +154,39 @@
           :content="infoDialog.content"
           :image="infoDialog.image"
           :isOtp="isOtp"
+          :boldKeyword="infoDialog.isForbidden ? 'Microsoft' : ''"
           @close="() => (isNotification = false)">
+          <div v-if="infoDialog.isForbidden" class="column items-center">
+            <div class="forbidden-sso-label">{{ $t("auth.connectWith") }}</div>
+            <q-btn
+              data-testid="forbidden-sso-btn"
+              data-cy="submit-sso-login"
+              unelevated
+              no-caps
+              dense
+              :loading="msalLoading"
+              :disable="msalLoading"
+              class="forbidden-sso-button"
+              @click="msalAuth">
+              <img
+                src="../../assets/logo-microsoft.svg"
+                class="forbidden-sso-icon" />
+              {{ $t("auth.microsoft") }}
+            </q-btn>
+            <q-btn
+              data-testid="close-btn"
+              class="bg-white submitBtn q-mt-md"
+              unelevated
+              outline
+              no-caps
+              :label="$t('auth.close')"
+              color="primary"
+              @click="() => (isNotification = false)"
+              v-close-popup />
+          </div>
           <q-btn
             :data-testid="infoDialog.canGoNext ? 'next-btn' : 'close-btn'"
-            v-if="isOtp"
+            v-else-if="isOtp"
             class="bg-white submitBtn"
             unelevated
             outline
@@ -226,7 +255,8 @@ export default defineComponent({
     const infoDialog = ref({
       title: "",
       content: "",
-      image: ""
+      image: "",
+      isForbidden: false
     })
 
     const isOtp = computed(() => IS_OTP.toLowerCase() === "y")
@@ -252,6 +282,7 @@ export default defineComponent({
             localStorage.setItem("emailResetPassword", email)
             infoDialog.value = {
               canGoNext: true,
+              isForbidden: false,
               title: t("auth.mailVerificationTitle"),
               content:
                 IS_OTP.toLowerCase() === "y"
@@ -267,13 +298,15 @@ export default defineComponent({
             // 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"
+              isForbidden: true,
+              title: t("auth.restrictedTitle"),
+              content: t("auth.restrictedDescription"),
+              image: "restricted"
             }
           } else {
             infoDialog.value = {
               canGoNext: false,
+              isForbidden: false,
               title: t("auth.userNotFoundTitle"),
               content: t("auth.userNotFoundSubtitle"),
               image: "userNotFound"
@@ -331,6 +364,34 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.forbidden-sso-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: #112240;
+  margin-bottom: 12px;
+}
+
+.forbidden-sso-button {
+  width: 260px;
+  max-width: 100%;
+  height: 36px;
+  border-radius: 8.85px;
+  background: #ebeeef;
+  font-size: 15px;
+  font-weight: 600;
+  color: #112240;
+}
+
+.forbidden-sso-button:hover {
+  background: #e0e5e7;
+}
+
+.forbidden-sso-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
 .center {
   margin-top: -115px;
 }

package/src/components/pages/WebFirstLogin.vue

@@ -14,9 +14,17 @@
         <template v-if="restricted">
           <div class="forbidden-content" data-testid="magic-link-forbidden">
             <div class="warning-icon-outer">
-              <svg width="32" height="30" viewBox="0 0 32 30" fill="none">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="82"
+                height="82"
+                viewBox="0 0 82 82"
+                fill="none">
                 <path
-                  d="M31.33 26.0414L18.0152 1.31484C17.0714 -0.438281 14.5574 -0.438281 13.6128 1.31484L0.298773 26.0414C0.0938612 26.422 -0.00887221 26.8492 0.000600544 27.2814C0.0100733 27.7135 0.131429 28.1358 0.352821 28.507C0.574214 28.8783 0.888079 29.1858 1.26378 29.3995C1.63948 29.6133 2.06418 29.7259 2.49643 29.7266H29.1285C29.561 29.7266 29.9862 29.6144 30.3625 29.401C30.7387 29.1875 31.0531 28.8801 31.275 28.5087C31.4968 28.1374 31.6185 27.7148 31.6282 27.2823C31.6378 26.8499 31.5351 26.4223 31.33 26.0414V26.0414ZM15.8144 25.8984C15.5054 25.8984 15.2033 25.8068 14.9463 25.6351C14.6894 25.4634 14.4891 25.2194 14.3708 24.9339C14.2526 24.6484 14.2216 24.3342 14.2819 24.0311C14.3422 23.728 14.491 23.4496 14.7095 23.2311C14.9281 23.0126 15.2065 22.8638 15.5096 22.8035C15.8127 22.7432 16.1268 22.7741 16.4123 22.8924C16.6978 23.0106 16.9419 23.2109 17.1136 23.4679C17.2853 23.7248 17.3769 24.0269 17.3769 24.3359C17.3769 24.5411 17.3365 24.7443 17.258 24.9339C17.1794 25.1235 17.0643 25.2957 16.9193 25.4408C16.7742 25.5859 16.6019 25.701 16.4123 25.7795C16.2228 25.858 16.0196 25.8984 15.8144 25.8984ZM17.5113 10.1836L17.0628 19.7148C17.0628 20.0464 16.9311 20.3643 16.6967 20.5987C16.4623 20.8331 16.1444 20.9648 15.8128 20.9648C15.4813 20.9648 15.1634 20.8331 14.929 20.5987C14.6945 20.3643 14.5628 20.0464 14.5628 19.7148L14.1144 10.1875C14.1043 9.95983 14.1402 9.73247 14.2198 9.51896C14.2995 9.30545 14.4213 9.11017 14.5781 8.94475C14.7348 8.77933 14.9233 8.64716 15.1322 8.55612C15.3411 8.46508 15.5662 8.41703 15.7941 8.41484H15.8105C16.0399 8.41473 16.267 8.46109 16.478 8.55114C16.689 8.6412 16.8796 8.77307 17.0383 8.9388C17.1969 9.10454 17.3204 9.3007 17.4011 9.51545C17.4819 9.73019 17.5183 9.95908 17.5081 10.1883L17.5113 10.1836Z"
+                  d="M20.467 13.2638C20.467 13.2638 32.783 22.7041 51.5063 5.05236C68.1346 -10.6241 81.7117 14.1097 81.8067 25.9544C81.9298 41.298 65.1784 53.5748 73.3078 63.6526C81.4372 73.7304 57.1861 90.3722 44.116 75.9698C27.8572 58.0538 23.4525 72.6106 14.185 72.6106C7.53374 72.6106 -6.12216 55.9168 3.09953 43.4971C10.8594 33.0461 6.6273 29.5776 4.57785 25.9544C1.62159 20.7288 8.64242 6.54534 20.467 13.2638Z"
+                  fill="#FFEFCF" />
+                <path
+                  d="M63.1242 56.9728L44.1383 21.3586C42.7926 18.8336 39.2078 18.8336 37.861 21.3586L18.8762 56.9728C18.584 57.5209 18.4375 58.1363 18.4511 58.7587C18.4646 59.3811 18.6376 59.9894 18.9533 60.5241C19.269 61.0588 19.7165 61.5017 20.2522 61.8095C20.788 62.1174 21.3935 62.2797 22.0099 62.2806H59.9849C60.6017 62.2807 61.208 62.1191 61.7445 61.8116C62.281 61.5042 62.7293 61.0614 63.0457 60.5265C63.362 59.9916 63.5355 59.383 63.5493 58.7601C63.5631 58.1372 63.4166 57.5214 63.1242 56.9728V56.9728ZM41.0002 56.7669C40.5595 56.7669 40.1288 56.6349 39.7624 56.3876C39.396 56.1403 39.1104 55.7888 38.9418 55.3776C38.7732 54.9664 38.729 54.5139 38.815 54.0773C38.901 53.6408 39.1132 53.2397 39.4248 52.925C39.7364 52.6103 40.1333 52.3959 40.5655 52.3091C40.9977 52.2223 41.4457 52.2668 41.8528 52.4372C42.2599 52.6075 42.6079 52.896 42.8527 53.266C43.0975 53.6361 43.2282 54.0712 43.2282 54.5164C43.2282 54.8119 43.1706 55.1045 43.0586 55.3776C42.9466 55.6506 42.7825 55.8987 42.5756 56.1077C42.3687 56.3167 42.1231 56.4824 41.8528 56.5955C41.5825 56.7086 41.2928 56.7669 41.0002 56.7669ZM43.4198 34.1325L42.7804 47.8605C42.7804 48.338 42.5926 48.7959 42.2583 49.1336C41.924 49.4712 41.4707 49.6609 40.998 49.6609C40.5252 49.6609 40.0719 49.4712 39.7376 49.1336C39.4034 48.7959 39.2156 48.338 39.2156 47.8605L38.5761 34.1381C38.5618 33.8102 38.6129 33.4827 38.7265 33.1752C38.8401 32.8677 39.0138 32.5864 39.2373 32.3481C39.4608 32.1099 39.7295 31.9195 40.0274 31.7884C40.3253 31.6573 40.6463 31.5881 40.9712 31.5849H40.9946C41.3218 31.5847 41.6456 31.6515 41.9465 31.7812C42.2474 31.9109 42.5191 32.1009 42.7453 32.3396C42.9716 32.5783 43.1476 32.8608 43.2627 33.1701C43.3779 33.4794 43.4298 33.8091 43.4153 34.1392L43.4198 34.1325Z"
                   fill="#FFBD3D" />
               </svg>
             </div>
@@ -28,6 +36,25 @@
               }}<strong>{{ forbiddenMessageParts.bold }}</strong
               >{{ forbiddenMessageParts.after }}
             </p>
+
+            <div class="forbidden-sso-section">
+              <p class="forbidden-sso-label">{{ $t("auth.connectWith") }}</p>
+              <q-btn
+                data-testid="forbidden-sso-btn"
+                data-cy="submit-sso-login"
+                unelevated
+                no-caps
+                dense
+                :loading="msalLoading"
+                :disable="msalLoading"
+                class="forbidden-sso-button"
+                @click="msalAuth">
+                <img
+                  src="../../assets/logo-microsoft.svg"
+                  class="forbidden-sso-icon" />
+                {{ $t("auth.microsoft") }}
+              </q-btn>
+            </div>
           </div>
 
           <a
@@ -293,6 +320,7 @@ import {
 } from "@quasar/extras/ionicons-v5"
 
 import { useMagicLink } from "composables/useMagicLink"
+import { useAuth } from "composables/auth"
 
 type Channel = "email" | "sms"
 
@@ -328,7 +356,6 @@ export default defineComponent({
       isLoading,
       resendCountdown,
       restricted,
-      restrictedMessage,
       isActivateContext,
       maskedEmail,
       requestChannels,
@@ -338,6 +365,8 @@ export default defineComponent({
       goBackToLogin
     } = useMagicLink()
 
+    const { msalLoading, msalAuth } = useAuth()
+
     const icons = {
       ionArrowBackOutline,
       ionCheckmarkCircle,
@@ -410,7 +439,7 @@ export default defineComponent({
     )
 
     const forbiddenMessageParts = computed<ForbiddenMessageParts>(() => {
-      const message = restrictedMessage.value || t("auth.restrictedDescription")
+      const message = t("auth.restrictedDescription")
       const keywordIndex = message.indexOf(FORBIDDEN_MESSAGE_BOLD_KEYWORD)
       if (keywordIndex === -1) {
         return { before: message, bold: "", after: "" }
@@ -433,6 +462,8 @@ export default defineComponent({
       isLoading,
       resendCountdown,
       restricted,
+      msalLoading,
+      msalAuth,
       icons,
       stepTitle,
       stepDescription,
@@ -809,10 +840,8 @@ export default defineComponent({
 }
 
 .warning-icon-outer {
-  width: 96px;
-  height: 96px;
-  border-radius: 9999px;
-  background: rgba(255, 189, 61, 0.27);
+  width: 82px;
+  height: 82px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -837,6 +866,43 @@ export default defineComponent({
   text-align: center;
 }
 
+.forbidden-sso-section {
+  width: 100%;
+  margin-top: 8px;
+  text-align: left;
+}
+
+.forbidden-sso-label {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.5em;
+  color: #001d3d;
+  margin: 0 0 12px 0;
+}
+
+.forbidden-sso-button {
+  display: flex;
+  width: 260px;
+  max-width: 100%;
+  height: 36px;
+  margin: 0 auto;
+  border-radius: 8.85px;
+  background: #ebeeef;
+  font-size: 15px;
+  font-weight: 600;
+  color: #112240;
+}
+
+.forbidden-sso-button:hover {
+  background: #e0e5e7;
+}
+
+.forbidden-sso-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
 @media screen and (max-width: 768px) {
   .login-card {
     padding: 32px 24px;

package/src/i18n/en-US/index.ts

@@ -49,6 +49,11 @@ export default {
     back: "Back",
     backToLoginFull: "Back to login",
     continueWith: "Or continue with",
+    connectWith: "Sign in with",
+    microsoft: "Microsoft",
+    restrictedTitle: "Reset unavailable",
+    restrictedDescription:
+      "Your account uses Microsoft login. You are not allowed to manage your password. To change it, contact your administrator.",
     emailOrPasswordIncorrect: "Email or password incorrect",
     magicLinkCheckSmsMessage: "Check your text messages",
     magicLinkWarningSms:

package/src/i18n/fr-FR/index.ts

@@ -52,6 +52,11 @@ export default {
     back: "Retour",
     backToLoginFull: "Retour à la connexion",
     continueWith: "Ou continuer avec",
+    connectWith: "Se connecter avec",
+    microsoft: "Microsoft",
+    restrictedTitle: "Réinitialisation impossible",
+    restrictedDescription:
+      "Votre compte utilise la connexion Microsoft. La gestion de votre mot de passe vous est interdite. Pour le modifier, contactez votre administrateur.",
     emailOrPasswordIncorrect: "Email ou mot de passe incorrect",
     magicLinkCheckSmsMessage: "Vérifiez vos messages",
     magicLinkWarningSms: