v2

src/pages/LoginPage.vue

@@ -1,6 +1,5 @@
 <template>
   <q-page class="flex column items-center justify-between">
-
     <q-card
       id="login_block"
       flat
@@ -9,7 +8,7 @@
       <login-logo
         class="col-grow q-pa-md"
         :style="{ alignItems: 'flex-end' }"
-    />
+        />
 
       <div class = "q-ma-md flex column input-login">
         <q-input
@@ -18,7 +17,6 @@
           filled
           class = "q-mb-md"
           :label = "$t('login__email')"
-          :rules="['email']"
         />
 
         <q-input
@@ -71,6 +69,7 @@
       </div>
     
       <div
+        v-if="isTelegramApp"
         id="alt_login"
         class="w80 q-flex column items-center q-pt-xl"
         >
@@ -85,11 +84,18 @@
           no-caps
           color="primary"
           :disabled="!acceptTermsOfUse"
+          @click="handleTelegramLogin"
           >
-          <span class="text-blue">
+          <div class="flex items-center text-blue">
             <q-icon name="telegram" size="md" class="q-mx-none text-blue"/>
-            Alex mart
-          </span>
+            <div class="q-ml-xs ellipsis" style="max-width: 100px">
+              {{
+              tgUser?.first_name + 
+              (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
+              tgUser?.last_name
+              }}
+            </div>
+          </div>
         </q-btn>
       </div>
     </q-card>
@@ -114,22 +120,36 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { ref, computed, inject } from 'vue'
+  import { useQuasar } from 'quasar'
   import { useRouter } from 'vue-router'
   import loginLogo from 'components/admin/login-page/loginLogo.vue'
-  // import { useI18n } from "vue-i18n"
+  import { useI18n } from "vue-i18n"
+  import { useAuthStore } from 'src/stores/auth'
+  import type { WebApp } from '@twa-dev/types'
+
+  const tg = inject('tg') as WebApp
+  const tgUser = tg.initDataUnsafe.user
+    
+  const authStore = useAuthStore()
   const router = useRouter()
-  // const { t } = useI18n()
+  const $q = useQuasar()
+  const { t } = useI18n()
 
   const login = ref<string>('')
   const password = ref<string>('')
   const isPwd = ref<boolean>(true)
   const acceptTermsOfUse = ref<boolean>(true)
 
-  /* function rules () :Record<string, Array<(value: string) => boolean | string>> {
-    return {
-      email: [value => (value.length <= 25) || t('login__incorrect_email')]}
-  } */
+  function onErrorLogin () {
+    $q.notify({
+      message: t('login__incorrect_login_data'),
+      type: 'negative',
+      position: 'bottom',
+      timeout: 2000,
+      multiLine: true
+    })
+  }
 
   async function sendAuth() {
     console.log('1')
@@ -137,12 +157,30 @@
   }
 
   async function forgotPwd() {
-    await router.push({ name: 'forgot_password' })
+    await router.push({
+      name: 'recovery_password',
+      query: { email: login.value } 
+    })
   }
 
   async function createAccount() {
     await router.push({ name: 'create_account' })
   }
+
+  const isTelegramApp = computed(() => {
+      // @ts-expect-ignore
+      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)
+}
   
 </script>