@sowell/quasar-app-extension-auth 0.3.11 → 0.3.13

package/package.json

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

@@ -1,7 +1,7 @@
 <template>
   <q-card>
     <q-page class="row bg-white">
-      <div class="col-6 q-pa-xl row justify-center">
+      <div class="col-6 q-pa-xl row justify-center center">
         <div class="left-side full-width full-height">
           <img
             class="logo"
@@ -115,6 +115,16 @@ export default defineComponent({
   max-width: 500px;
 }
 .illustration {
-  width: 600px;
+  max-width: 600px;
+  width: 100%;
+}
+
+@media screen and (max-width: 900px) {
+  .bg-image {
+    display: none;
+  }
+  .center{
+    width: 100%;
+  }
 }
 </style>

package/src/components/dialogs/sw-info-dialog.vue

@@ -72,7 +72,7 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="sass">
+<style scoped lang="sass">
 .top
   background: #EEF8FD
 

package/src/components/pages/Auth.vue

@@ -126,12 +126,21 @@
         </q-dialog>
       </div>
     </q-page>
+    <q-footer class="footer">
+      <q-toolbar>
+        <q-toolbar-title>
+          <div class="row justify-end text-black text-subtitle2">
+            v{{ appVersion.versionNumber }}
+          </div>
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-footer>
   </q-layout>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-
+import { defineComponent, reactive, onMounted } from "vue";
+import * as packageInfo from "app/package.json";
 import SendEmail from "../dialogs/SendEmail.vue";
 import SowellMessage from "../dialogs/Message.vue";
 import { useAuth } from "composables/auth";
@@ -158,6 +167,9 @@ export default defineComponent({
       icons,
     } = useAuth();
 
+    const appVersion = reactive({
+      versionNumber: "",
+    });
     const resetPassword = async (email: string) => {
       const data = {
         auth: {
@@ -177,6 +189,10 @@ export default defineComponent({
       }
     };
 
+    onMounted(() => {
+      appVersion.versionNumber = packageInfo.version;
+    });
+
     return {
       email,
       password,
@@ -192,9 +208,14 @@ export default defineComponent({
       isSubmitBtnDisabled,
       retypeEmail,
       icons,
+      appVersion,
     };
   },
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.footer {
+  background: transparent;
+}
+</style>

package/src/components/pages/WebAuth.vue

@@ -6,11 +6,10 @@
           <img
             src="../../assets/Sowell-logo.svg"
             style="width: 210px"
-            class="logoWhite"
           />
         </div>
-        <div class="column col content-center justify-center bgWhite">
-          <div style="max-width: 500px">
+        <div class="column col content-center justify-center center" >
+          <div class="q-pl-md q-pr-md" style="max-width: 500px">
             <h4 class="title">{{ WELCOME_TITLE }}</h4>
             <div class="subtitle">{{ WELCOME_SUBTITLE }}</div>
             <q-form @submit="onSubmit">
@@ -44,7 +43,7 @@
                   <template #append>
                     <q-icon
                       :name="
-                        showPassword ? icons.ionEyeSharp : icons.ionEyeOffSharp
+                        showPassword ? icons.ionEyeOffSharp : icons.ionEyeSharp
                       "
                       class="cursor-pointer q-mr-sm lightenDark"
                       @click="showPassword = !showPassword"
@@ -78,16 +77,16 @@
         </div>
       </div>
       <div
-        class="column col justify-center content-center"
+        class="column col justify-center content-center mobile"
         :style="isManager ? 'background: #eef8fd' : ''"
         :class="!isManager ? 'bgBlue' : ''"
       >
         <img
           v-if="isManager"
           src="../../assets/illustration-login.svg"
-          style="width: 600px"
+          class="q-pl-md q-pr-md logoWhite"
         />
-        <img v-else src="../../assets/SowellWhite.svg" class="logoWhite" />
+        <img v-else src="../../assets/SowellWhite.svg" class="q-pl-md q-pr-md logoWhite" />
       </div>
     </div>
     <div>
@@ -221,6 +220,11 @@ export default defineComponent({
 </script>
 
 <style scoped>
+
+.center {
+  margin-top: -115px;
+}
+
 .bgWhite {
   background: #ffffff;
 }
@@ -237,9 +241,16 @@ export default defineComponent({
   margin-bottom: 80px;
 }
 .logoWhite {
-  width: 30%;
+  max-width: 600px;
+  width: 100%;
 }
 .submitBtn {
   width: 254px;
 }
+
+@media screen and (max-width: 900px) {
+  .mobile {
+    display: none;
+  }
+}
 </style>