v6

src/pages/AccountPage.vue

@@ -4,7 +4,6 @@
       <div class="flex items-center no-wrap w100">
         <pn-account-block-name/>
         <q-btn
-          v-if="user?.email"
           @click="logout()"
           flat
           round
@@ -53,7 +52,6 @@
 
   const router = useRouter()
   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,6 +71,7 @@
 
   async function logout () {
     await authStore.logout()
+    await router.push({ name: 'login' })
   }
 
 </script>

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>
 

src/pages/ProjectCreatePage.vue

@@ -25,10 +25,11 @@
 <script setup lang="ts">
   import { ref, computed } from 'vue'
   import { useRouter } from 'vue-router'
-  import projectInfoBlock from 'src/components/projectInfoBlock.vue'
+  import projectInfoBlock from 'components/projectInfoBlock.vue'
   import { useProjectsStore } from 'stores/projects'
-  import type { ProjectParams } from 'src/types'
-
+  import type { ProjectParams } from 'types/Project'
+  import { useNotify, type ServerError } from 'composables/useNotify'
+  const { notifyError } = useNotify()
 
   const router = useRouter()
   const projectsStore = useProjectsStore()
@@ -37,7 +38,7 @@
     name: '',
     logo: '',
     description: '',
-    logo_as_bg: false
+    is_logo_bg: false
   }
 
   const project = ref<ProjectParams>({ ...initialProject })
@@ -48,14 +49,18 @@
       project.value.name !== initialProject.name ||
       project.value.logo !== initialProject.logo ||
       project.value.description !== initialProject.description ||
-      project.value.logo_as_bg !== initialProject.logo_as_bg
+      project.value.is_logo_bg !== initialProject.is_logo_bg
     )
   })
   
  async function addProject (data: ProjectParams) {
-    const newProject = await projectsStore.addProject(data)
-    // await router.push({name: 'chats', params: { id: newProject.id}})
-    console.log(newProject)
+    try {
+      const newProject = await projectsStore.add(data)
+      await router.replace({ name: 'chats', params: { id: newProject.id }})
+      console.log(newProject)
+    } catch (error) {
+      notifyError(error as ServerError)
+    }
   }
 
 </script>

src/pages/ProjectInfoPage.vue

@@ -6,7 +6,7 @@
           <span>{{ $t('project_card__project_card') }}</span>
         </div>
         <q-btn
-          v-if="isFormValid && isDirty()"
+          v-if="isFormValid && (!isDirty(originalProject, project))"
           @click="updateProject()"
           flat
           round
@@ -29,39 +29,33 @@
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useProjectsStore } from 'stores/projects'
-import projectInfoBlock from 'src/components/projectInfoBlock.vue'
-import type { Project } from '../types'
-import { parseIntString, isObjEqual } from 'boot/helpers'
+import projectInfoBlock from 'components/projectInfoBlock.vue'
+import { parseIntString, isDirty } from 'boot/helpers'
+import type { ProjectParams } from 'types/Project'
 
 const router = useRouter()
 const route = useRoute()
 const projectsStore = useProjectsStore()
 
-const project = ref<Project>()
+const project = ref<ProjectParams>()
+const originalProject = ref<ProjectParams>()
+
 const id = parseIntString(route.params.id)
-
 const isFormValid = ref(false)
 
-const originalProject = ref<Project>({} as Project)
-
-const isDirty = () => {
-  return true // project.value && !isObjEqual(originalProject.value, project.value)
-}
-
 onMounted(async () => {
   if (id && projectsStore.projectById(id)) {
     const initial = projectsStore.projectById(id)
-    
-    project.value = { ...initial } as Project
-    originalProject.value = JSON.parse(JSON.stringify(project.value))
+    project.value = { ...initial } as ProjectParams
+    originalProject.value = {...project.value}
   } else {
     await abort()
   }
 })
 
-function updateProject () {
+async function updateProject () {
   if (id && project.value) {
-    projectsStore.updateProject(id, project.value)
+    await projectsStore.update(id, project.value)
     router.back()
   }
 }

src/pages/ProjectsPage.vue

@@ -63,11 +63,11 @@
               <div class="flex items-center column">           
                 <div class="flex items-center">
                   <q-icon name="mdi-chat-outline"/>
-                  <span>{{ item.chats }} </span>
+                  <span>{{ item.chat_count }} </span>
                 </div>
                 <div class="flex items-center">
                   <q-icon name="mdi-account-outline"/>
-                  <span>{{ item.persons }}</span>
+                  <span>{{ item.user_count }}</span>
                 </div>
               </div>  
             </q-item-section>
@@ -113,10 +113,16 @@
           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>
+            <q-btn flat no-caps @click="createNewProject">
+              <div class="flex column justify-center col-grow items-center">
+                <q-icon name="mdi-briefcase-plus-outline" size="160px" class="q-pb-md"/>
+                <div class="text-h6 text-brand">
+                  {{$t('projects__lets_start')}}
+                </div>
+              </div>
+            </q-btn>
+              
+
             <div class="text-caption" align="center">
               {{$t('projects__lets_start_description')}}
             </div>
@@ -169,9 +175,12 @@
   import { ref, computed, watch, onMounted } from 'vue'
   import { useRouter } from 'vue-router'
   import { useProjectsStore } from 'stores/projects'
+  import { useSettingsStore } from 'stores/settings'
+  import type { Project } from 'types/Project'
 
   const router = useRouter()
   const projectsStore = useProjectsStore()
+  const settingsStore = useSettingsStore()
   const projects = projectsStore.projects
 
   const searchProject = ref('')
@@ -197,20 +206,14 @@
   }
 
   function restoreFromArchive () {
-    if (archiveProjectId.value) {
-      const projectTemp = projectsStore.projectById(archiveProjectId.value)
-      if (projectTemp) {
-        projectTemp.is_archive = false
-        projectsStore.updateProject(archiveProjectId.value, projectTemp)
-      }
-    }
+    if (archiveProjectId.value) projectsStore.restore(archiveProjectId.value)
   }
 
   const displayProjects = computed(() => {
     if (!searchProject.value || !(searchProject.value && searchProject.value.trim())) return projects
     const searchChatValue = searchProject.value.trim().toLowerCase()
     const arrOut = projects
-      .filter(el =>
+      .filter((el: Project) =>
         el.name.toLowerCase().includes(searchChatValue) ||
         el.description && el.description.toLowerCase().includes(searchProject.value)
       )
@@ -218,17 +221,20 @@
   })
 
   const activeProjects = computed(() => {
-    return displayProjects.value.filter(el => !el.is_archive)
+    return displayProjects.value.filter((el: Project) => !el.is_archived)
   })
 
   const archiveProjects = computed(() => {
-    return displayProjects.value.filter(el => el.is_archive)
+    return displayProjects.value.filter((el: Project) => el.is_archived)
   })
 
   onMounted(async () => {
     if (!projectsStore.isInit) {
       await projectsStore.init()
     }
+    if (!settingsStore.isInit) {
+      await settingsStore.init()
+    }
   })
 
   watch(showDialogArchive, (newD :boolean) => {

src/pages/SettingsPage.vue

@@ -40,18 +40,18 @@
           <q-item-section>
             <div class="flex justify-end">
               <q-btn
-              @click="textSizeStore.decreaseFontSize()"
+              @click="settingsStore.decreaseFontSize()"
                 color="negative" flat
                 icon="mdi-format-font-size-decrease"
                 class="q-pa-sm q-mx-xs"
-                :disable="currentTextSize <= minTextSize"
+                :disable="!settingsStore.canDecrease"
               />
               <q-btn
-                @click="textSizeStore.increaseFontSize()"
+                @click="settingsStore.increaseFontSize()"
                 color="positive" flat
                 icon="mdi-format-font-size-increase"
                 class="q-pa-sm q-mx-xs"
-                :disable="currentTextSize >= maxTextSize"
+                :disable="!settingsStore.canIncrease"
               />
             </div>
           </q-item-section>
@@ -62,28 +62,22 @@
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import { watch, ref } from 'vue'
-  import { useTextSizeStore } from 'src/stores/textSize'
-
-  const { locale } = useI18n()
-  
-  const savedLocale = localStorage.getItem('locale') || 'en-US'
-  locale.value = savedLocale
+  import { ref, computed } from 'vue'
+  import { useSettingsStore } from 'stores/settings'
 
   const localeOptions = ref([
     { value: 'en-US', label: 'English' },
     { value: 'ru-RU', label: 'Русский' }
   ])
 
-  watch(locale, (newLocale) => {
-    localStorage.setItem('locale', newLocale)
+  const locale = computed({
+    get: () => settingsStore.settings.locale,
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    set: (value: string) => settingsStore.updateLocale(value)
   })
 
-  const textSizeStore = useTextSizeStore()
-  const currentTextSize = textSizeStore.currentFontSize
-  const maxTextSize = textSizeStore.maxFontSize 
-  const minTextSize = textSizeStore.minFontSize
+  const settingsStore = useSettingsStore()
+
 </script>
 
 <style scoped>

src/pages/project-page/ProjectPageHeader.vue

@@ -71,20 +71,12 @@
     <q-card class="q-pa-none q-ma-none">
       <q-card-section align="center">
         <div class="text-h6 text-negative ">
-          {{ $t( 
-            dialogType === 'archive'
-              ? 'project__archive_warning'
-              : 'project__delete_warning'
-          )}}
+          {{ $t('project__archive_warning')}}
         </div>
       </q-card-section>
 
       <q-card-section class="q-pt-none" align="center">
-        {{ $t( 
-            dialogType === 'archive'
-              ? 'project__archive_warning_message'
-              : 'project__delete_warning_message'
-          )}}
+        {{ $t('project__archive_warning_message')}}
       </q-card-section>
 
       <q-card-actions align="center">
@@ -96,14 +88,10 @@
         />
         <q-btn
           flat
-          :label="$t(
-            dialogType === 'archive'
-              ? 'project__archive'
-              : 'project__delete'
-          )"
+          :label="$t('project__archive')"
           color="negative"
           v-close-popup
-          @click="dialogType === 'archive' ? archiveProject() : deleteProject()"
+          @click="archiveProject"
         />
       </q-card-actions>
     </q-card>
@@ -122,22 +110,22 @@
 
   const expandProjectInfo = ref<boolean>(false)
   const showDialog = ref<boolean>(false)
-  const dialogType = ref<null | 'archive' | 'delete'>(null)
+  const dialogType = ref<null | 'archive'>(null)
 
   const headerHeight = ref<number>(0)
 
   const menuItems = [
     { id: 1, title: 'project__edit', icon:  'mdi-square-edit-outline', iconColor:  '', func: editProject },
     // { id: 2, title: 'project__backup', icon:  'mdi-content-save-outline', iconColor:  '', func: () => {} },
-    { id: 3, title: 'project__archive', icon:  'mdi-archive-outline', iconColor:  '', func:  () => { showDialog.value = true; dialogType.value = 'archive' }},
-    { id: 4, title: 'project__delete', icon:  'mdi-trash-can-outline', iconColor:  'red', func:  () => { showDialog.value = true; dialogType.value = 'delete' }},
+    { id: 3, title: 'project__archive', icon:  'mdi-archive-outline', iconColor:  'red', func:  () => { showDialog.value = true; dialogType.value = 'archive' }}
   ]
 
   const projectId = computed(() => parseIntString(route.params.id))
   const project =ref({
     name: '',
     description: '',
-    logo: ''
+    logo: '',
+    is_logo_bg: false
   })
 
   const loadProjectData = async () => {
@@ -154,7 +142,8 @@
     project.value = {
       name: projectFromStore.name,
       description: projectFromStore.description || '',
-      logo: projectFromStore.logo || ''
+      logo: projectFromStore.logo || '',
+      is_logo_bg: projectFromStore.is_logo_bg || false 
     }
   }
 }
@@ -164,15 +153,13 @@ async function abort () {
 }
 
 async function editProject () {
+  if (projectId.value) void projectsStore.update(projectId.value, project.value)
   await router.push({ name: 'project_info' })
 }
 
-function archiveProject () {
-  console.log('archive project')
-}
-
-function deleteProject () {
-  console.log('delete project')
+async function archiveProject () {
+  if (projectId.value) void projectsStore.archive(projectId.value)
+  await router.replace({ name: 'projects' })
 }
 
 function toggleExpand () {