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

package/package.json

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