admin/tgCrewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4

Browse Source
This commit is contained in:
CCTVcalc
2025-04-30 13:11:35 +03:00
parent c8f3c9801f
commit cda54b1e95
60 changed files with 1054 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/_old/backend.zip Normal file
View File

Binary file not shown.

BIN
backend/api (2).xls Normal file
View File

Binary file not shown.

33
backend/app.js
View File

@@ -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.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) => {
app.post('(/api/admin/auth/telegram|/api/miniapp/auth)', (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 secretKey = crypto.createHmac("sha256", "WebAppData").update(BOT_TOKEN).digest()
const hmac = crypto.createHmac("sha256", secretKey).update(dataCheckString).digest("hex")
const dataCheckString = Object.keys(data).sort().map((key) => `${key}=${data[key]}`).join('\n')
const secretKey = crypto.createHmac('sha256', 'WebAppData').update(BOT_TOKEN).digest()
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 = 'DATABASE_ERROR'
//code = err.code == 'SQLITE_CONSTRAINT_CHECK' ? 400 : 500
//} else {
[message, code = 500] = err.message.split('::')
//}
[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'))

131
backend/apps/admin.js
View File

@@ -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' ||
req.path == '/customer/register' ||
req.path == '/customer/activate')
if (req.path == '/auth/email' || req.path == '/auth/telegram' || req.path == '/auth/register' || req.path == '/auth/logout')
return next()
const asid = req.query.asid || req.cookies.asid
@@ -31,96 +30,104 @@ app.use((req, res, next) => {
next()
})
// CUSTOMER
app.post('/customer/login', (req, res, next) => {
// AUTH
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
.prepare(`
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
)
`)
const customer_id = db
.prepare(`select id from customers where is_blocked = 0 and email = :email and password is not null and password = :password `)
.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
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`])
createSession(req, res, customer_id)
res.status(200).json({success: true})
})
app.get('/customer/logout', (req, res, next) => {
delete sessions[req.session.asid]
res.setHeader('Set-Cookie', [`asid=; expired; httpOnly`])
app.post('/auth/telegram', (req, res, next) => {
let customer_id = db
.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) => {
const email = String(req.body.email).trim()
const password = String(req.body.password).trim()
app.get('/auth/logout', (req, res, next) => {
if (req.session?.asid)
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,}))$/)
if (!validateEmail(email))
app.post('/auth/register', (req, res, next) => {
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)
throw Error('EMPTY_PASSWORD::400')
const row = db
const customer_id = db
.prepare('select id from customers where email = :email')
.run({email})
if (row)
throw Error('DUPLICATE_EMAIL::400')
.pluck(true)
.get({email})
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})
if (customer_id)
throw Error('USED_EMAIL::400')
}
// 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})
})
if (email && !code) {
const code = Math.random().toString().substr(2, 4)
emailCache[email] = code
// To-Do: send email
console.log(`${email} => ${code}`)
}
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 (email && code && !password) {
if (emailCache[email] != code)
throw Error('INCORRECT_CODE::400')
}
if (!row || !row.id)
throw Error('BAD_ACTIVATION_KEY::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})
})
})
// 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)

15
backend/apps/bot.js
View File

@@ -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('')
//const session = new StringSession('1AgAOMTQ5LjE1NC4xNjcuNTABu2OaFuD5Oyi5wGck+n5ldAfshzYfwlWee+OUxYBvFzlKAdW11Hsndu1SJBLUnKjP8sTJEPbLwdqANBhBXmQMghLVAblwK6TxLfsWxy2zf/HGLeNXohhrsep0hBxu9imyHV6OI6gQG+c5qaGkzjZrz0AcS4ut0xy99XrXgjiNfnjeMX7a0mOk6IK9iKdwbX9kXTfclFLVppiBGXolYJjVb2E57tk4+7RncIVyw+Fxn0NZfnhEfHJZly6j03arZOeM5VYl9ul8+3lJDD+KJJHeMgImmYjmcFcF3CbtkhPuTSPnWKtCnm2sRzepn5VFfoG6zgYff04fBdKGvHAai+wQSOY=')
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) {

BIN
backend/data/db.sqlite
View File

Binary file not shown.

BIN
backend/data/db.sqlite-shm
View File

Binary file not shown.

BIN
backend/data/db.sqlite-wal
View File

Binary file not shown.

5
backend/data/init.sql
View File

@@ -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_active integer default 0,
is_blocked integer default 0,
json_company text default '{}',
upload_group_id integer,
json_backup_server text default '{}',

1
backend/letsgo.bat Normal file
View File

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

12
backend/package-lock.json generated
View File

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

28
backend/public/index.html
View File

@@ -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 {
(async () => {
window.addEventListener('load', async (event) => {
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,13 +330,9 @@ try {
if (startParams[1])
alert('Группа на проекте ' + startParams[1])
}
})()
})
} catch (err) {
alert(err)
}
</script>
</body>

BIN
i18n-2.xlsm
View File

Binary file not shown.

57
src/boot/axios.ts
View File

@@ -1,48 +1,45 @@
import { defineBoot } from '#q-app/wrappers'
import axios, { type AxiosInstance } from 'axios'
import axios, { type AxiosError } from 'axios'
import { useAuthStore } from 'src/stores/auth'
declare module 'vue' {
interface ComponentCustomProperties {
$axios: AxiosInstance;
$api: AxiosInstance;
class ServerError extends Error {
constructor(
public code: string,
message: string
) {
super(message)
this.name = 'ServerError'
}
}
// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({
baseURL: '/',
withCredentials: true // Важно для работы с cookies
baseURL: '/api/admin',
withCredentials: true
})
api.interceptors.response.use(
response => response,
async error => {
if (error.response?.status === 401) {
const authStore = useAuthStore()
await authStore.logout()
async (error: AxiosError<{ error?: { code: string; message: string } }>) => {
const errorData = error.response?.data?.error || {
code: 'ZERO',
message: error.message || 'Unknown error'
}
console.error(error)
return Promise.reject(new Error())
}
const serverError = new ServerError(
errorData.code,
errorData.message
)
if (error.response?.status === 401) {
await useAuthStore().logout()
}
return Promise.reject(serverError)
}
)
export default defineBoot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API
});
})
export { api };
export { api, ServerError }

14
src/boot/global-components.ts
View File

@@ -1,14 +1,18 @@
import { boot } from 'quasar/wrappers'
import pnPageCard from '../components/admin/pnPageCard.vue'
import pnScrollList from '../components/admin/pnScrollList.vue'
import pnAutoAvatar from '../components/admin/pnAutoAvatar.vue'
import pnOverlay from '../components/admin/pnOverlay.vue'
import pnImageSelector from '../components/admin/pnImageSelector.vue'
import pnPageCard from 'components/pnPageCard.vue'
import pnScrollList from 'components/pnScrollList.vue'
import pnAutoAvatar from 'components/pnAutoAvatar.vue'
import pnOverlay from 'components/pnOverlay.vue'
import pnMagicOverlay from 'components/pnMagicOverlay.vue'
import pnImageSelector from 'components/pnImageSelector.vue'
import pnAccountBlockName from 'components/pnAccountBlockName.vue'
export default boot(async ({ app }) => { // eslint-disable-line
app.component('pnPageCard', pnPageCard)
app.component('pnScrollList', pnScrollList)
app.component('pnAutoAvatar', pnAutoAvatar)
app.component('pnOverlay', pnOverlay)
app.component('pnMagicOverlay', pnMagicOverlay)
app.component('pnImageSelector', pnImageSelector)
app.component('pnAccountBlockName', pnAccountBlockName)
})

43
src/boot/helpers.ts
View File

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

2
src/boot/telegram-boot.ts
View File

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

0
src/components/admin/account-page/optionPayment.vue → src/components/account-page/optionPayment.vue
View File

0
src/components/admin/account-page/qtyChatCard.vue → src/components/account-page/qtyChatCard.vue
View File

223
src/components/accountHelper.vue Normal file
View File

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

89
src/components/admin/accountHelper.vue
View File

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

2
src/components/admin/companyInfoBlock.vue → src/components/companyInfoBlock.vue
View File

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

0
src/components/admin/companyInfoPersons.vue → src/components/companyInfoPersons.vue
View File

0
src/components/admin/login-page/loginLogo.vue → src/components/login-page/loginLogo.vue
View File

0
src/components/admin/meshBackground.vue → src/components/meshBackground.vue
View File

35
src/components/pnAccountBlockName.vue Normal file
View File

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

0
src/components/admin/pnAutoAvatar.vue → src/components/pnAutoAvatar.vue
View File

0
src/components/admin/pnImageSelector.vue → src/components/pnImageSelector.vue
View File

73
src/components/pnMagicOverlay.vue Normal file
View File

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

0
src/components/admin/pnOverlay.vue → src/components/pnOverlay.vue
View File

2
src/components/admin/pnPageCard.vue → src/components/pnPageCard.vue
View File

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

0
src/components/admin/pnScrollList.vue → src/components/pnScrollList.vue
View File

0
src/components/admin/projectInfoBlock.vue → src/components/projectInfoBlock.vue
View File

2
src/i18n/en-US/index.ts
View File

File diff suppressed because one or more lines are too long

2
src/i18n/ru-RU/index.ts
View File

File diff suppressed because one or more lines are too long

8
src/layouts/MainLayout.vue
View File

@@ -33,7 +33,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import meshBackground from '../components/admin/meshBackground.vue'
import meshBackground from 'components/meshBackground.vue'
const existDrawer = ref<boolean>(true)
function getCSSVar (varName: string) {
@@ -53,8 +53,8 @@
<style>
aside {
background-color: transparent !important;
}
aside {
background-color: transparent !important;
}
</style>

4
src/pages/AccountChangeEmailPage.vue
View File

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

2
src/pages/AccountChangePasswordPage.vue
View File

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

14
src/pages/AccountCreatePage.vue
View File

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

17
src/pages/AccountForgotPasswordPage.vue
View File

@@ -6,17 +6,20 @@
</div>
</template>
<pn-scroll-list>
<account-helper :type :email="email"/>
<account-helper :type :email/>
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router' // Добавляем импорт
import accountHelper from 'components/admin/accountHelper.vue'
import { onMounted, ref } from 'vue'
import accountHelper from 'src/components/accountHelper.vue'
const type = 'forgotPwd'
const email = ref(sessionStorage.getItem('pendingLogin') || '')
onMounted(() => {
sessionStorage.removeItem('pendingLogin')
})
const route = useRoute()
const type = 'forgot'
const email = ref(route.query.email as string)
</script>

51
src/pages/AccountPage.vue
View File

@@ -1,25 +1,16 @@
<template>
<pn-page-card>
<template #title>
<div class="flex justify-between items-center text-white q-pa-sm w100">
<div class="flex items-center justify-center row">
<q-avatar v-if="tgUser?.photo_url" size="48px" class="q-mr-xs">
<q-img :src="tgUser.photo_url"/>
</q-avatar>
<div class="flex column">
<span class="q-ml-xs text-h5">
{{
tgUser?.first_name +
(tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
tgUser?.last_name
}}
</span>
<span class="q-ml-xs text-caption">
{{ tgUser?.username }}
</span>
</div>
</div>
<q-btn flat icon="mdi-logout"/>
<div class="flex items-center no-wrap w100">
<pn-account-block-name/>
<q-btn
v-if="user?.email"
@click="logout()"
flat
round
icon="mdi-logout"
class="q-ml-md"
/>
</div>
</template>
@@ -56,16 +47,13 @@
</template>
<script setup lang="ts">
import { inject, computed } from 'vue'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
// import { useAuthStore } from 'stores/auth'
import type { WebApp } from '@twa-dev/types'
import { useAuthStore } from 'stores/auth'
const router = useRouter()
// const authStore = useAuthStore()
const tg = inject('tg') as WebApp
const tgUser = tg.initDataUnsafe.user
const authStore = useAuthStore()
const user = authStore.user
const items = computed(() => ([
{ id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
@@ -73,15 +61,20 @@
{ id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password' },
{ id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email' },
{ id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
{ id: 6, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
{ id: 7, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
{ id: 8, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
{ id: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
{ id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
{ id: 8, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
{ id: 9, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
]))
async function goTo (path: string) {
await router.push({ name: path })
}
async function logout () {
await authStore.logout()
}
</script>
<style lang="scss">

2
src/pages/CompanyCreatePage.vue
View File

@@ -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'

4
src/pages/CompanyInfoPage.vue
View File

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

2
src/pages/CompanyYourPage.vue
View File

@@ -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'

126
src/pages/LoginPage.vue
View File

@@ -1,5 +1,6 @@
<template>
<q-page class="flex column items-center justify-between">
<q-page class="flex column items-center justify-center">
<q-card
id="login_block"
flat
@@ -10,22 +11,37 @@
:style="{ alignItems: 'flex-end' }"
/>
<div class = "q-ma-md flex column input-login">
<div class="q-ma-md flex column input-login">
<q-input
v-model="login"
autofocus
dense
filled
class = "q-mb-md"
:label = "$t('login__email')"
class="q-mb-sm"
:label="$t('login__email')"
:rules="validationRules.email"
lazy-rules="ondemand"
no-error-icon
@focus="emailInput?.resetValidation()"
@blur="delayValidity('login')"
ref="emailInput"
/>
<q-input
v-model="password"
dense
filled
:label = "$t('login__password')"
class = "q-mb-md"
:label="$t('login__password')"
class="q-mb-none q-mt-xs"
:type="isPwd ? 'password' : 'text'"
hide-hint
:hint="passwordHint"
:rules="validationRules.password"
lazy-rules="ondemand"
no-error-icon
@focus="passwordInput?.resetValidation()"
@blur="delayValidity('password')"
ref="passwordInput"
>
<template #append>
<q-icon
@@ -35,24 +51,25 @@
@click="isPwd = !isPwd"
/>
</template>
</q-input>
<div class="self-end">
<q-btn
@click="forgotPwd"
@click.prevent="forgotPwd"
flat
no-caps
dense
class="text-grey"
>
{{$t('login__forgot_password')}}
{{$t('login__forgot_password')}}
</q-btn>
</div>
</div>
<q-btn
@click="sendAuth"
@click="sendAuth()"
color="primary"
:disabled="!acceptTermsOfUse"
:disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
>
{{$t('login__sign_in')}}
</q-btn>
@@ -62,7 +79,7 @@
sm
no-caps
color="primary"
@click="createAccount()"
@click="createAccount"
>
{{$t('login__register')}}
</q-btn>
@@ -83,7 +100,7 @@
sm
no-caps
color="primary"
:disabled="!acceptTermsOfUse"
:disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
@click="handleTelegramLogin"
>
<div class="flex items-center text-blue">
@@ -100,7 +117,10 @@
</div>
</q-card>
<div id="term-of-use" class="q-py-lg text-white q-flex row">
<div
id="term-of-use"
class="absolute-bottom q-py-lg text-white flex justify-center row"
>
<q-checkbox
v-model="acceptTermsOfUse"
checked-icon="task_alt"
@@ -110,23 +130,30 @@
keep-color
/>
<span class="q-px-xs">
{{$t('login__accept_terms_of_use') + ' '}}
{{ $t('login__accept_terms_of_use') + ' ' }}
</span>
<span class="text-cyan-12">
{{$t('login__terms_of_use') }}
<span
@click="router.push('terms-of-use')"
style="text-decoration: underline;"
>
{{ $t('login__terms_of_use') }}
</span>
</div>
</q-page>
</template>
<script setup lang="ts">
import { ref, computed, inject } from 'vue'
import { ref, computed, inject, onUnmounted } from 'vue'
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import loginLogo from 'components/admin/login-page/loginLogo.vue'
import loginLogo from 'components/login-page/loginLogo.vue'
import { useI18n } from "vue-i18n"
import { useAuthStore } from 'src/stores/auth'
import type { WebApp } from '@twa-dev/types'
import { QInput } from 'quasar'
import type { ServerError } from 'boot/axios'
type ValidationRule = (val: string) => boolean | string
const tg = inject('tg') as WebApp
const tgUser = tg.initDataUnsafe.user
@@ -141,9 +168,50 @@
const isPwd = ref<boolean>(true)
const acceptTermsOfUse = ref<boolean>(true)
function onErrorLogin () {
const emailInput = ref<InstanceType<typeof QInput>>()
const passwordInput = ref<InstanceType<typeof QInput>>()
const validationRules = {
email: [(val: string) => /.+@.+\..+/.test(val) || t('login__incorrect_email')] as [ValidationRule],
password: [(val: string) => val.length >= 8 || t('login__password_require')] as [ValidationRule]
}
const isEmailValid = computed(() =>
validationRules.email.every(f => f(login.value) === true)
)
const isPasswordValid = computed(() =>
validationRules.password.every(f => f(password.value) === true)
)
const passwordHint = computed(() => {
const result = validationRules.password[0](password.value)
return typeof result === 'string' ? result : ''
})
// fix validity problem with router.push
type Field = 'login' | 'password'
const validateTimerId = ref<Record<Field, ReturnType<typeof setTimeout> | null>>({
login: null,
password: null
})
const delayValidity = (type: Field) => {
validateTimerId.value[type] = setTimeout(() => {
void (async () => {
if (validateTimerId.value[type] !== null) {
clearTimeout(validateTimerId.value[type])
}
if (type === 'login') await emailInput.value?.validate()
if (type === 'password') await passwordInput.value?.validate()
})()
}, 300)
}
function onErrorLogin (error: ServerError) {
$q.notify({
message: t('login__incorrect_login_data'),
message: t(error.message) + ' (' + t('code') + ':' + error.code + ')',
type: 'negative',
position: 'bottom',
timeout: 2000,
@@ -152,18 +220,22 @@
}
async function sendAuth() {
console.log('1')
try { void await authStore.loginWithCredentials(login.value, password.value) }
catch (error) {
console.log(error)
onErrorLogin(error as ServerError)
}
await router.push({ name: 'projects' })
}
async function forgotPwd() {
await router.push({
name: 'recovery_password',
query: { email: login.value }
})
sessionStorage.setItem('pendingLogin', login.value)
await router.push({ name: 'recovery_password' })
}
async function createAccount() {
sessionStorage.setItem('pendingLogin', login.value)
await router.push({ name: 'create_account' })
}
@@ -182,6 +254,10 @@ async function handleTelegramLogin () {
await authStore.loginWithTelegram(initData)
}
onUnmounted(() => {
Object.values(validateTimerId.value).forEach(timer => timer && clearTimeout(timer))
})
</script>
<style scoped>

6
src/pages/PersonInfoPage.vue
View File

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

7
src/pages/ProjectCreatePage.vue
View File

@@ -25,7 +25,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
import projectInfoBlock from 'src/components/projectInfoBlock.vue'
import { useProjectsStore } from 'stores/projects'
import type { ProjectParams } from 'src/types'
@@ -53,8 +53,9 @@
})
async function addProject (data: ProjectParams) {
const newProject = projectsStore.addProject(data)
await router.push({name: 'chats', params: { id: newProject.id}})
const newProject = await projectsStore.addProject(data)
// await router.push({name: 'chats', params: { id: newProject.id}})
console.log(newProject)
}
</script>

4
src/pages/ProjectInfoPage.vue
View File

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

23
src/pages/ProjectPage.vue
View File

@@ -8,8 +8,6 @@
v-model="tabSelect"
animated
keep-alive
@before-transition="showFab = false"
@transition="showFab = true"
class="tab-panel-color full-height-panel w100 flex column col-grow no-scroll"
>
<q-tab-panel
@@ -19,7 +17,7 @@
class="q-pa-none flex column col-grow no-scroll"
style="flex-grow: 2"
>
<component :is="tab.component" :showFab = "tab.name === tabSelect" />
<router-view/>
</q-tab-panel>
</q-tab-panels>
@@ -66,29 +64,18 @@
<script setup lang="ts">
import { ref, onBeforeMount, computed } from 'vue'
import { useProjectsStore } from 'stores/projects'
import projectPageHeader from 'components/admin/project-page/ProjectPageHeader.vue'
import projectPageChats from 'components/admin/project-page/ProjectPageChats.vue'
import projectPageCompanies from 'components/admin/project-page/ProjectPageCompanies.vue'
import projectPagePersons from 'components/admin/project-page/ProjectPagePersons.vue'
import projectPageHeader from 'pages/project-page/ProjectPageHeader.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const showFab = ref<boolean>(false)
const projectStore = useProjectsStore()
const currentProject = computed(() => projectStore.getCurrentProject() )
const tabComponents = {
projectPageChats,
projectPagePersons,
projectPageCompanies
}
const tabs = [
{name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', component: tabComponents.projectPageChats, to: { name: 'chats'} },
{name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', component: tabComponents.projectPagePersons, to: { name: 'persons'} },
{name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
{name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', to: { name: 'chats'} },
{name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', to: { name: 'persons'} },
{name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', to: { name: 'companies'} },
]
const tabSelect = ref<string>()

177
src/pages/ProjectsPage.vue
View File

@@ -13,19 +13,9 @@
icon-right="mdi-chevron-right"
align="right"
dense
class="fix-btn"
>
<div class="flex items-center">
<q-avatar v-if="tgUser?.photo_url" size="32px">
<q-img :src="tgUser.photo_url"/>
</q-avatar>
<div class="q-ml-xs ellipsis" style="max-width: 100px">
{{
tgUser?.first_name +
(tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
tgUser?.last_name
}}
</div>
</div>
<pn-account-block-name/>
</q-btn>
</div>
@@ -33,7 +23,7 @@
</template>
<pn-scroll-list>
<template #card-body-header>
<template #card-body-header v-if="projects.length !== 0">
<q-input
v-model="searchProject"
clearable
@@ -48,74 +38,90 @@
</q-input>
</template>
<q-list separator>
<q-item
v-for = "item in activeProjects"
:key="item.id"
clickable
v-ripple
@click="goProject(item.id)"
class="w100"
>
<q-item-section avatar>
<q-avatar rounded >
<q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
<pn-auto-avatar v-else :name="item.name"/>
</q-avatar>
<div id="projects-wrapper">
<q-list separator v-if="projects.length !== 0">
<q-item
v-for = "item in activeProjects"
:key="item.id"
clickable
v-ripple
@click="goProject(item.id)"
class="w100"
>
<q-item-section avatar>
<q-avatar rounded >
<q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
<pn-auto-avatar v-else :name="item.name"/>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
<q-item-label caption lines="2">{{item.description}}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
<q-item-label caption lines="2">{{item.description}}</q-item-label>
<q-item-section side class="text-caption ">
<div class="flex items-center column">
<div class="flex items-center">
<q-icon name="mdi-chat-outline"/>
<span>{{ item.chats }} </span>
</div>
<div class="flex items-center">
<q-icon name="mdi-account-outline"/>
<span>{{ item.persons }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
<div id="btn_show_archive">
<q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
<template #label>
<span class="text-caption">
<span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
<span v-else>{{ $t('projects__hide_archive') }}</span>
</span>
</template>
</q-btn-dropdown>
</div>
</q-item-section>
<q-item-section side class="text-caption ">
<div class="flex items-center column">
<div class="flex items-center">
<q-icon name="mdi-chat-outline"/>
<span>{{ item.chats }} </span>
</div>
<div class="flex items-center">
<q-icon name="mdi-account-outline"/>
<span>{{ item.persons }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
<div id="btn_show_archive">
<q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
<template #label>
<span class="text-caption">
<span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
<span v-else>{{ $t('projects__hide_archive') }}</span>
</span>
</template>
</q-btn-dropdown>
<q-list separator v-if="showArchive" class="w100">
<q-item
v-for = "item in archiveProjects"
:key="item.id"
clickable
v-ripple
@click="handleArchiveList(item.id)"
class="w100 text-grey"
>
<q-item-section avatar>
<q-avatar rounded >
<q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
<pn-auto-avatar v-else :name="item.name"/>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
<q-item-label caption lines="2">{{item.description}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
<q-list separator v-if="showArchive" class="w100">
<q-item
v-for = "item in archiveProjects"
:key="item.id"
clickable
v-ripple
@click="handleArchiveList(item.id)"
class="w100 text-grey"
>
<q-item-section avatar>
<q-avatar rounded >
<q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
<pn-auto-avatar v-else :name="item.name"/>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
<q-item-label caption lines="2">{{item.description}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
<div
v-if="projects.length === 0"
class="flex w100 column q-pt-xl q-pa-md"
>
<div class="flex column justify-center col-grow items-center text-grey">
<q-icon name="mdi-briefcase-plus-outline" size="160px" class="q-pb-md"/>
<div class="text-h6">
{{$t('projects__lets_start')}}
</div>
<div class="text-caption" align="center">
{{$t('projects__lets_start_description')}}
</div>
</div>
</div>
</pn-scroll-list>
<q-page-sticky
@@ -160,13 +166,9 @@
</template>
<script setup lang="ts">
import { ref, computed, watch, inject } from 'vue'
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useProjectsStore } from 'stores/projects'
import type { WebApp } from '@twa-dev/types'
const tg = inject('tg') as WebApp
const tgUser = tg.initDataUnsafe.user
const router = useRouter()
const projectsStore = useProjectsStore()
@@ -223,11 +225,20 @@
return displayProjects.value.filter(el => el.is_archive)
})
onMounted(async () => {
if (!projectsStore.isInit) {
await projectsStore.init()
}
})
watch(showDialogArchive, (newD :boolean) => {
if (!newD) archiveProjectId.value = undefined
})
</script>
<style>
<style scoped>
.fix-btn :deep(.q-btn__content) {
flex-wrap: nowrap;
}
</style>

8
src/pages/SubscribePage.vue
View File

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

42
src/components/admin/project-page/ProjectPageChats.vue → src/pages/project-page/ProjectPageChats.vue
View File

@@ -2,6 +2,7 @@
<div class="q-pa-none flex column col-grow no-scroll">
<pn-scroll-list>
<template #card-body-header>
<div class="flex row q-ma-md justify-between">
<q-input
v-model="search"
@@ -17,7 +18,6 @@
</q-input>
</div>
</template>
<q-list bordered separator>
<q-slide-item
v-for="item in displayChats"
@@ -48,11 +48,11 @@
</q-item-label>
<q-item-label caption lines="1">
<div class = "flex justify-start items-center">
<div class="q-mr-sm">
<div class="q-mr-sm flex items-center">
<q-icon name="mdi-account-outline" class="q-mx-sm"/>
<span>{{ item.persons }}</span>
</div>
<div class="q-mx-sm">
<div class="q-mx-sm flex items-center">
<q-icon name="mdi-key" class="q-mr-sm"/>
<span>{{ item.owner_id }} </span>
</div>
@@ -78,7 +78,7 @@
enter-active-class="animated slideInUp"
>
<q-fab
v-if="fixShowFab"
v-if="showFab"
icon="add"
color="brand"
direction="up"
@@ -148,13 +148,9 @@
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
import { useChatsStore } from 'stores/chats'
const props = defineProps<{
showFab: boolean
}>()
const search = ref('')
const showOverlay = ref<boolean>(false)
const chatsStore = useChatsStore()
@@ -215,16 +211,28 @@
}
// fix fab jumping
const fixShowFab = ref(true)
const showFabFixTrue = () => fixShowFab.value = true
const showFab = ref(false)
const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
watch(() => props.showFab, (newVal) => {
const timerId = setTimeout(showFabFixTrue, 700)
if (newVal === false) {
clearTimeout(timerId)
fixShowFab.value = false
onActivated(() => {
timerId.value = setTimeout(() => {
showFab.value = true
}, 300)
})
onDeactivated(() => {
showFab.value = false
if (timerId.value) {
clearTimeout(timerId.value)
timerId.value = null
}
}, {immediate: true})
})
onBeforeUnmount(() => {
if (timerId.value) clearTimeout(timerId.value)
})
</script>
<style scoped>

34
src/components/admin/project-page/ProjectPageCompanies.vue → src/pages/project-page/ProjectPageCompanies.vue
View File

@@ -63,7 +63,7 @@
enter-active-class="animated slideInUp"
>
<q-btn
v-if="fixShowFab"
v-if="showFab"
fab
icon="add"
color="brand"
@@ -103,15 +103,11 @@
</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()
const companiesStore = useCompaniesStore()
@@ -169,17 +165,27 @@
}
// fix fab jumping
const fixShowFab = ref(false)
const showFabFixTrue = () => fixShowFab.value = true
const showFab = ref(false)
const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
watch(() => props.showFab, (newVal) => {
const timerId = setTimeout(showFabFixTrue, 500)
if (newVal === false) {
clearTimeout(timerId)
fixShowFab.value = false
onActivated(() => {
timerId.value = setTimeout(() => {
showFab.value = true
}, 300)
})
onDeactivated(() => {
showFab.value = false
if (timerId.value) {
clearTimeout(timerId.value)
timerId.value = null
}
}, {immediate: true})
})
onBeforeUnmount(() => {
if (timerId.value) clearTimeout(timerId.value)
})
</script>
<style scoped>

0
src/components/admin/project-page/ProjectPageHeader.vue → src/pages/project-page/ProjectPageHeader.vue
View File

0
src/components/admin/project-page/ProjectPagePersons.vue → src/pages/project-page/ProjectPagePersons.vue
View File

91
src/router/index.ts
View File

@@ -3,94 +3,85 @@ import {
createMemoryHistory,
createRouter,
createWebHashHistory,
createWebHistory,
createWebHistory
} from 'vue-router'
import routes from './routes'
import { useAuthStore } from 'stores/auth'
import { useProjectsStore } from 'stores/projects'
/*
* If not building with SSR mode, you can
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
declare module 'vue-router' {
interface RouteMeta {
public?: boolean
guestOnly?: boolean
hideBackButton?: boolean
backRoute?: string
requiresAuth?: boolean
}
}
export default defineRouter(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createHistory(process.env.VUE_ROUTER_BASE),
history: createHistory(process.env.VUE_ROUTER_BASE)
})
const publicPaths = ['/login', '/create-account', '/recovery-password']
Router.beforeEach(async (to) => {
const authStore = useAuthStore()
// Инициализация хранилища перед проверкой
if (!authStore.isInitialized) {
await authStore.initialize()
}
// Проверка авторизации для непубличных маршрутов
if (!publicPaths.includes(to.path)) {
if (!authStore.isAuthenticated) {
return {
path: '/login',
query: { redirect: to.fullPath }
}
if (to.meta.guestOnly && authStore.isAuthenticated) {
return { name: 'projects' }
}
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
return {
name: 'login',
replace: true
}
}
// Редирект авторизованных пользователей с публичных маршрутов
if (publicPaths.includes(to.path) && authStore.isAuthenticated) {
return { path: '/' }
if (to.meta.public) {
return true
}
if (!to.meta.public && !authStore.isAuthenticated) {
return {
name: 'login',
replace: true
}
}
})
const handleBackButton = async () => {
const currentRoute = Router.currentRoute.value
if (currentRoute.meta.backRoute) {
await Router.push(currentRoute.meta.backRoute);
await Router.push({ name: currentRoute.meta.backRoute })
} else {
if (window.history.length > 1) {
Router.go(-1)
} else {
await Router.push('/projects')
}
if (window.history.length > 1) Router.go(-1)
else await Router.push({ name: 'projects' })
}
}
Router.afterEach((to) => {
const BackButton = window.Telegram?.WebApp?.BackButton;
if (BackButton) {
// Управление видимостью
if (to.meta.hideBackButton) {
BackButton.hide()
} else {
BackButton.show()
}
// Обновляем обработчик клика
BackButton.offClick(handleBackButton as () => void)
BackButton.onClick(handleBackButton as () => void)
}
const BackButton = window.Telegram?.WebApp?.BackButton
if (BackButton) {
BackButton[to.meta.hideBackButton ? 'hide' : 'show']()
BackButton.offClick(handleBackButton as () => void)
BackButton.onClick(handleBackButton as () => void)
}
if (!to.params.id) {
const projectsStore = useProjectsStore()
projectsStore.setCurrentProjectId(null)
useProjectsStore().setCurrentProjectId(null)
}
})

151
src/router/routes.ts
View File

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

58
src/stores/auth.ts
View File

@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { api } from 'boot/axios'
import { api, type ServerError } from 'boot/axios'
interface User {
id: string
@@ -11,48 +11,77 @@ interface User {
avatar?: string
}
const ENDPOINT_MAP = {
register: '/auth/register',
forgot: '/auth/forgot',
change: '/auth/change'
} as const
export type AuthFlowType = keyof typeof ENDPOINT_MAP
export const useAuthStore = defineStore('auth', () => {
// State
const user = ref<User | null>(null)
const isInitialized = ref(false)
// Getters
const isAuthenticated = computed(() => !!user.value)
// Actions
const initialize = async () => {
try {
const { data } = await api.get('/customer/profile')
user.value = data
user.value = data.data
} catch (error) {
console.error(error)
user.value = null
handleAuthError(error as ServerError)
} finally {
isInitialized.value = true
}
}
const handleAuthError = (error: ServerError) => {
if (error.code === '401') {
user.value = null
} else {
console.error('Authentication error:', error)
}
}
const loginWithCredentials = async (email: string, password: string) => {
// будет переделано на беке - нужно сменить урл
await api.post('/api/admin/customer/login', { email, password }, { withCredentials: true })
await api.post('/auth/email', { email, password }, { withCredentials: true })
await initialize()
}
const loginWithTelegram = async (initData: string) => {
await api.post('/api/admin/customer/login', { initData }, { withCredentials: true })
await api.post('/auth/telegram', { initData }, { withCredentials: true })
await initialize()
}
const logout = async () => {
try {
await api.get('/customer/logout', {})
} finally {
await api.get('/auth/logout', {})
user.value = null
isInitialized.value = false
} finally {
// @ts-expect-ignore
// window.Telegram?.WebApp.close()
}
}
const initRegistration = async (flowType: AuthFlowType, email: string) => {
await api.post(ENDPOINT_MAP[flowType], { email })
}
const confirmCode = async (flowType: AuthFlowType, email: string, code: string) => {
await api.post(ENDPOINT_MAP[flowType], { email, code })
}
const setPassword = async (
flowType: AuthFlowType,
email: string,
code: string,
password: string
) => {
await api.post(ENDPOINT_MAP[flowType], { email, code, password })
}
return {
user,
isAuthenticated,
@@ -60,6 +89,9 @@ export const useAuthStore = defineStore('auth', () => {
initialize,
loginWithCredentials,
loginWithTelegram,
logout
logout,
initRegistration,
confirmCode,
setPassword
}
})

59
src/stores/projects.ts
View File

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

20
todo.txt
View File

@@ -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 при создании нового проекта? Какое ограничение на размер файла доготипа есть?