v4

2025-04-30 13:11:35 +03:00
parent c8f3c9801f
commit cda54b1e95
60 changed files with 1054 additions and 651 deletions
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -1,48 +1,45 @@
 import { defineBoot } from '#q-app/wrappers'
-import axios, { type AxiosInstance } from 'axios'
+import axios, { type AxiosError } from 'axios'
 import { useAuthStore } from 'src/stores/auth'

-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $axios: AxiosInstance;
-    $api: AxiosInstance;
+class ServerError extends Error {
+  constructor(
+    public code: string,
+    message: string
+  ) {
+    super(message)
+    this.name = 'ServerError'
  }
 }

-// Be careful when using SSR for cross-request state pollution
-// due to creating a Singleton instance here;
-// If any client changes this (global) instance, it might be a
-// good idea to move this instance creation inside of the
-// "export default () => {}" function below (which runs individually
-// for each client)
 const api = axios.create({
-  baseURL: '/',
-  withCredentials: true // Важно для работы с cookies
+  baseURL: '/api/admin',
+  withCredentials: true
 })

 api.interceptors.response.use(
  response => response,
-  async error => {
-    if (error.response?.status === 401) {
-      const authStore = useAuthStore()
-      await authStore.logout()
+  async (error: AxiosError<{ error?: { code: string; message: string } }>) => {
+    const errorData = error.response?.data?.error || {
+      code: 'ZERO',
+      message: error.message || 'Unknown error'
    }
-    console.error(error)
-    return Promise.reject(new Error())
-  }

+    const serverError = new ServerError(
+      errorData.code,
+      errorData.message
+    )
+
+    if (error.response?.status === 401) {
+      await useAuthStore().logout()
+    }
+
+    return Promise.reject(serverError)
+  }
 )

 export default defineBoot(({ app }) => {
-  // for use inside Vue files (Options API) through this.$axios and this.$api
-
-  app.config.globalProperties.$axios = axios
-  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
-  //       so you won't necessarily have to import axios in each vue file
-
  app.config.globalProperties.$api = api
-  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-  //       so you can easily perform requests against your app's API
-});
+})

-export { api };
+export { api, ServerError }
--- a/src/boot/global-components.ts
+++ b/src/boot/global-components.ts
@@ -1,14 +1,18 @@
 import { boot } from 'quasar/wrappers'
-import pnPageCard from '../components/admin/pnPageCard.vue'
-import pnScrollList from '../components/admin/pnScrollList.vue'
-import pnAutoAvatar from '../components/admin/pnAutoAvatar.vue'
-import pnOverlay from '../components/admin/pnOverlay.vue'
-import pnImageSelector from '../components/admin/pnImageSelector.vue'
+import pnPageCard from 'components/pnPageCard.vue'
+import pnScrollList from 'components/pnScrollList.vue'
+import pnAutoAvatar from 'components/pnAutoAvatar.vue'
+import pnOverlay from 'components/pnOverlay.vue'
+import pnMagicOverlay from 'components/pnMagicOverlay.vue'
+import pnImageSelector from 'components/pnImageSelector.vue'
+import pnAccountBlockName from 'components/pnAccountBlockName.vue'

 export default boot(async ({ app }) => { // eslint-disable-line
  app.component('pnPageCard', pnPageCard)
  app.component('pnScrollList', pnScrollList)
  app.component('pnAutoAvatar', pnAutoAvatar)
  app.component('pnOverlay', pnOverlay)
+  app.component('pnMagicOverlay', pnMagicOverlay)
  app.component('pnImageSelector', pnImageSelector)
+  app.component('pnAccountBlockName', pnAccountBlockName)
 })
--- a/src/boot/helpers.ts
+++ b/src/boot/helpers.ts
@@ -1,36 +1,31 @@
-export function isObjEqual(a: object, b: object): boolean {
-  // Сравнение примитивов и null/undefined
-  if (a === b) return true
-  if (!a || !b) return false
-  if (Object.keys(a).length !== Object.keys(b).length) return false
+export function isObjEqual (obj1: Record<string, string | number | boolean>, obj2: Record<string, string | number | boolean>): boolean {
+  const filteredObj1 = filterIgnored(obj1)
+  const filteredObj2 = filterIgnored(obj2)

-  // Получаем все уникальные ключи из обоих объектов
-  const allKeys = new Set([
-    ...Object.keys(a),
-    ...Object.keys(b)
-  ])
+  const allKeys = new Set([...Object.keys(filteredObj1), ...Object.keys(filteredObj2)])

-  // Проверяем каждое свойство
  for (const key of allKeys) {
-    const valA = a[key as keyof typeof a]
-    const valB = b[key as keyof typeof b]
-
-    // Если одно из значений undefined - объекты разные
-    if (valA === undefined || valB === undefined) return false
-
-    // Рекурсивное сравнение для вложенных объектов
-    if (typeof valA === 'object' && typeof valB === 'object') {
-      if (!isObjEqual(valA, valB)) return false
-    } 
-    // Сравнение примитивов
-    else if (!Object.is(valA, valB)) {
-      return false
-    }
+      const hasKey1 = Object.prototype.hasOwnProperty.call(filteredObj1, key)
+      const hasKey2 = Object.prototype.hasOwnProperty.call(filteredObj2, key)
+      
+      if (hasKey1 !== hasKey2) return false
+      if (hasKey1 && hasKey2 && filteredObj1[key] !== filteredObj2[key]) return false
  }

  return true
 }

+function filterIgnored(obj: Record<string, string | number | boolean>): Record<string, string | number | boolean> {
+  const filtered: Record<string, string | number | boolean> = {}
+
+  for (const key in obj) {
+      const value = obj[key]
+      if (value !== "" && value !== 0 && value !== false) filtered[key] = value
+  }
+
+  return filtered
+}
+
 export function parseIntString (s: string | string[] | undefined) :number | null {
  if (typeof s !== 'string') return null
  const regex = /^[+-]?\d+$/
--- a/src/boot/telegram-boot.ts
+++ b/src/boot/telegram-boot.ts
@@ -9,7 +9,7 @@ export default ({ app }: BootParams) => {
    webApp.ready()
    // window.Telegram.WebApp.requestFullscreen()
    // Опционально: сохраняем объект в Vue-приложение для глобального доступа
-    webApp.SettingsButton.isVisible = true
+    // webApp.SettingsButton.isVisible = true
    // webApp.BackButton.isVisible = true
    app.config.globalProperties.$tg = webApp
    // Для TypeScript: объявляем тип для инжекции
--- a/src/components/admin/account-page/optionPayment.vue
+++ b/src/components/admin/account-page/optionPayment.vue
--- a/src/components/admin/account-page/qtyChatCard.vue
+++ b/src/components/admin/account-page/qtyChatCard.vue
--- a/src/components/accountHelper.vue
+++ b/src/components/accountHelper.vue
@@ -0,0 +1,223 @@
+<template>
+  <q-stepper
+    v-model="step"
+    vertical
+    color="primary"
+    animated
+    flat
+    class="bg-transparent"
+    >
+    <q-step
+      :name="1"
+      :title="$t('account_helper__enter_email')"
+      :done="step > 1"
+      >
+      <q-input
+        v-model="login"
+        autofocus
+        dense
+        filled
+        :label = "$t('account_helper__email')"
+        :rules="validationRules.email"
+        lazy-rules
+        no-error-icon
+        @focus="($refs.emailInput as typeof QInput)?.resetValidation()"
+        ref="emailInput"
+      />
+      <q-stepper-navigation>
+        <q-btn
+          @click="handleSubmit"
+          color="primary"
+          :label="$t('continue')"
+          :disabled="!isEmailValid"
+        />
+      </q-stepper-navigation>
+    </q-step>
+
+    <q-step
+      :name="2"
+      :title="$t('account_helper__confirm_email')"
+      :done="step > 2"
+      >
+      <div class="q-pb-md">{{$t('account_helper__confirm_email_message')}}</div>
+      <q-input
+        v-model="code"
+        dense
+        filled
+        autofocus
+        hide-bottom-space
+        :label = "$t('account_helper__code')"
+        num="30"
+      />
+      <q-stepper-navigation>
+        <q-btn
+          @click="handleSubmit"
+          color="primary"
+          :label="$t('continue')"
+        />
+        <q-btn
+          flat
+          @click="step = 1"
+          color="primary"
+          :label="$t('back')"
+          class="q-ml-sm"
+        />
+      </q-stepper-navigation>
+    </q-step>
+
+    <q-step
+      :name="3"
+      :title="$t('account_helper__set_password')"
+      >
+      <q-input
+        v-model="password"
+        dense
+        filled
+        :label = "$t('account_helper__password')"
+        :type="isPwd ? 'password' : 'text'"
+        hide-hint
+        :hint="passwordHint"
+        :rules="validationRules.password"
+        lazy-rules
+        no-error-icon
+        @focus="($refs.passwordInput as typeof QInput)?.resetValidation()"
+        ref="passwordInput"
+        >
+          <template #append>
+            <q-icon
+              color="grey-5"
+              :name="isPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+              class="cursor-pointer"
+              @click="isPwd = !isPwd"
+            />
+          </template>
+        </q-input>
+
+      <q-stepper-navigation>
+        <q-btn
+          @click="handleSubmit"
+          color="primary"
+          :label="$t('account_helper__finish')"
+          :disabled = "!isPasswordValid"
+        />
+        <q-btn
+          flat
+          @click="step = 2"
+          color="primary"
+          :label="$t('back')"
+          class="q-ml-sm"
+        />
+      </q-stepper-navigation>
+    </q-step>
+  </q-stepper>
+  
+  <pn-magic-overlay
+    v-if="showSuccessOverlay"
+    icon="mdi-check-circle-outline"
+    message1="account_helper__ok_message1"
+    message2="account_helper__ok_message2"
+    route-name="projects"
+  />
+</template>
+  
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import { useRouter } from 'vue-router'
+  import type { AxiosError } from 'axios'
+  import { useQuasar } from 'quasar'
+  import { useI18n } from "vue-i18n"
+  import { QInput } from 'quasar'
+  import { useAuthStore, type AuthFlowType } from 'stores/auth'
+
+  const flowType = computed<AuthFlowType>(() => {
+    return props.type === 'register'
+      ? 'register' 
+      : props.type === 'forgotPwd'
+        ? 'forgot' 
+        : 'change'
+  })
+
+  const $q = useQuasar()
+  const { t } = useI18n()
+  const authStore = useAuthStore()
+
+  const props = defineProps<{
+    type: 'register' | 'forgotPwd' | 'changePwd'
+    email?: string
+  }>()
+
+  type ValidationRule = (val: string) => boolean | string
+  type Step = 1 | 2 | 3
+
+  const step = ref<Step>(1)
+  const login = ref<string>(props.email || '')
+  const code = ref<string>('')
+  const password = ref<string>('')
+  const showSuccessOverlay = ref(false)
+  const isPwd = ref<boolean>(true)
+  const validationRules = {
+    email: [(val: string) => /.+@.+\..+/.test(val) || t('login__incorrect_email')] as [ValidationRule],
+    password: [(val: string) => val.length >= 8 || t('login__password_require')] as [ValidationRule]
+  }
+
+  const isEmailValid = computed(() => 
+    validationRules.email.every(f => f(login.value) === true)
+  )
+
+  const isPasswordValid = computed(() => 
+    validationRules.password.every(f => f(password.value) === true)
+  )
+
+  const passwordHint = computed(() => {
+    const result = validationRules.password[0](password.value)
+    return typeof result === 'string' ? result : ''
+  })
+
+  const stepActions: Record<Step, () => Promise<void>> = {
+  1: async () => {
+    await authStore.initRegistration(flowType.value, login.value)
+  },
+  2: async () => {
+    await authStore.confirmCode(flowType.value, login.value, code.value)
+  },
+  3: async () => {
+    await authStore.setPassword(flowType.value, login.value, code.value, password.value)
+    if (flowType.value === 'register') {
+      await authStore.loginWithCredentials(login.value, password.value)
+    }
+  }
+}
+
+  const handleError = (err: AxiosError) => {
+    const error = err as AxiosError<{ error?: { message?: string } }>
+    const message = error.response?.data?.error?.message || t('unknown_error')
+    
+    $q.notify({
+      message: `${t('error')}: ${message}`,
+      type: 'negative',
+      position: 'bottom',
+      timeout: 2500
+    })
+    
+    if (step.value > 1) {
+      code.value = ''
+      password.value = ''
+    }
+  }
+
+  const handleSubmit = async () => {
+    try {
+      await stepActions[step.value]()
+      if (step.value < 3) {
+        step.value++
+      } else {
+        showSuccessOverlay.value = true
+      }
+    } catch (error) {
+      handleError(error as AxiosError)
+    }
+  }
+</script>
+
+<style>
+</style>
--- a/src/components/admin/accountHelper.vue
+++ b/src/components/admin/accountHelper.vue
@@ -1,89 +0,0 @@
-<template>
-  <q-stepper
-    v-model="step"
-    vertical
-    color="primary"
-    animated
-    flat
-    class="bg-transparent"
-    >
-    <q-step
-      :name="1"
-      :title="$t('account_helper__enter_email')"
-      :done="step > 1"
-      >
-      <q-input
-        v-model="login"
-        dense
-        filled
-        :label = "$t('account_helper__email')"
-      />
-      <div class="q-pt-md text-red">{{$t('account_helper__code_error')}}</div>
-      <q-stepper-navigation>
-        <q-btn @click="step = 2" color="primary" :label="$t('continue')" />
-      </q-stepper-navigation>
-    </q-step>
-
-    <q-step
-      :name="2"
-      :title="$t('account_helper__confirm_email')"
-      :done="step > 2"
-      >
-      <div class="q-pb-md">{{$t('account_helper__confirm_email_message')}}</div>
-      <q-input
-        v-model="code"
-        dense
-        filled
-        :label = "$t('account_helper__code')"
-      />
-      <q-stepper-navigation>
-        <q-btn @click="step = 3" color="primary" :label="$t('continue')" />
-        <q-btn flat @click="step = 1" color="primary" :label="$t('back')" class="q-ml-sm" />
-      </q-stepper-navigation>
-    </q-step>
-
-    <q-step
-      :name="3"
-      :title="$t('account_helper__set_password')"
-      >
-      <q-input
-        v-model="password"
-        dense
-        filled
-        :label = "$t('account_helper__password')"
-      />
-
-      <q-stepper-navigation>
-        <q-btn
-          @click="goProjects"
-          color="primary"
-          :label="$t('account_helper__finish')"
-        />
-        <q-btn flat @click="step = 2" color="primary" :label="$t('back')" class="q-ml-sm" />
-      </q-stepper-navigation>
-    </q-step>
-  </q-stepper>
-</template>
-  
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useRouter } from 'vue-router'
-  const router = useRouter()
-
-  const props = defineProps<{
-    type: string
-    email?: string
-  }>()
-
-  const step = ref<number>(1)
-  const login = ref<string>(props.email || '')
-  const code = ref<string>('')
-  const password = ref<string>('')
-
-  async function goProjects() {
-    await router.push({ name: 'projects' })
-  }
-</script>
-
-<style>
-</style>
--- a/src/components/admin/companyInfoBlock.vue
+++ b/src/components/admin/companyInfoBlock.vue
@@ -5,7 +5,7 @@
    <q-input
      v-for="input in textInputs"
      :key="input.id"
-      v-model="modelValue[input.val]"
+      v-model.trim="modelValue[input.val]"
      dense
      filled
      class = "q-mt-md w100"
--- a/src/components/admin/companyInfoPersons.vue
+++ b/src/components/admin/companyInfoPersons.vue
--- a/src/components/admin/login-page/loginLogo.vue
+++ b/src/components/admin/login-page/loginLogo.vue
--- a/src/components/admin/meshBackground.vue
+++ b/src/components/admin/meshBackground.vue
--- a/src/components/pnAccountBlockName.vue
+++ b/src/components/pnAccountBlockName.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center no-wrap overflow-hidden w100">
+    <q-icon v-if="user?.email" size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
+    <q-avatar v-else size="32px" class="q-mr-sm">
+      <q-img v-if="tgUser?.photo_url" :src="tgUser.photo_url"/>
+      <q-icon v-else size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
+    </q-avatar>
+    <span v-if="user?.email" class="ellipsis">
+      {{ user.email }}
+    </span>
+    <span v-else class="ellipsis">
+      {{
+        tgUser?.first_name + 
+        (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
+        tgUser?.last_name +
+        !(tgUser?.first_name || tgUser?.last_name) ? tgUser?.username : ''
+      }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { inject } from 'vue'
+  import { useAuthStore } from 'stores/auth'
+  import type { WebApp } from '@twa-dev/types'
+
+  const authStore = useAuthStore()
+  const user = authStore.user
+  const tg = inject('tg') as WebApp
+  const tgUser = tg.initDataUnsafe.user
+
+</script>
+
+<style lang="scss">
+</style>
--- a/src/components/admin/pnAutoAvatar.vue
+++ b/src/components/admin/pnAutoAvatar.vue
--- a/src/components/admin/pnImageSelector.vue
+++ b/src/components/admin/pnImageSelector.vue
--- a/src/components/pnMagicOverlay.vue
+++ b/src/components/pnMagicOverlay.vue
@@ -0,0 +1,73 @@
+<template>
+  <q-dialog
+    v-model="visible"
+    maximized
+    persistent
+    transition-show="slide-up"
+    transition-hide="slide-down">
+    <div 
+      class="flex items-center justify-center fullscrean-card column"
+      >
+      <q-icon :name = "icon" color="brand" size="160px"/>
+      <div class="text-h5 q-mb-lg">
+          {{ $t(message1) }}
+      </div>
+
+      <div
+        v-if="message2" 
+        class="absolute-bottom q-py-lg flex justify-center row"
+        >
+        {{ $t(message2) }}
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{
+  icon: string
+  message1: string
+  message2?: string
+  routeName: string
+}>()
+
+const visible = ref(false)
+const router = useRouter()
+const timers = ref<number[]>([])
+
+const setupTimers = () => {
+  visible.value = true
+  
+  const timer1 = window.setTimeout(() => {
+    visible.value = false
+    
+    const timer2 = window.setTimeout(() => {
+      router.push({ name: props.routeName })
+    }, 300)
+    
+    timers.value.push(timer2)
+  }, 2000)
+
+  timers.value.push(timer1)
+};
+
+const clearTimers = () => {
+  timers.value.forEach(timer => clearTimeout(timer))
+  timers.value = []
+}
+
+onMounted(setupTimers)
+onUnmounted(clearTimers)
+</script>
+
+<style lang="scss" scoped>
+  .fullscrean-card {
+    background-color: white;
+  }
+
+</style>
+
+
--- a/src/components/admin/pnOverlay.vue
+++ b/src/components/admin/pnOverlay.vue
--- a/src/components/admin/pnPageCard.vue
+++ b/src/components/admin/pnPageCard.vue
@@ -2,7 +2,7 @@
  <q-page class="column items-center no-scroll">
  
    <div
-      class="text-white flex items-center w100 q-pl-md q-ma-none text-h6 no-scroll"
+      class="text-white flex items-center w100 q-pl-md q-pr-sm q-ma-none text-h6 no-scroll"
      style="min-height: 48px"
      >
      <slot name="title"/>
--- a/src/components/admin/pnScrollList.vue
+++ b/src/components/admin/pnScrollList.vue
--- a/src/components/admin/projectInfoBlock.vue
+++ b/src/components/admin/projectInfoBlock.vue
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
--- a/src/i18n/ru-RU/index.ts
+++ b/src/i18n/ru-RU/index.ts
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -33,7 +33,7 @@

 <script setup lang="ts">
  import { ref } from 'vue'
-  import meshBackground from '../components/admin/meshBackground.vue'
+  import meshBackground from 'components/meshBackground.vue'
  
  const existDrawer = ref<boolean>(true)
  function getCSSVar (varName: string) {
@@ -53,8 +53,8 @@

 <style>

-aside {
-  background-color: transparent !important;
-}
+  aside {
+    background-color: transparent !important;
+  }

 </style>
--- a/src/pages/AccountChangeEmailPage.vue
+++ b/src/pages/AccountChangeEmailPage.vue
@@ -12,6 +12,6 @@
 </template>

 <script setup lang="ts">
-  import accountHelper from 'components/admin/accountHelper.vue'
-  const type = 'change'
+  import accountHelper from 'src/components/accountHelper.vue'
+  const type = 'forgotPwd'
 </script>
--- a/src/pages/AccountChangePasswordPage.vue
+++ b/src/pages/AccountChangePasswordPage.vue
@@ -12,6 +12,6 @@
 </template>

 <script setup lang="ts">
-  import accountHelper from 'components/admin/accountHelper.vue'
+  import accountHelper from 'src/components/accountHelper.vue'
  const type = 'change'
 </script>
--- a/src/pages/AccountCreatePage.vue
+++ b/src/pages/AccountCreatePage.vue
@@ -6,12 +6,20 @@
      </div>
    </template>
    <pn-scroll-list>
-      <account-helper :type />
+      <account-helper :type :email/>
    </pn-scroll-list>
  </pn-page-card>
 </template>

 <script setup lang="ts">
-  import accountHelper from 'components/admin/accountHelper.vue'
-  const type = 'new'
+  import { onMounted, ref } from 'vue'
+  import accountHelper from 'src/components/accountHelper.vue'
+
+  const type = 'register'
+  const email = ref(sessionStorage.getItem('pendingLogin') || '')
+
+  onMounted(() => {
+    sessionStorage.removeItem('pendingLogin')
+  })
+  
 </script>
--- a/src/pages/AccountForgotPasswordPage.vue
+++ b/src/pages/AccountForgotPasswordPage.vue
@@ -6,17 +6,20 @@
      </div>
    </template>
    <pn-scroll-list>
-      <account-helper :type :email="email"/>
+      <account-helper :type :email/>
    </pn-scroll-list>
  </pn-page-card>
 </template>

 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { useRoute } from 'vue-router' // Добавляем импорт
-  import accountHelper from 'components/admin/accountHelper.vue'
+  import { onMounted, ref } from 'vue'
+  import accountHelper from 'src/components/accountHelper.vue'
+
+  const type = 'forgotPwd'
+  const email = ref(sessionStorage.getItem('pendingLogin') || '')
+
+  onMounted(() => {
+    sessionStorage.removeItem('pendingLogin')
+  })

-  const route = useRoute()
-  const type = 'forgot'
-  const email = ref(route.query.email as string)
 </script>
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -1,25 +1,16 @@
 <template>
  <pn-page-card>
    <template #title>
-      <div class="flex justify-between items-center text-white q-pa-sm w100">
-        <div class="flex items-center justify-center row">
-          <q-avatar v-if="tgUser?.photo_url" size="48px" class="q-mr-xs">
-            <q-img :src="tgUser.photo_url"/>
-          </q-avatar>
-          <div class="flex column">
-            <span class="q-ml-xs text-h5">
-              {{
-                tgUser?.first_name + 
-                (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
-                tgUser?.last_name
-              }}
-            </span>
-            <span class="q-ml-xs text-caption">
-              {{ tgUser?.username }}
-            </span>
-          </div>
-        </div>
-        <q-btn flat icon="mdi-logout"/>
+      <div class="flex items-center no-wrap w100">
+        <pn-account-block-name/>
+        <q-btn
+          v-if="user?.email"
+          @click="logout()"
+          flat
+          round
+          icon="mdi-logout"
+          class="q-ml-md"
+        />
      </div>
    </template>

@@ -56,16 +47,13 @@
 </template>

 <script setup lang="ts">
-  import { inject, computed } from 'vue'
+  import { computed } from 'vue'
  import { useRouter } from 'vue-router'
-  // import { useAuthStore } from 'stores/auth'
-  import type { WebApp } from '@twa-dev/types'
+  import { useAuthStore } from 'stores/auth'

  const router = useRouter()
-  // const authStore = useAuthStore()
-
-  const tg = inject('tg') as WebApp
-  const tgUser = tg.initDataUnsafe.user
+  const authStore = useAuthStore()
+  const user = authStore.user

  const items = computed(() => ([
    { id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
@@ -73,15 +61,20 @@
    { id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password' },
    { id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email' },
    { id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
-    { id: 6, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
-    { id: 7, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
-    { id: 8, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
+    { id: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
+    { id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
+    { id: 8, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
+    { id: 9, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
  ]))

  async function goTo (path: string) {
    await router.push({ name: path })
  }

+  async function logout () {
+    await authStore.logout()
+  }
+
 </script>

 <style lang="scss">
--- a/src/pages/CompanyCreatePage.vue
+++ b/src/pages/CompanyCreatePage.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
-  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
+  import companyInfoBlock from 'src/components/companyInfoBlock.vue'
  import { useCompaniesStore } from 'stores/companies'
  import type { Company } from 'src/types'

--- a/src/pages/CompanyInfoPage.vue
+++ b/src/pages/CompanyInfoPage.vue
@@ -27,8 +27,8 @@
 <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
-  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
-  import companyInfoPersons from 'components/admin/companyInfoPersons.vue'
+  import companyInfoBlock from 'src/components/companyInfoBlock.vue'
+  import companyInfoPersons from 'src/components/companyInfoPersons.vue'
  import { useCompaniesStore } from 'stores/companies'
  import type { Company } from 'src/types'
  import { parseIntString, isObjEqual } from 'boot/helpers'
--- a/src/pages/CompanyYourPage.vue
+++ b/src/pages/CompanyYourPage.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
-  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
+  import companyInfoBlock from 'src/components/companyInfoBlock.vue'
  import { useCompaniesStore } from 'stores/companies'
  import type { Company } from 'src/types'

--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -1,5 +1,6 @@
 <template>
-  <q-page class="flex column items-center justify-between">
+  <q-page class="flex column items-center justify-center">
+
    <q-card
      id="login_block"
      flat
@@ -10,22 +11,37 @@
        :style="{ alignItems: 'flex-end' }"
        />

-      <div class = "q-ma-md flex column input-login">
+      <div class="q-ma-md flex column input-login">
        <q-input
          v-model="login"
+          autofocus
          dense
          filled
-          class = "q-mb-md"
-          :label = "$t('login__email')"
+          class="q-mb-sm"
+          :label="$t('login__email')"
+          :rules="validationRules.email"
+          lazy-rules="ondemand"
+          no-error-icon
+          @focus="emailInput?.resetValidation()"
+          @blur="delayValidity('login')"
+          ref="emailInput"
        />

        <q-input
          v-model="password"
          dense
          filled
-          :label = "$t('login__password')"
-          class = "q-mb-md"
+          :label="$t('login__password')"
+          class="q-mb-none q-mt-xs"
          :type="isPwd ? 'password' : 'text'"
+          hide-hint
+          :hint="passwordHint"
+          :rules="validationRules.password"
+          lazy-rules="ondemand"
+          no-error-icon
+          @focus="passwordInput?.resetValidation()"
+          @blur="delayValidity('password')"
+          ref="passwordInput"
          >
          <template #append>
            <q-icon
@@ -35,24 +51,25 @@
              @click="isPwd = !isPwd"
            />
          </template>
+
        </q-input>

        <div class="self-end">
          <q-btn
-            @click="forgotPwd"
+            @click.prevent="forgotPwd"
            flat
            no-caps
            dense
            class="text-grey"
            >
-              {{$t('login__forgot_password')}}
+            {{$t('login__forgot_password')}}
          </q-btn>
        </div>
      </div>
      <q-btn
-        @click="sendAuth"
+        @click="sendAuth()"
        color="primary"
-        :disabled="!acceptTermsOfUse"
+        :disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
        >
        {{$t('login__sign_in')}}
      </q-btn>
@@ -62,7 +79,7 @@
          sm
          no-caps
          color="primary"
-          @click="createAccount()"
+          @click="createAccount"
          >
          {{$t('login__register')}}
        </q-btn>
@@ -83,7 +100,7 @@
          sm
          no-caps
          color="primary"
-          :disabled="!acceptTermsOfUse"
+          :disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
          @click="handleTelegramLogin"
          >
          <div class="flex items-center text-blue">
@@ -100,7 +117,10 @@
      </div>
    </q-card>

-    <div id="term-of-use" class="q-py-lg text-white q-flex row">
+    <div
+      id="term-of-use"
+      class="absolute-bottom q-py-lg text-white flex justify-center row"
+      >
      <q-checkbox
        v-model="acceptTermsOfUse"
        checked-icon="task_alt"
@@ -110,24 +130,31 @@
        keep-color
      />
      <span class="q-px-xs">
-        {{$t('login__accept_terms_of_use') + ' '}}
+        {{ $t('login__accept_terms_of_use') + ' ' }}
      </span>
-      <span class="text-cyan-12">
-        {{$t('login__terms_of_use') }}
+      <span
+        @click="router.push('terms-of-use')"
+        style="text-decoration: underline;"
+        >
+        {{ $t('login__terms_of_use') }}
      </span>
    </div>
  </q-page>
 </template>

 <script setup lang="ts">
-  import { ref, computed, inject } from 'vue'
+  import { ref, computed, inject, onUnmounted } from 'vue'
  import { useQuasar } from 'quasar'
  import { useRouter } from 'vue-router'
-  import loginLogo from 'components/admin/login-page/loginLogo.vue'
+  import loginLogo from 'components/login-page/loginLogo.vue'
  import { useI18n } from "vue-i18n"
  import { useAuthStore } from 'src/stores/auth'
  import type { WebApp } from '@twa-dev/types'
+  import { QInput } from 'quasar'
+  import type { ServerError } from 'boot/axios'

+  type ValidationRule = (val: string) => boolean | string
+  
  const tg = inject('tg') as WebApp
  const tgUser = tg.initDataUnsafe.user
    
@@ -141,9 +168,50 @@
  const isPwd = ref<boolean>(true)
  const acceptTermsOfUse = ref<boolean>(true)

-  function onErrorLogin () {
+  const emailInput = ref<InstanceType<typeof QInput>>()
+  const passwordInput = ref<InstanceType<typeof QInput>>()
+
+  const validationRules = {
+    email: [(val: string) => /.+@.+\..+/.test(val) || t('login__incorrect_email')] as [ValidationRule],
+    password: [(val: string) => val.length >= 8 || t('login__password_require')] as [ValidationRule]
+  }
+
+  const isEmailValid = computed(() => 
+    validationRules.email.every(f => f(login.value) === true)
+  )
+
+  const isPasswordValid = computed(() => 
+    validationRules.password.every(f => f(password.value) === true)
+  )
+
+  const passwordHint = computed(() => {
+    const result = validationRules.password[0](password.value)
+    return typeof result === 'string' ? result : ''
+  })
+
+  // fix validity problem with router.push
+  type Field = 'login' | 'password'
+
+  const validateTimerId = ref<Record<Field, ReturnType<typeof setTimeout> | null>>({
+    login: null,
+    password: null
+  })
+  
+  const delayValidity = (type: Field) => {
+    validateTimerId.value[type] = setTimeout(() => {
+      void (async () => {
+        if (validateTimerId.value[type] !== null) {
+          clearTimeout(validateTimerId.value[type])
+        }
+        if (type === 'login') await emailInput.value?.validate()
+        if (type === 'password') await passwordInput.value?.validate()
+      })()
+    }, 300)
+  }
+
+  function onErrorLogin (error: ServerError) {
    $q.notify({
-      message: t('login__incorrect_login_data'),
+      message: t(error.message) + ' (' + t('code') + ':' + error.code + ')',
      type: 'negative',
      position: 'bottom',
      timeout: 2000,
@@ -152,18 +220,22 @@
  }

  async function sendAuth() {
-    console.log('1')
+    try { void await authStore.loginWithCredentials(login.value, password.value) }
+    catch (error) {
+      console.log(error)
+      onErrorLogin(error as ServerError)
+    }
    await router.push({ name: 'projects' })
  }

+  
  async function forgotPwd() {
-    await router.push({
-      name: 'recovery_password',
-      query: { email: login.value } 
-    })
+    sessionStorage.setItem('pendingLogin', login.value)
+    await router.push({ name: 'recovery_password' })
  }

  async function createAccount() {
+    sessionStorage.setItem('pendingLogin', login.value)
    await router.push({ name: 'create_account' })
  }

@@ -181,6 +253,10 @@ async function handleTelegramLogin () {
  const initData = window.Telegram.WebApp.initData
  await authStore.loginWithTelegram(initData)
 }
+
+onUnmounted(() => {
+  Object.values(validateTimerId.value).forEach(timer => timer && clearTimeout(timer))
+})
  
 </script>

--- a/src/pages/PersonInfoPage.vue
+++ b/src/pages/PersonInfoPage.vue
@@ -29,7 +29,7 @@

            <div class="q-gutter-y-lg w100">
              <q-input
-                v-model="person.name"
+                v-model.trim="person.name"
                dense
                filled
                class = "w100"
@@ -64,7 +64,7 @@
              </q-select>

              <q-input
-                v-model="person.department"
+                v-model.trim="person.department"
                dense
                filled
                class = "w100"
@@ -72,7 +72,7 @@
              />

              <q-input
-                v-model="person.role"
+                v-model.trim="person.role"
                dense
                filled
                class = "w100"
--- a/src/pages/ProjectCreatePage.vue
+++ b/src/pages/ProjectCreatePage.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
-  import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
+  import projectInfoBlock from 'src/components/projectInfoBlock.vue'
  import { useProjectsStore } from 'stores/projects'
  import type { ProjectParams } from 'src/types'

@@ -53,8 +53,9 @@
  })
  
 async function addProject (data: ProjectParams) {
-    const newProject = projectsStore.addProject(data)
-    await router.push({name: 'chats', params: { id: newProject.id}})
+    const newProject = await projectsStore.addProject(data)
+    // await router.push({name: 'chats', params: { id: newProject.id}})
+    console.log(newProject)
  }

 </script>
--- a/src/pages/ProjectInfoPage.vue
+++ b/src/pages/ProjectInfoPage.vue
@@ -29,7 +29,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useProjectsStore } from 'stores/projects'
-import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
+import projectInfoBlock from 'src/components/projectInfoBlock.vue'
 import type { Project } from '../types'
 import { parseIntString, isObjEqual } from 'boot/helpers'

@@ -45,7 +45,7 @@ const isFormValid = ref(false)
 const originalProject = ref<Project>({} as Project)

 const isDirty = () => {
-  return project.value && !isObjEqual(originalProject.value, project.value)
+  return true // project.value && !isObjEqual(originalProject.value, project.value)
 }

 onMounted(async () => {
--- a/src/pages/ProjectPage.vue
+++ b/src/pages/ProjectPage.vue
@@ -8,8 +8,6 @@
      v-model="tabSelect"
      animated
      keep-alive
-      @before-transition="showFab = false"
-      @transition="showFab = true"
      class="tab-panel-color full-height-panel w100 flex column col-grow no-scroll"
      >
      <q-tab-panel
@@ -19,7 +17,7 @@
        class="q-pa-none flex column col-grow no-scroll"
        style="flex-grow: 2"
        >
-        <component :is="tab.component" :showFab = "tab.name === tabSelect" />
+        <router-view/>
      </q-tab-panel>
    </q-tab-panels>

@@ -66,29 +64,18 @@
 <script setup lang="ts">
  import { ref, onBeforeMount, computed } from 'vue'
  import { useProjectsStore } from 'stores/projects'
-  import projectPageHeader from 'components/admin/project-page/ProjectPageHeader.vue' 
-  import projectPageChats from 'components/admin/project-page/ProjectPageChats.vue'  
-  import projectPageCompanies from 'components/admin/project-page/ProjectPageCompanies.vue'  
-  import projectPagePersons from 'components/admin/project-page/ProjectPagePersons.vue'  
+  import projectPageHeader from 'pages/project-page/ProjectPageHeader.vue' 
  import { useRoute } from 'vue-router'

  const route = useRoute()

-  const showFab = ref<boolean>(false)
-
  const projectStore = useProjectsStore()
  const currentProject = computed(() => projectStore.getCurrentProject() )

-  const tabComponents = {
-    projectPageChats,
-    projectPagePersons,
-    projectPageCompanies
-  }
-
  const tabs = [
-    {name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', component: tabComponents.projectPageChats, to: { name: 'chats'} },
-    {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', component: tabComponents.projectPagePersons, to: { name: 'persons'} },
-    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
+    {name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', to: { name: 'chats'} },
+    {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', to: { name: 'persons'} },
+    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', to: { name: 'companies'} },
  ]

  const tabSelect = ref<string>()
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -13,19 +13,9 @@
            icon-right="mdi-chevron-right"
            align="right"
            dense
+            class="fix-btn"
            >
-            <div class="flex items-center">
-              <q-avatar v-if="tgUser?.photo_url" size="32px">
-                <q-img :src="tgUser.photo_url"/>
-              </q-avatar>
-              <div class="q-ml-xs ellipsis" style="max-width: 100px">
-                {{
-                tgUser?.first_name + 
-                (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
-                tgUser?.last_name
-                }}
-              </div>
-            </div>
+            <pn-account-block-name/>
          </q-btn>
        </div>
          
@@ -33,7 +23,7 @@
    </template>

    <pn-scroll-list>
-      <template #card-body-header>
+      <template #card-body-header v-if="projects.length !== 0">
        <q-input
          v-model="searchProject"
          clearable
@@ -47,75 +37,91 @@
          </template>
        </q-input>
      </template>  
-    
-      <q-list separator>
-        <q-item
-          v-for = "item in activeProjects"
-          :key="item.id"
-          clickable
-          v-ripple
-          @click="goProject(item.id)"
-          class="w100"
-          >
-            <q-item-section avatar>
-              <q-avatar rounded >
-                <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
-                <pn-auto-avatar v-else :name="item.name"/>
-              </q-avatar>
+      
+      <div id="projects-wrapper">
+        <q-list separator v-if="projects.length !== 0">
+          <q-item
+            v-for = "item in activeProjects"
+            :key="item.id"
+            clickable
+            v-ripple
+            @click="goProject(item.id)"
+            class="w100"
+            >
+              <q-item-section avatar>
+                <q-avatar rounded >
+                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
+                  <pn-auto-avatar v-else :name="item.name"/>
+                </q-avatar>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+                <q-item-label caption lines="2">{{item.description}}</q-item-label>
+
            </q-item-section>
-            <q-item-section>
-              <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
-              <q-item-label caption lines="2">{{item.description}}</q-item-label>
+            <q-item-section side class="text-caption ">
+              <div class="flex items-center column">           
+                <div class="flex items-center">
+                  <q-icon name="mdi-chat-outline"/>
+                  <span>{{ item.chats }} </span>
+                </div>
+                <div class="flex items-center">
+                  <q-icon name="mdi-account-outline"/>
+                  <span>{{ item.persons }}</span>
+                </div>
+              </div>  
+            </q-item-section>
+          </q-item>
+        </q-list>
+        <div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
+          <div id="btn_show_archive">
+            <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
+              <template #label>
+                <span class="text-caption">
+                  <span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
+                  <span v-else>{{ $t('projects__hide_archive') }}</span>
+                </span>
+              </template>
+            </q-btn-dropdown>
+          </div>

-          </q-item-section>
-          <q-item-section side class="text-caption ">
-            <div class="flex items-center column">           
-              <div class="flex items-center">
-                <q-icon name="mdi-chat-outline"/>
-                <span>{{ item.chats }} </span>
-              </div>
-              <div class="flex items-center">
-                <q-icon name="mdi-account-outline"/>
-                <span>{{ item.persons }}</span>
-              </div>
-            </div>  
-          </q-item-section>
-        </q-item>
-      </q-list>
-      <div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
-        <div id="btn_show_archive">
-          <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
-            <template #label>
-              <span class="text-caption">
-                <span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
-                <span v-else>{{ $t('projects__hide_archive') }}</span>
-              </span>
-            </template>
-          </q-btn-dropdown>
+          <q-list separator v-if="showArchive" class="w100">
+            <q-item
+              v-for = "item in archiveProjects"
+              :key="item.id"
+              clickable
+              v-ripple
+              @click="handleArchiveList(item.id)"
+              class="w100 text-grey"
+              >
+              <q-item-section avatar>
+                <q-avatar rounded >
+                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
+                  <pn-auto-avatar v-else :name="item.name"/>
+                </q-avatar>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+                <q-item-label caption lines="2">{{item.description}}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
        </div>
-
-        <q-list separator v-if="showArchive" class="w100">
-        <q-item
-          v-for = "item in archiveProjects"
-          :key="item.id"
-          clickable
-          v-ripple
-          @click="handleArchiveList(item.id)"
-          class="w100 text-grey"
-          >
-          <q-item-section avatar>
-            <q-avatar rounded >
-              <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
-              <pn-auto-avatar v-else :name="item.name"/>
-            </q-avatar>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
-            <q-item-label caption lines="2">{{item.description}}</q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
      </div>
+      <div
+          v-if="projects.length === 0"
+          class="flex w100 column q-pt-xl q-pa-md"
+          >
+            <div class="flex column justify-center col-grow items-center text-grey">
+            <q-icon name="mdi-briefcase-plus-outline" size="160px" class="q-pb-md"/>
+            <div class="text-h6">
+              {{$t('projects__lets_start')}}
+            </div>
+            <div class="text-caption" align="center">
+              {{$t('projects__lets_start_description')}}
+            </div>
+          </div>
+        </div> 
    </pn-scroll-list>

    <q-page-sticky
@@ -160,13 +166,9 @@
 </template>

 <script setup lang="ts">
-  import { ref, computed, watch, inject } from 'vue'
+  import { ref, computed, watch, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { useProjectsStore } from 'stores/projects'
-  import type { WebApp } from '@twa-dev/types'
-
-  const tg = inject('tg') as WebApp
-  const tgUser = tg.initDataUnsafe.user

  const router = useRouter()
  const projectsStore = useProjectsStore()
@@ -223,11 +225,20 @@
    return displayProjects.value.filter(el => el.is_archive)
  })

+  onMounted(async () => {
+    if (!projectsStore.isInit) {
+      await projectsStore.init()
+    }
+  })
+
  watch(showDialogArchive, (newD :boolean) => {
    if (!newD) archiveProjectId.value = undefined
  })

 </script>

-<style>
+<style scoped>
+  .fix-btn :deep(.q-btn__content) {
+    flex-wrap: nowrap;
+  }
 </style>
--- a/src/pages/SubscribePage.vue
+++ b/src/pages/SubscribePage.vue
@@ -46,11 +46,11 @@
 </template>

 <script setup lang="ts">
-  import { ref, inject, computed } from 'vue'
+  import { ref } from 'vue'
  // import { useRouter } from 'vue-router'
  // import { useAuthStore } from 'stores/auth'
  // import type { WebApp } from '@twa-dev/types'
-  import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
+  import qtyChatCard from 'components/account-page/qtyChatCard.vue'
  // import optionPayment from 'components/admin/account-page/optionPayment.vue'

  // const router = useRouter()
@@ -72,10 +72,6 @@
    { id: 3, qty: 220, stars: 500, discount: 30 }
  ]) */

-
-
-
-
 </script>

 <style lang="scss">
--- a/src/components/admin/project-page/ProjectPageChats.vue
+++ b/src/components/admin/project-page/ProjectPageChats.vue
@@ -2,6 +2,7 @@
  <div class="q-pa-none flex column col-grow no-scroll">
    <pn-scroll-list>
      <template #card-body-header>
+        
        <div class="flex row q-ma-md justify-between">
          <q-input
            v-model="search"
@@ -17,7 +18,6 @@
          </q-input>
        </div>
      </template>
-
      <q-list bordered separator>
        <q-slide-item
          v-for="item in displayChats"
@@ -48,11 +48,11 @@
              </q-item-label>
              <q-item-label caption lines="1">
                <div class = "flex justify-start items-center">
-                  <div class="q-mr-sm">
+                  <div class="q-mr-sm flex items-center">
                    <q-icon name="mdi-account-outline" class="q-mx-sm"/>
                    <span>{{ item.persons }}</span>
                  </div>
-                  <div class="q-mx-sm">
+                  <div class="q-mx-sm flex items-center">
                    <q-icon name="mdi-key" class="q-mr-sm"/>
                    <span>{{ item.owner_id }} </span>
                  </div>
@@ -78,7 +78,7 @@
        enter-active-class="animated slideInUp"
        >
        <q-fab
-            v-if="fixShowFab"
+            v-if="showFab"
            icon="add"
            color="brand"
            direction="up"
@@ -148,13 +148,9 @@
 </template>

 <script setup lang="ts">
-  import { ref, computed, watch } from 'vue'
+  import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
  import { useChatsStore } from 'stores/chats'

-  const props = defineProps<{
-    showFab: boolean
-  }>()
-
  const search = ref('')
  const showOverlay = ref<boolean>(false)
  const chatsStore = useChatsStore()
@@ -215,16 +211,28 @@
  }

  // fix fab jumping
-  const fixShowFab = ref(true)
-  const showFabFixTrue = () => fixShowFab.value = true
+  const showFab = ref(false)
+  const timerId = ref<ReturnType<typeof setTimeout> | null>(null)

-  watch(() => props.showFab, (newVal) => {
-    const timerId = setTimeout(showFabFixTrue, 700)
-    if (newVal === false) {
-      clearTimeout(timerId)
-      fixShowFab.value = false
+  onActivated(() => {
+    timerId.value = setTimeout(() => {
+      showFab.value = true
+    }, 300)
+  })
+
+
+  onDeactivated(() => {
+    showFab.value = false
+    if (timerId.value) {
+      clearTimeout(timerId.value)
+      timerId.value = null
    }
-  }, {immediate: true})
+  })
+
+  onBeforeUnmount(() => {
+    if (timerId.value) clearTimeout(timerId.value)
+  })
+   
 </script>

 <style scoped>
--- a/src/components/admin/project-page/ProjectPageCompanies.vue
+++ b/src/components/admin/project-page/ProjectPageCompanies.vue
@@ -63,7 +63,7 @@
        enter-active-class="animated slideInUp"
        >
        <q-btn
-          v-if="fixShowFab"
+          v-if="showFab"
          fab 
          icon="add"
          color="brand"
@@ -103,14 +103,10 @@
 </template>
    
 <script setup lang="ts">
-  import { ref, computed, watch } from 'vue'
+  import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
  import { useRouter, useRoute  } from 'vue-router'
  import { useCompaniesStore } from 'stores/companies'
  import { parseIntString } from 'boot/helpers'
-
-  const props = defineProps<{
-    showFab: boolean
-  }>()
  
  const router = useRouter()
  const route = useRoute()
@@ -169,17 +165,27 @@
  }

  // fix fab jumping
-  const fixShowFab = ref(false)
-  const showFabFixTrue = () => fixShowFab.value = true
+  const showFab = ref(false)
+  const timerId = ref<ReturnType<typeof setTimeout> | null>(null)

-  watch(() => props.showFab, (newVal) => {
-    const timerId = setTimeout(showFabFixTrue, 500)
-    if (newVal === false) {
-      clearTimeout(timerId)
-      fixShowFab.value = false
+  onActivated(() => {
+    timerId.value = setTimeout(() => {
+      showFab.value = true
+    }, 300)
+  })
+
+
+  onDeactivated(() => {
+    showFab.value = false
+    if (timerId.value) {
+      clearTimeout(timerId.value)
+      timerId.value = null
    }
-  }, {immediate: true})
+  })

+  onBeforeUnmount(() => {
+    if (timerId.value) clearTimeout(timerId.value)
+  })
 </script>

 <style scoped>
--- a/src/components/admin/project-page/ProjectPageHeader.vue
+++ b/src/components/admin/project-page/ProjectPageHeader.vue
--- a/src/components/admin/project-page/ProjectPagePersons.vue
+++ b/src/components/admin/project-page/ProjectPagePersons.vue
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,96 +3,87 @@ import {
  createMemoryHistory,
  createRouter,
  createWebHashHistory,
-  createWebHistory,
+  createWebHistory
 } from 'vue-router'
 import routes from './routes'
 import { useAuthStore } from 'stores/auth'
 import { useProjectsStore } from 'stores/projects'

-/*
- * If not building with SSR mode, you can
- * directly export the Router instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Router instance.
- */
+declare module 'vue-router' {
+  interface RouteMeta {
+    public?: boolean
+    guestOnly?: boolean
+    hideBackButton?: boolean
+    backRoute?: string
+    requiresAuth?: boolean
+  }
+}

 export default defineRouter(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
-    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+    : process.env.VUE_ROUTER_MODE === 'history'
+    ? createWebHistory
+    : createWebHashHistory

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,
-
-    // Leave this as is and make changes in quasar.conf.js instead!
-    // quasar.conf.js -> build -> vueRouterMode
-    // quasar.conf.js -> build -> publicPath
-    history: createHistory(process.env.VUE_ROUTER_BASE),
+    history: createHistory(process.env.VUE_ROUTER_BASE)
  })
-  
-  const publicPaths = ['/login', '/create-account', '/recovery-password']

  Router.beforeEach(async (to) => {
    const authStore = useAuthStore()
    
-    // Инициализация хранилища перед проверкой
    if (!authStore.isInitialized) {
      await authStore.initialize()
    }
-  
-    // Проверка авторизации для непубличных маршрутов
-    if (!publicPaths.includes(to.path)) {
-      if (!authStore.isAuthenticated) {
-        return {
-          path: '/login',
-          query: { redirect: to.fullPath }
-        }
+
+    if (to.meta.guestOnly && authStore.isAuthenticated) {
+      return { name: 'projects' }
+    }
+
+    if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+      return { 
+        name: 'login',
+        replace: true
      }
    }
-  
-    // Редирект авторизованных пользователей с публичных маршрутов
-    if (publicPaths.includes(to.path) && authStore.isAuthenticated) {
-      return { path: '/' }
+
+    if (to.meta.public) {
+      return true
+    }
+
+    if (!to.meta.public && !authStore.isAuthenticated) {
+      return { 
+        name: 'login',
+        replace: true
+      }
    }
  })
-  
+
  const handleBackButton = async () => {
    const currentRoute = Router.currentRoute.value
    if (currentRoute.meta.backRoute) {
-      await Router.push(currentRoute.meta.backRoute);
+      await Router.push({ name: currentRoute.meta.backRoute })
    } else {
-      if (window.history.length > 1) {
-        Router.go(-1)
-      } else {
-       await  Router.push('/projects')
-      }
+      if (window.history.length > 1) Router.go(-1) 
+      else await Router.push({ name: 'projects' })
    }
  }
-    

  Router.afterEach((to) => {
-    const BackButton = window.Telegram?.WebApp?.BackButton;
-      if (BackButton) {
-        // Управление видимостью
-        if (to.meta.hideBackButton) {
-          BackButton.hide()
-        } else {
-          BackButton.show()
-        }
+    const BackButton = window.Telegram?.WebApp?.BackButton
+    if (BackButton) {
+      BackButton[to.meta.hideBackButton ? 'hide' : 'show']()
+      BackButton.offClick(handleBackButton as () => void)
+      BackButton.onClick(handleBackButton as () => void)
+    }

-        // Обновляем обработчик клика
-        BackButton.offClick(handleBackButton as () => void)
-        BackButton.onClick(handleBackButton as () => void)
-      }
-    
    if (!to.params.id) {
-      const projectsStore = useProjectsStore()
-      projectsStore.setCurrentProjectId(null)
+      useProjectsStore().setCurrentProjectId(null)
    }
  })

  return Router
-})
+})
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,5 +1,5 @@
 import type { RouteRecordRaw, RouteLocationNormalized } from 'vue-router'
-import { useProjectsStore } from '../stores/projects'
+import { useProjectsStore } from 'stores/projects'

 const setProjectBeforeEnter = (to: RouteLocationNormalized) => {
  const id = Number(to.params.id)
@@ -16,37 +16,42 @@ const routes: RouteRecordRaw[] = [
    children: [
      {
        path: '',
-        redirect: '/projects'
+        redirect: { name: 'projects' }
      },
      {
        name: 'projects',
        path: '/projects',
        component: () => import('pages/ProjectsPage.vue'),
-        meta: { hideBackButton: true }
+        meta: { 
+          hideBackButton: true,
+          requiresAuth: true
+        }
      },
      {
        name: 'project_add',
        path: '/project/add',
-        component: () => import('pages/ProjectCreatePage.vue')
+        component: () => import('pages/ProjectCreatePage.vue'),
+        meta: { requiresAuth: true }
      },
-    
      {
        name: 'project_info',
        path: '/project/:id(\\d+)/info',
        component: () => import('pages/ProjectInfoPage.vue'),
-        beforeEnter: setProjectBeforeEnter
+        beforeEnter: setProjectBeforeEnter,
+        meta: { requiresAuth: true }
      },
      {
        name: 'company_mask',
        path: '/project/:id(\\d+)/company-mask',
        component: () => import('pages/CompanyMaskPage.vue'),
-        beforeEnter: setProjectBeforeEnter
+        beforeEnter: setProjectBeforeEnter,
+        meta: { requiresAuth: true }
      },
-      
      {
        path: '/project/:id(\\d+)',
        component: () => import('pages/ProjectPage.vue'),
        beforeEnter: setProjectBeforeEnter,
+        meta: { requiresAuth: true },
        children: [
          {
            name: 'project',
@@ -56,20 +61,29 @@ const routes: RouteRecordRaw[] = [
          {
            name: 'chats',
            path: 'chats',
-            component: () => import('components/admin/project-page/ProjectPageChats.vue'),
-            meta: { backRoute: '/projects' }
+            component: () => import('pages/project-page/ProjectPageChats.vue'),
+            meta: { 
+              backRoute: 'projects',
+              requiresAuth: true
+            }
          },
          {
            name: 'persons',
            path: 'persons',
-            component: () => import('components/admin/project-page/ProjectPagePersons.vue'),
-            meta: { backRoute: '/projects' }
+            component: () => import('pages/project-page/ProjectPagePersons.vue'),
+            meta: { 
+              backRoute: 'projects',
+              requiresAuth: true
+            }
          },
          {
            name: 'companies',
            path: 'companies',
-            component: () => import('components/admin/project-page/ProjectPageCompanies.vue'),
-            meta: { backRoute: '/projects' }
+            component: () => import('pages/project-page/ProjectPageCompanies.vue'),
+            meta: { 
+              backRoute: 'projects',
+              requiresAuth: true
+            }
          }
        ]
      },
@@ -77,91 +91,104 @@ const routes: RouteRecordRaw[] = [
        name: 'company_info',
        path: '/project/:id(\\d+)/company/:companyId',
        component: () => import('pages/CompanyInfoPage.vue'),
-        beforeEnter: setProjectBeforeEnter
+        beforeEnter: setProjectBeforeEnter,
+        meta: { requiresAuth: true }
      },
      {
        name: 'person_info',
        path: '/project/:id(\\d+)/person/:personId',
        component: () => import('pages/PersonInfoPage.vue'),
-        beforeEnter: setProjectBeforeEnter
+        beforeEnter: setProjectBeforeEnter,
+        meta: { requiresAuth: true }
      },
-
      {
        name: 'account',
        path: '/account',
-        component: () => import('pages/AccountPage.vue') 
-       },
-       {
+        component: () => import('pages/AccountPage.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
        name: 'create_account',
        path: '/create-account',
-        component: () => import('src/pages/AccountCreatePage.vue') 
-       },
-       {
+        component: () => import('src/pages/AccountCreatePage.vue'),
+        meta: { 
+          public: true,
+          guestOnly: true 
+        }
+      },
+      {
        name: 'change_account_password',
        path: '/change-password',
-        component: () => import('pages/AccountChangePasswordPage.vue') 
-       },
-       {
+        component: () => import('pages/AccountChangePasswordPage.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
        name: 'change_account_email',
        path: '/change-email',
-        component: () => import('pages/AccountChangeEmailPage.vue') 
-       },
-       {
+        component: () => import('pages/AccountChangeEmailPage.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
        name: 'subscribe',
        path: '/subscribe',
-        component: () => import('pages/SubscribePage.vue') 
-       },
-       {
+        component: () => import('pages/SubscribePage.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
        name: 'terms',
        path: '/terms-of-use',
-        component: () => import('pages/TermsPage.vue') 
-       },
-       {
+        component: () => import('pages/TermsPage.vue'),
+        meta: { public: true }
+      },
+      {
        name: 'privacy',
        path: '/privacy',
-        component: () => import('pages/PrivacyPage.vue') 
-       },
-       {
+        component: () => import('pages/PrivacyPage.vue'),
+        meta: { public: true }
+      },
+      {
        name: 'your_company',
        path: '/your-company',
-        component: () => import('src/pages/CompanyYourPage.vue') 
-       },
-       {
+        component: () => import('src/pages/CompanyYourPage.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
        name: 'login',
        path: '/login',
-        component: () => import('pages/LoginPage.vue') 
-       },
-
-       {
+        component: () => import('pages/LoginPage.vue'),
+        meta: { 
+          public: true,
+          guestOnly: true 
+        }
+      },
+      {
        name: 'recovery_password',
        path: '/recovery-password',
-        component: () => import('src/pages/AccountForgotPasswordPage.vue') 
-       },
-
-       {
+        component: () => import('src/pages/AccountForgotPasswordPage.vue'),
+        meta: { 
+          public: true,
+          guestOnly: true 
+        }
+      },
+      {
        name: 'add_company',
        path: '/add-company',
-        component: () => import('src/pages/CompanyCreatePage.vue') 
-       },
-
-       {
-        name: 'person_info',
-        path: '/person-info',
-        component: () => import('pages/PersonInfoPage.vue') 
-       },
-
-       {
+        component: () => import('src/pages/CompanyCreatePage.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
        name: 'settings',
        path: '/settings',
-        component: () => import('pages/SettingsPage.vue') 
-       }
+        component: () => import('pages/SettingsPage.vue'),
+        meta: { requiresAuth: true }
+      }
    ]
  },
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
+    meta: { public: true }
  }
 ]

-
-export default routes
+export default routes
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { api } from 'boot/axios'
+import { api, type ServerError } from 'boot/axios'

 interface User {
  id: string
@@ -11,48 +11,77 @@ interface User {
  avatar?: string
 }

+const ENDPOINT_MAP = {
+  register: '/auth/register',
+  forgot: '/auth/forgot',
+  change: '/auth/change'
+} as const
+
+export type AuthFlowType = keyof typeof ENDPOINT_MAP
+
 export const useAuthStore = defineStore('auth', () => {
-  // State
  const user = ref<User | null>(null)
  const isInitialized = ref(false)

-  // Getters
  const isAuthenticated = computed(() => !!user.value)

-  // Actions
  const initialize = async () => {
    try {
      const { data } = await api.get('/customer/profile')
-      user.value = data
+      user.value = data.data
    } catch (error) {
-      console.error(error)
-      user.value = null
+      handleAuthError(error as ServerError)
    } finally {
      isInitialized.value = true
    }
  }

+  const handleAuthError = (error: ServerError) => {
+    if (error.code === '401') {
+      user.value = null
+    } else {
+      console.error('Authentication error:', error)
+    }
+  }
+
  const loginWithCredentials = async (email: string, password: string) => {
-    // будет переделано на беке - нужно сменить урл
-    await api.post('/api/admin/customer/login', { email, password }, { withCredentials: true })
+    await api.post('/auth/email', { email, password }, { withCredentials: true })
    await initialize()
  }

  const loginWithTelegram = async (initData: string) => {
-    await api.post('/api/admin/customer/login', { initData }, { withCredentials: true })
+    await api.post('/auth/telegram', { initData }, { withCredentials: true })
    await initialize()
  }

  const logout = async () => {
    try {
-      await api.get('/customer/logout', {})
-    } finally {
+      await api.get('/auth/logout', {})
      user.value = null
+      isInitialized.value = false
+    } finally {
      // @ts-expect-ignore
      // window.Telegram?.WebApp.close()
    }
  }
+  
+  const initRegistration = async (flowType: AuthFlowType, email: string) => {
+    await api.post(ENDPOINT_MAP[flowType], { email })
+  }
+  
+  const confirmCode = async (flowType: AuthFlowType, email: string, code: string) => {
+    await api.post(ENDPOINT_MAP[flowType], { email, code })
+  }

+  const setPassword = async (
+    flowType: AuthFlowType,
+    email: string,
+    code: string,
+    password: string
+  ) => {
+    await api.post(ENDPOINT_MAP[flowType], { email, code, password })
+  }
+  
  return {
    user,
    isAuthenticated,
@@ -60,6 +89,9 @@ export const useAuthStore = defineStore('auth', () => {
    initialize,
    loginWithCredentials,
    loginWithTelegram,
-    logout
+    logout,
+    initRegistration,
+    confirmCode,
+    setPassword
  }
 })
--- a/src/stores/projects.ts
+++ b/src/stores/projects.ts
@@ -1,42 +1,47 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import type { Project, ProjectParams } from '../types'
+import { api } from 'boot/axios'

 export const useProjectsStore = defineStore('projects', () => {
  const projects = ref<Project[]>([])
  const currentProjectId = ref<number | null>(null)
+  const isInit = ref<boolean>(false)

-  projects.value.push(
-      { id: 1, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 3, companies: 1, persons: 5, is_archive: false, logo_as_bg: false },
-      { id: 2, name: 'Разделка бобра на куски', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 8, companies: 12, persons: 1, is_archive: false, logo_as_bg: false },
-      { id: 3, name: 'Комплекс мер', description: '', logo: '', chats: 8, companies: 3, persons: 4, is_archive: true, logo_as_bg: false },
-      { id: 4, name: 'Тестовый проект 2', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
-      { id: 11, name: 'Тестовый проект 12', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 5, companies: 2, persons: 5, is_archive: false, logo_as_bg: false },
-      { id: 12, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
-      { id: 13, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: true },
-      { id: 14, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
-      { id: 112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false},
-      { id: 113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
-      { id: 114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: true, logo_as_bg: false },
-      { id: 1112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
-      { id: 1113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
-      { id: 1114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
-  )
+  
+  /* projects.value.push(
+    { id: 1, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 3, companies: 1, persons: 5, is_archive: false, logo_as_bg: false },
+    { id: 2, name: 'Разделка бобра на куски', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 8, companies: 12, persons: 1, is_archive: false, logo_as_bg: false },
+    { id: 3, name: 'Комплекс мер', description: '', logo: '', chats: 8, companies: 3, persons: 4, is_archive: true, logo_as_bg: false },
+    { id: 4, name: 'Тестовый проект 2', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
+    { id: 11, name: 'Тестовый проект 12', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 5, companies: 2, persons: 5, is_archive: false, logo_as_bg: false },
+    { id: 12, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
+    { id: 13, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: true },
+    { id: 14, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
+    { id: 112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false},
+    { id: 113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
+    { id: 114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: true, logo_as_bg: false },
+    { id: 1112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
+    { id: 1113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
+    { id: 1114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
+) */
+  
+  async function init() {
+    const prjs = await api.get('/project')
+    console.log(2222, prjs)
+    if (Array.isArray(prjs)) projects.value.push(...prjs)
+    isInit.value = true
+  }
  
  function projectById (id :number) {
    return projects.value.find(el =>el.id === id)
  }
  
-  function addProject (project: ProjectParams) {
-    const newProject = {
-      id: Date.now(),
-      is_archive: false,
-      chats: 0,
-      persons: 0,
-      companies: 0,
-      ...project
-    }
-    projects.value.push(newProject)
+  async function addProject (projectData: ProjectParams) {
+    const newProject = await api.put('/project', projectData)
+
+    console.log(newProject)
+    // projects.value.push(newProject)
    return newProject
  }

@@ -64,6 +69,8 @@ export const useProjectsStore = defineStore('projects', () => {
  }

  return {
+    init,
+    isInit,
    projects,
    currentProjectId,
    projectById,