optimizations for server use
This commit is contained in:
Ivan
parent
247c0b831f
commit
e5403ca2da
GPG Key ID:
0C191B86D9582583
12
captain-definition
Normal file
12
captain-definition
Normal 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\"]"
|
||||
]
|
||||
}
|
||||
@ -5,123 +5,171 @@ import classes from "../assets/styles/enterAccount.module.scss";
|
||||
import MyInput from "../components/MyInput.jsx";
|
||||
import MyButton from "../components/MyButton.jsx";
|
||||
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 [enter, setEnter] = useState("login");
|
||||
const navigate = useNavigate();
|
||||
const [enter, setEnter] = useState("login");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [login, setLogin] = useState("");
|
||||
const [surname, setSurname] = useState("");
|
||||
const [patronymic, setPatronymic] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [repiedPassword, setRepiedPassword] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [login, setLogin] = useState("");
|
||||
const [surname, setSurname] = useState("");
|
||||
const [patronymic, setPatronymic] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [repiedPassword, setRepiedPassword] = useState("");
|
||||
|
||||
const {user, setUser} = useContext(UserData);
|
||||
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
|
||||
const { user, setUser } = useContext(UserData);
|
||||
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
|
||||
|
||||
function cleanState() {
|
||||
setEmail("");
|
||||
setPhone("");
|
||||
setLogin("");
|
||||
setSurname("");
|
||||
setPatronymic("");
|
||||
setPassword("");
|
||||
setRepiedPassword("");
|
||||
};
|
||||
function cleanState() {
|
||||
setEmail("");
|
||||
setPhone("");
|
||||
setLogin("");
|
||||
setSurname("");
|
||||
setPatronymic("");
|
||||
setPassword("");
|
||||
setRepiedPassword("");
|
||||
}
|
||||
|
||||
function selectTag(tag) {
|
||||
setEnter(tag);
|
||||
cleanState();
|
||||
};
|
||||
function selectTag(tag) {
|
||||
setEnter(tag);
|
||||
cleanState();
|
||||
}
|
||||
|
||||
async function createUser() {
|
||||
const response = await completeRegistration({
|
||||
login: login,
|
||||
password: password,
|
||||
repiedPassword: repiedPassword
|
||||
});
|
||||
async function createUser() {
|
||||
const response = await completeRegistration({
|
||||
login: login,
|
||||
password: password,
|
||||
repiedPassword: repiedPassword,
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
setUser({
|
||||
email: email,
|
||||
phone: phone,
|
||||
login: login,
|
||||
surname: surname,
|
||||
patronymic: patronymic,
|
||||
password: password,
|
||||
});
|
||||
setCookie("token", response.data.token);
|
||||
cleanState();
|
||||
window.location.reload();
|
||||
// navigate("/");
|
||||
}
|
||||
else {
|
||||
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)
|
||||
}
|
||||
if (response.status === 200) {
|
||||
setUser({
|
||||
email: email,
|
||||
phone: phone,
|
||||
login: login,
|
||||
surname: surname,
|
||||
patronymic: patronymic,
|
||||
password: password,
|
||||
});
|
||||
setCookie("token", response.data.token);
|
||||
cleanState();
|
||||
window.location.reload();
|
||||
// navigate("/");
|
||||
} else {
|
||||
console.log("Error");
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
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 (
|
||||
<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 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 className={classes.content__wrapper__login__body}>
|
||||
<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}/>
|
||||
</div>
|
||||
<div className={classes.content__wrapper__login__footer}>
|
||||
<MyButton
|
||||
text={"Войти"}
|
||||
otherStyle={{height: "50%", width: "20%"}}
|
||||
click={logInToAccount}
|
||||
/>
|
||||
</div>
|
||||
</div> :
|
||||
<div className={classes.content__wrapper__register}>
|
||||
<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}>
|
||||
<div className={classes.content__wrapper__login__body}>
|
||||
<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}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.content__wrapper__login__footer}>
|
||||
<MyButton
|
||||
text={"Войти"}
|
||||
otherStyle={{ height: "50%", width: "20%" }}
|
||||
click={logInToAccount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={classes.content__wrapper__register}>
|
||||
<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={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/>
|
||||
<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={repiedPassword} change={setRepiedPassword}/>
|
||||
</div> */}
|
||||
<div className={classes.content__wrapper__register__footer}>
|
||||
<MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}} click={() => createUser()}/>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
<div className={classes.content__wrapper__register__footer}>
|
||||
<MyButton
|
||||
text={"Создать"}
|
||||
otherStyle={{ height: "100%", width: "20%" }}
|
||||
click={() => createUser()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnterAccount;
|
||||
export default EnterAccount;
|
||||
|
||||
@ -1,40 +1,54 @@
|
||||
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 MyButton from "../components/MyButton.jsx";
|
||||
import MyInput from "../components/MyInput.jsx";
|
||||
|
||||
const Home = () => {
|
||||
const [token, setToken] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const [token, setToken] = useState("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.header}>
|
||||
<div className={classes.header__top}>Кажется вы попали на общую страницу.</div>
|
||||
<div className={classes.header__bottom}>Чтобы перейти к форме ввелите токен ниже или снова перейдите по ссылке.</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>
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.header}>
|
||||
<div className={classes.header__top}>
|
||||
Кажется вы попали на общую страницу.
|
||||
</div>
|
||||
<div className={classes.header__bottom}>
|
||||
Чтобы перейти к форме введите токен ниже или снова перейдите по
|
||||
ссылке.
|
||||
</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;
|
||||
|
||||
@ -1,73 +1,74 @@
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const path = require("path");
|
||||
|
||||
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 = {
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
modules: {
|
||||
localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]'
|
||||
},
|
||||
const 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,
|
||||
historyApiFallback: true,
|
||||
host: "0.0.0.0",
|
||||
allowedHosts: "all",
|
||||
},
|
||||
};
|
||||
|
||||
const 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
|
||||
}
|
||||
return config;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user