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

package/package.json

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

package/src/components/dialogs/Message.vue

@@ -38,7 +38,7 @@
         }}<strong>{{ messageSubtitleParts.bold }}</strong
         >{{ messageSubtitleParts.after }}
       </div>
-      <div v-if="isForbidden" class="forbidden-sso-section">
+      <div v-if="isForbidden && USE_SSO" class="forbidden-sso-section">
         <div class="forbidden-sso-label">{{ $t("auth.continueWith") }}</div>
         <q-btn
           data-testid="forbidden-sso-btn"
@@ -96,6 +96,7 @@
 <script lang="ts">
 import { defineComponent, computed } from "vue"
 import { useI18n } from "vue-i18n"
+import prompts from "app/quasar.extensions.json"
 
 const FORBIDDEN_MESSAGE_BOLD_KEYWORD = "Microsoft"
 
@@ -120,6 +121,9 @@ export default defineComponent({
   emit: ["retypeEmail", "goToLoginPage", "close", "msalAuth"],
   setup(props: any, { emit }: any) {
     const { t } = useI18n()
+    const {
+      "@sowell/auth": { USE_SSO }
+    } = prompts
 
     const isForbidden = computed(() => props.sendEmailCode === 403)
 
@@ -191,6 +195,7 @@ export default defineComponent({
       emailNotSend,
       emailSended,
       isForbidden,
+      USE_SSO,
       handlePasswordUpdate,
       retypeEmail,
       onMsalAuth

package/src/components/dialogs/SendEmail.vue

@@ -1,5 +1,67 @@
 <template>
   <div
+    v-if="restricted"
+    class="column items-center full-width restricted-page"
+    data-testid="ask-password-change-restricted"
+  >
+    <div class="background-logo-container">
+      <img
+        src="../../assets/Background-logo.svg"
+        class="background-logo"
+        alt="Background logo"
+      />
+    </div>
+    <div class="row justify-between items-center full-width q-px-lg q-pt-lg top-bar">
+      <div
+        class="row items-center back-link"
+        data-testid="restricted-back-btn"
+        data-cy="close_send_email"
+        @click="emit('close')"
+      >
+        <q-icon name="arrow_back" size="16px" />
+        <span class="q-ml-xs">{{ $t("auth.back") }}</span>
+      </div>
+      <img src="../../assets/sowell-min.svg" style="width: auto; height: 33px" />
+    </div>
+
+    <div class="full-width restricted-card">
+      <div class="column items-center">
+        <img src="../../assets/restricted.svg" class="restricted-badge" alt="" />
+        <div class="restricted-title text-center q-mt-md">
+          {{ $t("auth.restrictedTitle") }}
+        </div>
+        <div
+          class="restricted-subtitle text-center q-mt-sm"
+          data-testid="restricted-message"
+        >
+          {{ restrictedMessageParts.before
+          }}<strong>{{ restrictedMessageParts.bold }}</strong
+          >{{ restrictedMessageParts.after }}
+        </div>
+      </div>
+
+      <div v-if="USE_SSO" 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="restricted-sso-button"
+          @click="emit('msalAuth')"
+        >
+          <img src="../../assets/logo-microsoft.svg" class="btn-icon" />
+          {{ $t("auth.microsoft") }}
+        </q-btn>
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-else
     class="row justify-center full-height q-pl-sm q-pr-sm"
     style="background: #f4f5f6"
     data-testid="ask-password-change-form"
@@ -67,10 +129,10 @@
           data-cy="sendEmails"
           no-caps
           unelevated
+          :loading="loading"
           :label="$t('common.reset')"
           class="btn-min full-width"
           @click="sendEmail"
-          v-close-popup
         />
       </q-card-actions>
     </div>
@@ -80,24 +142,68 @@
 <script lang="ts">
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { defineComponent, ref } from "vue"
+import { computed, defineComponent, ref } from "vue"
+import { useI18n } from "vue-i18n"
+import prompts from "app/quasar.extensions.json"
 import {
   ionMailOutline,
   ionPaperPlaneOutline,
 } from "@quasar/extras/ionicons-v5"
 
+// Le message d'interdiction nomme "Microsoft" : il est mis en gras comme sur
+// l'ecran restricted du magic link (FirstLogin.vue).
+const RESTRICTED_MESSAGE_BOLD_KEYWORD = "Microsoft"
+
 export default defineComponent({
-  emit: ["resetPassword", "close"],
+  name: "SendEmail",
+  props: {
+    // Compte SSO uniquement (403) : l'ecran "Reinitialisation impossible" est
+    // rendu dans cette meme page, a la place du formulaire.
+    restricted: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    msalLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emit: ["resetPassword", "close", "msalAuth"],
   setup(props: any, { emit }: any) {
+    const { t } = useI18n()
+    const {
+      "@sowell/auth": { USE_SSO },
+    } = prompts
     const email = ref("")
     const sendEmail = () => {
       emit("resetPassword", email.value)
     }
 
+    const restrictedMessageParts = computed(() => {
+      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
+        )
+      }
+    })
+
     return {
       email,
       sendEmail,
       emit,
+      USE_SSO,
+      restrictedMessageParts,
       icons: {
         ionMailOutline,
         ionPaperPlaneOutline,
@@ -112,4 +218,97 @@ export default defineComponent({
     display: none;
   }
 }
+
+.restricted-page {
+  min-height: 100vh;
+  background: #fff;
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+.background-logo-container {
+  position: fixed;
+  top: -53px;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.25;
+  overflow: hidden;
+}
+
+.background-logo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  max-width: 100%;
+  max-height: 100vh;
+}
+
+.top-bar {
+  z-index: 1;
+  max-width: 430px;
+}
+
+.back-link {
+  cursor: pointer;
+  color: #00668a;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.restricted-card {
+  z-index: 1;
+  max-width: 398px;
+  padding: 32px 24px;
+  margin-top: 24px;
+}
+
+.restricted-badge {
+  width: 82px;
+  height: 82px;
+}
+
+.restricted-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #20627f;
+  line-height: 1.4;
+}
+
+.restricted-subtitle {
+  font-size: 14px;
+  font-weight: 400;
+  color: #3e484f;
+}
+
+.restricted-sso-section {
+  width: 100%;
+  margin-top: 40px;
+}
+
+.restricted-sso-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #112240;
+  margin-bottom: 12px;
+}
+
+.restricted-sso-button {
+  width: 180px;
+  height: 36px;
+  border-radius: 8px;
+  background: #ebeeef;
+  font-size: 12px;
+  font-weight: 600;
+  color: #112240;
+}
+
+.btn-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
 </style>

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>
@@ -276,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

@@ -85,7 +85,7 @@
             :disable="isSubmitBtnDisabled() || loading || msalLoading" />
           <div
             class="q-mb-lg q-mt-xl text-primary"
-            @click="forgottenPassword = true"
+            @click="openForgottenPassword"
             data-cy="forgot-password"
             data-testid="ask-password-change-btn"
             style="font-size: 16px; font-weight: 500; cursor: pointer">
@@ -143,7 +143,13 @@
           transition-hide="fade"
           persistent
           data-testid="ask-password-change-modal">
-          <send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
+          <send-email
+            :restricted="isResetRestricted"
+            :loading="loading"
+            :msal-loading="msalLoading"
+            @resetPassword="resetPassword"
+            @msalAuth="msalAuth"
+            @close="closeForgottenPassword" />
         </q-dialog>
         <q-dialog v-model="isReset" persistent>
           <sowell-message
@@ -170,7 +176,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted } from "vue"
+import { computed, defineComponent, reactive, onMounted } from "vue"
 import { AxiosError } from "axios"
 import * as packageInfo from "app/package.json"
 
@@ -210,6 +216,21 @@ export default defineComponent({
     const appVersion = reactive({
       versionNumber: ""
     })
+    // NOTE: 403 is returned when the company does not allow password reset
+    // (SSO-only account) - the "Reinitialisation impossible" screen is then
+    // rendered inside the email page itself, no extra dialog.
+    const isResetRestricted = computed(() => sendEmailCode.value === 403)
+
+    const openForgottenPassword = () => {
+      sendEmailCode.value = 0
+      forgottenPassword.value = true
+    }
+
+    const closeForgottenPassword = () => {
+      sendEmailCode.value = 0
+      forgottenPassword.value = false
+    }
+
     const resetPassword = async (email: string) => {
       const data = {
         auth: {
@@ -218,17 +239,19 @@ export default defineComponent({
         }
       }
       try {
-        forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
           sendEmailCode.value = 200
+          forgottenPassword.value = false
           isReset.value = true
         })
       } 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
+        if ((error as AxiosError).response?.status === 403) {
+          sendEmailCode.value = 403
+        } else {
+          sendEmailCode.value = 404
+          forgottenPassword.value = false
+          isReset.value = true
+        }
       }
     }
 
@@ -260,6 +283,9 @@ export default defineComponent({
       retypeEmail,
       msalAuth,
       handleSubmit,
+      isResetRestricted,
+      openForgottenPassword,
+      closeForgottenPassword,
       resetPassword,
       isMagicLinkEnabled,
       goToFirstLogin

package/src/components/pages/AuthReporter.vue

@@ -93,7 +93,7 @@
                   margin: 12px 0;
                   text-decoration: underline;
                 "
-                @click="forgottenPassword = true"
+                @click="openForgottenPassword"
                 data-testid="ask-password-change-btn"
                 data-cy="forgot-password">
                 {{ $t("auth.forgottenPassword") }}
@@ -161,8 +161,12 @@
           persistent
           data-testid="ask-password-change-modal">
           <send-email
+            :restricted="isResetRestricted"
+            :loading="loading"
+            :msal-loading="msalLoading"
             @resetPassword="resetPassword"
-            @close="() => (forgottenPassword = false)" />
+            @msalAuth="msalAuth"
+            @close="closeForgottenPassword" />
         </q-dialog>
         <q-dialog v-model="isReset" persistent>
           <sowell-message
@@ -264,6 +268,20 @@ export default defineComponent({
 
     const isOtp = computed(() => IS_OTP.toLowerCase() === "y")
 
+    // NOTE: 403 = compte SSO uniquement. L'ecran "Reinitialisation impossible"
+    // est alors rendu dans la page de saisie de l'email, sans modale.
+    const isResetRestricted = computed(() => sendEmailCode.value === 403)
+
+    const openForgottenPassword = () => {
+      sendEmailCode.value = 0
+      forgottenPassword.value = true
+    }
+
+    const closeForgottenPassword = () => {
+      sendEmailCode.value = 0
+      forgottenPassword.value = false
+    }
+
     const resetPassword = async (email: string) => {
       const data = {
         auth: {
@@ -272,20 +290,20 @@ export default defineComponent({
         }
       }
       try {
-        forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
           localStorage.set("emailResetPassword", email)
           sendEmailCode.value = 200
+          forgottenPassword.value = false
           isReset.value = true
         })
       } 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
+          forgottenPassword.value = false
+          isReset.value = true
         }
-        isReset.value = true
       }
     }
 
@@ -335,6 +353,9 @@ export default defineComponent({
       isMagicLinkEnabled,
       msalAuth,
       handleSubmit,
+      isResetRestricted,
+      openForgottenPassword,
+      closeForgottenPassword,
       resetPassword,
       goToPrivacyPolicy,
       goToFirstLogin

package/src/components/pages/FirstLogin.vue

@@ -44,7 +44,7 @@
             >{{ restrictedMessageParts.after }}
           </div>
         </div>
-        <div class="restricted-sso-section">
+        <div v-if="USE_SSO" class="restricted-sso-section">
           <div class="restricted-sso-label">{{ $t("auth.continueWith") }}</div>
           <q-btn
             data-testid="restricted-sso-btn"
@@ -311,7 +311,7 @@ export default defineComponent({
       openMailbox
     } = useMagicLink()
 
-    const { msalLoading, msalAuth } = useAuth()
+    const { msalLoading, msalAuth, USE_SSO } = useAuth()
 
     const icons = {
       ionWarningOutline,
@@ -376,6 +376,7 @@ export default defineComponent({
       restrictedMessageParts,
       msalLoading,
       msalAuth,
+      USE_SSO,
       isActivateContext,
       maskedEmail,
       icons,

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>
@@ -396,8 +400,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. */
+.custom-screen {
+  flex: none;
+}
+
 .bgWhite {
   background: #ffffff;
+  overflow-y: auto;
 }
 .bgBlue {
   background: var(--q-primary);
@@ -429,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;
 }