front/dev

FRONT/DEV/src/components/register.tsx

@@ -0,0 +1,194 @@
+import { ModalContainer, ModalTitle, ModalContent, ModalText } from "./modalwindows/style"
+import Input from "./UI/inputs/input"
+import { MainButton } from "./UI/buttons/mainButton"
+import styled from "styled-components"
+import { useEffect, useState } from "react"
+import { useIpStore } from "../store"
+import { NetworkService } from "../api/request"
+import { IconComponent } from "../const/buttons/icons"
+import { buttonNames } from "../const/buttons/names"
+import ThemeButton from "./UI/buttons/toggletheme"
+import About from "./workSpace/modules/appModules/about"
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background: ${(props) => props.theme.background};
+`
+
+const Container = styled.form`
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    align-items: center;
+    background: ${(props) => props.theme.primary};
+    padding: 25px;
+    border-radius: 18px;
+    width: 350px;
+`
+
+const Title = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    align-items: center;
+    text-align: center;
+    font-size: 20px;
+`
+
+const Content = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    text-align: center;
+`
+
+const ButtonContainer = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: center;
+`
+
+const Menu = styled.div`
+    display: flex;
+    align-items: center;
+`
+
+const Button = styled.div`
+    width: 100%;
+    cursor: pointer;
+`
+
+const IconContainer = styled.div`
+    padding: 10px;
+    color: ${props => props.theme.text};
+`
+
+export const CreateUser = () => {
+
+    const { ipAddress, setIpAddress } = useIpStore();
+    const [repeatPassword, setRepeatPassword] = useState('');
+    const [passwordsMatch, setPasswordsMatch] = useState(true);
+    const [about, setAbout] = useState(false)
+
+    const [user, setUser] = useState({
+        username: 'operator',
+        password: '',
+        is_admin: true
+    })
+
+    const handleChange = (id: string, value: string) => {
+        if (id === 'repeatPassword') {
+            setRepeatPassword(value);
+            setPasswordsMatch(user.password === value);
+        } else {
+            setUser(prevData => ({
+                ...prevData,
+                [id]: value
+            }));
+            if (id === 'password') {
+                setPasswordsMatch(value === repeatPassword);
+            }
+        }
+    }
+
+    const handleSave = async (user: object) => {
+        try {
+            const result = await NetworkService.createUser(ipAddress, user);
+            if (result.status === 200) { window.location.reload() }
+        } catch (err) {
+            console.error('Error:', err);
+        }
+    }
+
+    const handleSubmit = () => {
+        if (passwordsMatch) {
+            handleSave(user);
+        }
+    };
+
+    const back = ()=>{
+        setIpAddress('localhost')
+    }
+
+    const toAbout = ()=>{
+        setAbout(true)
+    }
+    return (
+
+        <>
+            {!about ? (
+                <Wrapper>
+
+                <Container onSubmit={handleSubmit}>
+                    <Title>
+                        <IconComponent name={buttonNames[3]} width="52" height="52"></IconComponent>
+                        <h3>Настройка оператора узла</h3>
+                        {ipAddress != 'localhost' &&
+                            <p>{ipAddress}</p>
+                        }
+    
+                    </Title>
+    
+                    <Content>
+    
+                        <div>
+                            <p>Перед началом работы необходимо создать пароль оператора приложения</p>
+                        </div>
+    
+                        <div>
+                            <Input
+                                type="password"
+                                placeholderText='Введите пароль...'
+                                id="password"
+                                value={user.password}
+                                onChange={(value) => handleChange('password', value)}
+                            />
+    
+                            <Input
+                                type="password"
+                                placeholderText='Повторите пароль...'
+                                id="repeatPassword"
+                                value={repeatPassword}
+                                onChange={(value) => handleChange('repeatPassword', value)}
+                                style={{ marginTop: '10px' }}
+                            />
+                            {!passwordsMatch && (
+                                <p style={{ color: 'red', marginTop: '5px' }}>
+                                    Пароли не совпадают!
+                                </p>
+                            )}
+                        </div>
+    
+                    </Content>
+    
+                    <ButtonContainer>
+                        <MainButton style={{ width: '100%' }} title="Отправить" type="submit" />
+                    </ButtonContainer>
+    
+    
+                </Container>
+    
+    
+                <Menu>
+                    {ipAddress != 'localhost' &&
+                        <MainButton title="Назад"  onClick={back} style={{marginRight: '10px'}}/>
+                    }
+                    <ThemeButton />
+                    <Button>
+                        <IconContainer>
+                            <IconComponent name={buttonNames[4]} width="30" height="30" onClick={toAbout}/>
+                        </IconContainer>
+                    </Button>
+                    </Menu>
+            </Wrapper>
+            ): (
+                <About from="reg" onBack={() => setAbout(false)} />
+            )}
+        </>
+        
+    )
+}