v6

src/pages/LoginPage.vue

@@ -1,10 +1,11 @@
 <template>
-  <q-page class="flex column items-center justify-center">
+  <q-page class="flex column items-center justify-between">
+    <div :style="{ height: `${blockHeight}px` }" />
 
     <q-card
       id="login_block"
       flat
-      class="flex column items-center w80 justify-between q-py-lg login-card "
+      class="flex column items-center w80 justify-between q-py-md login-card "
       >
       <login-logo
         class="col-grow q-pa-md"
@@ -88,30 +89,35 @@
       <div
         v-if="isTelegramApp"
         id="alt_login"
-        class="w80 q-flex column items-center q-pt-xl"
+        class="w80 q-flex column items-center q-pt-md"
         >
         <div
           class="orline w100 text-grey"
           >
-          <span class="q-mx-sm">{{$t('login__or_continue_as')}}</span>
+          <span class="q-mx-sm text-caption">{{$t('login__or_continue_as')}}</span>
         </div>
         <q-btn
           flat
           sm
           no-caps
           color="primary"
-          :disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
+          :disabled="!acceptTermsOfUse"
           @click="handleTelegramLogin"
           >
           <div class="flex items-center text-blue">
-            <q-icon name="telegram" size="md" class="q-mx-none text-blue"/>
-            <div class="q-ml-xs ellipsis" style="max-width: 100px">
+            <q-avatar size="md" class="q-mr-sm">
+              <q-img v-if="tgUser?.photo_url" :src="tgUser.photo_url"/>
+              <q-icon v-else size="md" class="q-mr-none" name="telegram"/>
+            </q-avatar>
+
+            <span>
               {{
-              tgUser?.first_name + 
-              (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
-              tgUser?.last_name
+                tgUser?.first_name + 
+                (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
+                tgUser?.last_name +
+                (!(tgUser?.first_name || tgUser?.last_name) ? tgUser?.username : '')
               }}
-            </div>
+              </span>
           </div>
         </q-btn>
       </div>
@@ -119,8 +125,10 @@
 
     <div
       id="term-of-use"
-      class="absolute-bottom q-py-lg text-white flex justify-center row"
+      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"
@@ -128,6 +136,7 @@
         :color="acceptTermsOfUse ? 'brand' : 'red'"
         dense
         keep-color
+        size="sm"
       />
       <span class="q-px-xs">
         {{ $t('login__accept_terms_of_use') + ' ' }}
@@ -144,14 +153,14 @@
 
 <script setup lang="ts">
   import { ref, computed, inject, onUnmounted } from 'vue'
-  import { useQuasar } from 'quasar'
   import { useRouter } from 'vue-router'
   import loginLogo from 'components/login-page/loginLogo.vue'
   import { useI18n } from "vue-i18n"
-  import { useAuthStore } from 'src/stores/auth'
+  import { useAuthStore } from 'stores/auth'
   import type { WebApp } from '@twa-dev/types'
   import { QInput } from 'quasar'
-  import type { ServerError } from 'boot/axios'
+  import { useNotify, type ServerError } from 'composables/useNotify'
+  const { notifyError } = useNotify()
 
   type ValidationRule = (val: string) => boolean | string
   
@@ -160,7 +169,6 @@
     
   const authStore = useAuthStore()
   const router = useRouter()
-  const $q = useQuasar()
   const { t } = useI18n()
 
   const login = ref<string>('')
@@ -168,6 +176,9 @@
   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>>()
 
@@ -203,32 +214,21 @@
         if (validateTimerId.value[type] !== null) {
           clearTimeout(validateTimerId.value[type])
         }
-        if (type === 'login') await emailInput.value?.validate()
-        if (type === 'password') await passwordInput.value?.validate()
+        if (type === 'login' && login.value !== '') await emailInput.value?.validate()
+        if (type === 'password' && password.value !== '') await passwordInput.value?.validate()
       })()
-    }, 300)
-  }
-
-  function onErrorLogin (error: ServerError) {
-    $q.notify({
-      message: t(error.message) + ' (' + t('code') + ':' + error.code + ')',
-      type: 'negative',
-      position: 'bottom',
-      timeout: 2000,
-      multiLine: true
-    })
+    }, 500)
   }
 
   async function sendAuth() {
     try { void await authStore.loginWithCredentials(login.value, password.value) }
     catch (error) {
-      console.log(error)
-      onErrorLogin(error as ServerError)
+      notifyError(error as ServerError)
     }
     await router.push({ name: 'projects' })
   }
 
-  
+    
   async function forgotPwd() {
     sessionStorage.setItem('pendingLogin', login.value)
     await router.push({ name: 'recovery_password' })
@@ -244,19 +244,22 @@
       return !!window.Telegram?.WebApp?.initData
     })
 
-  /* const handleSubmit = async () => {
-    await authStore.loginWithCredentials(email.value, password.value)
-  } */
+  async function handleTelegramLogin () {
+    // @ts-expect-ignore
+    const initData = window.Telegram.WebApp.initData
+    await authStore.loginWithTelegram(initData)
+    await router.push({ name: 'projects' })
+  }
 
-async function handleTelegramLogin () {
-  // @ts-expect-ignore
-  const initData = window.Telegram.WebApp.initData
-  await authStore.loginWithTelegram(initData)
-}
+  function syncHeights() {
+    if (bottomBlock.value) {
+      blockHeight.value = bottomBlock.value.offsetHeight
+    }
+  }
 
-onUnmounted(() => {
-  Object.values(validateTimerId.value).forEach(timer => timer && clearTimeout(timer))
-})
+  onUnmounted(() => {
+    Object.values(validateTimerId.value).forEach(timer => timer && clearTimeout(timer))
+  })
   
 </script>