Merge branch 'main' into locales

# Conflicts:
#	i18n.server.js
#	locales/en/chat.json
#	src/pages/home/HomeMenu/FilterGenre/FilterGenre.tsx
#	src/pages/home/HomeMenu/FilterType/FilterType.tsx
#	src/pages/search/Search.tsx

i18n.server.js

@@ -15,7 +15,6 @@ export function createI18nInstance() {
     .use(LanguageDetector)
     .init({
       fallbackLng: "en",
-      preload: ["en", "ru"],
       ns: ["common", "auth", "chat", "home", "header", "search", "profile", "createBook"],
       defaultNS: "common",
       pluralSeparator: '_',
@@ -25,6 +24,9 @@ export function createI18nInstance() {
       react: {
         useSuspense: false,
       },
+      detection: {
+        caches: ["cookie"],
+      },
     });
   return instance;
 }

locales/en/auth.json

@@ -1,3 +1,42 @@
 {
-  "SignIn": "Sign In"
+  "titleOne": "Become a part of ",
+  "titleTwo": "ShareBook. ",
+  "titleThree": "Give. Exchange. ",
+  "titleFour": "Read.",
+  "titleSignIn": "Sign in with Email",
+  "titleSignUp": "Sign up with Email",
+  "titleGoToEmail": "Follow the link from the email we sent to",
+  "titleGoToEmailResetPassword": "To reset your password, follow the link from the email we sent to",
+  "titleForgotPassword": "Password Reset",
+
+  "email": "Email",
+  "password": "Password",
+  "newPassword": "Enter your new password",
+  "confirmPassword": "Confirm your password",
+  "name": "Name",
+  "city": "City (optionally)",
+
+  "buttonSignIn": "Sign In",
+  "buttonSignUp": "Sign Up",
+  "buttonNext": "Next",
+  "buttonRepeatLetter": "Send Again",
+  "buttonResetPassword": "Reset password",
+
+  "textSingIn": "Already have an account? ",
+  "textSignUp": "Don't have an account yet? ",
+
+  "linkSingIn": "Sign Up",
+  "linkSignUp": "Sign In",
+
+  "legalText": "By signing up, you agree to the",
+  "legalTextLink": "privacy policy and data processing terms",
+  "textForgotPassword": "Forgot your password?",
+  "textCheckbox": "I don't want to specify the city",
+
+  "messageEmailEmpty": "Please input your email",
+  "messageNameEmpty": "Please input your name",
+  "messagePasswordEmpty": "Please input your password",
+  "messagePasswordLength": "Minimum 8 characters",
+  "messagePasswordDontMatch": "The passwords don't match",
+  "messageEmailIncorrect": "Incorrect e-mail"
 }

locales/ru/auth.json

@@ -1,3 +1,43 @@
 {
-  "SignIn": "Вход"
+	"titleOne": "Станьте частью ",
+	"titleTwo": "ShareBook. ",
+	"titleThree": "Отдавайте. Меняйтесь. ",
+	"titleFour": "Читайте.",
+
+	"titleSignIn": "Вход через почту",
+	"titleSignUp": "Регистрация через почту",
+	"titleGoToEmail": "Перейдите по ссылке из письма, которое мы отправили на",
+	"titleGoToEmailResetPassword": "Для сброса пароля перейдите по ссылке из письма, которое мы отправили на",
+	"titleForgotPassword": "Сброс пароля",
+
+	"email": "Почта",
+	"password": "Пароль",
+	"newPassword": "Введите новый пароль",
+	"confirmPassword": "Повторите пароль",
+	"name": "Имя",
+	"city": "Город (необязательно)",
+
+	"buttonSignIn": "Войти",
+	"buttonSignUp": "Зарегестрироваться",
+	"buttonNext": "Далее",
+	"buttonRepeatLetter": "Отправить еще раз",
+	"buttonResetPassword": "Сбросить пароль",
+
+	"textSingIn": "Уже есть аккаунт? ",
+	"textSignUp": "Ещё нет аккаунта? ",
+
+	"linkSingIn": "Регистрация",
+	"linkSignUp": "Войти",
+
+	"legalText": "Регистрируясь, вы соглашаетесь с ",
+	"legalTextLink": "политикой конфиденциальности и обработки данных",
+	"textForgotPassword": "Забыли пароль?",
+	"textCheckbox": "Не хочу указывать город",
+
+	"messageEmailEmpty": "Пожалуйста, введите свой e-mail",
+	"messageNameEmpty": "Пожалуйста, введите своё имя",
+	"messagePasswordEmpty": "Пожалуйста, введите свой пароль",
+	"messagePasswordLength": "Минимум 8 символов",
+	"messagePasswordDontMatch": "Пароли не совпадают",
+	"messageEmailIncorrect": "Некорректный e-mail"
 }

openapi-config.json

@@ -4,5 +4,9 @@
   "apiImport": "emptySplitApi",
   "outputFile": "./src/services/api/sharebookApi.ts",
   "exportName": "sharebookApi",
-  "hooks": true
+  "hooks": {
+    "queries": true,
+    "lazyQueries": true,
+    "mutations": true
+  }
 }

server.js

@@ -66,11 +66,6 @@ app.use("*", async (req, res) => {
   try {
     const url = req.originalUrl.replace(base, "/");
 
-    const initialI18nStore = {};
-    req.i18n.languages.forEach((lng) => {
-      initialI18nStore[lng] = req.i18n.store.data[lng] || {};
-    });
-
     /** @type {string} */
     let template;
     /** @type {import('./src/entry-server.ts').render} */
@@ -96,7 +91,6 @@ app.use("*", async (req, res) => {
         `<!--i18n-head-->`,
         `
         <script>
-            window.initialI18nStore = ${JSON.stringify(initialI18nStore)};
             window.initialLanguage = '${req.i18n.language}';
         </script>
       `,

src/AppRouter.tsx

@@ -1,6 +1,12 @@
-import { BrowserRouter, Route, Routes, StaticRouter } from "react-router";
+import {
+  BrowserRouter,
+  Navigate,
+  Outlet,
+  Route,
+  Routes,
+  StaticRouter,
+} from "react-router";
 import { Home } from "./pages/home/Home.tsx";
-import { HeaderComponent } from "./components/Header";
 import { Favourites } from "./pages/favourites/Favourites.tsx";
 import { CreateBook } from "./pages/createBook";
 import { BookPage } from "./pages/book";
@@ -13,10 +19,27 @@ import {
 import { useTranslation } from "react-i18next";
 import { Genre } from "./pages/genre";
 import { Auth } from "./pages/auth";
+import { SignIn } from "./pages/auth/SignIn";
+import { SignUp } from "./pages/auth/SignUp";
+import { SignUpName } from "./pages/auth/SignUpName";
+import { SignUpPassword } from "./pages/auth/SignUpPassword";
+import { GoToEmail } from "./pages/auth/GoToEmail";
+import { ForgotPassword } from "./pages/auth/ForgotPassword";
 import { Search } from "./pages/search";
+import { GoToEmailForgotPassword } from "./pages/auth/GoToEmailForgotPassword";
+import { Header } from "./components/Header";
 
 const Router = import.meta.env.SSR ? StaticRouter : BrowserRouter;
 
+function Layout() {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+}
+
 export function AppRouter({ location }: { location: string }) {
   const { i18n } = useTranslation();
 
@@ -28,19 +51,33 @@ export function AppRouter({ location }: { location: string }) {
 
   return (
     <Router location={location}>
-      <HeaderComponent />
       <Routes>
-        <Route index element={<Home />} />
-        <Route path="/genre/:genreId" element={<Genre />} />
-        <Route path="/search/:title?" element={<Search />} />
-        <Route path="/favourites" element={<Favourites />} />
-        <Route path="/createBook" element={<CreateBook />} />
-        <Route path="/book" element={<BookPage />} />
-        <Route path="/chats" element={<Chat />} />
-        <Route path="/profile/:userId?" element={<Profile />} />
-        <Route path={"*"} element={<div>404 page not found</div>} />
+        <Route element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="/genre/:genreId" element={<Genre />} />
+          <Route path="/search/:title?" element={<Search />} />
+          <Route path="/favourites" element={<Favourites />} />
+          <Route path="/createBook" element={<CreateBook />} />
+          <Route path="/book" element={<BookPage />} />
+          <Route path="/chats" element={<Chat />} />
+          <Route path="/profile/:userId?" element={<Profile />} />
+          <Route path={"*"} element={<div>404 page not found</div>} />
+        </Route>
+
+        <Route path="/auth" element={<Auth />}>
+          <Route index element={<Navigate to="signIn" replace />} />
+          <Route path="signIn" element={<SignIn />} />
+          <Route path="signUp" element={<SignUp />} />
+          <Route path="signUpName" element={<SignUpName />} />
+          <Route path="signUpPassword" element={<SignUpPassword />} />
+          <Route path="goToEmail" element={<GoToEmail />} />
+          <Route
+            path="goToEmailForgotPassword"
+            element={<GoToEmailForgotPassword />}
+          />
+          <Route path="forgotPassword" element={<ForgotPassword />} />
+        </Route>
       </Routes>
-      <Auth />
     </Router>
   );
 }

src/antdConfig.ts

@@ -15,6 +15,8 @@ export const antdThemeConfig: ThemeConfig = {
       fontFamily: "Onest-Medium",
       fontSize: 16,
       colorPrimaryHover: "#2A7FFF",
+      colorBgContainerDisabled: "rgba(90, 156, 255, 1)",
+      colorTextDisabled: "#FFFFFF",
       controlHeight: 42,
       borderRadius: 9,
     },
@@ -24,6 +26,7 @@ export const antdThemeConfig: ThemeConfig = {
     Input: {
       colorText: "#000000",
       activeBorderColor: "rgba(42, 127, 255, 80)",
+      colorError: "rgba(255, 42, 42, 0.8)",
       fontFamily: "Onest-Regular",
       fontSize: 16,
       hoverBorderColor: "transparent",
@@ -35,6 +38,9 @@ export const antdThemeConfig: ThemeConfig = {
     },
     Form: {
       itemMarginBottom: 0,
+      colorError: "rgba(255, 42, 42, 0.8)",
+      fontFamily: "Onest-Regular",
+      fontSize: 12,
     },
     Dropdown: {
       paddingBlock: 6,
@@ -50,6 +56,11 @@ export const antdThemeConfig: ThemeConfig = {
       boxShadowTertiary: "0px 2px 7px rgba(42, 127, 255, 80)",
       colorBgContainer: "#FFFFFF",
     },
+    Checkbox: {
+      fontFamily: "Onest-Regular",
+      fontSize: 12,
+      paddingXS: 6,
+    },
     Drawer: {
       footerPaddingInline: 0,
       footerPaddingBlock: 0,

src/pages/home/components/Filter/svg/SvgArrow.tsx → src/assets/svg/SvgArrow.tsx

@@ -1,13 +1,12 @@
-import styles from "../filter.module.scss";
+import styles from "../../components/Header/headerLite.module.scss";
+import cn from "classnames";
 
 export function SvgArrow({ showListState }: { showListState: boolean }) {
   return (
     <svg
-      className={
-        showListState
-          ? `${styles.svgDefault} ${styles.svgActive}`
-          : styles.svgDefault
-      }
+      className={cn(styles.svgDefault, {
+        [styles.svgActive]: showListState,
+      })}
       width="18"
       height="18"
       fill="none"

src/pages/home/components/BookCard/components/BookCard.tsx → src/components/BookList/BookCard/BookCard.tsx

@@ -1,8 +1,8 @@
 import styles from "../bookCard.module.scss";
 import { Card } from "antd";
 import img1 from "../img/Image1.png";
-import { BookDto } from "../../../../../services/api/sharebookApi.ts";
-import { useAppSelector } from "../../../../../store.ts";
+import { BookDto } from "../../../services/api/sharebookApi.ts";
+import { useAppSelector } from "../../../store.ts";
 
 export function BookCard({ book }: { book: BookDto }) {
   // @ts-expect-error WIP

src/components/BookList/BookCard/index.ts

@@ -0,0 +1 @@
+export { BookCard } from "./BookCard";

src/pages/home/components/BookCard/components/BookCardComponent.tsx → src/components/BookList/BookList.tsx

@@ -1,15 +1,12 @@
-import styles from "../bookCard.module.scss";
-import { BookCard } from "./BookCard.tsx";
-import {
-  BookDto,
-  BooksApiResponse,
-} from "../../../../../services/api/sharebookApi.ts";
+import styles from "./bookCard.module.scss";
+import { BookDto, BooksApiResponse } from "../../services/api/sharebookApi.ts";
+import { BookCard } from "./BookCard";
 
 interface Props {
   books?: BooksApiResponse;
 }
 
-export function BookCardComponent({ books }: Props) {
+export function BookList({ books }: Props) {
   return (
     <div className={styles.container}>
       {(books as unknown as BookDto[])?.map((book) => {

src/components/BookList/index.ts

@@ -0,0 +1 @@
+export { BookList } from "./BookList.tsx";

src/components/Header/Avatar/Avatar.tsx

@@ -0,0 +1,19 @@
+import styles from "../header.module.scss";
+import { Button } from "antd";
+import { SvgAvatar } from "../svg/SvgAvatar.tsx";
+import { useNavigate } from "react-router";
+
+export function Avatar() {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      className={styles.avatar}
+      type="primary"
+      shape="circle"
+      onClick={() => navigate("/auth/signIn")}
+    >
+      <SvgAvatar />
+    </Button>
+  );
+}

src/components/Header/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

src/components/Header/HeaderComponent.tsx → src/components/Header/Header.tsx

@@ -1,10 +1,10 @@
 import styles from "./header.module.scss";
-import { Logo } from "./components/Logo.tsx";
-import { Nav } from "./components/Nav.tsx";
-import { SearchInput } from "./components/SearchInput.tsx";
-import { Avatar } from "./components/Avatar.tsx";
+import { Logo } from "./Logo";
+import { Nav } from "./Nav";
+import { SearchInput } from "./SearchInput";
+import { Avatar } from "./Avatar";
 
-export function HeaderComponent() {
+export function Header() {
   return (
     <header className={styles.header}>
       <div className={styles.container}>

src/components/Header/HeaderLite.tsx

@@ -0,0 +1,15 @@
+import extraStyles from "./headerLite.module.scss";
+import styles from "./header.module.scss";
+import { Logo } from "./Logo";
+import { SwitchLanguages } from "./SwitchLanguages";
+
+export function HeaderLite() {
+  return (
+    <header className={styles.header}>
+      <div className={extraStyles.container}>
+        <Logo />
+        <SwitchLanguages />
+      </div>
+    </header>
+  );
+}

src/components/Header/components/Logo.tsx → src/components/Header/Logo/Logo.tsx

@@ -1,11 +1,11 @@
 import { Link } from "react-router";
-import { SvgLogo } from "../svg/SvgLogo.tsx";
 import styles from "../header.module.scss";
+import { SvgLogo } from "../svg/SvgLogo.tsx";
 
 export function Logo() {
-  return (
-    <Link to={"/"} className={styles.logo}>
-      <SvgLogo />
-    </Link>
-  );
+	return (
+		<Link to={"/"} className={styles.logo}>
+			<SvgLogo />
+		</Link>
+	);
 }

src/components/Header/Logo/index.ts

@@ -0,0 +1 @@
+export { Logo } from "./Logo";