@sowell/quasar-app-extension-auth 1.8.4 → 1.8.6

package/package.json

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

@@ -2,10 +2,12 @@
   <q-layout>
     <div class="row window-height">
       <div class="col column content-center bgWhite">
-        <div class="q-mt-xl">
+        <div class="q-mt-xl logo-block">
           <img src="../../assets/Sowell-logo.svg" style="width: 210px" />
         </div>
-        <div class="column col content-center justify-center center">
+        <div
+          class="column col content-center justify-center center"
+          :class="{ 'center-no-offset': isMagicLinkEnabled }">
           <div class="q-pl-md q-pr-md" style="max-width: 500px">
             <h4 class="title">{{ WELCOME_TITLE }}</h4>
             <div class="subtitle">{{ WELCOME_SUBTITLE }}</div>
@@ -114,6 +116,7 @@
           :content="infoDialog.content"
           :image="infoDialog.image"
           :isOtp="true"
+          :boldKeyword="infoDialog.isForbidden ? 'Microsoft' : ''"
         >
           <q-btn
             v-if="requestedOtp"
@@ -134,6 +137,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 +184,8 @@ export default defineComponent({
     const infoDialog = ref({
       title: "",
       content: "",
-      image: ""
+      image: "",
+      isForbidden: false
     })
 
     const submitBtnDisabled = computed(
@@ -204,6 +209,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 +221,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
         }
       }
@@ -260,8 +278,20 @@ export default defineComponent({
   margin-top: -115px;
 }
 
+/* Le bloc "Activer mon compte" (magiclink) rallonge la colonne : le decalage
+   negatif de recentrage faisait alors chevaucher le titre avec le logo. */
+.center-no-offset {
+  margin-top: 0;
+}
+
+/* Le logo ne doit jamais etre compresse ni recouvert quand la colonne deborde. */
+.logo-block {
+  flex: none;
+}
+
 .bgWhite {
   background: #ffffff;
+  overflow-y: auto;
 }
 .bgBlue {
   background: var(--q-primary);

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/WebAuth.vue

@@ -2,10 +2,14 @@
   <q-layout>
     <div class="row window-height">
       <div class="col column content-center bgWhite">
-        <div class="q-mt-xl custom-screen">
+        <div
+          class="q-mt-xl custom-screen"
+          :class="{ 'custom-screen-compact': isMagicLinkEnabled }">
           <img src="../../assets/Sowell-logo.svg" style="width: 210px" />
         </div>
-        <div class="column col content-center justify-center center">
+        <div
+          class="column col content-center justify-center center"
+          :class="{ 'center-no-offset': isMagicLinkEnabled }">
           <div class="q-pl-md q-pr-md" style="max-width: 500px">
             <h4 class="title">{{ WELCOME_TITLE }}</h4>
             <div class="subtitle">{{ WELCOME_SUBTITLE }}</div>
@@ -154,10 +158,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 +259,8 @@ export default defineComponent({
     const infoDialog = ref({
       title: "",
       content: "",
-      image: ""
+      image: "",
+      isForbidden: false
     })
 
     const isOtp = computed(() => IS_OTP.toLowerCase() === "y")
@@ -252,6 +286,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 +302,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,12 +368,52 @@ 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;
 }
 
+/* Le bloc "Activer mon compte" (magiclink) rallonge la colonne : le decalage
+   negatif de recentrage faisait alors chevaucher le titre avec le logo. */
+.center-no-offset {
+  margin-top: 0;
+}
+
+/* Le logo ne doit jamais etre compresse ni recouvert quand la colonne deborde. */
+.custom-screen {
+  flex: none;
+}
+
 .bgWhite {
   background: #ffffff;
+  overflow-y: auto;
 }
 .bgBlue {
   background: var(--q-primary);
@@ -368,6 +445,11 @@ export default defineComponent({
     margin-top: 15px;
     margin-bottom: 125px;
   }
+  /* Avec le bloc magiclink la colonne est bien plus haute : la grande marge
+     sous le logo ferait deborder le formulaire hors de l'ecran. */
+  .custom-screen-compact {
+    margin-bottom: 24px;
+  }
   .subtitle {
     margin-bottom: 20px !important;
 }

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: