optimizations for server use

captain-definition

@@ -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\"]"
+  ]
+}

src/pages/EnterAccount.jsx

@@ -5,7 +5,11 @@ 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");
@@ -30,18 +34,18 @@ const EnterAccount = () => {
     setPatronymic("");
     setPassword("");
     setRepiedPassword("");
-    };
+  }
 
   function selectTag(tag) {
     setEnter(tag);
     cleanState();
-    };
+  }
 
   async function createUser() {
     const response = await completeRegistration({
       login: login,
       password: password,
-            repiedPassword: repiedPassword
+      repiedPassword: repiedPassword,
     });
 
     if (response.status === 200) {
@@ -57,14 +61,13 @@ const EnterAccount = () => {
       cleanState();
       window.location.reload();
       // navigate("/");
+    } else {
+      console.log("Error");
     }
-        else {
-            console.log("Error")
   }
-    };
 
   async function logInToAccount() {
-        const response = await logIn(login, password)
+    const response = await logIn(login, password);
 
     if (response.status === 200) {
       setCookie("token", response.data.token);
@@ -75,9 +78,8 @@ const EnterAccount = () => {
       window.location.reload();
       // navigate("/")
       // window.location.reload()
-        }
+    } else {
-        else {
+      console.log(response);
-            console.log(response)
     }
   }
 
@@ -87,22 +89,47 @@ const EnterAccount = () => {
         <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>
+              <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>
+              <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}>
+            {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
-                                <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
+                    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
@@ -111,15 +138,36 @@ const EnterAccount = () => {
                     click={logInToAccount}
                   />
                 </div>
-                        </div> : 
+              </div>
+            ) : (
               <div className={classes.content__wrapper__register}>
                 <div className={classes.content__wrapper__register__header}>
-                                <h3>Зарегестрировать учетную запись</h3>
+                  <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
-                                <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
+                    placeholder={"Логин"}
-                                <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
+                    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}/>
@@ -133,14 +181,19 @@ const EnterAccount = () => {
                                 <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()}/>
+                  <MyButton
+                    text={"Создать"}
+                    otherStyle={{ height: "100%", width: "20%" }}
+                    click={() => createUser()}
+                  />
                 </div>
-                        </div>}
+              </div>
+            )}
           </div>
         </div>
       </div>
     </div>
-    )
+  );
-}
+};
 
 export default EnterAccount;

src/pages/Home.jsx

@@ -1,5 +1,5 @@
 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";
@@ -12,8 +12,13 @@ const Home = () => {
     <div className={classes.main}>
       <div className={classes.wrapper}>
         <div className={classes.header}>
-                    <div className={classes.header__top}>Кажется вы попали на общую страницу.</div>
+          <div className={classes.header__top}>
-                    <div className={classes.header__bottom}>Чтобы перейти к форме ввелите токен ниже или снова перейдите по ссылке.</div>
+            Кажется вы попали на общую страницу.
+          </div>
+          <div className={classes.header__bottom}>
+            Чтобы перейти к форме введите токен ниже или снова перейдите по
+            ссылке.
+          </div>
         </div>
         <div className={classes.content}>
           <div className={classes.content__title}>
@@ -23,18 +28,27 @@ const Home = () => {
           </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)}/>
+              <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}`)}/>
+              <MyButton
+                text={"Найти форму"}
+                click={() => navigate(`/forms/${token}`)}
+              />
             </div>
           </div>
         </div>
       </div>
     </div>
-    )
+  );
-}
+};
 
 export default Home;

webpack.config.js

@@ -1,50 +1,53 @@
-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) => {
-
+  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]'
+        localIdentName: isDev ? "[path][name]__[local]" : "[hash:base64:8]",
       },
     },
-    }
+  };
 
   const config = {
-        mode: env.mode ?? 'development',
+    mode: env.mode ?? "development",
     performance: {
       hints: false,
       maxEntrypointSize: 512000,
-            maxAssetSize: 512000
+      maxAssetSize: 512000,
     },
-        entry: './src/index.js',
+    entry: "./src/index.js",
     output: {
       // filename: '[name].[contenthash].js',
-            filename: 'bundle.js',
+      filename: "bundle.js",
-            publicPath: '/',
+      publicPath: "/",
-            path: path.resolve(__dirname, 'dist'),
+      path: path.resolve(__dirname, "dist"),
-            clean: true
+      clean: true,
     },
     plugins: [
-            new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public', 'index.html')}),
+      new HtmlWebpackPlugin({
-            isDev ? undefined : new MiniCssExtractPlugin({
+        template: path.resolve(__dirname, "public", "index.html"),
-                filename: 'css/[name].[contenthash:8].css',
+      }),
-                chunkFilename: 'css/[name].[contenthash:8].css'
+      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, 
+            isDev ? "style-loader" : MiniCssExtractPlugin.loader,
             cssLoader,
-                        'sass-loader'
+            "sass-loader",
           ],
         },
         {
@@ -53,21 +56,19 @@ module.exports = (env) => {
           use: {
             loader: "babel-loader",
             options: {
-                            presets: [
+              presets: ["@babel/preset-env", "@babel/preset-react"],
-                                '@babel/preset-env',
+            },
-                                '@babel/preset-react'
+          },
-                            ]
+        },
-                        }
+      ],
-                    }
-                }
-            ]
     },
     devServer: {
       port: env.port ?? 3000,
-            open: true,
+      historyApiFallback: true,
-            historyApiFallback: true
+      host: "0.0.0.0",
-        }
+      allowedHosts: "all",
+    },
   };
 
-    return config
+  return config;
-}
+};