add signup

.gitignore

@@ -129,4 +129,3 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
-

.npmrc

@@ -0,0 +1 @@
+@brojs:registry=https://git.bro-js.ru/api/packages/bro-js/npm/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "semi": true
+}

bro.config.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const pkg = require('./package');
+
+module.exports = {
+  apiPath: 'stubs/api',
+  webpackConfig: {
+    output: {
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
+    }
+  },
+  /* use https://admin.bro-js.ru/ to create config, navigations and features */
+  navigations: {
+    'sberhubproject.main': '/sberhubproject',
+    'sberhubproject.signup': '/sberhubproject/signup',
+  },
+  features: {
+    'sberhubproject': {
+      // add your features here in the format [featureName]: { value: string }
+    }
+  },
+  config: {
+    'sberhubproject.api': '/api'
+  }
+};

eslint.config.js

@@ -0,0 +1,33 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import pluginPrettier from 'eslint-plugin-prettier/recommended';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    },
+    ...pluginReact.configs.flat.recommended
+  },
+  jsxA11y.flatConfigs.recommended,
+  {
+    plugins: {
+      'react-hooks': hooksPlugin
+    },
+    rules: {
+      ...hooksPlugin.configs.recommended.rules
+    }
+  },
+  pluginPrettier
+];

package.json

@@ -0,0 +1,38 @@
+{
+    "name": "sberhubproject",
+    "version": "1.0.0",
+    "main": "./src/index.tsx",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "start": "brojs server --port=8099 --with-open-browser",
+        "build": "npm run clean && brojs build --dev",
+        "build:prod": "npm run clean && brojs build",
+        "clean": "rimraf dist",
+        "eslint": "eslint ."
+    },
+    "author": "",
+    "license": "ISC",
+    "description": "",
+    "dependencies": {
+        "@brojs/cli": "^1.6.1",
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
+        "@mui/material": "^6.1.9",
+        "express": "^4.19.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.28.0",
+        "react-select": "^5.8.3"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.14.0",
+        "eslint": "^9.14.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "globals": "^15.12.0",
+        "typescript-eslint": "^8.13.0"
+    }
+}

src/app.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Main from './container/main';
+
+const App = () => {
+  return <Main />;
+};
+
+export default App;

src/container/Constant.js

@@ -0,0 +1,38 @@
+export function useConstant() {
+
+
+    const interests = [
+        {value:"Стартапы, поиск команды и нетворкинг", label:"Стартапы, поиск команды и нетворкинг"},
+        {value:"Искусство, фотография и дизайн", label:"Искусство, фотография и дизайн"},
+        {value:"Музыка", label:"Музыка"},
+        {value:"Хореография", label:"Хореография"},
+        {value:"Спорт, фитнес и ЗОЖ", label:"Спорт, фитнес и ЗОЖ"},
+        {value:"Литература и история", label:"Литература и история"},
+        {value:"Политика, социология, активизм и дебаты", label:"Политика, социология, активизм и дебаты"},
+        {value:"Кино и другое многомодальное искусство", label:"Кино и другое многомодальное искусство"},
+        {value:"Психология и психическое здоровье", label:"Психология и психическое здоровье"},
+        {value:"Соревновательные видеоигры", label:"Соревновательные видеоигры"},
+        {value:"Новые технологии, ИИ, техника", label:"Новые технологии, ИИ, техника"},
+        {value:"Математика, физика и информатика", label:"Математика, физика и информатика"},
+        {value :"Волонтерство и благотворительность", label: "Волонтерство и благотворительность"},
+        {value :"Настольные игры", label: "Настольные игры"},
+        {value :"Путешествия и туризм", label: "Путешествия и туризм"},
+        {value :"Английский (иностранные языки)", label: "Английский (иностранные языки)"},
+        {value :"Цифровые кафедры", label: "Цифровые кафедры"}
+    ];
+
+    const user = {
+        "fullname": "Moryakov Sergey",
+        "photo": "data:image/jpeg;base64,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 truncated
+        "interests": [
+            "Искусство, фотография и дизайн",
+            "Музыка",
+            "Хореография"
+        ]
+    }
+
+    return {
+        interests,
+        user
+    }
+}

src/container/hooks/useTelegram.tsx

@@ -0,0 +1,36 @@
+
+declare global {
+    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;

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/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Header from './header';
+
+const Layout = (): React.ReactElement => {
+  return (
+    <>
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+    </>
+  );
+};
+
+export default Layout;

src/container/main/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+
+const Main = (): React.ReactElement => {
+  return <RouterProvider router={router} />;
+};
+
+export default Main;

src/container/main/router.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createBrowserRouter } from 'react-router-dom';
+import SingUpPage from '../signup';
+import { getNavigationsValue } from '@brojs/cli';
+import Layout from './components/layout';
+
+export const router = createBrowserRouter([
+  {
+    path: getNavigationsValue('sberhubproject.signup'),
+    element: <Layout />,
+    children: [
+      {
+        path: getNavigationsValue('sberhubproject.signup'),
+        element: <SingUpPage />
+      }
+    ]
+  }
+]);

src/container/signup/index.css

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

src/container/signup/index.tsx

@@ -0,0 +1,171 @@
+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 axios from 'axios';
+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';
+
+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) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const form = {
+      id: user_id,
+      name: username,
+      fullname: data.get('lname') + ' ' + data.get('fname'),
+      about: data.get('about'), // Новое поле "Обо мне"
+      photo: image,
+      interests: selectedOption?.map((item) => item.value)
+    };
+    await axios.post("https://sergeymorykov-tg-web-backend-1a6e.twc1.net/users_reg", form);
+    //await axios.post("http://localhost:5000/users_reg", form);
+    delete form.photo;
+    window.Telegram.WebApp.sendData(JSON.stringify(form));
+    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,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Typography component="h1" variant="h5">
+            Регистрация
+          </Typography>
+          <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"
+                  autoComplete="family-name"
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <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="Напишите о себе"
+                />
+              </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"
+                />
+              </Grid>
+              <Grid
+                container
+                spacing={0}
+                direction="column"
+                alignItems="center"
+                justifyContent="center"
+                sx={{ paddingTop: 7, ml: 3 }}
+              >
+                <Select
+                  onChange={handleChange}
+                  closeMenuOnSelect={false}
+                  components={animatedComponents}
+                  isMulti
+                  options={interests}
+                  className="basic-multi-select"
+                  classNamePrefix="select"
+                />
+              </Grid>
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{ mt: 3, mb: 2, ml: 3 }}
+              >
+                Регистрация
+              </Button>
+            </Grid>
+          </Box>
+        </Box>
+      </Container>
+    </ThemeProvider>
+  );
+};
+
+export default SingUpPage;

src/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './app';
+
+export default () => <App />;
+
+let rootElement: ReactDOM.Root;
+
+export const mount = (Сomponent, element = document.getElementById('app')) => {
+  const rootElement = ReactDOM.createRoot(element);
+  rootElement.render(<Сomponent />);
+
+  if (module.hot) {
+    module.hot.accept('./app', () => {
+      rootElement.render(<Сomponent />);
+    });
+  }
+};
+
+export const unmount = () => {
+  rootElement.unmount();
+};

src/typings/png.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const value: string;
+    export default value;
+}

stubs/api/index.js

@@ -0,0 +1,3 @@
+const router = require('express').Router();
+
+module.exports = router;

tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "dom",
+            "es2017"
+        ],
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "esModuleInterop": true,
+        "noImplicitAny": false,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "target": "es6",
+        "jsx": "react",
+        "typeRoots": ["node_modules/@types", "src/typings"],
+        "types" : ["webpack-env", "node"],
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/*.test.ts",
+        "**/*.test.tsx",
+        "node_modules/@types/jest"
+    ]        
+}