edit header

.gitignore

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

src/app.tsx

@@ -1,7 +1,17 @@
-import React from 'react';
+import React, {useEffect} 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,36 +1,61 @@
+import { useEffect, useState } from 'react';
 
 declare global {
-    interface Window {
-      Telegram: {
-        WebApp: any;
-      };
-    }
+  interface Window {
+    Telegram: {
+      WebApp: any;
+    };
   }
-
-const useTelegram = () => {
-
-    const tg = window.Telegram.WebApp;
-    const onClose = () => {
-        tg.close()
-    }
-
-    const onToggleButton = () => {
-        if(tg.MainButton.isVisible) {
-            tg.MainButton.hide();
-        } else {
-            tg.MainButton.show();
-        }
-    }
-
-    return {
-        onClose,
-        onToggleButton,
-        tg,
-        user_id: tg.initDataUnsafe?.user?.id,
-        user: tg.initDataUnsafe?.user,
-        username: tg.initDataUnsafe?.user?.username,
-        queryId: tg.initDataUnsafe?.query_id
-    }
 }
 
-export default useTelegram;
+const useTelegram = () => {
+  const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+
+  useEffect(() => {
+    // Проверяем, был ли скрипт уже загружен
+    if (!window.Telegram) {
+      // Если 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 tg = window.Telegram?.WebApp;
+
+  const onClose = () => {
+    tg?.close();
+  };
+
+  const onToggleButton = () => {
+    if (tg?.MainButton?.isVisible) {
+      tg.MainButton.hide();
+    } else {
+      tg.MainButton.show();
+    }
+  };
+
+  return {
+    isScriptLoaded,
+    onClose,
+    onToggleButton,
+    tg,
+    user_id: tg?.initDataUnsafe?.user?.id,
+    user: tg?.initDataUnsafe?.user,
+    username: tg?.initDataUnsafe?.user?.username,
+    queryId: tg?.initDataUnsafe?.query_id,
+  };
+};
+
+export default useTelegram;

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

@@ -1,28 +0,0 @@
-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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,19 @@
+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,7 +1,3 @@
-.upload-input { 
-    display: none; 
-}
-
 .basic-multi-select {
     width: 100%;
 }

src/container/signup/index.style.ts

@@ -0,0 +1,9 @@
+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,33 +1,24 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import {Button, Grid2, Box, Container
+} from '@mui/material';
+import Title from './title';
+import Name from './name';
+import About from './about';
+import Photo from './photo';
+import Interests from './interests';
+import RegisterButton from './button';
 import axios from 'axios';
-import student_icon from '../../assets/images/student-icon.png';
+import student_icon from './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';
-
-const animatedComponents = makeAnimated();
-const theme = createTheme();
-
+import { useConstant } from '../Constant'; 
+import { GridChildrenStyle } from './index.style';
 
 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) => {
@@ -48,123 +39,66 @@ 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: 8,
+            marginTop: 4,
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
           }}
         >
-          <Typography component="h1" variant="h5">
-            Регистрация
-          </Typography>
+          <Title>Регистрация</Title>  
           <Box component="form" noValidate  sx={{ mt: 3 }}>
-            <Grid container spacing={2}>
-              <Grid item xs={12} sm={6}>
-                <TextField
-                  required
-                  fullWidth
-                  id="lname"
-                  label="Фамилия"
-                  name="lname"
+            <Grid2 container>
+              <GridChildrenStyle size={6}>
+                <Name 
+                  id="lastname"
+                  label="Фамилия" 
+                  name="lastname" 
                   autoComplete="family-name"
-                />
-              </Grid>
-              <Grid item xs={12} sm={6}>
-                <TextField
-                  autoComplete="given-name"
-                  name="fname"
-                  required
-                  fullWidth
-                  id="fname"
+                />                
+              </GridChildrenStyle>
+              <GridChildrenStyle size={6}>
+                <Name 
+                  id="firstname"
                   label="Имя"
-                  autoFocus
+                  name="firstname" 
+                  autoComplete="given-name"
                 />
-              </Grid>
-              <Grid item xs={12}>
-                <TextField
-                  fullWidth
-                  multiline
+              </GridChildrenStyle>
+              <GridChildrenStyle size={12}>
+                <About
                   rows={3}
                   id="about"
                   label="Обо мне"
                   name="about"
-                  variant="outlined"
                   placeholder="Напишите о себе"
                 />
-              </Grid>
-              <Grid
-                container
-                spacing={0}
-                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>
+              <GridChildrenStyle size={12}>
+                <Photo 
+                  id="photo"
+                  name="photo" 
                 />
-              </Grid>
-              <Grid
-                container
-                spacing={0}
-                direction="column"
-                alignItems="center"
-                justifyContent="center"
-                sx={{ paddingTop: 7, ml: 3 }}
-              >
-                <Select
-                  onChange={handleChange}
-                  closeMenuOnSelect={false}
-                  components={animatedComponents}
-                  isMulti
+              </GridChildrenStyle>
+              <GridChildrenStyle size={12}>
+                <Interests
                   options={interests}
-                  className="basic-multi-select"
-                  classNamePrefix="select"
+                  placeholder='Выберите интересы...'
                 />
-              </Grid>
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                sx={{ mt: 3, mb: 2, ml: 3 }}
-              >
+              </GridChildrenStyle>
+              <GridChildrenStyle size={12}>
+              <RegisterButton>
                 Регистрация
-              </Button>
-            </Grid>
+              </RegisterButton>
+              </GridChildrenStyle>
+            </Grid2>
           </Box>
         </Box>
       </Container>
-    </ThemeProvider>
   );
 };
 

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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,12 @@
+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/typings"],
+        "typeRoots": ["node_modules/@types", "src/@types"],
         "types" : ["webpack-env", "node"],
         "resolveJsonModule": true
     },