add login by username

json-server/index.js

@@ -42,13 +42,13 @@ server.post('/login', (req, res) => {
 });
 
 // проверяем, авторизован ли пользователь
-// server.use((req, res, next) => {
-// 	if (!req.headers.authorization) {
-// 		return res.status(403).json({ message: 'AUTH ERROR' });
-// 	}
+server.use((req, res, next) => {
+	if (!req.headers.authorization) {
+		return res.status(403).json({ message: 'AUTH ERROR' });
+	}
 
-// 	next();
-// });
+	next();
+});
 
 server.use(router);
 

package.json

@@ -24,6 +24,7 @@
 	"dependencies": {
 		"@nextui-org/react": "^2.2.10",
 		"@reduxjs/toolkit": "^2.2.2",
+		"axios": "^1.6.8",
 		"framer-motion": "^11.0.8",
 		"next": "14.1.0",
 		"next-themes": "^0.2.1",

src/app/providers/StoreProvider/config/store.ts

@@ -1,13 +1,17 @@
-import { sortSlice } from '@/widgets/Sorts';
+import { userReducer } from '@/entities/User';
+import { loginReducer } from '@/features/Auth';
+import { sortReducer } from '@/widgets/Sorts';
 import { configureStore } from '@reduxjs/toolkit';
 import { RootState } from '..';
-import { settingsSlice } from '../model/slice/settingsSlice';
+import { settingsReducer } from '../model/slice/settingsSlice';
 
 export const createReduxStore = (initialState?: RootState) => {
 	return configureStore<RootState>({
 		reducer: {
-			settings: settingsSlice.reducer,
-			sort: sortSlice.reducer,
+			settings: settingsReducer,
+			sort: sortReducer,
+			user: userReducer,
+			loginForm: loginReducer,
 		},
 		preloadedState: initialState,
 		devTools: process.env.NODE_ENV === 'development', // FIX: ReferenceError: IS_DEV is not defined

src/app/providers/StoreProvider/index.ts

@@ -1,6 +1,6 @@
 import { createReduxStore } from './config/store';
 import { getSettings } from './model/selector/getSettings';
-import { settingsSlice } from './model/slice/settingsSlice';
+import { settingsActions, settingsReducer } from './model/slice/settingsSlice';
 import {
 	AppDispatch,
 	RootState,
@@ -9,6 +9,12 @@ import {
 } from './model/types/storeSchema';
 import { StoreProvider } from './ui/StoreProvider';
 
-export { StoreProvider, createReduxStore, getSettings, settingsSlice };
+export {
+	StoreProvider,
+	createReduxStore,
+	getSettings,
+	settingsActions,
+	settingsReducer,
+};
 
 export type { AppDispatch, RootState, SettingsState, SettingsStateKey };

src/app/providers/StoreProvider/model/slice/settingsSlice.ts

@@ -41,4 +41,5 @@ export const settingsSlice = createSlice({
 	},
 });
 
-export const { toggle } = settingsSlice.actions;
+export const { actions: settingsActions } = settingsSlice;
+export const { reducer: settingsReducer } = settingsSlice;

src/app/providers/StoreProvider/model/types/storeSchema.ts

@@ -1,3 +1,5 @@
+import { UserState } from '@/entities/User';
+import { LoginState } from '@/features/Auth';
 import { Currency } from '@/shared/types/localization';
 import { SortState } from '@/widgets/Sorts';
 import { ReactNode } from 'react';
@@ -6,6 +8,8 @@ import { createReduxStore } from '../../config/store';
 export interface RootState {
 	settings: SettingsState;
 	sort: SortState;
+	user: UserState;
+	loginForm?: LoginState;
 }
 
 export interface SettingsState {

src/app/styles/themes/dark.scss

@@ -1,5 +1,5 @@
 :root {
-	--color-background: #03020D;
+	--color-background: #030014;
 	--color-background-dots: #2e3135;
 	--color-main: #03020D;
 	--color-main-rgb: 3, 2, 13;
@@ -11,7 +11,7 @@
 	--color-text: 255, 255, 255;
 
 	// Light ellipse
-	--light-color-ellipse-1: rgb(90, 186, 255, 35%);
+	--light-color-ellipse-1: rgb(90, 186, 255, 25%);
 	--light-blur-ellipse-1: blur(400px);
 	--light-color-ellipse-2: rgb(255, 90, 209, 5%);
 	--light-blur-ellipse-2: blur(600px);

src/entities/Notification/Notification.module.scss

@@ -81,6 +81,10 @@
 	animation: fadeOutFromTop var(--animation-close-duration-notification) ease-out forwards;
 }
 
+.closeOnClick {
+	cursor: pointer;
+}
+
 .swipeLeft {
 	animation: swipeLeft var(--animation-close-duration-notification) ease-out forwards !important;
 }

src/entities/Notification/Notification.tsx

@@ -104,6 +104,7 @@ export const Notification: FC<NotificationProps> = memo(
 					[cls.swipeRight]: swipeClose && touchEndX > touchStartX && !closing,
 					[cls.top]: placement === 'top',
 					[cls.bottom]: placement === 'bottom',
+					[cls.closeOnClick]: closeOnClick,
 				})}
 				style={
 					{

src/entities/User/index.ts

@@ -0,0 +1,4 @@
+export { getUserAuthData } from './model/selectors/getUserAuthData/getUserAuthData';
+
+export { userActions, userReducer } from './model/slice/userSlice';
+export type { User, UserState } from './model/types/user';

src/entities/User/model/selectors/getUserAuthData/getUserAuthData.ts

@@ -0,0 +1,3 @@
+import { RootState } from '@/app/providers/StoreProvider';
+
+export const getUserAuthData = (state: RootState) => state.user.authData;

src/entities/User/model/slice/userSlice.ts

@@ -0,0 +1,32 @@
+import { LocalstorageKeys } from '@/shared/types/localstorage';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { User, UserState } from '../types/user';
+
+const authDataString = localStorage.getItem(LocalstorageKeys.USER);
+const authData = authDataString ? JSON.parse(authDataString) : undefined;
+
+const initialState: UserState = { authData };
+
+export const userSlice = createSlice({
+	name: 'user',
+	initialState,
+	reducers: {
+		setAuthData: (state, action: PayloadAction<User>) => {
+			state.authData = action.payload;
+		},
+		initAuthData: (state) => {
+			const user = localStorage.getItem(LocalstorageKeys.USER);
+			if (user) {
+				state.authData = JSON.parse(user);
+			}
+		},
+		logout: (state) => {
+			state.authData = undefined;
+			localStorage.removeItem(LocalstorageKeys.USER);
+		},
+	},
+});
+
+export const { actions: userActions } = userSlice;
+export const { reducer: userReducer } = userSlice;

src/entities/User/model/types/user.ts

@@ -0,0 +1,9 @@
+export interface User {
+	id: string;
+	email: string;
+	username?: string;
+}
+
+export interface UserState {
+	authData?: User;
+}

src/features/Auth/index.ts

@@ -0,0 +1,7 @@
+import { loginByUsername } from './model/service/loginByUsername';
+import { loginActions, loginReducer } from './model/slice/loginSlice';
+import { LoginState } from './model/types/loginSchema';
+import { ModalLogin } from './ui/ModalLogin/ModalLogin';
+
+export { ModalLogin, loginActions, loginByUsername, loginReducer };
+export type { LoginState };

src/features/Auth/model/selector/getLoginState.ts

@@ -0,0 +1,3 @@
+import { RootState } from '@/app/providers/StoreProvider';
+
+export const getLoginState = (state: RootState) => state?.loginForm;

src/features/Auth/model/service/loginByUsername.ts

@@ -0,0 +1,34 @@
+import { User, userActions } from '@/entities/User';
+import { LocalstorageKeys } from '@/shared/types/localstorage';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+interface LoginByUsernameProps {
+	username: string;
+	password: string;
+}
+
+export const loginByUsername = createAsyncThunk<User, LoginByUsernameProps>(
+	'login/loginByUsername',
+	async (authData, thunkAPI) => {
+		try {
+			const response = await axios.post<User>(
+				'http://localhost:8000/login',
+				authData,
+			);
+
+			if (!response.data) throw new Error();
+
+			localStorage.setItem(
+				LocalstorageKeys.USER,
+				JSON.stringify(response.data),
+			);
+			thunkAPI.dispatch(userActions.setAuthData(response.data));
+
+			return response.data;
+		} catch (e) {
+			console.log(e);
+			return thunkAPI.rejectWithValue('Вы ввели неверную почту или пароль');
+		}
+	},
+);

src/features/Auth/model/slice/loginSlice.ts

@@ -0,0 +1,40 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { loginByUsername } from '../..';
+import { LoginState } from '../types/loginSchema';
+
+const initialState: LoginState = {
+	username: '',
+	password: '',
+	isLoading: false,
+};
+
+export const loginSlice = createSlice({
+	name: 'login',
+	initialState,
+	reducers: {
+		setUsername: (state, action: PayloadAction<string>) => {
+			state.username = action.payload;
+		},
+		setPassword: (state, action: PayloadAction<string>) => {
+			state.password = action.payload;
+		},
+	},
+	extraReducers: (builder) => {
+		builder
+			.addCase(loginByUsername.pending, (state) => {
+				state.error = undefined;
+				state.isLoading = true;
+			})
+			.addCase(loginByUsername.fulfilled, (state, action) => {
+				state.isLoading = false;
+			})
+			.addCase(loginByUsername.rejected, (state, action) => {
+				state.isLoading = false;
+				state.error = action.payload;
+			});
+	},
+});
+
+export const { actions: loginActions } = loginSlice;
+export const { reducer: loginReducer } = loginSlice;

src/features/Auth/model/types/loginSchema.ts

@@ -0,0 +1,6 @@
+export interface LoginState {
+	username: string;
+	password: string;
+	isLoading: boolean;
+	error?: string;
+}