+ {pending ? ( +

+ +

) : ( - + )} - - - +

+ Есть аккаунт? + - Есть аккаунт?{' '} - - Войти - - - - + Войти + +

) } @@ -1 +1,4 @@ export { RegisterEmailForm } from './ui/register-email-form' +export * from './model' +export * from './ui' +export * from './test' \ No newline at end of file @@ -1,27 +1,13 @@ -import axios, { AxiosResponse } from 'axios' - -import { ResponseGetPersons } from '#/features/invite-person-in-business' +import axios from 'axios' import { API_URL } from '#/shared/lib/constants' -export const removePerson = async (email: string, token?: string): Promise => { - if (!token) { - return null - } - - try { - const { data } = await axios.put<{ status: 'cancelled' }, AxiosResponse>( - API_URL + `/auth/business-host/accounts/${email}`, - { - status: 'cancelled', - }, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ) - return data - } catch (err) { - return null - } +export const removePerson = async (person_uid?: string, token?: string) => { + return await axios.delete(API_URL + `/auth/business-host`, { + data: { + uid: person_uid, + }, + headers: { + Authorization: `Bearer ${token}`, + }, + }) } @@ -1,27 +1,31 @@ -import { Dispatch, SetStateAction, useState } from 'react' +import { Dispatch, SetStateAction, useState, useEffect } from 'react' import { useSession } from 'next-auth/react' import { ResponseGetPersons } from '#/features/invite-person-in-business' import { removePerson } from '../api/remove' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' export const useRemove = ( - updateList: (persons: ResponseGetPersons) => void, - email: string -): [open: boolean, setOpen: Dispatch>, removeFn: () => void] => { + updateList: (persons: ResponseGetPersons | null) => void, + person: ResponseGetPersons | null +): [open: boolean, setOpen: Dispatch>, remove: () => void] => { const [open, setOpen] = useState(false) - + const { showMessage } = useShowDataStore() const { data } = useSession() const remove = async () => { - const result = await removePerson(email, data?.access) + const response = await removePerson(person?.uid, data?.access) - if (result === null) { + if (response.status === 200) { + showMessage('Cотрудник удален', 'success') + setOpen(false) + updateList(person) return [open, setOpen] + } else { + showMessage(response.data.detail) } - setOpen(false) - updateList(result) } return [open, setOpen, remove] -} +} \ No newline at end of file @@ -6,13 +6,13 @@ import { ButtonGray, ButtonUI, Modal } from '#/shared' import { useRemove } from '../../model/remove' export const XMark = ({ - email, + person, setNewPersons, }: { - email: string - setNewPersons: (persons: ResponseGetPersons) => void + person: ResponseGetPersons | null + setNewPersons: (persons: ResponseGetPersons | null) => void }) => { - const [open, setOpen, removeFn] = useRemove(setNewPersons, email) + const [open, setOpen, remove] = useRemove(setNewPersons, person) return ( e.stopPropagation()} sx={{ marginTop: 0.5, marginLeft: 0.8 }}> @@ -21,9 +21,9 @@ export const XMark = ({ e.stopPropagation() setOpen(true) }} - src={'/x-mark.svg'} - width={15} - height={15} + src={'/svg/trash-outline.svg'} + width={16} + height={16} alt={'Удалить'} /> - Вы дейсвительно хотите удалить пользователя {email} ? + Вы дейсвительно хотите удалить пользователя {person?.email} ? { + onClick={(e: any) => { e.stopPropagation() - await removeFn() + remove() }} text={'Удалить'} /> @@ -0,0 +1,14 @@ +import { API_URL } from '#/shared/lib/constants' +import axios from 'axios' + +export const resendInvation = async (email: string, token?: string) => { + return await axios.post( + API_URL + `/auth/business-host/re-invite/${email}`, + {}, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) +} @@ -0,0 +1,23 @@ +import { useSession } from 'next-auth/react' +import { resendInvation } from '../api/resend-invation' +import { getModalById, RESEND_INVATION_PASSWORD } from '#/features/modals' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' + +export const useResendInvation = () => { + const modal = getModalById(RESEND_INVATION_PASSWORD) + const { showMessage } = useShowDataStore() + const { data } = useSession() + + const resend = async () => { + const response = await resendInvation(modal.getStoreProperty('email')!, data?.access) + + if (response.status == 200) { + showMessage('Приглашение переотправлено!', 'success') + modal.setState(false) + } else { + showMessage(response.data) + } + } + + return [resend] +} @@ -0,0 +1,4 @@ +interface ResponseResendInvation { + data: any, + status: number +} \ No newline at end of file @@ -0,0 +1 @@ +export * from './resend-invation' \ No newline at end of file @@ -0,0 +1,26 @@ +.container { + padding-bottom: 0; +} + +.modal { + min-width: 450px; + width: 100%; + padding-top: 35px; + + &__buttons { + display: flex; + margin-top: 45px; + gap: 10px; + } + &__header { + margin-bottom: 15px; + font-size: 30px; + font-weight: 600; + letter-spacing: -0.02em; + } + &__message { + font-size: 15px; + color: var(--text-color-main); + width: 70%; + } +} @@ -0,0 +1,32 @@ +import { getModalById, RESEND_INVATION_PASSWORD, PlateTemplate } from '#/features/modals' +import styles from './resend-invation.module.scss' +import React from 'react' +import { CommonButton } from '#/shared/ui/button' +import { CommonInput } from '#/shared/ui/common-input' +import { useResendInvation } from '../lib/use-resend-invation' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' + +interface ResendInvationPlateProps {} + +export const ResendInvationPlate = ({}: ResendInvationPlateProps) => { + const modal = getModalById(RESEND_INVATION_PASSWORD) + + const [resend] = useResendInvation() + + return ( + +

Переотправить приглашение

При переотправке приглашения у сотрудника будет заменен отправленный пароль.

+ resend()}> + Переотправить + + modal.setState(false)}> + Отмена + +

+ + ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -6,9 +6,9 @@ import { useSession } from 'next-auth/react' import { Template } from '#/domains/copywrite/proxy/types/template' import { loadGeneration } from '#/features/use-copy/copy-slice' import { useAppDispatch } from '#/app/store/store' -import { useShowData } from '#/shared' import { API_URL } from '#/shared/lib/constants' import { Message, MessageSend } from '#/shared/lib/types/model' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' type Languages = 'ru' | 'en' | 'it' | 'fr' type LanguagesText = 'Русский' | 'Английский' | 'Итальянский' | 'Французский' @@ -22,16 +22,7 @@ export const langs: Record = { export const languages = { ...langs, Немецкий: 'de' } export const target_audiences = ['Вся', '18+', '21+', '30+', '14-20', '35-40'] -export const tovs = [ - 'Нейтральный', - 'Спокойный', - 'Агрессивный', - 'Серьезный', - 'Провокационный', - 'Остроумный', - 'Наставнический', - 'Дружелюбный', -] +export const tovs = ['Нейтральный', 'Спокойный', 'Агрессивный', 'Серьезный', 'Провокационный', 'Остроумный', 'Наставнический', 'Дружелюбный'] type Setting = Pick @@ -71,7 +62,7 @@ export const useTemplate = (currentTemplate: Template | null): UseTemplate => { const dispatch = useAppDispatch() - const { showError } = useShowData() + const { showMessage } = useShowDataStore() const { data: session } = useSession() @@ -123,7 +114,7 @@ export const useTemplate = (currentTemplate: Template | null): UseTemplate => { } if (!session?.access) { - showError('У вас неактивный токен, попробуйте перезайти в аккаунт', true) + showMessage('У вас неактивный токен, попробуйте перезайти в аккаунт') return } @@ -0,0 +1 @@ +export * from './yandex-auth-button' \ No newline at end of file @@ -0,0 +1,25 @@ +.button { + background-color: #f1faff; + color: rgb(43, 43, 66); + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 10px 16px; + border-radius: 13px; + transition: opacity 0.3s ease-in-out; + gap: 15px; + font-size: 16px; + font-weight: 500; + + &:hover { + opacity: 0.8; + } +} + +html[data-theme='dark'] { + .button { + background-color: #1C1C1E; + color: white; + } +} @@ -0,0 +1,45 @@ +import { LoginPage } from '#/views/login' +import { RegisterPage } from '#/views/register' +import '@testing-library/jest-dom' +import { screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { jestRender } from '#/../jest/utils/render' +import { YandexAuthButton } from './yandex-auth-button' +import { windowMock } from '#/../jest/utils/window-mock' +import { fetchToCrossfetch } from '#/../jest/utils/fetch-to-crossfetch' + +jest.mock('next/router') +jest.mock('@sentry/nextjs') + +windowMock() +fetchToCrossfetch() + +describe('yandex-auth-button', () => { + it('renders in login', () => { + jestRender() + + const button = screen.getByTestId('yandex-auth-button') + + expect(button).toBeInTheDocument() + }) + + it('renders in register', () => { + jestRender() + + const button = screen.getByTestId('yandex-auth-button') + + expect(button).toBeInTheDocument() + }) + + it('opened signin url', async () => { + jestRender() + + const button = screen.getByTestId('yandex-auth-button') + + await userEvent.click(button) + + await waitFor(() => { + expect(window.location.href).toContain('api/auth/signin?csrf=true') + }) + }) +}) @@ -0,0 +1,19 @@ +import React from 'react' +import YandexSvg from '#/assets/svg/yandex.svg?react' +import styles from './yandex-auth-button.module.scss' +import { signIn } from 'next-auth/react' + +interface YandexAuthButtonProps {} + +export const YandexAuthButton = ({}: YandexAuthButtonProps) => { + return ( + + ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -5,7 +5,6 @@ import YandexProvider from 'next-auth/providers/yandex' import { AuthConstants, ERROR_MAPPING, ERROR_YANDEX_MAPPING } from './constants' import { AuthorizationProxy } from './proxy' -import * as Sentry from '@sentry/nextjs' import { getAll } from '#/entities/user-account/model/user-type-slice' const AuthProxy = new AuthorizationProxy() @@ -25,7 +24,7 @@ export const authOptions: NextAuthOptions = { type: 'credentials', credentials: {}, async authorize(credentials, req) { - const { username, password } = credentials as any + const { username, password } = credentials as { username: string, password: string } const resp = await AuthProxy.loginByEmail(username, password) const data = await resp.json() @@ -33,10 +32,33 @@ export const authOptions: NextAuthOptions = { if (resp.status >= 400 && resp.status < 500) { throw new Error( ERROR_MAPPING[(data as { detail: string }).detail] ?? - JSON.stringify(data as Object) - .replace(/\s+/, '_') - .replace(/[А-Яа-я]/, '') - .toLowerCase() + JSON.stringify(data as Object) + .replace(/\s+/, '_') + .replace(/[А-Яа-я]/, '') + .toLowerCase() + ) + } + return (await data) as User + }, + }), + CredentialsProvider({ + id: 'email_token', + type: 'credentials', + credentials: {}, + async authorize(credentials, req) { + const { token } = credentials as { token: string } + + const resp = await AuthProxy.loginByEmailToken(token) + + const data = await resp.json() + + if (resp.status >= 400 && resp.status < 500) { + throw new Error( + ERROR_MAPPING[(data as { detail: string }).detail] ?? + JSON.stringify(data as Object) + .replace(/\s+/, '_') + .replace(/[А-Яа-я]/, '') + .toLowerCase() ) } return (await data) as User @@ -56,10 +78,6 @@ export const authOptions: NextAuthOptions = { (result.data as { access_token: string }).access_token ) - console.log(info) - - console.log(trigger) - return { ...info.token, tokenExpiry: AuthConstants.getExpiresDate() } } @@ -26,6 +26,15 @@ export class AuthorizationProxy { }) } + public readonly loginByEmailToken = async (emailToken: string) => { + return await fetch(API_URL + `/auth/login-from-token/${emailToken}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + }) + } + public readonly exchangeTokenYandex = async (yandex_token: string) => { return await axios.post<{ access_token: string } | { error_description: string }>( API_URL + '/auth/login-social/convert-token', @@ -17,6 +17,27 @@ import '#/app/styles/globals.css' import '#/app/styles/styles-pages/system.scss' import { NextPage } from 'next' import { pingFangFont } from '#/shared/lib/constants/font/font' +import { useBlockTelegram } from '#/shared/lib/hooks/use-block-telegram' +import { Error } from '#/shared' + +import fetch from 'cross-fetch' + +global.fetch = (...params: Parameters) => { + let url = params[0] + + const baseUrl = process.env.NEXT_PUBLIC_NEXTAUTH_URL! + + if ( + typeof url === 'string' && + !(url as string).startsWith(baseUrl) && + !(url as string).includes('http') + ) { + url = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) + params[0] : baseUrl + params[0] + console.log(url) + } + + return fetch(url, params[1]) +} axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: false, @@ -36,16 +57,20 @@ export interface AppPropsWithLayout extends AppProps { } function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) { + useBlockTelegram() const getLayout = Component.getLayout ?? ((page) => page) if ('serviceWorker' in navigator) { - navigator.serviceWorker.getRegistrations().then(function (registrations) { - for (let registration of registrations) { - registration.unregister(); - } - }).catch(function (error) { - console.error('Ошибка при размонтировании service worker:', error); - }); + navigator.serviceWorker + .getRegistrations() + .then(function (registrations) { + for (let registration of registrations) { + registration.unregister() + } + }) + .catch(function (error) { + console.error('Ошибка при размонтировании service worker:', error) + }) } return ( @@ -62,6 +87,7 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLa {getLayout()} + @@ -51,6 +51,7 @@ class ErrorBoundary extends Component { width: '300px', cursor: 'pointer', fontSize: '16px', + textAlign: 'center' }} onClick={() => (window.location.pathname = '/')} > @@ -0,0 +1,6 @@ +import TelegramBlockedPage from '#/views/telegram-blocked/ui/telegram-blocked' +import { getLayout, LayoutWithoutSideMenu } from '#/widgets/layouts' + +TelegramBlockedPage.getLayout = getLayout(LayoutWithoutSideMenu) + +export default TelegramBlockedPage @@ -10,6 +10,7 @@ import { API_URL } from '#/shared/lib/constants' import { Device } from '#/shared/lib/types/entities' import { IMessageRequest } from '#/shared/lib/types/types-gpt' import { Message, MessageSend } from '#/entities/message' +import { Variant } from '#/shared/lib/hooks/use-show-data' const formDataHelper = (file: File, dataForSend: MessageSend): FormData => { const FD = new FormData() @@ -23,14 +24,11 @@ const formDataHelper = (file: File, dataForSend: MessageSend): FormData => export const ModelsWithChatsEndpoints = { getData: async (chatUid: string, offset: number, token?: string) => { try { - const { data } = await axios.get( - API_URL + `/chats/${chatUid}/messages/?limit=10&offset=${offset}`, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ) + const { data } = await axios.get(API_URL + `/chats/${chatUid}/messages/?limit=10&offset=${offset}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) return data } catch (err: any) { return { @@ -54,12 +52,12 @@ export const ModelsWithChatsEndpoints = { }, } ) - } + }, } export function useModel( currentChat: string | null, - showError: (message: string, isErrorMessage?: boolean) => void, + showMessage: (message: string, variant?: Variant) => void, modelType: string, clearInput?: () => void ) { @@ -72,19 +70,19 @@ export function useModel( useEffect(() => { if (currentChat) { setMessages([]) - ; (async () => { - setLoading(true) - const answer = await ModelsWithChatsEndpoints.getData(currentChat, 0, data?.access) - setLoading(false) + ;(async () => { + setLoading(true) + const answer = await ModelsWithChatsEndpoints.getData(currentChat, 0, data?.access) + setLoading(false) - if (Array.isArray(answer)) { - setMessages(answer.reverse()) - setOffset(answer.length) - } else { - showError('Ошибка загрузки чата') - return - } - })() + if (Array.isArray(answer)) { + setMessages(answer.reverse()) + setOffset(answer.length) + } else { + showMessage('Ошибка загрузки чата') + return + } + })() } }, [currentChat]) @@ -99,7 +97,7 @@ export function useModel( setMessages([...newMessages, ...messages]) setOffset((prev) => prev + answer.length) } else { - showError('Ошибка загрузки сообщений') + showMessage('Ошибка загрузки сообщений') return } } @@ -117,11 +115,7 @@ export function useModel( info: dataForSend.info as any, is_sent: true, model: '', - file: dataForSend.file - ? ((URL.createObjectURL(dataForSend.file) + - '?type=.' + - dataForSend.file.name.split('.')[1]) as string) - : null, + file: dataForSend.file ? ((URL.createObjectURL(dataForSend.file) + '?type=.' + dataForSend.file.name.split('.')[1]) as string) : null, from_model: false, uid: 'new-send', elapsed_time: '', @@ -140,7 +134,7 @@ export function useModel( setLoading(true) // let timeout = setTimeout(() => { - // showError('Не покидайте страницу, генерация подготавливается!', false) + // showMessage('Не покидайте страницу, генерация подготавливается!', false) // }, 5000) setMessages((prev) => [...prev!, userMessage, modelMessageAboutStartGeneration]) @@ -168,10 +162,9 @@ export function useModel( if (status >= 400) { userMessage.is_sent = false setMessages((prev) => [...prev!, userMessage]) - const error = (result as { detail: string }) - if (error.detail) - return showError(error.detail) - showError("Непредвиденная ошибка, попробуйте еще раз") + const error = result as { detail: string } + if (error.detail) return showMessage(error.detail) + showMessage('Непредвиденная ошибка, попробуйте еще раз') } else { setMessages((prev) => [...prev!, ...(result as Message[])]) } @@ -213,17 +206,13 @@ export const ModelsWithImagesEndpoints = { const HeaderDataType = dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json' try { - const { data } = await axios.post>( - API_URL + `/media/image/${type}`, - dataForSend, - { - withCredentials: true, - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': HeaderDataType, - }, - } - ) + const { data } = await axios.post>(API_URL + `/media/image/${type}`, dataForSend, { + withCredentials: true, + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': HeaderDataType, + }, + }) return data } catch (err: any) { @@ -236,7 +225,7 @@ export const ModelsWithImagesEndpoints = { }, } -export function useModelImages(showError: (message: string) => void, type: string, device: Device) { +export function useModelImages(showMessage: (message: string) => void, type: string, device: Device) { const { data } = useSession() const { getData, sendData } = ModelsWithImagesEndpoints @@ -271,12 +260,12 @@ export function useModelImages(showError: (message: string) => void, type: st useEffect(() => { if (data?.access && type !== '' && type !== undefined) { - ; (async () => { + ;(async () => { setLoading(true) const answer = await getData(type, offset, data?.access) setLoading(false) if ('error' in answer) { - showError('Ошибка загрузки чата') + showMessage('Ошибка загрузки чата') return } @@ -315,7 +304,7 @@ export function useModelImages(showError: (message: string) => void, type: st } else { console.log('err') - showError('Ошибка загрузки сообщений') + showMessage('Ошибка загрузки сообщений') return } } @@ -338,7 +327,7 @@ export function useModelImages(showError: (message: string) => void, type: st if (result.hasOwnProperty('error')) { //@ts-ignore const message = (result.details as AxiosError).response.data.trim() ?? 'Ошибка отправки сообщения' - showError(message) + showMessage(message) return } dispatch(getUserBalance(data?.access)) @@ -380,16 +369,12 @@ export const ModelsMediaApi = { }, sendData: async (type: string | null, dataForSend: MessageSend | FormData, token?: string) => { try { - const { data } = await axios.post>( - API_URL + `/media/audio/${type}`, - dataForSend, - { - withCredentials: true, - headers: { - Authorization: `Bearer ${token}`, - }, - } - ) + const { data } = await axios.post>(API_URL + `/media/audio/${type}`, dataForSend, { + withCredentials: true, + headers: { + Authorization: `Bearer ${token}`, + }, + }) return data } catch (err: any) { @@ -402,7 +387,7 @@ export const ModelsMediaApi = { }, } -export function useMedia(showError: (message: string) => void, modelType: string) { +export function useMedia(showMessage: (message: string) => void, modelType: string) { const { data } = useSession() const [messages, setMessages] = useState(null) @@ -415,12 +400,12 @@ export function useMedia(showError: (message: string) => void, modelType: string useEffect(() => { if (data?.access) { - ; (async () => { + ;(async () => { setLoading(true) const answer = await ModelsMediaApi.getData(modelType, data?.access) setLoading(false) if ('error' in answer) { - showError('Ошибка загрузки') + showMessage('Ошибка загрузки') return } @@ -431,7 +416,7 @@ export function useMedia(showError: (message: string) => void, modelType: string const sendMessage = async (dataForSend: MessageSend) => { if (input.trim() === '') { - showError('Введите запрос!') + showMessage('Введите запрос!') return } @@ -472,7 +457,7 @@ export function useMedia(showError: (message: string) => void, modelType: string try { //@ts-ignore const message = (result.details as AxiosError).response.data.trim() ?? 'Ошибка отправки сообщения' - showError(message) + showMessage(message) return } catch (e) { return @@ -0,0 +1 @@ +export * from './instance' \ No newline at end of file @@ -0,0 +1,6 @@ +import axios from 'axios' + +export const api = axios.create({ + validateStatus: (status) => status < 500, + baseURL: process.env.NEXT_PUBLIC_API_HOST +}) @@ -1,9 +1,10 @@ import { RegisterOptions } from 'react-hook-form/dist/types/validator' -const EMAIL_REGEXP = +export const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu -const PHONE_REGEXP = /^((8|\+7)[\- ]?)?($?\d{3}$?[\- ]?)?[\d\- ]{7,10}$/ +export const PHONE_REGEXP = /^((8|\+7)[\- ]?)?($?\d{3}$?[\- ]?)?[\d\- ]{7,10}$/ + export const emailOptions: RegisterOptions = { required: 'Поле email обязательно к заполенению!', @@ -1 +1,2 @@ export { API_HOST, API_URL, ModelPagesList, surpriseMePrompts } from './constants' +export * from './hook-form-options' \ No newline at end of file @@ -5,3 +5,4 @@ export * from './get-type-device' export * from './get-random-image' export * from './string' export * from './date-helper' +export * from './object' @@ -0,0 +1,6 @@ +export function keysToValues(obj: Record) { + return Object.keys(obj).reduce( + (prev, curr) => ({ ...prev, [obj[curr]]: curr }), + {} as Record + ) +} @@ -1,3 +1,3 @@ export { useAutoScroll } from './use-auto-scroll' -export { useShowData } from './use-show-data' export { useThemeAndDevice } from './use-theme-and-device' +export * from './use-show-data' \ No newline at end of file @@ -0,0 +1,26 @@ +import { useEffect } from 'react' +import { useRouter } from 'next/router' + +// этот хук проверяет используется ли Telegram Web App + +export const useBlockTelegram = () => { + const router = useRouter() + + useEffect(() => { + if (typeof window === 'undefined') return + + try { + if ( + typeof window !== 'undefined' && + 'Telegram' in window && + (window as any).Telegram?.WebApp && + router.pathname !== '/telegram-blocked' + ) { + router.replace('/telegram-blocked') + } else { + } + } catch (err) { + console.error('Ошибка при проверке WebApp:', err) + } + }, [router]) +} @@ -1,19 +1,45 @@ import React, { useState } from 'react' +import { create } from 'zustand' -export const useShowData = (): { - error: string - showError: (message: string, isErrorMessage?: boolean) => void - isError: boolean -} => { - const [message, setError] = React.useState('') +export type Variant = 'error' | 'success' - const [isError, setIsError] = useState(false) +interface ShowDataStore { + message: string + variant: Variant + isOpened: boolean + setOpened: (isOpened: boolean) => void + setMessage: (message: string) => void + setVariant: (variant: Variant) => void + showMessage: (message: string, variant?: Variant) => void +} - function showError(message: string = 'Произошла ошибка', isErrorMessage: boolean = false) { - setIsError(isErrorMessage) - setError(message) - setTimeout(() => setError(''), 5000) +export const useShowDataStore = create((set, get) => { + function setVariant(variant: Variant = 'error') { + set({ ...get(), variant }) } - return { error: message, showError, isError } -} + function setMessage(message: string) { + set({ ...get(), message }) + } + + function setOpened(isOpened: boolean) { + set({ ...get(), isOpened }) + } + + function showMessage(message: string = 'Произошла ошибка', variant: Variant = 'error') { + setVariant(variant) + setOpened(true) + setMessage(message) + setTimeout(() => setOpened(false), 5000) + } + + return { + message: '', + variant: 'error', + isOpened: false, + setOpened, + setVariant, + setMessage, + showMessage, + } +}) @@ -2,14 +2,16 @@ border: none; outline: none; background-color: transparent; - padding: 15px 25px; + padding: 16px 25px; cursor: pointer; - box-sizing: content-box; + display: flex; + align-items: center; + justify-content: center; &_outline { border-radius: 15px; - border: 0.15rem solid var(--new-ui-text-color); - color: var(--new-ui-text-color); + border: 1px solid white; + color: white; font-weight: 600; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; font-size: 15px; @@ -45,14 +47,32 @@ &_primary { background-color: var(--air-color); - color: var(--new-ui-text-color); + color: white; border-radius: 12px; font-weight: 500; - font-size: 15px; + font-size: 16px; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; &:hover { background-color: var(--text-color-purple); - color: var(--new-ui-text-color); } } + + &_gray { + background-color: #f2f2f2; + color: var(--air-color); + border-radius: 12px; + font-weight: 500; + font-size: 15px; + transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; + &:hover { + opacity: 0.7; + } + } +} + +html[data-theme='dark'] { + .button_gray { + color: white !important; + background-color: #5d5a5a !important; + } } @@ -1,7 +1,7 @@ import { c } from '#/shared/lib/helpers' import styles from './common-button.module.scss' -export type ButtonVariant = 'outline' | 'primary' | 'primary-outline' +export type ButtonVariant = 'outline' | 'primary' | 'primary-outline' | 'gray' export interface CommonButtonProps extends React.ButtonHTMLAttributes { children?: React.ReactNode @@ -0,0 +1,50 @@ +.input { + display: none; +} + +.checkbox { + display: flex; + align-items: center; + gap: 10px; + + &__iconbox { + &_primary { + border-radius: 3px; + border: 2px solid var(--air-color); + min-width: 22px; + min-height: 22px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease-in-out; + } + + &_active { + background-color: var(--air-color); + } + } + + &__icon { + transition: all 0.1s ease-in; + opacity: 0; + + &_primary { + color: #151518; + } + + &_active { + opacity: 1; + } + } + + &__text { + + } +} + + +html[data-theme='light'] { + .checkbox__icon_primary{ + color: white; + } +} \ No newline at end of file @@ -0,0 +1,83 @@ +import { c } from '#/shared/lib/helpers' +import DoneIcon from '#/assets/svg/done.svg?react' +import styles from './common-checkbox.module.scss' +import { forwardRef } from 'react' + +export type CheckboxVariant = 'primary' + +export type CheckboxSize = 'md' + +export interface CheckboxProps + extends Omit, 'size' | 'placeholder'> { + name: string + value: boolean + className?: string + variant?: CheckboxVariant + placeholder?: string | React.ReactNode + required?: boolean + size?: CheckboxSize + withoutAnimation?: boolean + children?: React.ReactNode +} + +export const CommonCheckbox = forwardRef( + ( + { + id, + name, + className, + placeholder, + children, + value, + variant = 'primary', + size = 'md', + required = false, + withoutAnimation = false, + ...props + }, + ref + ) => { + return ( + <> + + +

+ +

{children}

+ + + ) + } +) @@ -0,0 +1 @@ +export * from './common-checkbox' \ No newline at end of file @@ -0,0 +1,2 @@ + +export * from "./ui" \ No newline at end of file @@ -0,0 +1,168 @@ +.box { + display: flex; + flex-direction: column; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + + &__error { + transform: translateY(16px); + color: #ff2372; + font-size: 13px; + opacity: 0; + transition: all 300ms; + margin-top: 8px; + + &_visible { + opacity: 1; + transform: translateY(0); + } + } +} + +.label { + color: #a6a5a5; + font-size: 14px; + margin-bottom: 8px; + width: 100%; + + &_primary { + font-weight: 500; + margin-bottom: 10px; + } + + &_error { + color: #97989f; + font-size: 14px; + margin-bottom: 8px; + } +} + +.input { + background-color: transparent; + border: none; + outline: none; + font-size: 16px; + width: 100%; + font-family: '__Raleway_9d395e' !important; + + &:focus { + border: none; + outline: none; + } + + &_primary { + padding: 16px 0; + color: var(--text-color-main) !important; + font-size: 19px; + font-weight: 400; + + &::placeholder { + color: #97989f !important; + } + } + + &_outline { + padding: 20px 0; + color: var(--text-color-main) !important; + + &::placeholder { + color: #97989f !important; + } + } + + &_error { + color: #ff2372 !important; + &::placeholder { + color: #ff2372 !important; + } + } +} + +.wrapper { + display: flex; + justify-content: space-between; + align-items: center; + transition: all 0.3 ease-in; + + &_primary { + color: var(--text-color-main) !important; + padding: 0 14px; + background-color: var(--new-ui-main-color); + border: 2px solid #40404e; + border-radius: 13px; + + &:hover { + border: 2px solid var(--air-color); + } + + &::placeholder { + color: #a6a5a5 !important; + } + + &:focus { + border: 2px solid var(--background-color-table); + } + } + + &_outline { + color: var(--text-color-main) !important; + padding: 0 20px; + border: 2px solid var(--background-color-table); + border-radius: 13px; + + &::placeholder { + color: #97989f !important; + } + + &:focus { + border: 2px solid var(--background-color-table); + } + } + + &_error { + border-color: #ff2372; + + &::placeholder { + color: #ff2372 !important; + } + + &:focus { + border: 2px solid #ff2372; + } + } +} + +html[data-theme='light'] { + .wrapper_outline { + border: 2px solid #f2f2f8 !important; + &:focus { + border: 2px solid var(--background-color-table) !important; + } + } + + .wrapper_primary{ + border-color: #D4D7DB; + + &:hover{ + border-color: var(--air-color); + } + } + + .label_primary{ + color: #181C32; + } + + .wrapper_error { + border-color: #ff76a7 !important; + &::placeholder { + color: #ff76a7 !important; + } + &:focus { + border: 2px solid #ff76a7 !important; + } + } +} @@ -0,0 +1,80 @@ +import { c } from '#/shared/lib/helpers' +import { FieldError } from 'react-hook-form' +import styles from './common-input.module.scss' +import React, { ForwardedRef, forwardRef, useEffect } from 'react' + +export type InputVariant = 'outline' | 'primary' + +export interface CommonInputProps extends React.InputHTMLAttributes { + children?: React.ReactNode + variant?: InputVariant + label?: string | React.ReactNode + error?: FieldError + rightSlot?: React.ReactNode + trim?: boolean + ref?: ForwardedRef +} + +export const CommonInput = forwardRef( + ( + { + rightSlot, + label, + error, + className, + disabled, + trim = false, + variant = 'outline', + ...props + }, + ref + ) => { + const onChange = (event: React.ChangeEvent) => { + event.target.value = trim ? event.target.value.trim() : event.target.value + } + + return ( +

+ {label && ( + + {label} + + )} +

+ + {rightSlot} +

+ {error ? error?.message : ''} +

+ ) + } +) @@ -0,0 +1 @@ +export * from './common-input' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -4,6 +4,7 @@ import Router from 'next/router' import { signOut, useSession } from 'next-auth/react' import { useAppSelector } from '#/app/store/store' +import { useUserSelector } from '#/entities/user-account' interface IAccountMenu { anchorEl: HTMLElement | null @@ -11,7 +12,11 @@ interface IAccountMenu { device?: 'mobile' | 'desktop' } -export const AccountMenu: React.FC = ({ anchorEl, changeVisible, device = 'desktop' }) => { +export const AccountMenu: React.FC = ({ + anchorEl, + changeVisible, + device = 'desktop', +}) => { const { data } = useSession() const goAccount = async () => { await Router.push('/account') @@ -23,7 +28,7 @@ export const AccountMenu: React.FC = ({ anchorEl, changeVisible, d const desktop = device === 'desktop' - const email = useAppSelector((state) => state.user.email) + const { email } = useUserSelector() return ( = ({ anchorEl, changeVisible, d onClose={() => changeVisible()} PaperProps={{ style: { - transform: desktop ? 'translateX(-9%) translateY(28%)' : 'translateX(0%) translateY(16%)', + transform: desktop + ? 'translateX(-9%) translateY(28%)' + : 'translateX(0%) translateY(16%)', borderRadius: desktop ? 10 : '0px 0px 15px 15px', marginTop: desktop ? 0 : 12, }, @@ -8,8 +8,7 @@ interface ICheckBoxAgreeWithRulesProps { changeAgree?: () => void isAgreeError?: boolean register?: UseFormRegister - name?: string - isEmailWhite: boolean + name: string } export const CheckBoxAgreeWithRules: React.FC = ({ @@ -18,16 +17,13 @@ export const CheckBoxAgreeWithRules: React.FC = ({ isAgreeError, name, register, - isEmailWhite, }) => { return ( <> { - const { payment_plan, status } = useAppSelector((state) => state.user) + const { payment_plan } = useUserSelector() if (Math.floor(+payment_plan?.plan.price) !== 0) { return null @@ -8,6 +8,7 @@ import { useSession } from 'next-auth/react' import { useAppSelector } from '#/app/store/store' import { API_URL } from '#/shared/lib/constants' +import { useUserSelector } from '#/entities/user-account' const style = { position: 'absolute' as 'absolute', @@ -76,7 +77,7 @@ const ErrorModal: React.FC = ({ open, handleClose, device }) => { const { data: session } = useSession() - const email = useAppSelector((state) => state.user.email) + const { email } = useUserSelector() const theme = useAppSelector((state) => state.theme.theme) @@ -138,7 +139,9 @@ const ErrorModal: React.FC = ({ open, handleClose, device }) => { > {isSend ? ( - Спасибо! + + Спасибо! + = ({ open, handleClose, device }) => { color: '#868686', }} > - Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при - регистрации + Ваше сообщение направлено нашим специалистам. Ответ придет на почту, + указанную при регистрации ) : ( @@ -1,55 +1,59 @@ -import React, { useRef } from 'react' +import React, { useEffect, useRef } from 'react' import { Alert, Slide, Snackbar, Typography } from '@mui/material' import Image from 'next/image' import { useThemeAndDevice } from '#/shared/lib/hooks' import { CSSTransition } from 'react-transition-group' +import { useShowDataStore } from '../lib/hooks/use-show-data' +import SuccessSvg from '#/assets/svg/success.svg?react' export interface IError { - error: string - open: boolean handleClose?: () => void } const ErrorIcon = () => { const { theme } = useThemeAndDevice() - return ( - {''}

- ) + return {''}

} -export const Error: React.FC = ({ error, handleClose, open }) => { +export const Error: React.FC = ({ handleClose }) => { + const { message, variant, isOpened } = useShowDataStore() const { theme } = useThemeAndDevice() const nodeRef = useRef(null) return ( - - - } - severity='error' - sx={{ - backgroundColor: theme === 'light' ? 'white' : '#404040', - border: '1px solid #F15179', - color: theme === 'light' ? '#666666' : '#C7C7C7', - borderRadius: '12px', - }} - > - {error} - + + + {variant == 'error' ? ( + } + severity='error' + sx={{ + backgroundColor: theme === 'light' ? 'white' : '#404040', + border: '1px solid #F15179', + color: theme === 'light' ? '#666666' : '#C7C7C7', + borderRadius: '12px', + }} + > + {message} + + ) : ( + } + severity='error' + sx={{ + backgroundColor: theme === 'light' ? 'white' : '#404040', + border: '1px solid #5ef151', + color: theme === 'light' ? '#666666' : '#C7C7C7', + borderRadius: '12px', + }} + > + {message} + + )} ) @@ -1,60 +0,0 @@ -import React, { useMemo } from 'react' -import { Alert, Slide, Snackbar, Typography } from '@mui/material' -import Image from 'next/image' - -import { useThemeAndDevice } from '#/shared/lib/hooks' - -interface ISuccess { - message: string - open: boolean - handleClose?: () => void - isError?: boolean -} -export const Success: React.FC = ({ message, handleClose, open, isError = false }) => { - const { theme } = useThemeAndDevice() - - const WidgetIcon = useMemo(() => { - if (isError) { - return theme === 'dark' ? '/error2.svg' : '/error2_white.svg' - } - - return '/svg/alert/success.svg' - }, [theme, isError]) - - return ( - - - - ), - }} - severity='success' - sx={ - !isError - ? { - backgroundColor: theme === 'light' ? 'white' : '#294239', - border: '2px solid #22B47F', - color: theme === 'light' ? '#666666' : '#C7C7C7', - borderRadius: '12px', - } - : { - backgroundColor: theme === 'light' ? 'white' : '#404040', - border: '1px solid #F15179', - color: theme === 'light' ? '#666666' : '#C7C7C7', - borderRadius: '12px', - } - } - > - {message} - - - - ) -} @@ -1,6 +1,5 @@ export { emailOptions, onlyNumbersOption } from './lib/constants/hook-form-options' export { translateTypeModel } from './lib/helpers/model-helpers' -export { useShowData } from './lib/hooks' export { useAutoLoad } from './lib/hooks/use-auto-load' export { AccountMenu } from './ui/account-menu' export { Balance } from './ui/balance' @@ -25,7 +24,6 @@ export { ReferralBlock } from './ui/referral-block' export { Search } from './ui/search/search' export { SelectUI as Select } from './ui/select' export { Slider } from './ui/slider/slider' -export { Success } from './ui/success' export { SwitchCustom } from './ui/switch/switch' export { TooltipCustom } from './ui/tooltip/tooltip' export { TooltipFreeTokens } from './ui/tooltip-free-tokens' @@ -0,0 +1,7 @@ +import '@testing-library/jest-dom' + +describe('Test', () => { + it('renders a heading', () => { + // throw new Error('test') + }) +}) @@ -12,7 +12,7 @@ import { getAllInfo, unfollowEmail } from '#/entities/user-account/model/user-ty import { useAppDispatch, useAppSelector } from '#/app/store/store' import styles2 from '#/app/styles/accountTabs.module.css' import styles from '#/app/styles/business.module.scss' -import { ButtonUI, Input, Loader, Modal, Success, SwitchCustom, useShowData } from '#/shared' +import { ButtonUI, Error, Input, Loader, Modal, SwitchCustom } from '#/shared' import { accountApi } from '#/shared/api/account-endpoints' import { API_URL } from '#/shared/lib/constants/constants' import { getDeviceType } from '#/shared/lib/helpers' @@ -24,6 +24,8 @@ import { Referral } from '#/widgets/referral' import { NextPageWithLayout } from '#/pages/_app' import { DownloadModal } from '#/features/business-security-download' import { scopes } from '../config' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { useUserSelector } from '#/entities/user-account' const Account: NextPageWithLayout = () => { const { @@ -35,13 +37,13 @@ const Account: NextPageWithLayout = () => { username, profile_picture_link, is_social, - status: userInfoLoaded, referral_code, - } = useAppSelector((state) => state.user) + account_type: type, + } = useUserSelector() const device = getDeviceType() - const { status, account_type: type } = useAppSelector((state) => state.user) + const { status } = useAppSelector((state) => state.user) const [name, setName] = useState('') @@ -61,7 +63,7 @@ const Account: NextPageWithLayout = () => { const dispatch = useAppDispatch() - const { error, showError, isError } = useShowData() + const { showMessage } = useShowDataStore() const handleFileChange = async (event: any) => { const formData = new FormData() @@ -76,11 +78,11 @@ const Account: NextPageWithLayout = () => { }, }) dispatch(getAllInfo(data?.access)) - showError('Изображение успешно загружено!') + showMessage('Изображение успешно загружено!') setLoading(false) } catch (e) { setLoading(false) - showError('Ошибка загрузки изображения на сервере!', true) + showMessage('Ошибка загрузки изображения на сервере!', 'error') } } @@ -129,13 +131,18 @@ const Account: NextPageWithLayout = () => { const changePassword = async () => { if (!data) return if (newPassword1 !== newPassword2) { - showError('Укажите одинаковые новы пароли!', true) + showMessage('Укажите одинаковые новы пароли!') return } - const status = await accountApi.changePassword(data.access, newPassword1, newPassword2, currentPassword) + const status = await accountApi.changePassword( + data.access, + newPassword1, + newPassword2, + currentPassword + ) if (status === 200) { - showError('Пароль успешно изменён!') + showMessage('Пароль успешно изменён!') setNewPassword1('') setNewPassword2('') setCurrentPassword('') @@ -143,13 +150,19 @@ const Account: NextPageWithLayout = () => { return } - showError('К сожалению, произошла ошибка', true) + showMessage('К сожалению, произошла ошибка') } function body() { if (type === 'regular') { return ( - + ) @@ -197,9 +210,9 @@ const Account: NextPageWithLayout = () => { ) const promocodeActivate = async () => { - if (!data) return + if (!data) return if (!promocode.trim()) { - showError('Введите корректный промокод', true) + showMessage('Введите корректный промокод') return } let resStatus = 404 @@ -213,26 +226,26 @@ const Account: NextPageWithLayout = () => { } catch (e) {} if (resStatus === 200) { - showError('Промокод успешно активирован! Токены уже зачислены!') + showMessage('Промокод успешно активирован! Токены уже зачислены!') dispatch(getUserBalance(data?.access)) return } if (resStatus === 403) { - showError('Промокод уже был активирован!', true) + showMessage('Промокод уже был активирован!') return } if (resStatus === 404) { - showError('Промокод не найден!', true) + showMessage('Промокод не найден!') return } } async function changeUserData() { - if (!data) return + if (!data) return if (!isUserDataChange) { - showError('Вы не изменили данные', true) + showMessage('Вы не изменили данные', 'success') return } @@ -248,13 +261,13 @@ const Account: NextPageWithLayout = () => { { headers: { Authorization: `Bearer ${data.access}` } } ) - showError('Данные успешно изменены!') + showMessage('Данные успешно изменены!') dispatch(getAllInfo(data.access)) } catch (e) {} } const deleteAccount = async () => { - if (!data) return + if (!data) return try { const { status } = await axios.delete(API_URL + '/auth/remove', { headers: { @@ -297,7 +310,9 @@ const Account: NextPageWithLayout = () => { height: '100%', }} > - Ваш аккаунт + + Ваш аккаунт + { right: '37px', }} > - {!loading || !(userInfoLoaded === 'succeeded') ? ( + {!loading || + !(status === 'succeeded') ? (

{ - Имя + + Имя + setName(e.target.value)} + onChange={(e) => + setName(e.target.value) + } fullWidth /> - Фамилия + + Фамилия + setLastName(e.target.value)} + onChange={(e) => + setLastName(e.target.value) + } fullWidth /> @@ -405,7 +429,9 @@ const Account: NextPageWithLayout = () => { alignItems='center' justifyContent='space-between' > - + Email { sx={{ marginBottom: '5px' }} > { - if (!data) return - await dispatch(unfollowEmail(data.access)) - showError('Данные изменены!') + if (!data) return + await dispatch( + unfollowEmail( + data.access + ) + ) + showMessage( + 'Данные изменены!' + ) }} /> { - Никнейм + + Никнейм + setUserName(e.target.value)} + onChange={(e) => + setUserName(e.target.value) + } fullWidth /> @@ -467,7 +505,9 @@ const Account: NextPageWithLayout = () => { - Активация промокода + + Активация промокода + { {!is_social && ( - Изменить пароль - + + Изменить пароль + + Текущий пароль @@ -489,7 +534,9 @@ const Account: NextPageWithLayout = () => { setCurrentPassword(e.target.value)} + onChange={(e) => + setCurrentPassword(e.target.value) + } fullWidth /> @@ -502,24 +549,36 @@ const Account: NextPageWithLayout = () => { }} > - + Новый пароль setNewPassword1(e.target.value)} + onChange={(e) => + setNewPassword1( + e.target.value + ) + } fullWidth /> - + Подтвердить пароль setNewPassword2(e.target.value)} + onChange={(e) => + setNewPassword2( + e.target.value + ) + } fullWidth /> @@ -533,8 +592,14 @@ const Account: NextPageWithLayout = () => { )} - - Удаление аккаунта + + + Удаление аккаунта + Удаление аккаунта приведет к потере всех настроек @@ -551,9 +616,14 @@ const Account: NextPageWithLayout = () => { /> - setConfirmDeleteModal(false)}> + setConfirmDeleteModal(false)} + > - Удаление аккаунта + + Удаление аккаунта + Вы действительно хотите удалить ваш аккаунт? @@ -591,7 +661,6 @@ const Account: NextPageWithLayout = () => { ) : ( <> )} - @@ -1,5 +1,14 @@ import React, { useEffect, useState } from 'react' -import { Box, Stack, Table, TableBody, TableHead, TableRow, TextField, Typography } from '@mui/material' +import { + Box, + Stack, + Table, + TableBody, + TableHead, + TableRow, + TextField, + Typography, +} from '@mui/material' import Button from '@mui/material/Button' import TableCell from '@mui/material/TableCell' import axios from 'axios' @@ -7,7 +16,7 @@ import Image from 'next/image' import Link from 'next/link' import { useSession } from 'next-auth/react' -import { getAll, ResponseAllInfo } from '#/entities/user-account/model/user-type-slice' +import { getAll } from '#/entities/user-account/model/user-type-slice' import { ApiKeyModal } from '#/features/api-key-modal/api-key-modal' import { Layout } from '#/app/layout' import { useAppSelector } from '#/app/store/store' @@ -17,13 +26,14 @@ import { API_URL } from '#/shared/lib/constants' import styles from '#/shared/styles/api-keys.module.scss' import { InputStyleSmallDark, InputStyleSmallLight } from '#/shared/ui/input' import { NextPageWithLayout } from '#/pages/_app' +import { UserDTO } from '#/entities/user-account' const ApiKeys: NextPageWithLayout = () => { const [keys, setKeys] = useState | null>(null) const [loading, setLoading] = useState(false) const { data, status } = useSession() const [modal, setModal] = useState(false) - const [userInfo, setUserInfo] = useState() + const [userInfo, setUserInfo] = useState() const [disabled, setDisabled] = React.useState(true) useEffect(() => { @@ -78,9 +88,9 @@ const ApiKeys: NextPageWithLayout = () => { - API-ключ — это инструмент, который идентифицирует пользователя или программу, - запрашивающих доступ к API платформы. С помощью ключа можно отслеживать, кто и когда - пользуется API, рассчитывать оплату. + API-ключ — это инструмент, который идентифицирует пользователя или + программу, запрашивающих доступ к API платформы. С помощью ключа можно + отслеживать, кто и когда пользуется API, рассчитывать оплату.

+ +

{ { ref={mobileScrollContainer} className={'smallScroll'} > -

{ getMessagesPagination={fetchMessages} /> - + {botParams && ( { imageLoad={onLoadImage} sendMessage={onCreateImage} unpinImage={() => setImage(null)} - viewMobileSettings={() => - setOpenFiltersMobile(true) - } + viewMobileSettings={() => setOpenFiltersMobile(true)} /> )} {botParams?.blocked && (

- - - Модель недоступна - + + Модель недоступна

)} @@ -297,11 +229,7 @@ const ImageModelPage: NextPageWithLayout = () => { )} {desktop && ( - + {botParams?.versions && botParams.versions.length !== 0 ? ( <> { )} {botParams && botParams.parameters?.length > 0 ? ( - - - setOpenFiltersMobile(false)} - reset={resetParams} - /> + + + setOpenFiltersMobile(false)} reset={resetParams} /> ) : ( { )} )} - setOpenFiltersMobile(false)} - > + setOpenFiltersMobile(false)}> {botParams?.versions && botParams.versions.length !== 0 ? ( <> @@ -433,15 +346,8 @@ const ImageModelPage: NextPageWithLayout = () => { > ПАРАМЕТРЫ - - setOpenFiltersMobile(false)} - desktop={desktop} - reset={resetParams} - /> + + setOpenFiltersMobile(false)} desktop={desktop} reset={resetParams} /> ) : ( { )} - ) @@ -10,10 +10,11 @@ import { NextPageWithLayout } from '#/pages/_app' import { ImageModelCard, IShortModel } from '#/entities/model-entity' import styles from './image-models.module.scss' +import { useUserSelector } from '#/entities/user-account' export const ImageModelsPage: NextPageWithLayout = () => { const [bots, setBots] = useState(null) - const user = useAppSelector((state) => state.user) + const user = useUserSelector() const { data, status } = useSession() useEffect(() => { @@ -12,11 +12,12 @@ import { SocialMedia } from '#/shared/ui/social-media-block' import { Statistics } from '#/widgets/stats/stats' import { NextPageWithLayout } from '#/pages/_app' import { getDeviceType } from '#/shared/lib/helpers/get-type-device' +import { useUserSelector } from '#/entities/user-account' export interface MainPageProps {} const Main: NextPageWithLayout = () => { - const { first_name, account_type } = useAppSelector((state) => state.user) + const { first_name, account_type } = useUserSelector() const deviceType = getDeviceType() @@ -1,11 +1,136 @@ .imagebox { + position: relative; + background-color: var(--air-color); + width: 100%; + @media screen and (max-width: 1000px) { display: none; } + + &__image { + position: absolute; + right: -530px; + bottom: -490px; + transform: rotate(-13deg); + border: 10px solid rgba(255, 255, 255, 0.3); + border-radius: 20px; + } + + &__logo { + position: absolute; + left: 35px; + top: 35px; + } } -.form{ - @media screen and (max-width: 1000px) { +.login { + display: grid; + grid-template-columns: 1fr 1fr; + min-height: 100dvh; + background-color: white; + overflow: hidden; + + @media screen and (max-width: 1000px) { + grid-template-columns: 1fr; + grid-auto-rows: max-content; + overflow: scroll; + } + + &__left { + margin: 20px 0px; + @media screen and (max-width: 1000px) { + height: max-content; + } + } + + &__or { + padding-top: 16px; + text-align: center; + color: #a4aab5; + } + + &__title { + font-weight: 700; + font-size: 26px; + text-align: center; + margin-bottom: 16px; + } + + &__form { + width: 320px; + height: 100%; + display: flex; + align-items: center; + margin: 0 auto; + @media screen and (max-width: 1000px) { + width: 90%; + } + } + + &__active { + width: 100%; + } + + &__logo { + display: none; + margin: 0 auto; + margin-bottom: 40px; + @media screen and (max-width: 1000px) { + display: block; + } + } +} + +html[data-theme='dark'] { + .login { + background-color: var(--new-ui-bg-app-color); + } +} + + +.form { + width: 100%; + &__inputs { + display: flex; + flex-direction: column; + gap: 14px; + margin-bottom: 10px; + } + + &__navigate { + padding-top: 10px; + text-align: center; + font-size: 16px; + } +} + +.input{ + &__pass{ + display: flex; + align-items: center; + } + &__label{ + display: flex; + align-items: center; + justify-content: space-between; width: 100%; + } +} + +.controls { + padding-top: 25px; + width: 100%; + + &__progress { + display: flex; + justify-content: center; + span{ + color: var(--air-color); + } } -} \ No newline at end of file + + &__create { + width: 100%; + } +} + @@ -0,0 +1,128 @@ +import { RegisterPage } from '#/views/register' +import '@testing-library/jest-dom' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { jestRender } from '#/../jest/utils/render' +import { windowMock } from '#/../jest/utils/window-mock' +import fetchMock from 'jest-fetch-mock' +import Login from './login' +import { signIn } from 'next-auth/react' +import { useShowDataStore } from '#/shared/lib/hooks' +import { create } from 'zustand' +import { useRouter } from '#/../__mocks__/next/router' + +jest.mock('next-auth/react') + +jest.mock('zustand', () => { + return { + create: jest.fn(), + } +}) + +const showMessageMock = jest.fn() + +jest.mock('#/shared/lib/hooks', () => { + return { + useShowDataStore: jest.fn(() => { + return { + showMessage: showMessageMock, + } + }), + } +}) + +jest.mock('next/router') +jest.mock('@sentry/nextjs') + +fetchMock.enableMocks() +windowMock() + +describe('login-page', () => { + beforeEach(() => { + fetchMock.resetMocks() + }) + + it('renders in register', () => { + jestRender() + + const form = screen.getByTestId('register-email-form') + + expect(form).toBeInTheDocument() + }) + + it('submit by button click', async () => { + await act(async () => { + jestRender() + }) + + const submitButton = screen.getByTestId('submit-button') + const emailInput = screen.getByTestId('email-input') + const passwordInput = screen.getByTestId('password-input') + + ;(signIn as jest.Mock).mockResolvedValue({ + error: null, + status: 200, + ok: true, + url: '', + }) + + fireEvent.change(emailInput, { target: { value: 'aleksander.freelancer@gmail.com' } }) + fireEvent.change(passwordInput, { target: { value: 'geraldisrivii' } }) + + await act(async () => { + fireEvent.click(submitButton) + }) + + await waitFor(() => { + expect(signIn).toHaveBeenCalledWith('credentials', { + username: 'aleksander.freelancer@gmail.com', + password: 'geraldisrivii', + redirect: false, + }) + }) + + await waitFor(() => { + const { push } = useRouter() + expect(push).toHaveBeenCalledWith('/') + }) + }) + + it('submit by button click with some error (email in example)', async () => { + await act(async () => { + jestRender() + }) + ;(useShowDataStore as any as jest.Mock).mockImplementation(() => ({ + showMessage: showMessageMock, + })) + + const submitButton = screen.getByTestId('submit-button') + const emailInput = screen.getByTestId('email-input') + const passwordInput = screen.getByTestId('password-input') + + ;(signIn as jest.Mock).mockResolvedValue({ + error: 'email_not_correct', + status: 400, + ok: false, + url: '', + }) + + fireEvent.change(emailInput, { target: { value: 'aleksander.freelancer@gmail.com' } }) + fireEvent.change(passwordInput, { target: { value: 'geraldisrivii' } }) + + await act(async () => { + fireEvent.click(submitButton) + }) + + await waitFor(() => { + expect(signIn).toHaveBeenCalledWith('credentials', { + username: 'aleksander.freelancer@gmail.com', + password: 'geraldisrivii', + redirect: false, + }) + }) + + await waitFor(() => { + expect(showMessageMock).toHaveBeenCalledWith('Неверный email') + }) + }) +}) @@ -1,267 +1,70 @@ import * as React from 'react' -import { useCookies } from 'react-cookie' -import { useForm } from 'react-hook-form' -import { SubmitErrorHandler } from 'react-hook-form/dist/types/form' import { Box, Button, InputAdornment, Link, Stack, TextField, Typography } from '@mui/material' import CircularProgress from '@mui/material/CircularProgress' import Image from 'next/image' -import { Router, useRouter } from 'next/router' -import Script from 'next/script' -import { signIn } from 'next-auth/react' -import { authTelegram } from '#/features/auth-telegram' -import { PasswordOptions } from '#/features/register-by-email/lib/constants' -import { IEmailForms } from '#/features/register-by-email/model/types' import { useAppSelector } from '#/app/store/store' -import { emailOptions, Error } from '#/shared' -import { getDeviceType } from '#/shared/lib/helpers' -import { useShowData } from '#/shared/lib/hooks' +import { c, getDeviceType } from '#/shared/lib/helpers' import { InputStyleDark, InputStyleLight } from '#/shared/ui/input' import { NextPageWithLayout } from '#/pages/_app' import styles from './login.module.scss' -import { ERROR_MAPPING, ERRROR_YANDEX_TRANSLATE_MAPPING } from '#/pages/api/auth/constants' import OpenedEyeSvg from '#/assets/svg/opened-eye.svg?react' import ClosedEyeSvg from '#/assets/svg/closed-eye.svg?react' -import * as Sentry from '@sentry/nextjs' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' +import { YandexAuthButton } from '#/features/yandex-auth-button' +import { useLoginCookies } from '#/features/login-cookies' +import { useLoginForm, useLoginValidate } from '#/features/login-form' +import { useLoginQueryErrors } from '#/features/login-query-errors' +import LogoSvg from '#/assets/svg/logo.svg?react' +import { CommonInput } from '#/shared/ui/common-input' +import { CommonButton } from '#/shared/ui/button' const Login: NextPageWithLayout = () => { - const device = getDeviceType() + const { setAllQueryToCookies } = useLoginCookies() - const { query, push } = useRouter() + const { passwordOptions, emailOptions } = useLoginValidate() - const [, setCookie] = useCookies() + const { onMounted } = useLoginQueryErrors() - React.useEffect(() => { - Object.entries(query).forEach(([key, value]) => setCookie(key, value)) - }, []) - - const { error, showError } = useShowData() - - const [loading, setLoading] = React.useState(false) + const [passwordShowed, showPassword] = useState(false) - const [passwordShowed, showPassword] = React.useState(false) - - const desktop = device === 'desktop' - - const { register, handleSubmit, getValues, reset } = useForm() + const { register, onSubmit, pending } = useLoginForm() useEffect(() => { - const params = new URL(window.location.href).searchParams - - const error = params.get('error') - - if (!error || error === '') return - - const expectedError = ERRROR_YANDEX_TRANSLATE_MAPPING[error] - showError(expectedError ?? 'Непредвиденная ошибка') - if (!expectedError) Sentry.captureMessage(error) + setAllQueryToCookies() + onMounted() }, []) - async function onSubmit(data: any) { - setLoading(true) - - if (window.sessionStorage.__telegram__initParams !== '{}') { - await authTelegram(data.email, data.password) - setLoading(false) - reset() - return - } - - const resp = await signIn('credentials', { - username: data.email, - password: data.password, - redirect: false, - }) - if (resp && !resp.ok && resp.error && resp.error !== '') { - const expectedError = Object.keys(ERROR_MAPPING).reduce( - (prev, curr) => ({ ...prev, [ERROR_MAPPING[curr]]: curr }), - {} as Record - )[resp.error] - showError(expectedError ?? 'Непредвиденная ошибка') - if (!expectedError) Sentry.captureMessage(resp.error) - setLoading(false) - } else { - push('/') - } - } - - const checkError: SubmitErrorHandler = (data) => { - showError(Object.values(data)[0].message || 'Неверные данные') - } - - const handleKeyDown = (event: any) => { - if (event.key === 'Enter') { - handleSubmit(onSubmit)() - } - } - - const handleInputChangeTrim = (event: any) => { - event.target.value = event.target.value.trim() - } - - const theme = useAppSelector((state) => state.theme.theme) - return ( <> -