.gitignore

@@ -128,6 +128,4 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
-
-ngrok.exe

src/app.tsx

@@ -1,17 +1,7 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import Main from './container/main';
-import useTelegram from './container/hooks/useTelegram';
 
 const App = () => {
-  const { isScriptLoaded, onClose, onToggleButton, tg, user_id, username } = useTelegram();
-
-  useEffect(() => {
-    if (isScriptLoaded && tg) {
-      tg.ready(); // Инициализация WebApp после загрузки скрипта
-      console.log('Telegram WebApp готов:', tg);
-    }
-  }, [isScriptLoaded, tg]);
-
   return <Main />;
 };
 

src/container/hooks/useTelegram.tsx

@@ -1,61 +1,36 @@
-import { useEffect, useState } from 'react';
 
 declare global {
-  interface Window {
+    interface Window {
-    Telegram: {
+      Telegram: {
-      WebApp: any;
+        WebApp: any;
-    };
+      };
+    }
   }
-}
 
 const useTelegram = () => {
-  const [isScriptLoaded, setIsScriptLoaded] = useState(false);
 
-  useEffect(() => {
+    const tg = window.Telegram.WebApp;
-    // Проверяем, был ли скрипт уже загружен
+    const onClose = () => {
-    if (!window.Telegram) {
+        tg.close()
-      // Если Telegram API еще не доступен, загружаем скрипт
-      const script = document.createElement('script');
-      script.src = 'https://telegram.org/js/telegram-web-app.js';
-      script.async = true;
-      script.onload = () => {
-        setIsScriptLoaded(true); // Скрипт загружен
-      };
-      script.onerror = () => {
-        console.error('Ошибка при загрузке Telegram Web App SDK');
-      };
-      document.body.appendChild(script);
-    } else {
-      // Если Telegram Web App уже доступен, просто обновляем состояние
-      setIsScriptLoaded(true);
     }
-  }, []);
 
-  // Логика, которая будет выполняться, когда скрипт загружен
+    const onToggleButton = () => {
-  const tg = window.Telegram?.WebApp;
+        if(tg.MainButton.isVisible) {
-
+            tg.MainButton.hide();
-  const onClose = () => {
+        } else {
-    tg?.close();
+            tg.MainButton.show();
-  };
+        }
-
-  const onToggleButton = () => {
-    if (tg?.MainButton?.isVisible) {
-      tg.MainButton.hide();
-    } else {
-      tg.MainButton.show();
     }
-  };
 
-  return {
+    return {
-    isScriptLoaded,
+        onClose,
-    onClose,
+        onToggleButton,
-    onToggleButton,
+        tg,
-    tg,
+        user_id: tg.initDataUnsafe?.user?.id,
-    user_id: tg?.initDataUnsafe?.user?.id,
+        user: tg.initDataUnsafe?.user,
-    user: tg?.initDataUnsafe?.user,
+        username: tg.initDataUnsafe?.user?.username,
-    username: tg?.initDataUnsafe?.user?.username,
+        queryId: tg.initDataUnsafe?.query_id
-    queryId: tg?.initDataUnsafe?.query_id,
+    }
-  };
+}
-};
 
-export default useTelegram;
+export default useTelegram;

src/container/main/components/layout/header.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { getNavigationsValue } from '@brojs/cli';
+
+const navigations: Array<{ name: string; href: string }> = [
+  {
+    name: 'Регистрация',
+    href: getNavigationsValue('sberhubproject.signup')
+  }
+];
+
+const Header = (): React.ReactElement => {
+  return (
+    <header>
+      <ul>
+        {navigations.map((item) => {
+          return (
+            <li key={item.name}>
+              <Link to={item.href}>{item.name}</Link>
+            </li>
+          );
+        })}
+      </ul>
+    </header>
+  );
+};
+
+export default Header;

src/container/main/components/layout/header/index.style.ts

@@ -1,7 +0,0 @@
-import styled from '@emotion/styled';
-import AppBar from '@mui/material/AppBar';
-
-export const AppBarStyled = styled(AppBar)`
-    background-color: var(--tg-theme-button-color);
-
-`;

src/container/main/components/layout/header/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import Logo from './logo';
-import { AppBarStyled } from './index.style';
-import Toolbar from '@mui/material/Toolbar';
-
-const Header = (): React.ReactElement => {
-  return (
-    <header>
-      <AppBarStyled position="static">
-        <Toolbar>
-          <Logo />
-        </Toolbar>          
-      </AppBarStyled>
-    </header>
-  );
-};
-
-export default Header;

src/container/main/components/layout/header/logo/index.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import logoPng from './logo.png';
-
-const LogoStyled = styled.img`
-  height: 40px;
-  padding: 8px;
-`;
-
-const Logo = () => {
-  return <LogoStyled src={logoPng} alt={'logo'} />;
-};
-
-export default Logo;

src/container/signup/about/index.style.ts

@@ -1,60 +0,0 @@
-import styled from '@emotion/styled';
-import TextField from '@mui/material/TextField';
-
-export const AboutStyled = styled(TextField)`  
-  & .MuiInputBase-input {
-      color: var(--tg-theme-text-color,rgba(0, 0, 0, 0.6));
-    }
-
-    & .MuiFormLabel-root {
-      color: var(--tg-theme-text-color, rgba(0, 0, 0, 0.6));
-    }  
-
-    & .Mui-focused .MuiFormLabel-root {
-      color: var(--tg-theme-label-focus-color, #0066ff);
-    }
-
-    
-    & .MuiOutlinedInput-root {
-      fieldset {
-        border-color: var(--tg-theme-border-color, #cccccc);
-      }
-
-      &:hover fieldset {
-        border-color: var(--tg-theme-border-hover, #888888);
-      }
-
-      &.Mui-focused fieldset {
-        border-color: var(--tg-theme-border-focused, #0066ff);
-      }
-        
-    }
-  
-  @media (prefers-color-scheme: dark) {
-    & .MuiInputBase-input {
-      color: var(--tg-theme-text-color-dark, #ffffff);
-    }
-
-    & .MuiFormLabel-root {
-      color: var(--tg-theme-label-color-dark, #ffffff);
-    }
-
-    & .Mui-focused .MuiFormLabel-root {
-      color: var(--tg-theme-label-focus-color-dark, #0066ff);
-    }
-
-    & .MuiOutlinedInput-root {
-      fieldset {
-        border-color: var(--tg-theme-border-color-dark, #ffffff);
-      }
-
-      &:hover fieldset {
-        border-color: var(--tg-theme-border-hover-dark, #777777);
-      }
-
-      &.Mui-focused fieldset {
-        border-color: var(--tg-theme-border-focused-dark, #0066ff); 
-      }
-    }
-  }
-`;

src/container/signup/about/index.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { AboutStyled } from './index.style';
-
-const About = ({rows, id, label, name, placeholder="Введите текст...", className = null}): React.ReactElement => {
-    return (
-        <AboutStyled
-            fullWidth
-            multiline
-            rows={rows}        
-            id={id}
-            label={label}
-            name={name}
-            placeholder={placeholder}
-            className={className}
-        />
-    );
-}
-
-export default About;

src/container/signup/button/index.style.ts

@@ -1,7 +0,0 @@
-import styled from '@emotion/styled';
-import Button from '@mui/material/Button';
-
-export const RegisterButtonStyled = styled(Button)`  
-  background-color: var(--tg-theme-button-color);
-  color: var(--tg-theme-button-text-color);
-`;

src/container/signup/button/index.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { RegisterButtonStyled } from './index.style';
-
-const RegisterButton = ({children, id = null, name = null, className = null}): React.ReactElement => {
-    return (
-        <RegisterButtonStyled
-            id={id}
-            name={name}
-            className={className}
-            type="submit"
-            fullWidth
-            variant="contained"
-        >
-            {children}
-        </RegisterButtonStyled>
-    );
-}
-
-export default RegisterButton;

src/container/signup/index.css

@@ -1,3 +1,7 @@
+.upload-input { 
+    display: none; 
+}
+
 .basic-multi-select {
     width: 100%;
 }

src/container/signup/index.style.ts

@@ -1,9 +0,0 @@
-import styled from '@emotion/styled';
-import { Grid2 } from '@mui/material';
-
-export const GridChildrenStyle = styled(Grid2)`
-    display: flex;
-    padding: 10px;
-    align-items: center;
-    justify-content: center;
-`;

src/container/signup/index.tsx

@@ -1,24 +1,33 @@
 import * as React from 'react';
-import {Button, Grid2, Box, Container
+import Avatar from '@mui/material/Avatar';
-} from '@mui/material';
+import Button from '@mui/material/Button';
-import Title from './title';
+import CssBaseline from '@mui/material/CssBaseline';
-import Name from './name';
+import TextField from '@mui/material/TextField';
-import About from './about';
+import Grid from '@mui/material/Grid';
-import Photo from './photo';
+import Box from '@mui/material/Box';
-import Interests from './interests';
+import Typography from '@mui/material/Typography';
-import RegisterButton from './button';
+import Container from '@mui/material/Container';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import axios from 'axios';
-import student_icon from './student-icon.png';
+import student_icon from '../../assets/images/student-icon.png';
 import "./index.css";
 //import useTelegram from "../hooks/useTelegram";
 import Select from 'react-select';
+import makeAnimated from 'react-select/animated';
 import { useState } from 'react';
-import { useConstant } from '../Constant'; 
+import { useConstant } from '../Constant';
-import { GridChildrenStyle } from './index.style';
+
+const animatedComponents = makeAnimated();
+const theme = createTheme();
+
 
 const SingUpPage = (): React.ReactElement => {
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const handleChange = (selectedOption) => {
+    setSelectedOption(selectedOption);
+  };
   const { interests } = useConstant();
-
   //const { user_id, username, onClose } = useTelegram();
   /*
   const handleSubmit = async (event) => {
@@ -39,66 +48,123 @@ const SingUpPage = (): React.ReactElement => {
     onClose();
   };
   */
+  const handleAvatarClick = () => {
+    const fileInput = document.getElementById('avatar-input') as HTMLInputElement;
+    fileInput.click();
+  };
+
+  const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      setAvatarUrl(reader.result as string);
+    };
+
+    reader.readAsDataURL(file);
+  };
+
+
 
   return (
+    <ThemeProvider theme={theme}>
       <Container component="main" maxWidth="xs">
+        <CssBaseline />
         <Box
           sx={{
-            marginTop: 4,
+            marginTop: 8,
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
           }}
         >
-          <Title>Регистрация</Title>  
+          <Typography component="h1" variant="h5">
+            Регистрация
+          </Typography>
           <Box component="form" noValidate  sx={{ mt: 3 }}>
-            <Grid2 container>
+            <Grid container spacing={2}>
-              <GridChildrenStyle size={6}>
+              <Grid item xs={12} sm={6}>
-                <Name 
+                <TextField
-                  id="lastname"
+                  required
-                  label="Фамилия" 
+                  fullWidth
-                  name="lastname" 
+                  id="lname"
+                  label="Фамилия"
+                  name="lname"
                   autoComplete="family-name"
-                />                
-              </GridChildrenStyle>
-              <GridChildrenStyle size={6}>
-                <Name 
-                  id="firstname"
-                  label="Имя"
-                  name="firstname" 
-                  autoComplete="given-name"
                 />
-              </GridChildrenStyle>
+              </Grid>
-              <GridChildrenStyle size={12}>
+              <Grid item xs={12} sm={6}>
-                <About
+                <TextField
+                  autoComplete="given-name"
+                  name="fname"
+                  required
+                  fullWidth
+                  id="fname"
+                  label="Имя"
+                  autoFocus
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth
+                  multiline
                   rows={3}
                   id="about"
                   label="Обо мне"
                   name="about"
+                  variant="outlined"
                   placeholder="Напишите о себе"
                 />
-              </GridChildrenStyle>
+              </Grid>
-              <GridChildrenStyle size={12}>
+              <Grid
-                <Photo 
+                container
-                  id="photo"
+                spacing={0}
-                  name="photo" 
+                direction="column"
+                alignItems="center"
+                justifyContent="center"
+                sx={{ paddingTop: 7, paddingLeft: 3 }}
+              >
+                <Avatar src={avatarUrl || student_icon} onClick={handleAvatarClick} sx={{ width: 200, height: 200 }}/>
+                <input
+                  type="file"
+                  name="image"
+                  accept="image/*"
+                  onChange={handleAvatarChange}
+                  style={{ display: 'none' }}
+                  id="avatar-input"
                 />
-              </GridChildrenStyle>
+              </Grid>
-              <GridChildrenStyle size={12}>
+              <Grid
-                <Interests
+                container
+                spacing={0}
+                direction="column"
+                alignItems="center"
+                justifyContent="center"
+                sx={{ paddingTop: 7, ml: 3 }}
+              >
+                <Select
+                  onChange={handleChange}
+                  closeMenuOnSelect={false}
+                  components={animatedComponents}
+                  isMulti
                   options={interests}
-                  placeholder='Выберите интересы...'
+                  className="basic-multi-select"
+                  classNamePrefix="select"
                 />
-              </GridChildrenStyle>
+              </Grid>
-              <GridChildrenStyle size={12}>
+              <Button
-              <RegisterButton>
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{ mt: 3, mb: 2, ml: 3 }}
+              >
                 Регистрация
-              </RegisterButton>
+              </Button>
-              </GridChildrenStyle>
+            </Grid>
-            </Grid2>
           </Box>
         </Box>
       </Container>
+    </ThemeProvider>
   );
 };
 

src/container/signup/interests/index.style.ts

@@ -1,68 +0,0 @@
-import styled from '@emotion/styled';
-import Select from 'react-select';
-
-export const InterestsStyled = styled(Select)`
-  .select__control {
-    background-color: var(--tg-theme-bg-color, #ffffff);
-    border: 1px solid var(--tg-theme-border-color, #cccccc);
-    color: var(--tg-theme-text-color, #000000);
-    border-radius: 8px;
-    font-size: 14px;
-    box-shadow: none;
-
-    &:hover {
-      border-color: var(--tg-theme-border-hover, #888888);
-    }
-  }
-
-  .select__menu {
-    background-color: var(--tg-theme-bg-color, #ffffff);
-    border-radius: 8px;
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-  }
-
-  .select__option {
-    background-color: transparent;
-    color: var(--tg-theme-text-color, #000000);
-    padding: 10px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--tg-theme-hover-color, #f2f2f2);
-    }
-
-    &.select__option--is-selected {
-      background-color: var(--tg-theme-button-color);
-      color: #ffffff;
-    }
-
-    &.select__option--is-focused {
-      background-color: var(--tg-theme-hover-color, #e0e0e0);
-    }
-  }
-
-  .select__placeholder {
-    color: var(--tg-theme-placeholder-color, #888888);
-    font-size: 14px;
-  }
-
-  .select__multi-value {
-    background-color: var(--tg-theme-button-color);
-    color: #ffffff;
-    border-radius: 4px;
-
-    .select__multi-value__label {
-      color: #ffffff;
-    }
-
-    .select__multi-value__remove {
-      color: #ffffff;
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-        color: #ffffff;
-      }
-    }
-  }
-`;

src/container/signup/interests/index.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { InterestsStyled } from './index.style';
-
-const Interests = ({options, placeholder = "Выберите..."}): React.ReactElement => {
-
-    const [selectedInterests, setSelectedInterests] = useState<string | null>(null);
-
-    const handleChange = (selectedInterests) => {
-        setSelectedInterests(selectedInterests);
-    };
-
-    return (
-        <InterestsStyled
-            onChange={handleChange}
-            closeMenuOnSelect={false}
-            isMulti
-            options={options}
-            className="basic-multi-select"
-            classNamePrefix="select"
-            placeholder={placeholder}
-            value={selectedInterests}
-        />
-    );
-}
-
-export default Interests;

src/container/signup/name/index.style.ts

@@ -1,60 +0,0 @@
-import styled from '@emotion/styled';
-import TextField from '@mui/material/TextField';
-
-export const TextFieldStyled = styled(TextField)`  
-  & .MuiInputBase-input {
-      color: var(--tg-theme-text-color,rgba(0, 0, 0, 0.6));
-    }
-
-    & .MuiFormLabel-root {
-      color: var(--tg-theme-text-color, rgba(0, 0, 0, 0.6));
-    }  
-
-    & .Mui-focused .MuiFormLabel-root {
-      color: var(--tg-theme-label-focus-color, #0066ff);
-    }
-
-    
-    & .MuiOutlinedInput-root {
-      fieldset {
-        border-color: var(--tg-theme-border-color, #cccccc);
-      }
-
-      &:hover fieldset {
-        border-color: var(--tg-theme-border-hover, #888888);
-      }
-
-      &.Mui-focused fieldset {
-        border-color: var(--tg-theme-border-focused, #0066ff);
-      }
-        
-    }
-  
-  @media (prefers-color-scheme: dark) {
-    & .MuiInputBase-input {
-      color: var(--tg-theme-text-color-dark, #ffffff);
-    }
-
-    & .MuiFormLabel-root {
-      color: var(--tg-theme-label-color-dark, #ffffff);
-    }
-
-    & .Mui-focused .MuiFormLabel-root {
-      color: var(--tg-theme-label-focus-color-dark, #0066ff);
-    }
-
-    & .MuiOutlinedInput-root {
-      fieldset {
-        border-color: var(--tg-theme-border-color-dark, #ffffff);
-      }
-
-      &:hover fieldset {
-        border-color: var(--tg-theme-border-hover-dark, #777777);
-      }
-
-      &.Mui-focused fieldset {
-        border-color: var(--tg-theme-border-focused-dark, #0066ff); 
-      }
-    }
-  }
-`;

src/container/signup/name/index.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { TextFieldStyled } from './index.style';
-
-const Name = ({id, label, name, autoComplete, className = null}): React.ReactElement => {
-    return (
-        <TextFieldStyled
-            required
-            fullWidth
-            id={id}
-            label={label}
-            name={name}
-            autoComplete={autoComplete}
-            className={className}
-        />
-    );
-}
-
-export default Name;

src/container/signup/photo/index.style.ts

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-import Avatar from "@mui/material/Avatar";
-
-export const PhotoStyled = styled.div<{ id: string, name: string, value: string | null }>`
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-`;
-
-export const AvatarStyled = styled(Avatar)`
-  width: 200px;
-  height: 200px;
-`;
-
-export const InputStyled = styled.input`
-  display: none;
-`;

src/container/signup/photo/index.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { AvatarStyled, PhotoStyled, InputStyled } from './index.style';
-
-const Photo = ({ id, name, defaultPhoto = null}): React.ReactElement => {
-  const [photo, setPhoto] = useState(defaultPhoto);
-
-  const handleFileChange = (event) => {
-    const file = event.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-
-      reader.onload = (e) => {
-        const newPhoto = e.target.result;
-        setPhoto(newPhoto);
-      };
-
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleAvatarClick = () => {
-    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
-    fileInput.click();
-  }
-
-  
-  return (
-    <PhotoStyled
-      id = {id}
-      name = {name}
-      value = {photo}
-    >
-      <AvatarStyled
-        src={photo}
-        alt="Выберите фотографию"
-        onClick={handleAvatarClick}
-       />
-      <InputStyled
-        id="fileInput"
-        type="file"
-        accept="image/*"
-        onChange={handleFileChange}
-      />
-    </PhotoStyled>
-  );
-  
-}
-
-export default Photo;

src/container/signup/title/index.style.ts

@@ -1,6 +0,0 @@
-import styled from '@emotion/styled';
-
-export const TitleStyled = styled.h1`
-    font-size: 28px;
-    color: var(--tg-theme-text-color);
-`;

src/container/signup/title/index.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';;
-import { TitleStyled } from './index.style';
-
-const Title = ({children}): React.ReactElement => {
-    return (
-        <TitleStyled>
-            {children}
-        </TitleStyled>
-    );
-}
-
-export default Title;

tsconfig.json

@@ -12,7 +12,7 @@
         "moduleResolution": "node",
         "target": "es6",
         "jsx": "react",
-        "typeRoots": ["node_modules/@types", "src/@types"],
+        "typeRoots": ["node_modules/@types", "src/typings"],
         "types" : ["webpack-env", "node"],
         "resolveJsonModule": true
     },