auth

src/pages/AuctionPage/AuctionPage.tsx

@@ -91,7 +91,7 @@ export const AuctionPage = () => {
             <h2 className={styles.home__title}>Аукционы</h2>
             <div className={styles.home__info}>
                 <div className={styles.info__top}>
-                    <ButtonUi event={() => setOpenAddModal(true)} title={'+ Добавить аукцион'} type={ButtonUiType.PRIMARY} />
+                    <ButtonUi event={() => setOpenAddModal(true)} title={'+ Добавить аукцион'} variant={ButtonUiType.PRIMARY} />
                     <div className={styles.info__search}>
                         <Form.Control
                             type="text"
@@ -109,9 +109,9 @@ export const AuctionPage = () => {
                     </div>
                     <ButtonUi
                         title={'Сбросить фильтры'}
-                        type={ButtonUiType.PRIMARY}
+                        variant={ButtonUiType.PRIMARY}
                         img={<img src={close} alt="cross" />} />
-                    <ButtonUi title={'Применить'} type={ButtonUiType.INFO} />
+                    <ButtonUi title={'Применить'} variant={ButtonUiType.INFO} />
                 </div>
                 <div className={styles.info__tableWrapper}>
                     <table>

src/pages/AuthPage/AuthPage.tsx

@@ -4,25 +4,81 @@ import { ButtonUi, ButtonUiType } from "../../shared/UI/ButtonUi";
 
 import Form from 'react-bootstrap/Form';
 
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+
+import { api } from "../../query/query";
+
 import styles from "./authPage.module.scss"
 
 export const AuthPage = () => {
+
+    const schema = yup.object().shape({
+        username: yup.string()
+            .min(3, 'Минимум 3 символа!')
+            .max(16, 'Максимум 16 символов!')
+            .required('Это поле обязательное.'),
+
+        password: yup.string().required('Это обязательное поле.').min(6, 'Минимум 6 символов!'),
+    });
+
+    const {
+        handleSubmit,
+        handleChange,
+        handleBlur,
+        errors,
+        values
+    } = useFormik({
+        initialValues: {
+            username: '',
+            password: '',
+        },
+        validationSchema: schema,
+        onSubmit: async (values) => {
+            await api.post('/authorization', {
+                username: values.username,
+                password: values.password
+            }).then((res) => {
+            })
+        },
+    })
+
     return (
         <div className={styles.auth}>
             <h1 className={styles.auth__title}>Аукционная площадка для проведения закупок ГК Проф-Пресс</h1>
-            <div className={styles.auth__form}>
-                <Form.Control
-                    type="text"
-                    id="inputLogin"
-                    placeholder="login"
-                />
-                <Form.Control
-                    type="password"
-                    id="inputPassword"
-                    placeholder="password"
-                />
-                <ButtonUi title={'Войти'} type={ButtonUiType.PRIMARY} />
-            </div>
+            <Form noValidate className={styles.auth__form} onSubmit={handleSubmit}>
+                <Form.Group>
+                    <Form.Control
+                        type="text"
+                        id="username"
+                        placeholder="username"
+                        onChange={handleChange}
+                        name="username"
+                        onBlur={handleBlur}
+                        value={values.username}
+                        isInvalid={!!errors.username}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                        {errors.username}
+                    </Form.Control.Feedback>
+                </Form.Group>
+                <Form.Group>
+                    <Form.Control
+                        type="password"
+                        id="password"
+                        placeholder="password"
+                        onChange={handleChange}
+                        value={values.password}
+                        name="password"
+                        onBlur={handleBlur}
+                        isInvalid={!!errors.password}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                        {errors.password}
+                    </Form.Control.Feedback>
+                </Form.Group>
+                <ButtonUi title={'Войти'} variant={ButtonUiType.PRIMARY} type={'submit'}/>
+            </Form >
         </div>
     )
 }

src/query/query.ts

@@ -0,0 +1,18 @@
+import axios from 'axios'
+import { removeCookie } from 'typescript-cookie'
+
+export const api = axios.create({
+    baseURL: 'https://tender.prof-press.ru/api/v1/',
+    headers: {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+    },
+})
+
+api.interceptors.response.use(undefined, async function (error) {
+    if (error?.response?.status === 401) {
+        removeCookie('access-token')
+        removeCookie('refresh-token')
+    }
+    return Promise.reject(error)
+})

src/shared/UI/ButtonUi/ButtonUi.tsx

@@ -4,14 +4,15 @@ import Button from 'react-bootstrap/Button';
 
 interface ButtonUiProps {
     title: string,
-    type: string,
+    variant: string,
+    type?: 'submit' | 'reset' | 'button' | undefined
     img?: ReactElement,
     event?: () => void
 }
 
-export const ButtonUi:React.FC<ButtonUiProps> = ({title, img, type, event}) => {
+export const ButtonUi:React.FC<ButtonUiProps> = ({title, img, variant, event, type}) => {
     return (
-        <Button onClick={event} variant={type}>
+        <Button onClick={event} variant={variant} type={type}>
             {img}
             {title}
         </Button>

src/widgets/AddAuctionModal/AddAuctionModal.tsx

@@ -54,7 +54,7 @@ export const AddAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHid
                 </Form>
             </Modal.Body>
             <Modal.Footer>
-                <ButtonUi title={'Добавить новый аукцион'} type={ButtonUiType.PRIMARY} event={addNewAuction}/>
+                <ButtonUi title={'Добавить новый аукцион'} variant={ButtonUiType.PRIMARY} event={addNewAuction}/>
             </Modal.Footer>
         </Modal>
     )

src/widgets/EditAuctionModal/EditAuctionModal.tsx

@@ -65,7 +65,7 @@ export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHi
                 </Form>
             </Modal.Body>
             <Modal.Footer>
-                <ButtonUi title={'Сохранить изменения'} type={ButtonUiType.PRIMARY} event={editAuction}/>
+                <ButtonUi title={'Сохранить изменения'} variant={ButtonUiType.PRIMARY} event={editAuction}/>
             </Modal.Footer>
         </Modal>
     )

src/widgets/loyaout/ui/FooterUi/FooterUi.tsx

@@ -15,7 +15,7 @@ export const FooterUi = () => {
                             заявку на консультацию
                         </p>
                         <span>прикрепить файл</span>
-                        <ButtonUi title={'Получить консультацию'} type={ButtonUiType.PRIMARY} />
+                        <ButtonUi title={'Получить консультацию'} variant={ButtonUiType.PRIMARY} />
                     </div>
                     <div className={styles.footer__infoBottom}>
                         <p>OOO "Издательский дом "Проф-Пресс", 2023</p>