@sowell/quasar-app-extension-auth 1.2.4 → 1.4.0

package/package.json

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

package/src/assets/Background-logo.svg

@@ -0,0 +1,9 @@
+<svg width="363" height="609" viewBox="0 0 363 609" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M253.737 41.1186C242.82 17.5919 227.714 -0.175668 199.279 13.0581C172.748 25.4341 179.349 47.3679 189.124 68.5664C201.31 94.9114 212.608 121.624 226.191 152.625C162.974 145.273 111.816 153.973 67.1331 187.793C45.8069 203.845 33.6205 230.68 48.0918 248.57C62.5632 266.46 90.6172 268.543 113.974 250.163C125.145 241.341 138.982 234.234 152.819 230.067C195.344 217.446 232.792 228.229 261.607 260.088C289.535 290.967 294.612 327.238 274.936 363.998C254.626 401.984 220.351 419.506 176.176 417.178C120.575 414.36 82.8738 376.497 80.7158 318.415C79.5733 289.007 70.1797 270.504 41.237 272.219C12.2943 273.935 2.90064 302.24 1.12346 319.885C-1.28843 343.902 4.93171 373.433 18.6414 393.406C68.6564 465.579 123.368 534.689 178.969 608.7C228.222 546.82 272.524 489.719 318.35 433.72C367.35 374.046 375.601 310.45 344.246 240.85C329.013 206.908 257.672 49.696 253.737 41.1186ZM334.98 195.39C334.98 195.39 328.76 73.8354 326.729 33.7665C323.809 -23.7024 253.61 3.01024 267.574 38.1777C277.729 63.4199 334.98 195.39 334.98 195.39Z" fill="url(#paint0_linear_668_51249)"/>
+<defs>
+<linearGradient id="paint0_linear_668_51249" x1="9.99766" y1="531.332" x2="-55.5835" y2="-268.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#41C4FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/google-logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M15.754 7.37086H15.1499V7.33777H8.3999V10.5267H12.6385C12.0202 12.383 10.3585 13.7156 8.3999 13.7156C5.91478 13.7156 3.8999 11.5738 3.8999 8.93223C3.8999 6.29062 5.91478 4.14887 8.3999 4.14887C9.54703 4.14887 10.5907 4.60887 11.3853 5.36025L13.5067 3.1053C12.1672 1.77831 10.3754 0.959961 8.3999 0.959961C4.25803 0.959961 0.899902 4.52954 0.899902 8.93223C0.899902 13.3349 4.25803 16.9045 8.3999 16.9045C12.5418 16.9045 15.8999 13.3349 15.8999 8.93223C15.8999 8.39769 15.8482 7.8759 15.754 7.37086Z" fill="#FFC107"/>
+  <path d="M8.40002 16.9045C10.3373 16.9045 12.0975 16.1164 13.4284 14.8349L11.1071 12.747C10.3288 13.3761 9.37782 13.7164 8.40002 13.7156C6.44927 13.7156 4.79289 12.3934 4.16889 10.5482L1.72314 12.5512C2.96439 15.1331 5.48515 16.9045 8.40002 16.9045Z" fill="#4CAF50"/>
+  <path d="M15.754 7.37085H15.1499V7.33777H8.3999V10.5267H12.6385C12.3427 11.4102 11.8099 12.1822 11.1059 12.7473L11.107 12.7466L13.4283 14.8345C13.264 14.9931 15.8999 12.9184 15.8999 8.93222C15.8999 8.39768 15.8482 7.8759 15.754 7.37085Z" fill="#1976D2"/>
+  <path d="M1.76465 5.22154L4.22877 7.14245C4.89552 5.38776 6.51027 4.14887 8.3999 4.14887C9.54702 4.14887 10.5906 4.60887 11.3853 5.36025L13.5066 3.1053C12.1671 1.77831 10.3754 0.959961 8.3999 0.959961C5.51915 0.959961 3.0209 2.68875 1.76465 5.22154Z" fill="#FF3D00"/>
+</svg>

package/src/assets/sowell-min.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="125" height="30" viewBox="0 0 125 30" fill="none">
+  <path d="M12.6499 2.01303C12.1043 0.852947 11.3494 -0.0231562 9.92835 0.62939C8.60246 1.23964 8.93235 2.32118 9.42083 3.36646C10.0299 4.66551 10.5945 5.98268 11.2733 7.51133C8.11398 7.14881 5.55736 7.5778 3.32428 9.24541C2.25849 10.0369 1.64947 11.3601 2.37269 12.2423C3.0959 13.1244 4.49791 13.2272 5.6652 12.3208C6.22347 11.8858 6.91497 11.5354 7.60646 11.3299C9.73169 10.7076 11.6032 11.2393 13.0432 12.8102C14.4389 14.3329 14.6927 16.1213 13.7094 17.9339C12.6943 19.807 10.9814 20.671 8.77375 20.5562C5.99509 20.4172 4.11093 18.5502 4.00308 15.6863C3.94599 14.2362 3.47654 13.3238 2.03011 13.4084C0.583686 13.493 0.114233 14.8887 0.0254171 15.7588C-0.0951182 16.943 0.215736 18.3992 0.900885 19.384C3.40041 22.9428 6.13466 26.3506 8.91332 30C11.3748 26.9487 13.5888 24.1331 15.879 21.3719C18.3278 18.4294 18.7401 15.2935 17.1732 11.8616C16.4119 10.188 12.8466 2.43598 12.6499 2.01303ZM16.7101 9.62002C16.7101 9.62002 16.3992 3.62627 16.2977 1.6505C16.1518 -1.18324 12.6436 0.133938 13.3414 1.86802C13.8489 3.11269 16.7101 9.62002 16.7101 9.62002Z" fill="#40C4FF"/>
+  <path d="M124.948 7.89416C125.227 5.35044 124.358 3.24175 122.899 2.7765C121.212 2.23876 119.334 3.35655 118.014 5.85193C115.565 10.4923 114.741 15.483 114.81 20.6249C114.836 22.3952 113.18 24.1897 111.391 24.1957C110.033 24.2018 109.177 23.1082 109.71 21.9722C109.945 21.4707 110.357 21.0478 110.674 20.5765C113.472 16.4437 115.902 12.1538 116.035 7.0966C116.079 5.38065 116.06 3.33842 113.808 2.79463C111.569 2.25688 110.357 3.85804 109.336 5.46524C109.107 5.82172 108.923 6.20237 108.739 6.58302C106.639 10.9756 105.764 15.6341 105.935 20.4013C106.011 22.4254 104.844 23.1142 103.417 23.809C101.812 24.5885 100.162 25.0235 98.5508 23.5613C99.9402 22.8846 101.304 22.3831 102.465 21.6037C104.172 20.4557 104.698 18.1295 103.842 16.5646C103.004 15.042 101.05 14.6432 98.7983 15.2111C97.1108 15.6341 95.3154 15.6945 93.241 15.9543C93.6279 14.4377 93.9324 13.4468 94.1164 12.4318C94.3004 11.4046 94.44 10.3593 94.459 9.32009C94.5161 6.58907 93.4249 5.01812 91.3631 4.71602C88.8636 4.34745 86.6813 5.76734 85.9961 8.32315C85.0636 11.7853 85.7805 14.8124 89.0032 17.199C88.2356 18.4437 87.6012 19.7004 86.7384 20.8001C85.717 22.1052 84.7337 23.9661 82.6782 23.4344C80.5974 22.9027 80.6291 20.8545 80.6609 19.217C80.737 15.187 81.0542 11.1629 81.143 7.1389C81.1557 6.48031 80.8829 4.98791 79.1447 5.01812C77.4064 5.04833 77.2605 7.33224 77.1209 7.79748C75.8902 11.7913 74.8308 15.8516 73.3145 19.7427C72.7436 21.2109 70.9038 23.4526 69.9522 23.3196C67.7826 23.0236 67.8651 20.5584 67.8905 18.8183C67.9412 14.9997 68.3345 11.1871 68.417 7.36245C68.4297 6.61928 68.0744 5.14501 66.6597 5.14501C64.8707 5.14501 64.433 6.74012 64.3949 7.28995C64.1475 10.7521 63.9318 15.3743 63.6908 18.9693C62.4727 19.7367 61.2356 19.8213 59.9859 19.8273C60.0493 16.3168 57.9495 15.1507 55.894 14.9211C53.7498 14.6855 51.9925 15.4528 50.711 17.0721C49.3153 18.8364 48.9093 20.8484 49.3597 23.0054C49.7784 25.0114 50.9077 26.4917 53.0836 26.9509C55.3802 27.4343 57.5815 26.8361 58.5775 24.8422C59.085 23.8332 59.656 22.1898 59.656 22.1898C59.656 22.1898 61.1722 22.4194 62.6123 22.0206C63.4751 21.7789 64.2681 21.3076 64.2681 21.3076C64.2681 21.3076 64.6994 22.794 64.9405 23.4465C66.5202 27.6699 70.1235 28.3648 73.3526 25.0416C73.9934 24.383 74.5453 23.6278 75.0211 22.8483C75.7126 21.7124 76.3026 20.5161 77.0385 19.1445C77.4001 20.7215 77.6094 22.0387 78.0091 23.2955C79.2842 27.3014 82.4562 28.395 85.8756 25.7365C87.8105 24.2259 89.5424 22.2743 90.7732 20.2079C91.8897 18.3349 92.9935 17.9059 95.0046 18.7518C94.4463 21.4224 93.9261 24.3045 96.8063 26.0627C100.334 28.2198 103.664 26.9449 106.709 24.8181C109.418 27.8995 111.271 27.9056 115.603 24.9147C117.995 27.2409 120.431 27.7424 122.525 26.2923C123.705 25.4706 124.282 24.4797 123.191 23.1082C122.861 23.223 122.569 23.2713 122.341 23.4103C121.256 24.0809 120.114 24.7335 118.978 23.6519C117.703 22.4314 118.953 21.501 119.594 20.5584C122.246 16.6612 124.428 12.5949 124.948 7.89416ZM55.6085 23.8876C55.2596 24.2199 53.8639 24.1051 53.4072 23.7063C51.6562 22.1837 52.6396 18.6551 54.7204 17.8878C54.5174 19.072 54.8726 20.2805 56.4967 21.217C56.8139 22.1233 56.1858 23.3377 55.6085 23.8876ZM90.3544 14.613C88.1721 12.6372 88.2736 10.7823 88.7114 8.95757C88.8319 8.45607 89.295 7.53767 90.1514 7.68873C91.0142 7.83978 91.1221 8.66755 91.0967 9.12675C90.9952 10.8064 90.6653 12.468 90.3544 14.613ZM98.0497 18.8485C98.4747 17.7609 99.9402 16.9271 100.962 17.3923C101.983 17.8576 101.215 19.3318 100.435 20.0871C99.6547 20.8424 97.8023 21.6097 97.8023 21.6097C97.8023 21.6097 97.5231 20.1959 98.0497 18.8485ZM112.698 5.36252C114.963 5.38669 111.854 13.9665 109.501 17.8455C109.672 13.4771 110.896 5.33835 112.698 5.36252ZM118.357 17.8757C117.805 15.5918 119.759 5.35648 121.56 5.38669C123.362 5.41086 120.729 13.9846 118.357 17.8757ZM42.0198 26.7515C45.1917 25.9963 47.0188 24.1172 47.2535 21.5493C47.5009 18.8847 46.34 17.2232 43.1617 15.8033C41.4425 15.0359 39.6535 14.3955 37.966 13.5677C36.3229 12.7641 35.6504 11.4288 36.3736 9.72491C37.0017 8.23856 39.8121 7.51351 42.2672 7.97875C44.2465 8.35336 44.8492 9.41072 44.7096 11.2717C44.6588 11.9122 45.528 12.613 45.9847 13.2837C46.7016 12.7399 47.8245 12.317 48.0592 11.6221C48.9664 8.92736 47.6913 6.48031 44.7794 5.70088C42.8635 5.1873 40.7256 5.09063 38.7336 5.25376C35.2317 5.54378 32.8147 7.6706 32.3579 10.3956C31.8631 13.2958 33.2968 15.3803 36.8938 16.9513C38.5559 17.6763 40.2815 18.2866 41.8929 19.0962C43.3774 19.8454 43.9483 21.0961 43.1426 22.6127C42.3306 24.1474 39.2157 24.7274 36.2721 24.1293C34.2103 23.7124 33.8424 22.5402 33.9566 20.7578C33.9946 20.2019 33.1509 19.1385 32.6497 19.1083C32.0026 19.066 30.9686 19.6642 30.6641 20.2502C29.6427 22.226 30.6514 25.0235 32.8147 25.9842C34.4324 26.7032 36.2721 26.9811 37.6234 27.3557C39.4251 27.1201 40.751 27.0536 42.0198 26.7515Z" fill="#40C4FF"/>
+</svg>

package/src/assets/warning.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M4.01096 20.918H19.9888C20.2483 20.9179 20.5033 20.8506 20.729 20.7224C20.9547 20.5943 21.1433 20.4099 21.2763 20.1871C21.4094 19.9643 21.4824 19.7108 21.4881 19.4513C21.4939 19.1919 21.4323 18.9354 21.3092 18.7069L13.3208 3.87094C12.7541 2.81906 11.2456 2.81906 10.6789 3.87094L2.69049 18.7069C2.56747 18.9354 2.50583 19.1919 2.5116 19.4513C2.51737 19.7108 2.59035 19.9643 2.7234 20.1871C2.85646 20.4099 3.04504 20.5943 3.27072 20.7224C3.4964 20.8506 3.75146 20.9179 4.01096 20.918V20.918Z" stroke="#EF476F" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M11.7306 9.15929L11.9997 14.878L12.2683 9.16163C12.27 9.12509 12.2642 9.08859 12.2512 9.05437C12.2383 9.02015 12.2185 8.98892 12.1931 8.9626C12.1677 8.93627 12.1372 8.9154 12.1035 8.90127C12.0698 8.88713 12.0335 8.88003 11.9969 8.88038V8.88038C11.961 8.88074 11.9255 8.88828 11.8925 8.90258C11.8595 8.91688 11.8297 8.93765 11.8049 8.96364C11.7801 8.98964 11.7607 9.02035 11.748 9.05395C11.7352 9.08755 11.7293 9.12337 11.7306 9.15929V9.15929Z" stroke="#EF476F" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 18.6211C11.8146 18.6211 11.6333 18.5661 11.4792 18.4631C11.325 18.3601 11.2048 18.2137 11.1339 18.0424C11.0629 17.8711 11.0443 17.6826 11.0805 17.5007C11.1167 17.3188 11.206 17.1518 11.3371 17.0207C11.4682 16.8896 11.6352 16.8003 11.8171 16.7641C11.999 16.7279 12.1875 16.7465 12.3588 16.8175C12.5301 16.8884 12.6765 17.0086 12.7795 17.1627C12.8825 17.3169 12.9375 17.4982 12.9375 17.6836C12.9375 17.9322 12.8387 18.1707 12.6629 18.3465C12.4871 18.5223 12.2486 18.6211 12 18.6211Z" fill="#EF476F"/>
+</svg>

package/src/components/ErrorMessage.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="error-message-item">
+    <q-icon :name="icon" class="q-mr-xs" size="16px"/>
+    {{ message }}
+  </div>
+</template>
+
+<script lang="ts">
+import { ionWarningOutline } from "@quasar/extras/ionicons-v5"
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "ErrorMessage",
+  props: {
+    message: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      default: ionWarningOutline
+    }
+  }
+})
+</script>
+
+<style scoped>
+.error-message-item {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: #EF476F;
+}
+</style>

package/src/components/pages/AuthReporter.vue

@@ -1,25 +1,25 @@
 <template>
-  <q-layout class="column justify-end items-center q-pb-lg">
-    <div>
+  <q-layout
+    class="column justify-start items-center q-pb-lg bg-white"
+    style="min-height: 100vh; max-width: 100vw; overflow-x: hidden">
+    <div class="background-logo-container">
+      <img
+        src="../../assets/Background-logo.svg"
+        class="background-logo"
+        alt="Background logo" />
+    </div>
+    <div class="row self-start">
+      <img src="../../assets/sowell-min.svg" class="sowell-logo" />
+    </div>
+    <div class="title text-uppercase self-start q-mx-lg">
+      {{ $t("auth.subtitle") }}
+    </div>
+    <div class="full-width">
       <div class="column">
-        <div class="column justify-center" style="height: 35vh">
-          <div class="row justify-center">
-            <img
-              src="../../assets/Logo.svg"
-              class="q-mb-sm q-mr-md"
-              style="width: 27px; height: 47px" />
-            <img
-              src="../../assets/Sowell.svg"
-              class="q-mb-sm"
-              style="width: 146px; height: 38px" />
-          </div>
-        </div>
         <div class="login-page">
           <q-form @submit="handleSubmit">
-            <div>
-              <div
-                class="q-ml-xs q-mb-xs"
-                style="font-size: 14px; font-weight: 600">
+            <div style="margin-top: 20px" class="q-mx-lg input-container">
+              <div class="input-label">
                 {{ $t("auth.email") }}
               </div>
               <q-input
@@ -27,18 +27,20 @@
                 v-model.trim="email"
                 type="email"
                 borderless
+                dense
                 :rules="validations['email']"
+                placeholder="Yourname@gmail.com"
                 lazy-rules
-                :input-style="{ fontSize: '14px', fontWeight: '500' }">
+                class="q-px-none q-mt-sm"
+                :class="{ 'input-error': errorEmailMessage }"
+                :input-style="{ fontSize: '13px', fontWeight: '500' }">
                 <template #prepend>
-                  <q-icon :name="icons.ionMailOutline" />
+                  <q-icon :name="icons.ionMailOutline" color="#7E868E" />
                 </template>
               </q-input>
             </div>
-            <div>
-              <div
-                class="q-ml-xs q-mb-xs"
-                style="font-size: 14px; font-weight: 600">
+            <div class="q-mx-lg q-mt-md input-container">
+              <div class="input-label">
                 {{ $t("auth.password") }}
               </div>
               <q-input
@@ -46,10 +48,13 @@
                 v-model="password"
                 :type="showPassword ? 'text' : 'password'"
                 :rules="validations['password']"
+                placeholder="********"
                 lazy-rules
                 borderless
                 dense
-                :input-style="{ fontSize: '14px', fontWeight: '600' }">
+                class="q-px-none q-mt-sm"
+                :class="{ 'input-error': errorPasswordMessage }"
+                :input-style="{ fontSize: '13px', fontWeight: '500' }">
                 <template #prepend>
                   <q-icon :name="icons.ionLockClosedOutline" />
                 </template>
@@ -65,72 +70,82 @@
                 </template>
               </q-input>
             </div>
-            <div
-              v-if="errorEmailMessage || errorPasswordMessage"
-              class="q-pl-sm text-red column justify-center error_input">
-              <div>{{ errorEmailMessage }}</div>
-              <div>{{ errorPasswordMessage }}</div>
-            </div>
-            <div class="column items-center q-mt-lg">
+
+            <div class="column items-center q-mx-lg button-container">
               <div class="full-width">
                 <q-btn
                   data-cy="submit-login"
                   color="primary"
                   unelevated
+                  no-caps
                   text-color="white"
                   :loading="loading"
                   type="submit"
-                  class="full-width q-mt-lg"
+                  class="full-width q-mt-md login-button"
                   :disable="isSubmitBtnDisabled()">
-                  <div style="font-weight: 600; font-size: 16px">
+                  <div style="font-weight: 500; font-size: 18px">
                     {{ $t("auth.login") }}
                   </div>
                 </q-btn>
               </div>
               <div
-                class="q-mb-xl q-mt-lg text-primary text-center"
+                class="forgot-password-link self-start"
+                style="font-weight: 500; margin: 12px 0"
                 @click="forgottenPassword = true"
                 data-testid="ask-password-change-btn"
-                data-cy="forgot-password"
-                style="font-size: 14px; cursor: pointer; width: 350px">
+                data-cy="forgot-password">
                 {{ $t("auth.forgottenPassword") }}
               </div>
-              <div v-if="USE_SSO">
-                <div
-                  style="
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                  ">
-                  <div
-                    style="
-                      width: 35%;
-                      border: 1px solid #bcc3c7;
-                      height: 1px;
-                    "></div>
-                  <div class="text-weight-bold">{{ $t("common.or") }}</div>
-                  <div
-                    style="
-                      width: 35%;
-                      border: 1px solid #bcc3c7;
-                      height: 1px;
-                    "></div>
-                </div>
-                <q-btn
-                  data-cy="submit-sso-login"
-                  :label="$t('auth.msalLogin')"
-                  color="primary"
+              <div class="full-width">
+                <q-separator color="#727272" />
+              </div>
+              <div
+                class="q-mb-sm q-mt-md forgot-password-link self-start text-weight-medium">
+                {{ $t("auth.continueWith") }}
+              </div>
+
+              <div class="row justify-between full-width items-center">
+                <!-- <q-btn
+                  data-testid="google-btn"
+                  unelevated
                   no-caps
+                  dense
+                  class="col sso-btn btn-label"
+                  style="margin-right: 4px !important;">
+                  <img src="../../assets/google-logo.svg" class="btn-icon" />
+                  Google
+                </q-btn> -->
+                <q-btn
+                  data-testid="microsoft-button"
                   unelevated
-                  text-color="black"
-                  :loading="msalLoading"
-                  :disable="msalLoading || loading"
-                  :icon="`img:${MicrosoftLogo}`"
-                  class="full-width q-mt-lg"
-                  @click="msalAuth"
-                  outline />
+                  no-caps
+                  dense
+                  class="col sso-btn btn-label"
+                  @click="msalAuth">
+                  <img src="../../assets/logo-microsoft.svg" class="btn-icon" />
+                  Microsoft
+                </q-btn>
               </div>
             </div>
+            <div class="error-message-container">
+              <div
+                v-if="errorEmailMessage || errorPasswordMessage"
+                class="text-red column justify-center error_input">
+                <ErrorMessage
+                  v-if="errorEmailMessage && !errorPasswordMessage"
+                  :message="errorEmailMessage"
+                  class="error-message-item" />
+                <ErrorMessage
+                  v-if="errorPasswordMessage && !errorEmailMessage"
+                  :message="errorPasswordMessage"
+                  class="error-message-item" />
+                <ErrorMessage
+                  v-if="errorEmailMessage && errorPasswordMessage"
+                  :message="$t('auth.emailOrPasswordIncorrect')"
+                  class="error-message-item" />
+              </div>
+              <div v-else class="error-placeholder q-mt-sm"></div>
+            </div>
           </q-form>
         </div>
       </div>
@@ -170,15 +185,14 @@
         </q-dialog>
       </div>
     </div>
-    <q-footer class="footer">
-      <q-toolbar>
-        <q-toolbar-title>
-          <div class="row justify-end text-black text-subtitle2 version-style">
-            v{{ appVersion.versionNumber }}
-          </div>
-        </q-toolbar-title>
-      </q-toolbar>
-    </q-footer>
+    <div class="row justify-between full-width items-center q-px-md q-mt-auto">
+      <div class="row justify-end footer-text" @click="goToPrivacyPolicy" style="cursor: pointer">
+        {{ $t("common.privacyPolicy") }}
+      </div>
+      <div class="row justify-end footer-text">
+        {{ `VERSION ${appVersion.versionNumber}` }}
+      </div>
+    </div>
   </q-layout>
 </template>
 
@@ -187,14 +201,13 @@ import { defineComponent, reactive, onMounted, computed } from "vue"
 import * as packageInfo from "app/package.json"
 import SendEmail from "../dialogs/SendEmail.vue"
 import SowellMessage from "../dialogs/Message.vue"
+import ErrorMessage from "../ErrorMessage.vue"
 import { useAuth } from "composables/auth"
 import { AxiosError } from "axios"
-import MicrosoftLogo from "../../assets/logo-microsoft.svg"
-import { useQuasar } from "quasar"
 
 export default defineComponent({
   name: "Auth",
-  components: { SendEmail, SowellMessage },
+  components: { SendEmail, SowellMessage, ErrorMessage },
   setup() {
     const {
       email,
@@ -221,8 +234,6 @@ export default defineComponent({
       goToOtpValidation
     } = useAuth()
 
-    const { localStorage } = useQuasar()
-
     const handleSubmit = () => {
       onSubmit()
     }
@@ -258,12 +269,14 @@ export default defineComponent({
       }
     }
 
+    const goToPrivacyPolicy = () => {
+      window.open("https://sowell.app/privacy-policy-sowell/", "_blank")
+    }
+
     onMounted(() => {
       appVersion.versionNumber = packageInfo.version
-      if (localStorage.has("lastUser")) {
-        const lastUserEmail = localStorage.getItem("lastUser")
-        email.value = lastUserEmail
-      }
+      const lastUserEmail = localStorage.getItem("lastUser")
+      if (lastUserEmail) email.value = lastUserEmail
     })
 
     return {
@@ -287,25 +300,171 @@ export default defineComponent({
       msalLoading,
       USE_SSO,
       msalAuth,
-      MicrosoftLogo,
       handleSubmit,
-      resetPassword
+      resetPassword,
+      goToPrivacyPolicy
     }
   }
 })
 </script>
 
 <style>
-.footer {
-  background: transparent;
+.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;
+}
+
+.sowell-logo {
+  padding: 40px 0 0 20px;
+}
+
+.title {
+  margin-top: 120px;
+  font-size: 36px;
+  font-weight: 700;
+
+  color: #41c4ff;
+  line-height: normal;
+  z-index: 1;
+}
+
+div.q-field__control {
+  padding: 0;
+  border: 1px solid #d5d7da;
+}
+
+.q-field--with-bottom {
+  padding-bottom: 0;
 }
+
+.login-button {
+  border-radius: 15px;
+  height: 50px;
+}
+
+.forgot-password-link {
+  font-size: 10px;
+  cursor: pointer;
+  color: #001d3d;
+}
+
+.q-separator {
+  height: 1px;
+  background-color: #e5e7eb;
+  opacity: 1;
+}
+
+.btn-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.btn-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+
+.sso-btn {
+  background: #ebeeef;
+  color: #112240;
+  height: 36px;
+}
+
 .error_input {
-  height: 48px;
-  border-radius: 4px;
-  background: #fce4e3;
+  min-height: 50px;
+  border-radius: 11px;
+  background: #fbd9e1;
+  padding: 6px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .login-page .q-field__messages {
   display: none;
 }
+
+.login-page .q-field--error .q-field__append .q-icon:not(.cursor-pointer) {
+  display: none;
+}
+
+.input-error .q-field__control {
+  border: 1px solid #ff8b87 !important;
+}
+
+.error-placeholder {
+  min-height: 50px;
+}
+
+.error-message-container {
+  margin: 24px;
+}
+
+.footer-text {
+  font-size: 10px;
+  font-weight: 500;
+  color: #4d616a;
+}
+
+.input-label {
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+@media (max-width: 389px) {
+  .title {
+    margin-top: 80px;
+    font-size: 28px;
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  .sowell-logo {
+    padding: 12px 0 0 16px;
+  }
+
+  .login-page .input-container, .login-page .button-container {
+    margin-left: 16px !important;
+    margin-right: 16px !important;
+  }
+
+  .error-message-container {
+    margin: 16px;
+  }
+
+  .login-button {
+    height: 40px;
+  }
+
+  .login-button div {
+    font-size: 14px !important;
+  }
+  
+  .error_input {
+    min-height: 50px;
+    padding: 4px 12px;
+  }
+  
+  .error-placeholder {
+    min-height: 25px;
+  }
+}
 </style>

package/src/i18n/en-US/index.ts

@@ -1,6 +1,7 @@
 export default {
   auth: {
     title: "Log in to access the management interface",
+    subtitle: "Login",
     email: "Email",
     password: "Password",
     forgottenPassword: "Forgotten password",
@@ -16,18 +17,21 @@ export default {
     tapEmail: "Please enter your email",
     404: "No user found with the provided credentials",
     403: "Insufficient rights, your account does not allow access to this interface",
-    passwordRecovery: 'Password recovery',
-    newPassword: 'New password',
+    passwordRecovery: "Password recovery",
+    newPassword: "New password",
     newPasswordConfirmationFailed: "The passwords you typed don't match",
-    passwordRecoverySuccess: 'Your password has been updated',
-    passwordRecoveryFailed: 'An error occured while updating your password',
-    passwordRecoveryExpiredLink: 'The link expired',
-    passwordRecoveryInvalidLink: 'the link is invalid'
+    passwordRecoverySuccess: "Your password has been updated",
+    passwordRecoveryFailed: "An error occured while updating your password",
+    passwordRecoveryExpiredLink: "The link expired",
+    passwordRecoveryInvalidLink: "the link is invalid",
+    continueWith: "Or continue with",
+    emailOrPasswordIncorrect: "Email or password incorrect"
   },
   common: {
     register: "Save",
     send: "Send",
     cancel: "Cancel",
-    or: "or"
-  },
-};
+    or: "or",
+    privacyPolicy: "Privacy policy"
+  }
+}

package/src/i18n/fr-FR/index.ts

@@ -1,10 +1,11 @@
 export default {
   auth: {
-    title: "Connectez vous",
-    email: "Email",
+    title: "Connectez vous extension",
+    subtitle: "Connexion",
+    email: "Email extension",
     password: "Mot de passe",
     forgottenPassword: "Mot de passe oublié",
-    login: "Connexion",
+    login: "Se connecter",
     msalLogin: "Se connecter avec Microsoft",
     emailPresenceError: "L'adresse email doit être fournie",
     emailValidationError: "L'adresse email fournie est invalide",
@@ -16,18 +17,23 @@ export default {
     tapEmail: "Entrer votre email",
     404: "Aucun utilisateur trouvé avec les identifiants donnés",
     403: "Droits insuffisants, votre compte ne permet pas d'acceder à cette interface",
-    passwordRecovery: 'Récupération de mot de passe',
-    newPassword: 'Nouveau mot de passe',
-    newPasswordConfirmationFailed: 'Les mot de passes que vous avez saisi ne correspondent pas',
-    passwordRecoverySuccess: 'Votre mot de passe a été mis à jour',
-    passwordRecoveryFailed: "Une erreur s'est produite lors de la mise à jour de votre mot de passe",
-    passwordRecoveryExpiredLink: 'Lien de récupération expiré',
-    passwordRecoveryInvalidLink: 'Lien de récupération invalide'
+    passwordRecovery: "Récupération de mot de passe",
+    newPassword: "Nouveau mot de passe",
+    newPasswordConfirmationFailed:
+      "Les mot de passes que vous avez saisi ne correspondent pas",
+    passwordRecoverySuccess: "Votre mot de passe a été mis à jour",
+    passwordRecoveryFailed:
+      "Une erreur s'est produite lors de la mise à jour de votre mot de passe",
+    passwordRecoveryExpiredLink: "Lien de récupération expiré",
+    passwordRecoveryInvalidLink: "Lien de récupération invalide",
+    continueWith: "Ou continuer avec",
+    emailOrPasswordIncorrect: "Email ou mot de passe incorrect"
   },
   common: {
     register: "Enregistrer",
     send: "Envoyer",
     cancel: "Annuler",
-    or: "ou"
-  },
-};
+    or: "ou",
+    privacyPolicy: "Politique de confidentialité"
+  }
+}