ithelor · ithelor · Dec 8, 2023 · Dec 20, 2023 · May 3, 2024 · May 13, 2024
diff --git a/.env b/.env
@@ -1,3 +1,4 @@
+NEXT_PUBLIC_API_BASE_URL=
 NEXT_PUBLIC_DOMAIN=
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=
 NEXT_ANALYZE=false
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v18.17.1
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
         "pnpm": "^8.7.0"
     },
     "dependencies": {
+        "@hookform/resolvers": "^3.3.2",
         "@phosphor-icons/react": "^2.0.14",
         "@react-oauth/google": "^0.11.1",
         "@tw-classed/react": "^1.6.1",
@@ -36,8 +37,11 @@
         "polished": "^4.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.48.2",
+        "swr": "^2.2.4",
         "tailwindcss": "0.0.0-insiders.803d7b5",
         "typescript": "5.0.3",
+        "yup": "^1.3.2",
         "zustand": "^4.4.6"
     },
     "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(authorized)/layout.tsx b/src/app/(authorized)/layout.tsx
@@ -1,8 +1,12 @@
+'use client';
+
 import { PropsWithChildren } from 'react';
+import RoleEnum from 'domain/entity/RoleEnum';
 import Sidebar from 'presentation/component/layout/Sidebar';
 import AuthorizedHeader from 'presentation/component/layout/AuthorizedHeader';
+import createAuthorizedLayout from 'presentation/component/layout/AuthorizedLayout';
 
-export default function AuthorizedLayout(props: PropsWithChildren) {
+const BaseAuthorizedLayout = (props: PropsWithChildren) => {
     const { children } = props;
 
     return (
@@ -14,4 +18,8 @@ export default function AuthorizedLayout(props: PropsWithChildren) {
             </div>
         </div>
     );
-}
+};
+
+export default createAuthorizedLayout(BaseAuthorizedLayout, {
+    roles: [RoleEnum.User],
+});
diff --git a/src/app/(login)/login/page.tsx b/src/app/(login)/login/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Inter, Kodchasan } from 'next/font/google';
 import clsx from 'clsx';
-import GoogleOAuthProvider from './providers/GoogleOAuthProvider';
 import './globals.css';
 
 const kodchasan = Kodchasan({ subsets: ['latin'], variable: '--font-title', weight: ['600'] });
@@ -18,9 +17,7 @@ export default function RootLayout(props: PropsWithChildren) {
     return (
         <html lang="en">
             <body className={clsx('font-body', kodchasan.variable, inter.variable)}>
-                <GoogleOAuthProvider>
-                    <main className="relative flex min-h-screen flex-col">{children}</main>
-                </GoogleOAuthProvider>
+                <main className="relative flex min-h-screen flex-col">{children}</main>
             </body>
         </html>
     );

diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
@@ -0,0 +1,7 @@
+import SignInPage from 'presentation/component/page/SignIn';
+
+const SignIn = () => {
+    return <SignInPage />;
+};
+
+export default SignIn;
diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx
@@ -0,0 +1,7 @@
+import SignUpPage from 'presentation/component/page/SignUp';
+
+const SignUp = () => {
+    return <SignUpPage />;
+};
+
+export default SignUp;
diff --git a/src/constant/env.ts b/src/constant/env.ts
@@ -1,2 +1,3 @@
 export const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? '';
 export const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID ?? '';
diff --git a/src/constant/httpCode.ts b/src/constant/httpCode.ts
@@ -0,0 +1,5 @@
+export const enum HttpCode {
+    Ok = 200,
+    Unauthorized = 401,
+    Forbidden = 403,
+}
diff --git a/src/constant/route.ts b/src/constant/route.ts
@@ -1,12 +1,12 @@
+export const SIGN_UP = '/sign-up';
+export const SIGN_IN = '/sign-in';
+
 export const HOME = '/';
 export const NEWS = '/news';
 export const DASHBOARD = '/dashboard';
 export const STUDY = '/study';
 export const SETTINGS = '/settings';
 
-export const SIGN_UP = '/sign-up';
-export const SIGN_IN = '/sign-in';
-
 /**
  * Dashboard sidebar items
  */
@@ -26,3 +26,11 @@ export const DICTIONARY = `${DASHBOARD}/dictionary`;
 export const PROFILE = `${SETTINGS}/profile`;
 export const SECURITY = `${SETTINGS}/security`;
 export const ADVANCED = `${SETTINGS}/advanced`;
+
+/**
+ * API routes
+ */
+const USER = (url: string) => `/user/${url}`;
+export const GET_USER = USER('');
+export const USER_LOGIN = USER('login');
+export const USER_REFRESH = USER('refresh');
diff --git a/src/data/driver/ApiClient/AbstractApiClient.ts b/src/data/driver/ApiClient/AbstractApiClient.ts
@@ -0,0 +1,26 @@
+import type { AxiosInstance } from 'axios';
+import REST from './REST';
+
+export default abstract class AbstractApiClient {
+    public abstract rest: REST;
+
+    private accessToken?: string;
+
+    public setAccessToken(token?: string) {
+        this.accessToken = token;
+    }
+
+    public getAccessToken() {
+        return this.accessToken;
+    }
+
+    protected useCredentialsInterceptor(client: AxiosInstance) {
+        client.interceptors.request.use((request) => {
+            if (this.accessToken && request.headers) {
+                request.headers.Authorization = `Bearer ${this.accessToken}`;
+            }
+
+            return request;
+        }, Promise.reject);
+    }
+}
diff --git a/src/data/driver/ApiClient/FrontendApiClient.ts b/src/data/driver/ApiClient/FrontendApiClient.ts
@@ -0,0 +1,14 @@
+import { API_BASE_URL } from 'constant/env';
+import AbstractApiClient from './AbstractApiClient';
+import REST from './REST';
+
+export default class FrontendApiClient extends AbstractApiClient {
+    public readonly rest: REST;
+
+    constructor() {
+        super();
+        this.rest = new REST(`${API_BASE_URL}/api`);
+
+        this.useCredentialsInterceptor(this.rest.client);
+    }
+}
diff --git a/src/data/driver/ApiClient/REST.ts b/src/data/driver/ApiClient/REST.ts
@@ -0,0 +1,13 @@
+import AbstractAxiosClient from './axios';
+
+export default class REST extends AbstractAxiosClient {
+    public post = this._client.post;
+
+    public postForm = this._client.postForm;
+
+    public get = this._client.get;
+
+    public delete = this._client.delete;
+
+    public patch = this._client.patch;
+}
diff --git a/src/data/driver/ApiClient/axios.ts b/src/data/driver/ApiClient/axios.ts
@@ -0,0 +1,32 @@
+import axios, { AxiosInstance } from 'axios';
+
+const TIMEOUT_ERROR_MESSAGE = 'TimeoutError';
+
+export default abstract class AbstractAxiosClient {
+    protected readonly _client: AxiosInstance;
+
+    public constructor(apiBaseURL: string) {
+        this._client = axios.create({
+            baseURL: apiBaseURL,
+            timeout: 30000,
+            timeoutErrorMessage: TIMEOUT_ERROR_MESSAGE,
+        });
+
+        this.useTimeoutErrorInterceptor();
+    }
+
+    private useTimeoutErrorInterceptor(): void {
+        this._client.interceptors.response.use(undefined, (error) => {
+            if (error?.message === TIMEOUT_ERROR_MESSAGE) {
+                // eslint-disable-next-line no-console
+                console.log(JSON.stringify({ TIMEOUT_ERROR_MESSAGE, error }, null, 2));
+            }
+
+            throw error;
+        });
+    }
+
+    public get client(): AxiosInstance {
+        return this._client;
+    }
+}
diff --git a/src/data/driver/ApiClient/frontend.ts b/src/data/driver/ApiClient/frontend.ts
@@ -0,0 +1,3 @@
+import FrontendApiClient from './FrontendApiClient';
+
+export const frontendApiClient = new FrontendApiClient();
diff --git a/src/data/driver/validation/auth/messages.ts b/src/data/driver/validation/auth/messages.ts
@@ -0,0 +1,7 @@
+import getPlural from 'helper/string/getPlural';
+
+export const requiredField = 'Поле обязательно для заполнения';
+export const minSymbols = ({ min }: { min: number }) =>
+    `Минимум ${min} ${getPlural(min, ['символ', 'символа', 'символов'])}`;
+export const maxSymbols = ({ max }: { max: number }) =>
+    `Максимум ${max} ${getPlural(max, ['символ', 'символа', 'символов'])}`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import FrontendApiClient from './FrontendApiClient';

		export const frontendApiClient = new FrontendApiClient();