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

package/package.json

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

@@ -39,8 +39,17 @@
               </q-input>
             </div>
             <div class="q-mx-lg q-mt-md input-container">
-              <div class="input-label">
-                {{ $t("auth.password") }}
+              <div class="row justify-between items-center no-wrap">
+                <div class="input-label" style="margin-bottom: 0">
+                  {{ $t("auth.password") }}
+                </div>
+                <div
+                  class="forgot-password-link"
+                  @click="openForgottenPassword"
+                  data-testid="ask-password-change-btn"
+                  data-cy="forgot-password">
+                  {{ $t("auth.forgottenPassword") }}
+                </div>
               </div>
               <q-input
                 data-cy="password"
@@ -86,19 +95,12 @@
                   </div>
                 </q-btn>
               </div>
-              <div
-                class="forgot-password-link self-start"
-                style="
-                  font-weight: 500;
-                  margin: 12px 0;
-                  text-decoration: underline;
-                "
-                @click="forgottenPassword = true"
-                data-testid="ask-password-change-btn"
-                data-cy="forgot-password">
-                {{ $t("auth.forgottenPassword") }}
-              </div>
               <template v-if="USE_SSO">
+                <div class="row items-center full-width q-mt-lg divider-row">
+                  <div class="divider-line"></div>
+                  <div class="divider-text">{{ $t("common.or") }}</div>
+                  <div class="divider-line"></div>
+                </div>
                 <div class="row justify-between full-width items-center q-mt-md">
                   <!-- <q-btn
                     data-testid="google-btn"
@@ -120,7 +122,7 @@
                     <img
                       src="../../assets/logo-microsoft.svg"
                       class="btn-icon" />
-                      {{ $t("auth.continueWithMicrosoft") }}
+                      {{ $t("auth.msalLogin") }}
                   </q-btn>
                 </div>
               </template>
@@ -161,8 +163,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 +270,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 +292,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 +355,9 @@ export default defineComponent({
       isMagicLinkEnabled,
       msalAuth,
       handleSubmit,
+      isResetRestricted,
+      openForgottenPassword,
+      closeForgottenPassword,
       resetPassword,
       goToPrivacyPolicy,
       goToFirstLogin
@@ -398,10 +421,29 @@ export default defineComponent({
 }
 
 .forgot-password-link {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   color: #001d3d;
+  text-decoration: underline;
+}
+
+.divider-row {
+  gap: 10px;
+}
+
+.divider-line {
+  flex: 1;
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+.divider-text {
+  font-size: 14px;
+  font-weight: 400;
+  color: #607680;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .q-separator {

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,