update empty string to null

src/pages/LoginPage.vue

@@ -1,18 +1,23 @@
 <template>
-  <q-page class="flex column items-center justify-between">
-    <div :style="{ height: `${blockHeight}px` }" />
-
+  <q-page
+    class="q-ma-none w100"
+    >
+    <q-scroll-area
+      style="height: 100vh"
+      >
+      <div class="flex items-center justify-center" style="height: 100vh">
     <q-card
       id="login_block"
       flat
-      class="flex column items-center w80 justify-between q-py-md login-card "
+      class="flex column no-wrap items-center justify-between q-px-xl q-py-md login-card"
+      style="max-width: 400px;"
       >
-      <login-logo
-        class="col-grow q-pa-md"
+      <base-logo
+        class="col-grow q-pa-lg"
         :style="{ alignItems: 'flex-end' }"
         />
 
-      <div class="q-ma-md flex column input-login">
+      <div class="flex column w100">
         <q-input
           v-model="login"
           autofocus
@@ -67,29 +72,30 @@
           </q-btn>
         </div>
       </div>
-      <q-btn
-        @click="sendAuth()"
-        color="primary"
-        :disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
-        >
-        {{$t('login__sign_in')}}
-      </q-btn>
-      <div class="q-pt-lg">
+        <q-btn
+          @click="sendAuth()"
+          color="primary"
+          class="w100 q-my-md"
+          :disabled="!isEmailValid || !isPasswordValid"
+          >
+          {{$t('login__sign_in')}}
+        </q-btn>
+
         <q-btn
           flat
           sm
           no-caps
+          class="q-my-md"
           color="primary"
           @click="createAccount"
           >
           {{$t('login__register')}}
         </q-btn>
-      </div>
     
       <div
         v-if="isTelegramApp"
         id="alt_login"
-        class="w80 q-flex column items-center q-pt-md"
+        class="flex w100 column items-center "
         >
         <div
           class="orline w100 text-grey"
@@ -101,7 +107,7 @@
           sm
           no-caps
           color="primary"
-          :disabled="!acceptTermsOfUse"
+          class="q-my-md"
           @click="handleTelegramLogin"
           >
           <div class="flex items-center text-blue">
@@ -122,45 +128,19 @@
         </q-btn>
       </div>
     </q-card>
-
-    <div
-      id="term-of-use"
-      class="q-pb-md text-white flex justify-center row text-caption"
-      ref="bottomBlock"
-      >
-      <q-resize-observer @resize="syncHeights" />
-      <q-checkbox
-        v-model="acceptTermsOfUse"
-        checked-icon="task_alt"
-        unchecked-icon="highlight_off"
-        :color="acceptTermsOfUse ? 'brand' : 'red'"
-        dense
-        keep-color
-        size="sm"
-      />
-      <span class="q-px-xs">
-        {{ $t('login__accept_terms_of_use') + ' ' }}
-      </span>
-      <span
-        @click="router.push('terms-of-use')"
-        style="text-decoration: underline;"
-        >
-        {{ $t('login__terms_of_use') }}
-      </span>
     </div>
+    </q-scroll-area>
   </q-page>
 </template>
 
 <script setup lang="ts">
   import { ref, computed, inject, onUnmounted } from 'vue'
   import { useRouter } from 'vue-router'
-  import loginLogo from 'components/login-page/loginLogo.vue'
+  import baseLogo from 'components/BaseLogo.vue'
   import { useI18n } from "vue-i18n"
   import { useAuthStore } from 'stores/auth'
   import type { WebApp } from '@twa-dev/types'
   import { QInput } from 'quasar'
-  import { useNotify, type ServerError } from 'composables/useNotify'
-  const { notifyError } = useNotify()
 
   type ValidationRule = (val: string) => boolean | string
   
@@ -174,10 +154,6 @@
   const login = ref<string>('')
   const password = ref<string>('')
   const isPwd = ref<boolean>(true)
-  const acceptTermsOfUse = ref<boolean>(true)
-
-  const bottomBlock = ref<HTMLDivElement | null>(null)
-  const blockHeight = ref<number>(0)
 
   const emailInput = ref<InstanceType<typeof QInput>>()
   const passwordInput = ref<InstanceType<typeof QInput>>()
@@ -223,7 +199,7 @@
   async function sendAuth() {
     try { void await authStore.loginWithCredentials(login.value, password.value) }
     catch (error) {
-      notifyError(error as ServerError)
+      console.error(error)
     }
     await router.push({ name: 'projects' })
   }
@@ -251,12 +227,6 @@
     await router.push({ name: 'projects' })
   }
 
-  function syncHeights() {
-    if (bottomBlock.value) {
-      blockHeight.value = bottomBlock.value.offsetHeight
-    }
-  }
-
   onUnmounted(() => {
     Object.values(validateTimerId.value).forEach(timer => timer && clearTimeout(timer))
   })
@@ -264,16 +234,6 @@
 </script>
 
 <style scoped>
-
-  .maxh15 {
-    max-height: calc(100Vh *0.15);
-  }
-
-  .input-login {
-    width: calc(100% * 0.8);
-    max-width: 300px;
-  }
-
   .login-card {
     opacity: 0.9 !important;
     border-radius: var(--top-raduis);