front/dev

FRONT/DEV/src/components/modalwindows/modalContainers/ConnectNetwork.tsx

@@ -0,0 +1,84 @@
+// components/modalContainers/NoteDevice.tsx
+import { ModalContainer, ModalTitle, ModalContent, ButtonContainer } from "../style";
+import { MainButton } from "../../UI/buttons/mainButton";
+import Input from "../../UI/inputs/input";
+import { useState } from "react";
+import {NetworkService} from "../../../api/request";
+import useNetworkStore from "../../../store/useDeviceStore";
+import RouterLoader from "../../UI/routerLoader";
+import {useTheme} from "styled-components";
+import {useIpStore} from "../../../store";
+
+interface Props {
+    address: string;
+    onClose: () => void;
+}
+
+
+
+export const ConnectNetwork = ({address, onClose}: Props) => {
+    const [password, setPassword] = useState('');
+    const theme = useTheme();
+    const { ipAddress } = useIpStore();
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSave = async () => {
+        try {
+            setIsLoading(true);
+            setError('')
+            const res = await NetworkService.connectNetwork(ipAddress, password, address);
+            if(res.status === 200) {
+                onClose()
+            }else{
+                setError(res.data.detail)
+            }
+        } catch (error) {
+            console.error('Error connection:', error);
+            setError('Ошибка подключения к сети')
+        }finally {
+            setIsLoading(false);
+        }
+    };
+
+
+    return (
+        <ModalContainer style={{ height: '230px' }}>
+            <ModalTitle>
+                <h3>Подключение к сети</h3>
+            </ModalTitle>
+
+            <ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <Input
+                    type="password"
+                    placeholderText='Введите пароль...'
+                    value={password}
+                    id='deviceNote'
+                    onChange={(value) => setPassword(value)}
+                />
+                <p style={{ color: 'red', marginLeft: '10px', fontSize: '14px', textAlign: 'right' }}>
+                    {error}
+                </p>
+            </ModalContent>
+
+            <ButtonContainer>
+                <MainButton
+                    type="button"
+                    size="small"
+                    title="Отмена"
+                    onClick={onClose}
+                />
+                <MainButton
+                    type="button"
+                    size="small"
+                    color={theme.successColor}
+                    hoverColor={theme.successColor}
+                    title='Подключиться'
+                    onClick={handleSave}
+                />
+            </ButtonContainer>
+
+            {isLoading && <RouterLoader loaderText='Попытка подключения к сети'/>}
+        </ModalContainer>
+    );
+};