ars/Minerva
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimizations for server use

Browse Source
This commit is contained in:
Ivan 2024-04-14 12:55:58 +03:00
parent 247c0b831f
commit e5403ca2da
Signed by untrusted user who does not match committer: ppechenkoo
GPG Key ID: 0C191B86D9582583
4 changed files with 293 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
captain-definition Normal file
View File

@ -0,0 +1,12 @@
{
"schemaVersion": 2,
"dockerfileLines": [
"FROM node",
"WORKDIR /app",
"COPY package*.json ./",
"RUN npm install",
"COPY . .",
"EXPOSE 3000",
"CMD [\"npm\", \"run\", \"start:dev\"]"
]
}

283
src/pages/EnterAccount.jsx
View File

@ -5,123 +5,171 @@ import classes from "../assets/styles/enterAccount.module.scss";
import MyInput from "../components/MyInput.jsx"; import MyInput from "../components/MyInput.jsx";
import MyButton from "../components/MyButton.jsx"; import MyButton from "../components/MyButton.jsx";
import { UserData } from "../context"; import { UserData } from "../context";
import { logIn, completeRegistration, verifyUserApi } from "../hooks/api/enterAccountApi.js"; import {
logIn,
completeRegistration,
verifyUserApi,
} from "../hooks/api/enterAccountApi.js";
const EnterAccount = () => { const EnterAccount = () => {
const [enter, setEnter] = useState("login"); const [enter, setEnter] = useState("login");
const navigate = useNavigate(); const navigate = useNavigate();
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [phone, setPhone] = useState(""); const [phone, setPhone] = useState("");
const [login, setLogin] = useState(""); const [login, setLogin] = useState("");
const [surname, setSurname] = useState(""); const [surname, setSurname] = useState("");
const [patronymic, setPatronymic] = useState(""); const [patronymic, setPatronymic] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [repiedPassword, setRepiedPassword] = useState(""); const [repiedPassword, setRepiedPassword] = useState("");
const {user, setUser} = useContext(UserData); const { user, setUser } = useContext(UserData);
const [cookies, setCookie, removeCookie] = useCookies(["user"]); const [cookies, setCookie, removeCookie] = useCookies(["user"]);
function cleanState() { function cleanState() {
setEmail(""); setEmail("");
setPhone(""); setPhone("");
setLogin(""); setLogin("");
setSurname(""); setSurname("");
setPatronymic(""); setPatronymic("");
setPassword(""); setPassword("");
setRepiedPassword(""); setRepiedPassword("");
}; }
function selectTag(tag) { function selectTag(tag) {
setEnter(tag); setEnter(tag);
cleanState(); cleanState();
}; }
async function createUser() { async function createUser() {
const response = await completeRegistration({ const response = await completeRegistration({
login: login, login: login,
password: password, password: password,
repiedPassword: repiedPassword repiedPassword: repiedPassword,
}); });
if (response.status === 200) { if (response.status === 200) {
setUser({ setUser({
email: email, email: email,
phone: phone, phone: phone,
login: login, login: login,
surname: surname, surname: surname,
patronymic: patronymic, patronymic: patronymic,
password: password, password: password,
}); });
setCookie("token", response.data.token); setCookie("token", response.data.token);
cleanState(); cleanState();
window.location.reload(); window.location.reload();
// navigate("/"); // navigate("/");
} } else {
else { console.log("Error");
console.log("Error")
}
};
async function logInToAccount() {
const response = await logIn(login, password)
if (response.status === 200) {
setCookie("token", response.data.token);
cleanState();
// setUser({
// login: login
// })
window.location.reload();
// navigate("/")
// window.location.reload()
}
else {
console.log(response)
}
} }
}
return ( async function logInToAccount() {
<div className={classes.main}> const response = await logIn(login, password);
<div className={classes.wrapper}>
<div className={classes.tabs}> if (response.status === 200) {
<ul class="nav nav-tabs"> setCookie("token", response.data.token);
<li class="nav-item" onClick={() => selectTag("login")}> cleanState();
<a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a> // setUser({
</li> // login: login
<li class="nav-item" onClick={() => selectTag("register")}> // })
<a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a> window.location.reload();
</li> // navigate("/")
</ul> // window.location.reload()
} else {
console.log(response);
}
}
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.tabs}>
<ul class="nav nav-tabs">
<li class="nav-item" onClick={() => selectTag("login")}>
<a
className={enter === "login" ? "nav-link active" : "nav-link"}
aria-current="page"
>
Авторизация
</a>
</li>
<li class="nav-item" onClick={() => selectTag("register")}>
<a
className={
enter === "register" ? "nav-link active" : "nav-link"
}
>
Регистрация
</a>
</li>
</ul>
</div>
<div className={classes.content}>
<div className={classes.content__wrapper}>
{enter === "login" ? (
<div className={classes.content__wrapper__login}>
<div className={classes.content__wrapper__login__header}>
<h3>Войти в аккаунт</h3>
</div> </div>
<div className={classes.content}> <div className={classes.content__wrapper__login__body}>
<div className={classes.content__wrapper}> <MyInput
{enter === 'login' ? <div className={classes.content__wrapper__login}> placeholder={"Логин"}
<div className={classes.content__wrapper__login__header}> otherMainStyle={{ width: "100%", height: "20%" }}
<h3>Войти в аккаунт</h3> otherInputStyle={{ width: "100%" }}
</div> value={login}
<div className={classes.content__wrapper__login__body}> change={setLogin}
<MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/> />
<MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/> <MyInput
</div> type={"password"}
<div className={classes.content__wrapper__login__footer}> placeholder={"Пароль"}
<MyButton otherMainStyle={{ width: "100%", height: "20%" }}
text={"Войти"} otherInputStyle={{ width: "100%" }}
otherStyle={{height: "50%", width: "20%"}} value={password}
click={logInToAccount} change={setPassword}
/> />
</div> </div>
</div> : <div className={classes.content__wrapper__login__footer}>
<div className={classes.content__wrapper__register}> <MyButton
<div className={classes.content__wrapper__register__header}> text={"Войти"}
<h3>Зарегестрировать учетную запись</h3> otherStyle={{ height: "50%", width: "20%" }}
</div> click={logInToAccount}
<div className={classes.content__wrapper__register__body}> />
<MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/> </div>
<MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/> </div>
<MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/> ) : (
</div> <div className={classes.content__wrapper__register}>
{/* <div className={classes.content__wrapper__register__body}> <div className={classes.content__wrapper__register__header}>
<h3>Зарегистрировать учетную запись</h3>
</div>
<div className={classes.content__wrapper__register__body}>
<MyInput
placeholder={"Логин"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={login}
change={setLogin}
/>
<MyInput
type={"password"}
placeholder={"Пароль"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={password}
change={setPassword}
/>
<MyInput
type={"password"}
placeholder={"Повторите пароль"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={repiedPassword}
change={setRepiedPassword}
/>
</div>
{/* <div className={classes.content__wrapper__register__body}>
<MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/> <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/>
<MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/> <MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/>
<div className={classes.content__wrapper__register__body__fio}> <div className={classes.content__wrapper__register__body__fio}>
@ -132,15 +180,20 @@ const EnterAccount = () => {
<MyInput type={'password'} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/> <MyInput type={'password'} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
<MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/> <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
</div> */} </div> */}
<div className={classes.content__wrapper__register__footer}> <div className={classes.content__wrapper__register__footer}>
<MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}} click={() => createUser()}/> <MyButton
</div> text={"Создать"}
</div>} otherStyle={{ height: "100%", width: "20%" }}
</div> click={() => createUser()}
/>
</div> </div>
</div> </div>
)}
</div>
</div> </div>
) </div>
} </div>
);
};
export default EnterAccount; export default EnterAccount;

76
src/pages/Home.jsx
View File

@ -1,40 +1,54 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom'; import { useNavigate, useLocation, useParams } from "react-router-dom";
import classes from "../assets/styles/home.module.scss"; import classes from "../assets/styles/home.module.scss";
import MyButton from "../components/MyButton.jsx"; import MyButton from "../components/MyButton.jsx";
import MyInput from "../components/MyInput.jsx"; import MyInput from "../components/MyInput.jsx";
const Home = () => { const Home = () => {
const [token, setToken] = useState(""); const [token, setToken] = useState("");
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<div className={classes.main}> <div className={classes.main}>
<div className={classes.wrapper}> <div className={classes.wrapper}>
<div className={classes.header}> <div className={classes.header}>
<div className={classes.header__top}>Кажется вы попали на общую страницу.</div> <div className={classes.header__top}>
<div className={classes.header__bottom}>Чтобы перейти к форме ввелите токен ниже или снова перейдите по ссылке.</div> Кажется вы попали на общую страницу.
</div> </div>
<div className={classes.content}> <div className={classes.header__bottom}>
<div className={classes.content__title}> Чтобы перейти к форме введите токен ниже или снова перейдите по
<div className={classes.content__title__wrapper}> ссылке.
<h3>Перейти к нужной форме</h3> </div>
</div>
</div>
<div className={classes.content__token}>
<div className={classes.content__token__wrapper}>
<MyInput placeholder={"Введите токен формы..."} otherMainStyle={{width: "100%"}} otherInputStyle={{width: "100%"}} value={token} change={(e) => setToken(e)}/>
</div>
</div>
<div className={classes.content__search}>
<div className={classes.content__search__wrapper}>
<MyButton text={"Найти форму"} click={() => navigate(`/forms/${token}`)}/>
</div>
</div>
</div>
</div>
</div> </div>
) <div className={classes.content}>
} <div className={classes.content__title}>
<div className={classes.content__title__wrapper}>
<h3>Перейти к нужной форме</h3>
</div>
</div>
<div className={classes.content__token}>
<div className={classes.content__token__wrapper}>
<MyInput
placeholder={"Введите токен формы..."}
otherMainStyle={{ width: "100%" }}
otherInputStyle={{ width: "100%" }}
value={token}
change={(e) => setToken(e)}
/>
</div>
</div>
<div className={classes.content__search}>
<div className={classes.content__search__wrapper}>
<MyButton
text={"Найти форму"}
click={() => navigate(`/forms/${token}`)}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default Home; export default Home;

135
webpack.config.js
View File

@ -1,73 +1,74 @@
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path'); const path = require("path");
module.exports = (env) => { module.exports = (env) => {
const isDev = env.mode === "development";
const isDev = env.mode === 'development'; const cssLoader = {
loader: "css-loader",
options: {
modules: {
localIdentName: isDev ? "[path][name]__[local]" : "[hash:base64:8]",
},
},
};
const cssLoader = { const config = {
loader: "css-loader", mode: env.mode ?? "development",
options: { performance: {
modules: { hints: false,
localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]' maxEntrypointSize: 512000,
}, maxAssetSize: 512000,
},
entry: "./src/index.js",
output: {
// filename: '[name].[contenthash].js',
filename: "bundle.js",
publicPath: "/",
path: path.resolve(__dirname, "dist"),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
}),
isDev
? undefined
: new MiniCssExtractPlugin({
filename: "css/[name].[contenthash:8].css",
chunkFilename: "css/[name].[contenthash:8].css",
}),
],
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
cssLoader,
"sass-loader",
],
}, },
} {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
],
},
devServer: {
port: env.port ?? 3000,
historyApiFallback: true,
host: "0.0.0.0",
allowedHosts: "all",
},
};
const config = { return config;
mode: env.mode ?? 'development', };
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
entry: './src/index.js',
output: {
// filename: '[name].[contenthash].js',
filename: 'bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'dist'),
clean: true
},
plugins: [
new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public', 'index.html')}),
isDev ? undefined : new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
})
],
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
cssLoader,
'sass-loader'
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
},
devServer: {
port: env.port ?? 3000,
open: true,
historyApiFallback: true
}
};
return config
}