v4

backend/app.js

@@ -15,7 +15,7 @@ BigInt.prototype.toJSON = function () {
   return Number(this)
 }
 
-app.use((req, res, next) => {
+/* app.use((req, res, next) => {
 	if(!(req.body instanceof Object)) 
 		return next()
 
@@ -26,29 +26,17 @@ app.use((req, res, next) => {
 		.map(key => req.body[key] = escapeHtml(req.body[key]))
 
 	next()
-})
+}) */
 
-// cors
+app.post('(/api/admin/auth/telegram|/api/miniapp/auth)', (req, res, next) => {
-app.use((req, res, next) => {
-	res.set({
-		'Access-Control-Allow-Origin': '*',
-		'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
-		'Access-Control-Allow-Headers': 'Accept,Accept-Language,Content-Language,Content-Type,Authorization,Cookie,X-Requested-With,Origin,Host',
-		'Access-Control-Allow-Credentials': true
-	})
-
-	return req.method == 'OPTIONS' ? res.status(200).json({success: true}) : next()
-})
-
-app.post('(/api/admin/customer/login|/api/miniapp/user/login)', (req, res, next) => {
 	const data = Object.assign({}, req.query)
 	delete data.hash
 	const hash = req.query?.hash
 	
 	const BOT_TOKEN = '7236504417:AAGVaodw3cRwGlf-jAhwnYb51OHaXcgpW8k'
-	const dataCheckString = Object.keys(data).sort().map((key) => `${key}=${data[key]}`).join("\n")
+	const dataCheckString = Object.keys(data).sort().map((key) => `${key}=${data[key]}`).join('\n')
-	const secretKey = crypto.createHmac("sha256", "WebAppData").update(BOT_TOKEN).digest()
+	const secretKey = crypto.createHmac('sha256', 'WebAppData').update(BOT_TOKEN).digest()
-	const hmac = crypto.createHmac("sha256", secretKey).update(dataCheckString).digest("hex")
+	const hmac = crypto.createHmac('sha256', secretKey).update(dataCheckString).digest('hex')
 
 	const timeDiff = Date.now() / 1000 - data.auth_date
 
@@ -73,14 +61,9 @@ app.use((err, req, res, next) => {
 	console.error(`Error for ${req.path}: ${err}`)
 
 	let message, code
-	//if (err.code == 'SQLITE_ERROR' || err.code == 'SQLITE_CONSTRAINT_CHECK') {
+	[message, code = 500] = err.message.split('::')
-	//	message = 'DATABASE_ERROR'
-		//code = err.code == 'SQLITE_CONSTRAINT_CHECK' ? 400 : 500
-	//} else {
-		[message, code = 500] = err.message.split('::')
-	//}
 		
-	res.status(res.statusCode == 200 ? 500 : res.statusCode).json({success: false, error: { message, code}})
+	res.status(code).json({success: false, error: { message, code}})
 })
 
 app.use(express.static('public'))

backend/apps/admin.js

@@ -15,11 +15,10 @@ const upload = multer({
 })
 
 const sessions = {}
+const emailCache = {} // key = email, value = code
 
 app.use((req, res, next) => {
-	if (req.path == '/customer/login' || 
+	if (req.path == '/auth/email' || req.path == '/auth/telegram' || req.path == '/auth/register' || req.path == '/auth/logout')
-		req.path == '/customer/register' || 
-		req.path == '/customer/activate')
 		return next()
 
 	const asid = req.query.asid || req.cookies.asid
@@ -31,96 +30,104 @@ app.use((req, res, next) => {
 	next()
 })
 
-// CUSTOMER
+// AUTH
-app.post('/customer/login', (req, res, next) => {
+function createSession(req, res, customer_id) {
+	if (!customer_id)
+		throw Error('AUTH_ERROR::500')
+
+	res.locals.customer_id = customer_id
+	const asid = crypto.randomBytes(64).toString('hex')
+	req.session = sessions[asid] = {asid, customer_id }
+	res.setHeader('Set-Cookie', [`asid=${asid};httpOnly;path=/api/admin`])	
+}
+
+app.post('/auth/email', (req, res, next) => {
 	res.locals.email = req.body?.email
 	res.locals.password = req.body?.password
 	 
-	let customer_id = db
+	const customer_id = db
-		.prepare(`
+		.prepare(`select id from customers  where is_blocked = 0 and email = :email and password is not null and password = :password `)
-			select id
-			  from customers 
-			 where is_active = 1 and (
-				email is not null and email = :email and password is not null and password = :password or
-				email is null and password is null and telegram_user_id = :telegram_id
-			)
-		`)
 		.pluck(true)
 		.get(res.locals)
 
-	if (!customer_id && !res.locals.email && !res.locals.password) {
-		customer_id = db
-			.prepare(`insert into customers (telegram_user_id, is_active) values (:telegram_id, 1) returning id`)
-			.safeIntegers(true)
-			.pluck(true)
-			.get(res.locals)		
-	}
-
 	if (!customer_id) 
 		throw Error('AUTH_ERROR::401')
 
-	res.locals.customer_id = customer_id
+	createSession(req, res, customer_id)
-	db
-		.prepare(`update customers set telegram_user_id = :telegram_id where id = :customer_id and email is not null`)
-		.run(res.locals)
-						
-	const asid = crypto.randomBytes(64).toString('hex')
-	req.session = sessions[asid] = {asid, customer_id }
-	res.setHeader('Set-Cookie', [`asid=${asid};httpOnly;path=/api/admin`])
-
 	res.status(200).json({success: true})
 })
 
-app.get('/customer/logout', (req, res, next) => {
+app.post('/auth/telegram', (req, res, next) => {
-	delete sessions[req.session.asid]
+	let customer_id = db
-	res.setHeader('Set-Cookie', [`asid=; expired; httpOnly`])
+		.prepare(`select id from customers where is_blocked = 0 and telegram_id = :telegram_id`)
+		.pluck(true)
+		.get(res.locals) || db
+		.prepare(`replace into customers (telegram_id, is_blocked) values (:telegram_id, 0) returning id`)
+		.pluck(true)
+		.get(res.locals)		
+
+	createSession(req, res, customer_id)
 	res.status(200).json({success: true})
 })
 
-app.post('/customer/register', (req, res, next) => {
+app.get('/auth/logout', (req, res, next) => {
-	const email = String(req.body.email).trim()
+	if (req.session?.asid)
-	const password = String(req.body.password).trim()
+		delete sessions[req.session.asid]
+	res.setHeader('Set-Cookie', [`asid=; expired; httpOnly;path=/api/admin`])
+	res.status(200).json({success: true})
+})
 
-	const validateEmail = email => String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
+app.post('/auth/register', (req, res, next) => {
-	if (!validateEmail(email)) 
+	const email = String(req.body.email ?? '').trim()
+	const code = String(req.body.code ?? '').trim()
+	const password = String(req.body.password ?? '').trim()
+  
+	if (email) {
+	  const validateEmail = email => String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
+	  if (!validateEmail(email)) 
 		throw Error('INCORRECT_EMAIL::400')
-
+  
-	if (!password)
+	  const customer_id = db
-		throw Error('EMPTY_PASSWORD::400')
-
-	const row = db
 		.prepare('select id from customers where email = :email')
-		.run({email}) 
+		.pluck(true)
-	if (row) 
+		.get({email}) 
-		throw Error('DUPLICATE_EMAIL::400')
+  
+	  if (customer_id)   
+		throw Error('USED_EMAIL::400')
+	}
+  
+	if (email && !code) {
+	  const code = Math.random().toString().substr(2, 4) 
+	  emailCache[email] = code
+	  // To-Do: send email
+	  console.log(`${email} => ${code}`)
+	}
+  
+	if (email && code && !password) {
+	  if (emailCache[email] != code)
+		throw Error('INCORRECT_CODE::400')
+	}
+  
+	if (email && code && password) {
+	  if (password.length < 8)
+		throw Error('INCORRECT_PASSWORD::400')
+  
+	  db
+		.prepare('insert into customers (email, password, is_blocked) values (:email, :password, 0)')
+		.run({email, password}) 
+	}
+  
+	res.status(200).json({success: true})      
+  })
 
-	const key = crypto.randomBytes(32).toString('hex')
-	const info = db
-		.prepare('insert into customers (email, password, activation_key) values (:email, :password, :key)')
-		.run({email, password, key}) 
-
-	// To-Do: SEND MAIL
-	console.log(`http://127.0.0.1:3000/api/customer/activate?key=${key}`)
-	res.status(200).json({success: true, data: key})			
-})
-
-app.get('/customer/activate', (req, res, next) => {
-	const row = db
-		.prepare('update customers set is_active = 1 where activation_key = :key returning id')
-		.get({key: req.query.key})
-
-	if (!row || !row.id)	
-		throw Error('BAD_ACTIVATION_KEY::400')
-
-	res.status(200).json({success: true})	
-})
 
+// CUSTOMER
 app.get('/customer/profile', (req, res, next) => {
 	const row = db
 		.prepare(`
 			select id, name, email, plan, coalesce(json_balance, '{}') json_balance, coalesce(json_company, '{}') json_company, upload_group_id 
 			from customers 
-			where id = :customer_id and is_active = 1
+			where id = :customer_id
 		`)
 		.get(res.locals) 
 

backend/apps/bot.js

@@ -10,8 +10,9 @@ const { NewMessage } = require('telegram/events')
 const { Button } = require('telegram/tl/custom/button')
 const { CustomFile } = require('telegram/client/uploads')
 
-// const session = new StringSession('1AgAOMTQ5LjE1NC4xNjcuNTABuxdIxmjimA0hmWpdrlZ4Fo7uoIGU4Bu9+G5QprS6zdtyeMfcssWEZp0doLRX/20MomQyF4Opsos0El0Ifj5aiNgg01z8khMLMeT98jS+1U/sh32p3GxZfxyXSxX1bD0NLRaXnqVyNNswYqRZPhboT28NMjDqwlz0nrW9rge+QMJDL7jIkXgSs+cmJBINiqsEI8jWjXmc8TU/17gngtjUHRf5kRM4y5gsNC4O8cF5lcHRx0G/U5ZVihTID8ItQ6EdEHjz6e4XErbVOJ81PfYkqEoPXVvkEmRM0/VbvCzFfixfas4Vzczfn98OHLd8P2MXcgokZ2rppvIV3fQXOHxJbA0=')
+//const session = new StringSession('1AgAOMTQ5LjE1NC4xNjcuNTABu2OaFuD5Oyi5wGck+n5ldAfshzYfwlWee+OUxYBvFzlKAdW11Hsndu1SJBLUnKjP8sTJEPbLwdqANBhBXmQMghLVAblwK6TxLfsWxy2zf/HGLeNXohhrsep0hBxu9imyHV6OI6gQG+c5qaGkzjZrz0AcS4ut0xy99XrXgjiNfnjeMX7a0mOk6IK9iKdwbX9kXTfclFLVppiBGXolYJjVb2E57tk4+7RncIVyw+Fxn0NZfnhEfHJZly6j03arZOeM5VYl9ul8+3lJDD+KJJHeMgImmYjmcFcF3CbtkhPuTSPnWKtCnm2sRzepn5VFfoG6zgYff04fBdKGvHAai+wQSOY=')
-const session = new StringSession('')
+const session = new StringSession('1AgAOMTQ5LjE1NC4xNjcuNTEBuzSgmBQR5/m8M8cyOnsLCIOkYQJTizJoJRZiPKK+eBjMuodc0JuKQwzeWBRJI/c6YxaBHvokpngf5kr57uly+meSPPlFq6MyoSSQDbEJ3VAAWJu+/ALN0ickE92RjRfM5Kw6DimC9FXuMgJJsoUHtk/i+ZGXy9JB+q67G0yy8NvFIuWpFHJDkwmi0qTlTgJ5UOm4PYkV01iNUcV5siaWFVTTLsetHtBUdMOzg5WjjvuOyYV/MIx+z7ynhvF3DxLPCugxqhCvZ/RW+0vldrTX5TZ0BzIDk2eNFQjRORJcZo6upwvH7aZYStV4DxhIi1dEYu5gyvnt4vkbR5kuvE/GqO0=')
+
 
 let client
 
@@ -493,12 +494,19 @@ async function onNewUserMessage (msg) {
 			updateUser(userId, user)
 			await updateUserPhoto (userId, user)
 
+			const appButton = new Api.KeyboardButtonWebView({
+				text: "Open Mini-App", // Текст на кнопке
+				url: "https://h5sj0gpz-3000.euw.devtunnels.ms/", // URL вашего Mini-App (HTTPS!)
+			  });
+			
+
 			const inputPeer = new Api.InputPeerUser({userId: tgUserId, accessHash: user.accessHash.value})
 			const resultBtn = await client.sendMessage(inputPeer, {
 				message: 'Сообщение от бота',
 				buttons: client.buildReplyMarkup([
 					[Button.url('Админка', 'https://t.me/ready_or_not_2025_bot/userapp?startapp=admin')],
-					[Button.url('Пользователь', 'https://t.me/ready_or_not_2025_bot/userapp?startapp=user')]
+					[Button.url('Пользователь', 'https://t.me/ready_or_not_2025_bot/userapp?startapp=user')],
+					[appButton]
 				])
 			})
 		} catch (err) {
@@ -560,6 +568,7 @@ class Bot extends EventEmitter {
 		})
 		
 		await client.start({botAuthToken})
+		console.log('SID: ', session.save())
 	}
 
 	async uploadDocument(projectId, fileName, mime, data, parentType, parentId, publishedBy) {	

backend/data/init.sql

@@ -5,11 +5,10 @@ create table if not exists customers (
 	name text check(name is null or trim(name) <> '' and length(name) < 256),	
 	email text check(email is null or trim(email) <> '' and length(email) < 128),
 	password text check(password is null or length(password) > 7 and length(password) < 64),
-	telegram_user_id integer,
+	telegram_id integer,
 	plan integer,
 	json_balance text default '{}',
-	activation_key text,
+	is_blocked integer default 0,
-	is_active integer default 0,
 	json_company text default '{}',
 	upload_group_id	integer,
 	json_backup_server text default '{}',

backend/letsgo.bat

@@ -0,0 +1 @@
+node app

backend/package-lock.json

@@ -392,9 +392,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.3",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -1169,9 +1169,9 @@
       }
     },
     "node_modules/nodemailer": {
-      "version": "6.10.0",
+      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.1.tgz",
-      "integrity": "sha512-SQ3wZCExjeSatLE/HBaXS5vqUOQk6GtBdIIKxiFdmm01mOQZX/POJkO3SUX1wDiYcwUOJwT23scFSC9fY2H8IA==",
+      "integrity": "sha512-Z+iLaBGVaSjbIzQ4pX6XV41HrooLsQ10ZWPUehGmuantvzWoDVBnmsdUcOIDM1t+yPor5pDhVlDESgOMEGxhHA==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"

backend/public/index.html

@@ -8,7 +8,7 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex,nofollow" />
-    <script src="https://telegram.org/js/telegram-web-app.js?56"></script>
+    <script src="https://telegram.org/js/telegram-web-app.js?57"></script>
     <title></title>
     <style>
 	*[hidden] {display: none;}
@@ -22,7 +22,7 @@
 <body>
 
 <div id = "adminapp"  hidden>
-	<b>Админка</b>
+	<b>Админка2</b>
 	<div id = "settings" class = "block">
 		<b>Настройки</b><br>
 		<input id = "name" type = "text" placeholder = "Name">	
@@ -282,18 +282,24 @@ $adminapp.querySelector('#companies #add-company').addEventListener('click', asy
 	}).catch(alert)
 })
 
-try {
 
 
-
+window.addEventListener('load', async (event) => {
-
-(async () => {
 	const startParams = (Telegram.WebApp.initDataUnsafe.start_param || '').split('_')
-	const isAdmin = startParams[0] == 'admin'
+	//const isAdmin = startParams[0] == 'admin'
+	const isAdmin = true
 	const $app = isAdmin ? $adminapp : $miniapp
 	$app.hidden = false
 
-	const login_url = isAdmin ? '/api/admin/customer/login?' : '/api/miniapp/user/login?'
+	const login_url = isAdmin ? '/api/admin/auth/telegram?' : '/api/miniapp/auth?'
+	await Telegram.WebApp.ready()
+	console.log(Telegram)
+	if (Telegram.WebApp.initData == '') {
+		alert('NO INIT DATA')
+		return 0
+	}
+
+	console.log('TG', Telegram)
 	const login = await fetch(login_url + Telegram.WebApp.initData, {method: 'POST'}).then(res => res.json())
 	console.log(login)
 
@@ -324,12 +330,8 @@ try {
 		if (startParams[1])
 			alert('Группа на проекте ' + startParams[1])
 	}
-})()
+})
 
-	
-} catch (err) {
-	alert(err)
-}
 
 </script>
 

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' {
+class ServerError extends Error {
-  interface ComponentCustomProperties {
+  constructor(
-    $axios: AxiosInstance;
+    public code: string,
-    $api: AxiosInstance;
+    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: '/',
+  baseURL: '/api/admin',
-  withCredentials: true // Важно для работы с cookies
+  withCredentials: true
 })
 
 api.interceptors.response.use(
   response => response,
-  async error => {
+  async (error: AxiosError<{ error?: { code: string; message: string } }>) => {
-    if (error.response?.status === 401) {
+    const errorData = error.response?.data?.error || {
-      const authStore = useAuthStore()
+      code: 'ZERO',
-      await authStore.logout()
+      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 }

src/boot/global-components.ts

@@ -1,14 +1,18 @@
 import { boot } from 'quasar/wrappers'
-import pnPageCard from '../components/admin/pnPageCard.vue'
+import pnPageCard from 'components/pnPageCard.vue'
-import pnScrollList from '../components/admin/pnScrollList.vue'
+import pnScrollList from 'components/pnScrollList.vue'
-import pnAutoAvatar from '../components/admin/pnAutoAvatar.vue'
+import pnAutoAvatar from 'components/pnAutoAvatar.vue'
-import pnOverlay from '../components/admin/pnOverlay.vue'
+import pnOverlay from 'components/pnOverlay.vue'
-import pnImageSelector from '../components/admin/pnImageSelector.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)
 })

src/boot/helpers.ts

@@ -1,36 +1,31 @@
-export function isObjEqual(a: object, b: object): boolean {
+export function isObjEqual (obj1: Record<string, string | number | boolean>, obj2: Record<string, string | number | boolean>): boolean {
-  // Сравнение примитивов и null/undefined
+  const filteredObj1 = filterIgnored(obj1)
-  if (a === b) return true
+  const filteredObj2 = filterIgnored(obj2)
-  if (!a || !b) return false
-  if (Object.keys(a).length !== Object.keys(b).length) return false
 
-  // Получаем все уникальные ключи из обоих объектов
+  const allKeys = new Set([...Object.keys(filteredObj1), ...Object.keys(filteredObj2)])
-  const allKeys = new Set([
-    ...Object.keys(a),
-    ...Object.keys(b)
-  ])
 
-  // Проверяем каждое свойство
   for (const key of allKeys) {
-    const valA = a[key as keyof typeof a]
+      const hasKey1 = Object.prototype.hasOwnProperty.call(filteredObj1, key)
-    const valB = b[key as keyof typeof b]
+      const hasKey2 = Object.prototype.hasOwnProperty.call(filteredObj2, key)
-
+      
-    // Если одно из значений undefined - объекты разные
+      if (hasKey1 !== hasKey2) return false
-    if (valA === undefined || valB === undefined) return false
+      if (hasKey1 && hasKey2 && filteredObj1[key] !== filteredObj2[key]) return false
-
-    // Рекурсивное сравнение для вложенных объектов
-    if (typeof valA === 'object' && typeof valB === 'object') {
-      if (!isObjEqual(valA, valB)) return false
-    } 
-    // Сравнение примитивов
-    else if (!Object.is(valA, valB)) {
-      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+$/

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: объявляем тип для инжекции

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>

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>

src/components/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"

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>

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>
+
+

src/components/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"/>

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 {
+  aside {
-  background-color: transparent !important;
+    background-color: transparent !important;
-}
+  }
 
 </style>

src/pages/AccountChangeEmailPage.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'
+  const type = 'forgotPwd'
 </script>

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>

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'
+  import { onMounted, ref } from 'vue'
-  const type = 'new'
+  import accountHelper from 'src/components/accountHelper.vue'
+
+  const type = 'register'
+  const email = ref(sessionStorage.getItem('pendingLogin') || '')
+
+  onMounted(() => {
+    sessionStorage.removeItem('pendingLogin')
+  })
+  
 </script>

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 { onMounted, ref } from 'vue'
-  import { useRoute } from 'vue-router' // Добавляем импорт
+  import accountHelper from 'src/components/accountHelper.vue'
-  import accountHelper from 'components/admin/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>

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 no-wrap w100">
-        <div class="flex items-center justify-center row">
+        <pn-account-block-name/>
-          <q-avatar v-if="tgUser?.photo_url" size="48px" class="q-mr-xs">
+        <q-btn
-            <q-img :src="tgUser.photo_url"/>
+          v-if="user?.email"
-          </q-avatar>
+          @click="logout()"
-          <div class="flex column">
+          flat
-            <span class="q-ml-xs text-h5">
+          round
-              {{
+          icon="mdi-logout"
-                tgUser?.first_name + 
+          class="q-ml-md"
-                (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>
     </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 { useAuthStore } from 'stores/auth'
-  import type { WebApp } from '@twa-dev/types'
 
   const router = useRouter()
-  // const authStore = useAuthStore()
+  const authStore = useAuthStore()
-
+  const user = authStore.user
-  const tg = inject('tg') as WebApp
-  const tgUser = tg.initDataUnsafe.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: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
-    { id: 7, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
+    { id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
-    { id: 8, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
+    { 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">

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'
 

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 companyInfoBlock from 'src/components/companyInfoBlock.vue'
-  import companyInfoPersons from 'components/admin/companyInfoPersons.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'

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'
 

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"
+          class="q-mb-sm"
-          :label = "$t('login__email')"
+          :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')"
+          :label="$t('login__password')"
-          class = "q-mb-md"
+          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">
+      <span
-        {{$t('login__terms_of_use') }}
+        @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({
+    sessionStorage.setItem('pendingLogin', login.value)
-      name: 'recovery_password',
+    await router.push({ name: 'recovery_password' })
-      query: { email: login.value } 
-    })
   }
 
   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>
 

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"

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)
+    const newProject = await projectsStore.addProject(data)
-    await router.push({name: 'chats', params: { id: newProject.id}})
+    // await router.push({name: 'chats', params: { id: newProject.id}})
+    console.log(newProject)
   }
 
 </script>

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 () => {

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 projectPageHeader from 'pages/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 { 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: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', to: { name: 'chats'} },
-    {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', component: tabComponents.projectPagePersons, to: { name: 'persons'} },
+    {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', to: { name: 'persons'} },
-    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
+    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', to: { name: 'companies'} },
   ]
 
   const tabSelect = ref<string>()

src/pages/ProjectsPage.vue

@@ -13,19 +13,9 @@
             icon-right="mdi-chevron-right"
             align="right"
             dense
+            class="fix-btn"
             >
-            <div class="flex items-center">
+            <pn-account-block-name/>
-              <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>
           </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>
+      <div id="projects-wrapper">
-        <q-item
+        <q-list separator v-if="projects.length !== 0">
-          v-for = "item in activeProjects"
+          <q-item
-          :key="item.id"
+            v-for = "item in activeProjects"
-          clickable
+            :key="item.id"
-          v-ripple
+            clickable
-          @click="goProject(item.id)"
+            v-ripple
-          class="w100"
+            @click="goProject(item.id)"
-          >
+            class="w100"
-            <q-item-section avatar>
+            >
-              <q-avatar rounded >
+              <q-item-section avatar>
-                <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
+                <q-avatar rounded >
-                <pn-auto-avatar v-else :name="item.name"/>
+                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
-              </q-avatar>
+                  <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-section side class="text-caption ">
-              <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+              <div class="flex items-center column">           
-              <q-item-label caption lines="2">{{item.description}}</q-item-label>
+                <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-list separator v-if="showArchive" class="w100">
-          <q-item-section side class="text-caption ">
+            <q-item
-            <div class="flex items-center column">           
+              v-for = "item in archiveProjects"
-              <div class="flex items-center">
+              :key="item.id"
-                <q-icon name="mdi-chat-outline"/>
+              clickable
-                <span>{{ item.chats }} </span>
+              v-ripple
-              </div>
+              @click="handleArchiveList(item.id)"
-              <div class="flex items-center">
+              class="w100 text-grey"
-                <q-icon name="mdi-account-outline"/>
+              >
-                <span>{{ item.persons }}</span>
+              <q-item-section avatar>
-              </div>
+                <q-avatar rounded >
-            </div>  
+                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
-          </q-item-section>
+                  <pn-auto-avatar v-else :name="item.name"/>
-        </q-item>
+                </q-avatar>
-      </q-list>
+              </q-item-section>
-      <div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
+              <q-item-section>
-        <div id="btn_show_archive">
+                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
-          <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
+                <q-item-label caption lines="2">{{item.description}}</q-item-label>
-            <template #label>
+              </q-item-section>
-              <span class="text-caption">
+            </q-item>
-                <span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
+          </q-list>
-                <span v-else>{{ $t('projects__hide_archive') }}</span>
-              </span>
-            </template>
-          </q-btn-dropdown>
         </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>

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">

src/pages/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 showFab = ref(false)
-  const showFabFixTrue = () => fixShowFab.value = true
+  const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
 
-  watch(() => props.showFab, (newVal) => {
+  onActivated(() => {
-    const timerId = setTimeout(showFabFixTrue, 700)
+    timerId.value = setTimeout(() => {
-    if (newVal === false) {
+      showFab.value = true
-      clearTimeout(timerId)
+    }, 300)
-      fixShowFab.value = false
+  })
+
+
+  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>

src/pages/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 showFab = ref(false)
-  const showFabFixTrue = () => fixShowFab.value = true
+  const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
 
-  watch(() => props.showFab, (newVal) => {
+  onActivated(() => {
-    const timerId = setTimeout(showFabFixTrue, 500)
+    timerId.value = setTimeout(() => {
-    if (newVal === false) {
+      showFab.value = true
-      clearTimeout(timerId)
+    }, 300)
-      fixShowFab.value = false
+  })
+
+
+  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>

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'
 
-/*
+declare module 'vue-router' {
- * If not building with SSR mode, you can
+  interface RouteMeta {
- * directly export the Router instantiation;
+    public?: boolean
- *
+    guestOnly?: boolean
- * The function below can be async too; either use
+    hideBackButton?: boolean
- * async/await or return a Promise which resolves
+    backRoute?: string
- * with the Router instance.
+    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,
-
+    history: createHistory(process.env.VUE_ROUTER_BASE)
-    // 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),
   })
-  
-  const publicPaths = ['/login', '/create-account', '/recovery-password']
 
   Router.beforeEach(async (to) => {
     const authStore = useAuthStore()
     
-    // Инициализация хранилища перед проверкой
     if (!authStore.isInitialized) {
       await authStore.initialize()
     }
-  
+
-    // Проверка авторизации для непубличных маршрутов
+    if (to.meta.guestOnly && authStore.isAuthenticated) {
-    if (!publicPaths.includes(to.path)) {
+      return { name: 'projects' }
-      if (!authStore.isAuthenticated) {
+    }
-        return {
+
-          path: '/login',
+    if (to.meta.requiresAuth && !authStore.isAuthenticated) {
-          query: { redirect: to.fullPath }
+      return { 
-        }
+        name: 'login',
+        replace: true
       }
     }
-  
+
-    // Редирект авторизованных пользователей с публичных маршрутов
+    if (to.meta.public) {
-    if (publicPaths.includes(to.path) && authStore.isAuthenticated) {
+      return true
-      return { path: '/' }
+    }
+
+    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) {
+      if (window.history.length > 1) Router.go(-1) 
-        Router.go(-1)
+      else await Router.push({ name: 'projects' })
-      } else {
-       await  Router.push('/projects')
-      }
     }
   }
-    
 
   Router.afterEach((to) => {
-    const BackButton = window.Telegram?.WebApp?.BackButton;
+    const BackButton = window.Telegram?.WebApp?.BackButton
-      if (BackButton) {
+    if (BackButton) {
-        // Управление видимостью
+      BackButton[to.meta.hideBackButton ? 'hide' : 'show']()
-        if (to.meta.hideBackButton) {
+      BackButton.offClick(handleBackButton as () => void)
-          BackButton.hide()
+      BackButton.onClick(handleBackButton as () => void)
-        } else {
+    }
-          BackButton.show()
-        }
 
-        // Обновляем обработчик клика
-        BackButton.offClick(handleBackButton as () => void)
-        BackButton.onClick(handleBackButton as () => void)
-      }
-    
     if (!to.params.id) {
-      const projectsStore = useProjectsStore()
+      useProjectsStore().setCurrentProjectId(null)
-      projectsStore.setCurrentProjectId(null)
     }
   })
 
   return Router
-})
+})

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'),
+            component: () => import('pages/project-page/ProjectPageChats.vue'),
-            meta: { backRoute: '/projects' }
+            meta: { 
+              backRoute: 'projects',
+              requiresAuth: true
+            }
           },
           {
             name: 'persons',
             path: 'persons',
-            component: () => import('components/admin/project-page/ProjectPagePersons.vue'),
+            component: () => import('pages/project-page/ProjectPagePersons.vue'),
-            meta: { backRoute: '/projects' }
+            meta: { 
+              backRoute: 'projects',
+              requiresAuth: true
+            }
           },
           {
             name: 'companies',
             path: 'companies',
-            component: () => import('components/admin/project-page/ProjectPageCompanies.vue'),
+            component: () => import('pages/project-page/ProjectPageCompanies.vue'),
-            meta: { backRoute: '/projects' }
+            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') 
+        component: () => import('src/pages/CompanyCreatePage.vue'),
-       },
+        meta: { requiresAuth: true }
-
+      },
-       {
+      {
-        name: 'person_info',
-        path: '/person-info',
-        component: () => import('pages/PersonInfoPage.vue') 
-       },
-
-       {
         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

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)
+      handleAuthError(error as ServerError)
-      user.value = null
     } 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('/auth/email', { email, password }, { withCredentials: true })
-    await api.post('/api/admin/customer/login', { 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', {})
+      await api.get('/auth/logout', {})
-    } finally {
       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
   }
 })

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 },
+  /* projects.value.push(
-      { id: 2, name: 'Разделка бобра на куски', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 8, companies: 12, persons: 1, is_archive: false, logo_as_bg: false },
+    { 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: 3, name: 'Комплекс мер', description: '', logo: '', chats: 8, companies: 3, persons: 4, is_archive: true, logo_as_bg: false },
+    { id: 2, name: 'Разделка бобра на куски', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 8, companies: 12, persons: 1, is_archive: false, logo_as_bg: false },
-      { id: 4, name: 'Тестовый проект 2', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 12, companies: 11, persons: 15, 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: 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: 4, name: 'Тестовый проект 2', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 12, companies: 11, persons: 15, 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: 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: 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: 12, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
-      { 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: 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: 112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false},
+    { 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: 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: 112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, 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: 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: 1112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, 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: 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: 1112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, 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 },
+    { 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) {
+  async function addProject (projectData: ProjectParams) {
-    const newProject = {
+    const newProject = await api.put('/project', projectData)
-      id: Date.now(),
+
-      is_archive: false,
+    console.log(newProject)
-      chats: 0,
+    // projects.value.push(newProject)
-      persons: 0,
-      companies: 0,
-      ...project
-    }
-    projects.value.push(newProject)
     return newProject
   }
 
@@ -64,6 +69,8 @@ export const useProjectsStore = defineStore('projects', () => {
   }
 
   return {
+    init,
+    isInit,
     projects,
     currentProjectId,
     projectById,

todo.txt

@@ -5,6 +5,17 @@
 + Надпись "Неправильный логин или пароль"
 + Окно "Регистрация нового пользователя"
 + Верификация поля ввода e-mail (не делать - плохо выглядит)
++ Выровнять надпись "Забыли пароль"
++ Проверка e-mail
++ Блок "продолжить как"
+- Разнести строки как на страницах Info
+- Дизайн страницы
+
+1.1 Панель восстанавления пароля/смена пароля
+- Команды API в зависимости от того, какая страницах
+- Проверка e-mail
+- OTP-код
+- Анимация завершения действия.
 
 2. Account:
 + Работа с изображением логотипа компании
@@ -62,7 +73,7 @@
 - Встроить в Телеграмм
 
 BUGS:
-+- 1. Прыгает кнопка fab при перещелкивании табов (при быстром переключении все равно прыгает, проблема установлена в q-page-sticky -как-то некорректно отрабатывается bottom и right)
++- 1. Прыгает кнопка fab при перещелкивании табов
 + 2. Верстка в шапке Projects плохая - переделать
 - 3. Не хватает перевода местами
 + 4. При нажатии Back браузера скидывается активная табка.
@@ -81,3 +92,10 @@ Current ToDo:
 - 6.1 Переделать выбор платежей.
 - 6.2 Окошко смены емейл аккаунта при входе с емейла.
 - 7. Настроить git
+
+
+Projects:
+1. Добавить ключ в isArchive и обработку ключа: при архивировании проекта все чаты отвязываются от проекта (переходят в режим - без отслеживания), однако у админа есть возможность вернуть проект из архива с сохарнением всех данных (в отличии от удалить).
+2. Добавить ключ logo_as_bg - использовать изображения логотипа проекта как бэкграунд в чатах. При удалении фото переводить в false. Если такое сложно сделать, то просто пока добавить ключ (оставим на будущее).
+3. Добавить расчетные ключ: chats (количество чатов), companies (количество компаний на проекте, default компания "без проекта" - это не компания, т.е. она не должна учитываться в счетчике), persons - количество людей на проекте (из чатов).
+4. Что за ошибка PayLoadTooLargeError при создании нового проекта? Какое ограничение на размер файла доготипа есть?