feat: add user auth logic / text comp

config/storybook/webpack.config.ts

@@ -1,4 +1,4 @@
-import webpack, { RuleSetRule } from 'webpack';
+import webpack, { DefinePlugin, RuleSetRule } from 'webpack';
 import path from 'path';
 import { buildCssLoader } from '../build/loaders/buildCssLoader';
 import { BuildPaths } from '../build/types/config';
@@ -28,5 +28,9 @@ export default ({ config }: {config: webpack.Configuration}) => {
     });
     config.module.rules.push(buildCssLoader(true));
 
+    config.plugins.push(new DefinePlugin({
+        __IS__DEV__: true,
+    }));
+
     return config;
 };

extractedTranslations/en/translation.json

@@ -1,14 +1,23 @@
 {
+  "auth_form": "",
+  "auth_password": "",
+  "auth_username": "",
   "decrement": "",
+  "exit": "",
   "increment": "",
   "login": "",
+  "login_error": "",
   "Введите username": "",
   "Введите пароль": "",
   "Войти": "",
+  "Вы ввели ": "",
+  "Вы ввели неверный логин  пароль": "",
+  "Вы ввели неверный логин или пароль": "",
   "Главная": "",
   "Главная страница": "",
   "О сайте": "",
   "Обновить страницу": "",
   "Произошла непредвиденная ошибка": "",
-  "Страница не найдена": ""
+  "Страница не найдена": "",
+  "Форма авторизации": ""
 }

public/locales/en/translation.json

@@ -13,5 +13,10 @@
   "Короткий язык": "En",
   "increment": "increment",
   "decrement": "decrement",
-  "login": "Login"
+  "login": "Login",
+  "auth_form": "Auth Form",
+  "auth_username": "Enter username",
+  "auth_password": "Enter password",
+  "login_error": "An incorrect username or password",
+  "exit": "Exit"
 }

public/locales/ru/translation.json

@@ -13,5 +13,10 @@
   "Короткий язык": "Ru",
   "increment": "Увеличить",
   "decrement": "Уменьшить",
-  "login": "Войти"
+  "login": "Войти",
+  "auth_form": "Форма авторизации",
+  "auth_username": "Введите логин",
+  "auth_password": "Введите пароль",
+  "login_error": "Вы ввели неверный логин или пароль",
+  "exit": "Выйти"
 }

src/app/App.tsx

@@ -1,11 +1,19 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import './styles/index.scss';
 import { classNames } from 'shared/lib/classNames/classNames';
 import { AppRouter } from 'app/providers/router';
 import { Navbar } from 'widgets/Navbar';
 import { Sidebar } from 'widgets/Sidebar';
+import { useDispatch } from 'react-redux';
+import { userActions } from 'entities/User';
 
 function App() {
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(userActions.initAuthData);
+    }, [dispatch]);
+
     return (
         <div className={classNames('app', {}, [])}>
             <Suspense fallback="">

src/app/styles/variables/global.scss

@@ -20,4 +20,6 @@
 
     // Цвета
     --overlay-color: rgba(0 0 0 / 60%);
+    --red-light: #f00;
+    --red-dark: #ce0505;
 }

src/entities/User/index.ts

@@ -1,3 +1,5 @@
 export { userReducer, userActions } from './model/slice/userSlice';
 
 export { UserSchema, User	 } from './model/types/user';
+
+export { getUserAuthData } from './model/selectors/getUserAuthData/getUserAuthData';

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

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

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

@@ -1,5 +1,6 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { UserSchema } from '../types/user';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { USER_LOCALSTORAGE_KEY } from 'shared/const/localstorage';
+import { User, UserSchema } from '../types/user';
 
 const initialState: UserSchema = {
 };
@@ -8,7 +9,20 @@ export const userSlice = createSlice({
     name: 'user',
     initialState,
     reducers: {
-
+        setAuthData: (state, action:PayloadAction<User>) => {
+            state.authData = action.payload;
+        },
+        initAuthData: (state, action:PayloadAction<User>) => {
+            const user = localStorage.getItem(USER_LOCALSTORAGE_KEY);
+            console.log(JSON.parse(user));
+            if (user) {
+                state.authData = JSON.parse(user);
+            }
+        },
+        logout: (state, action:PayloadAction<User>) => {
+            state.authData = undefined;
+            localStorage.removeItem(USER_LOCALSTORAGE_KEY);
+        },
     },
 });
 

src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.ts

@@ -1,28 +1,38 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
-import { User } from 'entities/User';
+import { User, userActions } from 'entities/User';
+import { USER_LOCALSTORAGE_KEY } from 'shared/const/localstorage';
 
 interface LoginByUsernameProps {
 	username: string;
 	password: string
 }
 
+enum LoginErrors {
+ INCORRECT_DATA = '',
+	SERVER_ERROR = ''
+}
+
 export const loginByUsername = createAsyncThunk<
   User,
   LoginByUsernameProps,
   { rejectValue: string }
 >('login/loginByUsername', async (authData, thunkAPI) => {
     try {
-        const response = await axios.post<User>('http://localhost:8000/login', {
+        const response = await axios.post<User>(
+            'http://localhost:8000/login',
             authData,
-        });
+        );
         if (!response.data) {
             throw new Error();
         }
+        localStorage.setItem(USER_LOCALSTORAGE_KEY, JSON.stringify(response.data));
+
+        thunkAPI.dispatch(userActions.setAuthData(response.data));
 
         return response.data;
     } catch (error) {
         console.log(error);
-        return thunkAPI.rejectWithValue('error');
+        return thunkAPI.rejectWithValue('login_error');
     }
 });

src/features/AuthByUsername/ui/LoginForm/LoginForm.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { StoreDecorator } from 'shared/config/storybook/StoreDecorator/StoreDecorator';
 import { LoginForm } from './LoginForm';
 
 export default {
@@ -14,3 +15,18 @@ const Template: ComponentStory<typeof LoginForm> = (args) => <LoginForm {...args
 
 export const Primary = Template.bind({});
 Primary.args = {};
+Primary.decorators = [StoreDecorator({
+    loginForm: { username: 'user', password: '12345' },
+})];
+
+export const withError = Template.bind({});
+withError.args = {};
+withError.decorators = [StoreDecorator({
+    loginForm: { username: 'user', password: '12345', error: 'error message' },
+})];
+
+export const withLoading = Template.bind({});
+withError.args = {};
+withError.decorators = [StoreDecorator({
+    loginForm: { isLoading: true },
+})];

src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx

@@ -4,6 +4,7 @@ import { Button, ButtonTheme } from 'shared/ui/Button/Button';
 import { Input } from 'shared/ui/Input/Input';
 import { useDispatch, useSelector } from 'react-redux';
 import { memo, useCallback } from 'react';
+import { Text, TextTheme } from 'shared/ui/Text/Text';
 import { loginByUsername } from '../../model/services/loginByUsername/loginByUsername';
 import { getLoginState } from '../../model/selectors/getLoginState/getLoginState';
 import { loginActions } from '../../model/slice/loginSlice';
@@ -45,19 +46,20 @@ export const LoginForm = memo(({ className }: LoginFormProps) => {
 
     return (
         <div className={classNames(cls.LoginForm, {}, [className])}>
-            {error && <div>{error}</div>}
+            <Text title={t('auth_form')} />
+            {error && <Text text={t('login_error')} theme={TextTheme.ERROR} />}
             <Input
                 autofocus
                 type="text"
                 className={cls.input}
-                placeholder={t('Введите username')}
+                placeholder={t('auth_username')}
                 onChange={onChangeUsername}
                 value={username}
             />
             <Input
                 type="text"
                 className={cls.input}
-                placeholder={t('Введите пароль')}
+                placeholder={t('auth_password')}
                 onChange={onChangePassword}
                 value={password}
             />

src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx

@@ -0,0 +1,9 @@
+import { Story } from '@storybook/react';
+import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';
+import { DeepPartial } from '@reduxjs/toolkit';
+
+export const StoreDecorator = (state: DeepPartial<StateSchema>) => (StoryComponent: Story) => (
+    <StoreProvider initialState={state}>
+        <StoryComponent />
+    </StoreProvider>
+);

src/shared/const/localstorage.ts

@@ -0,0 +1 @@
+export const USER_LOCALSTORAGE_KEY = 'user';

src/shared/ui/Text/Text.module.scss

@@ -0,0 +1,19 @@
+.title {
+    font: var(--font-l);
+    color: var(--primary-color);
+}
+
+.text {
+    font: var(--font-m);
+    color: var(--secondary-color);
+}
+
+.error {
+    .title {
+        color: var(--red-light);
+    }
+
+    .text {
+        color: var(--red-dark);
+    }
+}

src/shared/ui/Text/Text.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Text, TextTheme } from 'shared/ui/Text/Text';
+import { Theme } from 'app/providers/ThemeProvider';
+import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator';
+
+export default {
+    title: 'shared/Text',
+    component: Text,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = (args) => <Text {...args} />;
+
+export const PrimaryDark = Template.bind({});
+PrimaryDark.args = {
+    title: 'title title title',
+    text: 'description description description',
+
+};
+PrimaryDark.decorators = [ThemeDecorator(Theme.DARK)];
+
+export const onlyTitleDark = Template.bind({});
+onlyTitleDark.args = {
+    title: 'onlyTitle',
+
+};
+onlyTitleDark.decorators = [ThemeDecorator(Theme.DARK)];
+
+export const onlyDescriptionDark = Template.bind({});
+onlyDescriptionDark.args = {
+    text: 'onlyDescription',
+};
+onlyDescriptionDark.decorators = [ThemeDecorator(Theme.DARK)];
+
+export const Error = Template.bind({});
+Error.args = {
+    title: 'title title title',
+    text: 'description description description',
+    theme: TextTheme.ERROR,
+};

src/shared/ui/Text/Text.tsx

@@ -0,0 +1,31 @@
+import { classNames } from 'shared/lib/classNames/classNames';
+import cls from './Text.module.scss';
+
+export enum TextTheme {
+	PRIMARY='primary',
+	ERROR='error',
+
+}
+
+interface TextProps {
+	className?: string;
+	title?:string;
+	text?:string;
+	theme?: TextTheme;
+}
+
+export const Text = (props: TextProps) => {
+    const {
+        className,
+        text,
+        title,
+        theme = TextTheme.PRIMARY,
+    } = props;
+
+    return (
+        <div className={classNames(cls.Text, { [cls[theme]]: true }, [className])}>
+            {title && <p className={cls.title}>{title}</p>}
+            {text && <p className={cls.text}>{text}</p>}
+        </div>
+    );
+};