@sowell/quasar-app-extension-auth 1.11.0 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "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/SendEmail.vue

@@ -11,7 +11,7 @@
         alt="Background logo"
       />
     </div>
-    <div class="row justify-between items-center full-width q-px-lg q-pt-lg top-bar">
+    <div class="row justify-between items-center full-width q-px-lg top-bar">
       <div
         class="row items-center back-link"
         data-testid="restricted-back-btn"
@@ -62,7 +62,7 @@
 
   <div
     v-else
-    class="row justify-center full-height q-pl-sm q-pr-sm"
+    class="row justify-center full-height q-pl-sm q-pr-sm send-email-form"
     style="background: #f4f5f6"
     data-testid="ask-password-change-form"
   >
@@ -107,6 +107,9 @@
           <q-input
             data-testid="email-input"
             v-model="email"
+            type="email"
+            autocapitalize="off"
+            autocorrect="off"
             dense
             borderless
             bg-color="white"
@@ -119,7 +122,7 @@
           </q-input>
         </div>
       </q-card-section>
-      <q-space class="mobile" />
+      <q-space v-if="!keyboardOpen" class="mobile" />
       <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg row justify-center">
         <q-btn
           data-testid="submit-btn"
@@ -145,6 +148,7 @@
 import { computed, defineComponent, ref } from "vue"
 import { useI18n } from "vue-i18n"
 import prompts from "app/quasar.extensions.json"
+import { useKeyboardOpen } from "../../composables/useKeyboardOpen"
 import {
   ionMailOutline,
   ionPaperPlaneOutline,
@@ -179,6 +183,7 @@ export default defineComponent({
       "@sowell/auth": { USE_SSO },
     } = prompts
     const email = ref("")
+    const { keyboardOpen } = useKeyboardOpen()
     const sendEmail = () => {
       emit("resetPassword", email.value)
     }
@@ -200,6 +205,7 @@ export default defineComponent({
 
     return {
       email,
+      keyboardOpen,
       sendEmail,
       emit,
       USE_SSO,
@@ -247,9 +253,18 @@ export default defineComponent({
   max-height: 100vh;
 }
 
+/* Ce composant s'affiche dans un q-dialog. Sur iOS, Quasar (q-ios-padding)
+   décale déjà .q-dialog__inner sous la barre d'état : on ne lit donc PAS
+   env(), sinon le décalage serait doublé. --safe-area-inset-top n'est
+   injectée que par Capacitor SystemBars sur Android (edge-to-edge, 15+). */
 .top-bar {
   z-index: 1;
   max-width: 430px;
+  padding-top: calc(24px + var(--safe-area-inset-top, 0px));
+}
+
+.send-email-form {
+  padding-top: var(--safe-area-inset-top, 0px);
 }
 
 .back-link {

package/src/components/pages/FirstLogin.vue

@@ -8,7 +8,7 @@
         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 justify-between items-center full-width q-px-lg top-bar">
       <div
         class="row items-center back-link"
         data-testid="back-btn"
@@ -424,6 +424,11 @@ export default defineComponent({
 .top-bar {
   z-index: 1;
   max-width: 430px;
+  /* 24px = ancien q-pt-lg. Sur iOS (viewport-fit=cover), la page n'a pas de
+     q-header : le padding iOS de Quasar ne s'applique pas, on ajoute donc la
+     safe-area ici. --safe-area-inset-top est injectée par SystemBars sur
+     Android ; env() vaut 0 sur le web. */
+  padding-top: calc(24px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
 }
 
 .back-link {

package/src/components/pages/ResetPassword.vue

@@ -8,7 +8,7 @@
         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 justify-between items-center full-width q-px-lg top-bar">
       <div
         class="row items-center back-link"
         data-testid="back-btn"
@@ -317,6 +317,11 @@ export default defineComponent({
 .top-bar {
   z-index: 1;
   max-width: 430px;
+  /* 24px = ancien q-pt-lg. Sur iOS (viewport-fit=cover), la page n'a pas de
+     q-header : le padding iOS de Quasar ne s'applique pas, on ajoute donc la
+     safe-area ici. --safe-area-inset-top est injectée par SystemBars sur
+     Android ; env() vaut 0 sur le web. */
+  padding-top: calc(24px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
 }
 
 .back-link {

package/src/composables/useKeyboardOpen.ts

@@ -0,0 +1,55 @@
+import { ref, onMounted, onBeforeUnmount } from "vue"
+
+// Ecart minimal (px CSS) entre la fenetre de mise en page et la zone visible
+// pour conclure qu'un clavier virtuel est ouvert. Les barres d'URL ou de
+// navigation qui se replient restent largement en dessous.
+export const KEYBOARD_GAP_THRESHOLD = 150
+
+interface ViewportHost {
+  innerHeight: number
+  visualViewport?: {
+    height: number
+    addEventListener: (type: "resize", listener: () => void) => void
+    removeEventListener: (type: "resize", listener: () => void) => void
+  } | null
+}
+
+// Android 15+ edge-to-edge (WebView >= 140) : le clavier ne reduit que
+// visualViewport, innerHeight reste inchange. Sur iOS (Keyboard.resize native)
+// ou Android classique la WebView entiere retrecit : l'ecart reste nul et on
+// ne detecte rien, la mise en page suit deja le clavier.
+export const isKeyboardOpen = (host: ViewportHost): boolean => {
+  const viewport = host.visualViewport
+  if (!viewport) return false
+  return host.innerHeight - viewport.height > KEYBOARD_GAP_THRESHOLD
+}
+
+// Appelle `onChange` a chaque variation de l'etat (et une fois a l'initialisation),
+// rend la fonction de nettoyage. Sans visualViewport : etat false, rien a ecouter.
+export const observeKeyboard = (
+  host: ViewportHost,
+  onChange: (open: boolean) => void
+): (() => void) => {
+  const update = () => onChange(isKeyboardOpen(host))
+  update()
+  const viewport = host.visualViewport
+  if (!viewport) return () => undefined
+  viewport.addEventListener("resize", update)
+  return () => viewport.removeEventListener("resize", update)
+}
+
+export const useKeyboardOpen = () => {
+  const keyboardOpen = ref(false)
+  let stop: (() => void) | undefined
+  onMounted(() => {
+    if (typeof window === "undefined") return
+    stop = observeKeyboard(window, (open) => {
+      keyboardOpen.value = open
+    })
+  })
+  onBeforeUnmount(() => {
+    stop?.()
+    stop = undefined
+  })
+  return { keyboardOpen }
+}