@sowell/quasar-app-extension-auth 1.6.1 → 1.7.0

package/package.json

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

package/src/boot/router-guards.ts

@@ -23,6 +23,8 @@ export default boot(({ app, router }: BootInterface) => {
       to.path !== LOCAL_LOGIN_ROUTE &&
       to.name !== "update_password" &&
       to.name !== "otp_validation" &&
+      to.name !== "first_login" &&
+      to.name !== "set_password" &&
       // NOTE: msal hash token
       !to.fullPath.includes("code=")
     ) {

package/src/components/pages/AuthReporter.vue

@@ -93,7 +93,7 @@
                   margin: 12px 0;
                   text-decoration: underline;
                 "
-                @click="forgottenPassword = true"
+                @click="isMagicLinkEnabled ? goToForgotPassword() : (forgottenPassword = true)"
                 data-testid="ask-password-change-btn"
                 data-cy="forgot-password">
                 {{ $t("auth.forgottenPassword") }}
@@ -125,17 +125,30 @@
                 </div>
               </template>
             </div>
-            <div class="error-message-container">
-              <div
-                v-if="apiErrorMessage"
-                class="text-red column justify-center error_input">
+            <div v-if="apiErrorMessage" class="error-message-container">
+              <div class="text-red column justify-center error_input">
                 <ErrorMessage
                   :message="apiErrorMessage"
                   class="error-message-item" />
               </div>
-              <div v-else class="error-placeholder q-mt-sm"></div>
             </div>
           </q-form>
+          <div
+            v-if="isMagicLinkEnabled"
+            class="q-mx-lg first-login-block">
+            <div class="first-login-question">
+              {{ $t("auth.firstConnectionQuestion") }}
+            </div>
+            <q-btn
+              outline
+              no-caps
+              class="full-width first-login-button"
+              data-cy="activate-account"
+              data-testid="activate-account-btn"
+              @click="goToFirstLogin">
+              {{ $t("auth.activateAccount") }}
+            </q-btn>
+          </div>
         </div>
       </div>
       <div>
@@ -227,12 +240,15 @@ export default defineComponent({
       IS_OTP,
       icons,
       USE_SSO,
+      isMagicLinkEnabled,
       msalAuth,
       msalLoading,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
-      goToOtpValidation
+      goToOtpValidation,
+      goToFirstLogin,
+      goToForgotPassword
     } = useAuth()
 
     const { localStorage } = useQuasar()
@@ -315,10 +331,13 @@ export default defineComponent({
       retypeEmail,
       msalLoading,
       USE_SSO,
+      isMagicLinkEnabled,
       msalAuth,
       handleSubmit,
       resetPassword,
-      goToPrivacyPolicy
+      goToPrivacyPolicy,
+      goToFirstLogin,
+      goToForgotPassword
     }
   }
 })
@@ -379,7 +398,8 @@ export default defineComponent({
 }
 
 .forgot-password-link {
-  font-size: 10px;
+  font-size: 15px;
+  font-weight: 500;
   cursor: pointer;
   color: #001d3d;
 }
@@ -436,10 +456,6 @@ export default defineComponent({
   border: 1px solid #ff8b87 !important;
 }
 
-.error-placeholder {
-  min-height: 50px;
-}
-
 .error-message-container {
   margin: 24px;
 }
@@ -456,6 +472,27 @@ export default defineComponent({
   margin-bottom: 4px;
 }
 
+.first-login-block {
+  margin-top: 32px;
+}
+
+.first-login-question {
+  font-size: 15px;
+  font-weight: 500;
+  color: #001d3d;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+.first-login-button {
+  height: 65px;
+  border-radius: 10px;
+  border-color: #40c4ff;
+  color: #40c4ff;
+  font-size: 16px;
+  font-weight: 600;
+}
+
 @media (max-width: 389px) {
   .title {
     margin-top: 80px;
@@ -490,9 +527,5 @@ export default defineComponent({
     min-height: 50px;
     padding: 4px 12px;
   }
-
-  .error-placeholder {
-    min-height: 25px;
-  }
 }
 </style>