Dockerize a gatsby instance

.dockerignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public/

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:14.4.0
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+RUN npm install -g gatsby-cli
+
+CMD ['gatsby', 'develop', '-H', '0.0.0.0:8000']

package-lock.json

@@ -10690,6 +10690,12 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "pathseg": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz",
+      "integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==",
+      "optional": true
+    },
     "pbkdf2": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
@@ -12071,6 +12077,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-particles-js": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-3.4.1.tgz",
+      "integrity": "sha512-c3+vITUMN9RlgbERZYd9Kzvjmf49ENp07+9+NDLvE1Jf9euabrJi/q6gCCcv5foxGHBYjHnGs47Tusmrl0/+GQ==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "tsparticles": "^1.18.10"
+      }
+    },
     "react-redux": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
@@ -14329,6 +14344,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "tsparticles": {
+      "version": "1.18.12",
+      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.18.12.tgz",
+      "integrity": "sha512-7WY31HckCzzaiuudQlIeCE3Y5C4AslnJsuM/aeSDMErx7p7GjXzfUIO5qpzwyoJ7KRNURxIhADTXSDEtqkJFxw==",
+      "requires": {
+        "pathseg": "^1.2.0"
+      }
+    },
     "tsutils": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "loadash": "^1.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-particles-js": "^3.4.1",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "sass": "^1.32.7"

src/components/forms/abstractWebsocket.js

@@ -168,7 +168,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
     )
 
     return (
-        <>
+        <div>
             <div 
                 className="float_form_render_async"
                 style={ 
@@ -237,7 +237,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
                                                             return (
                                                                 <img 
                                                                     src={ 'data:image/png;base64, ' + item[key] }
-                                                                    style={ { width: '300px', height: '200px' } }
+                                                                    style={ { width: '300px', height: '150px' } }
                                                                 />
                                                             )
                                                         } else {
@@ -258,7 +258,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
                     }
                 </div>
             </div>
-        </>
+        </div>
     )
 }
 

src/components/forms/render_websocket/renderAll.js

@@ -79,14 +79,14 @@ const RenderAllForm = () => {
     }
 
     return (
-        <>
+        <div>
             <AbstractWebsocket 
                 addressWS={ '/all/' }
                 inputList={ inputList }
                 refList={ refList }
                 bodyComparer={ bodyComparer }
             />
-        </>
+        </div>
     )
 }
 

src/components/forms/render_websocket/renderSingleImage.js

@@ -121,14 +121,14 @@ const RenderSingleImageForm = () => {
     }
 
     return (
-        <>
+        <div>
             <AbstractWebsocket 
                 addressWS={ '/single/image/' }
                 inputList={ inputList }
                 refList={ refList }
                 bodyComparer={ bodyComparer }
             />
-        </>
+        </div>
     )
 }
 

src/components/forms/render_websocket/renderSingleSet.js

@@ -120,14 +120,14 @@ const RenderSingleSetForm = () => {
     }
 
     return (
-        <>
+        <div>
             <AbstractWebsocket 
                 addressWS={ '/single/set/' }
                 inputList={ inputList }
                 refList={ refList }
                 bodyComparer={ bodyComparer }
             />
-        </>
+        </div>
     )
 }
 

src/components/forms/render_websocket/renderVectorImage.js

@@ -431,14 +431,14 @@ const RenderVectorSingleImageForm = () => {
     }
 
     return (
-        <>
+        <div>
             <AbstractWebsocket 
                 addressWS={ '/vector/single/image/' }
                 inputList={ inputList }
                 refList={ refList }
                 bodyComparer={ bodyComparer }
             />
-        </>
+        </div>
     )
 }
 

src/components/forms/render_websocket/renderVectorSet.js

@@ -430,14 +430,14 @@ const RenderVectorSingleSetForm = () => {
     }
 
     return (
-        <>
+        <div>
             <AbstractWebsocket 
                 addressWS={ '/vector/single/set/' }
                 inputList={ inputList }
                 refList={ refList }
                 bodyComparer={ bodyComparer }
             />
-        </>
+        </div>
     )
 }
 

src/components/forms/user_auth/userLogin.js

@@ -53,7 +53,7 @@ const UserLoginForm = () => {
     }
 
     return (
-        <>
+        <div>
             <FormGenerator 
                 inputList={ inputList }
                 refList={ refList }
@@ -62,7 +62,7 @@ const UserLoginForm = () => {
             <div className='form_info'>
                 { info }
             </div>
-        </>
+        </div>
     )
 
 }

src/components/forms/user_auth/userRegister.js

@@ -61,7 +61,7 @@ const UserRegisterForm = () => {
     }
 
     return (
-        <>
+        <div>
             <FormGenerator 
                 inputList={ inputList }
                 refList={ refList }
@@ -70,7 +70,7 @@ const UserRegisterForm = () => {
             <div className='form_info'>
                 { info }
             </div>
-        </>
+        </div>
     )
 
 }

src/pages/func_group/canvasBackgroundAnimation.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import Particles from 'react-particles-js'
+
+
+const CanvasBackgroundAnimation = () => {
+
+    let particleColor = '#008000'
+    let darkGreen = '#005e00'
+    let menuColor = '#161c1d'
+
+    let params = {
+        particles: {
+            number: { value: 120, density: { enable: true, value_area: 800 } },
+            color: { value: particleColor },
+            shape: {
+              type: "circle",
+              stroke: { width: 0, color: darkGreen },
+              polygon: { nb_sides: 5 }
+            },
+            opacity: {
+              value: 1,
+              random: false,
+              anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
+            },
+            size: {
+              value: 3,
+              random: true,
+              anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
+            },
+            line_linked: {
+              enable: true,
+              distance: 150,
+              color: menuColor,
+              opacity: 0.4,
+              width: 1
+            },
+            move: {
+              enable: true,
+              speed: 6,
+              direction: "none",
+              random: false,
+              straight: false,
+              out_mode: "out",
+              bounce: false,
+              attract: { enable: false, rotateX: 600, rotateY: 1200 }
+            }
+        },
+        interactivity: {
+            detect_on: "canvas",
+            events: {
+              onhover: { enable: true, mode: "repulse" },
+              onclick: { enable: true, mode: "push" },
+              resize: true
+            },
+        },
+        modes: {
+            grab: { 
+                distance: 400, 
+                line_linked: { 
+                    opacity: 1 
+                } 
+            },
+            bubble: { 
+                distance: 400, 
+                size: 40, 
+                duration: 2, 
+                opacity: 8, 
+                speed: 3 
+            },
+            repulse: { 
+                distance: 200,
+                duration: 0.4 
+            },
+            push: { particles_nb: 4 },
+            remove: { particles_nb: 2 }
+        }
+    }
+
+    return (
+        <Particles 
+            params={ params }
+            style={
+                {
+                    width: '100%',
+                    height: '100%',
+                    zIndex: '-100',
+                }
+            }
+        />
+    )
+
+}
+
+export default CanvasBackgroundAnimation

src/pages/func_group/rootUtils.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
 import { userAuthSelector } from '../../redux/slices/userAuthSlice'
@@ -9,6 +9,7 @@ import ModelCrudIndex from './model_crud/modelCrudIndex'
 import RenderIndex from './render/renderIndex'
 
 import NavigationBar from './navigationBar'
+import CanvasBackgroundAnimation from './canvasBackgroundAnimation'
 
 
 const GeneralView = () => {
@@ -76,13 +77,26 @@ const VerifyUserSession = () => {
     
     const { token, user } = useSelector(userAuthSelector)
 
+    const [showGeneral, setShowGeneral] = useState(false)
+
+    useEffect(
+        () => {
+            if ( user.id > 0 && token !== '' && showGeneral === false ) {
+                setShowGeneral(true)
+            } else if ( user.id <= 0 && token === '' && showGeneral === true ) {
+                setShowGeneral(false)
+            }
+        }
+    )
+
     return (
         <div>
             {
-                user.id !== 0 && token !== ''
+                showGeneral
                 ? <GeneralView />  
                 : <UserAuthIndex />
             }
+            <CanvasBackgroundAnimation />
         </div>
     )
 }

src/styles/general.scss

@@ -2,6 +2,9 @@
 body {
     margin: 0 auto;
     overflow: hidden;
+    background-color: rgba(0,128,0,1);
+    width: 100%;
+    height: 100%;
 
     input {
         width: 200px;
@@ -85,7 +88,7 @@ body {
     }
 
     .nav_bar_clickable:hover {
-        background-color: rgba(0,128,0,1);
+        background-color: rgba(22,28,29,0.5);
     }
 
     .nav_bar_general {
@@ -115,6 +118,7 @@ body {
 }
 
 .float_form_auth {
+    position: fixed;
     width: 400px;
     padding: 50px;
     border-radius: 10px;
@@ -125,6 +129,7 @@ body {
     input {
         width: 75%;
         float: right;
+
     }
 
     .input_generate {
@@ -147,7 +152,8 @@ body {
 
     .form_info {
         float: float;
-        margin-top: -150px;
+        position: absolute;
+        margin-top: 0px;
     }
 
 }
@@ -237,6 +243,7 @@ body {
         top: -60px;
         font-size: 20px;
         font-weight: bold;
+        color: rgba(22,28,29,1);
     }
 
     button {
@@ -268,6 +275,7 @@ body {
         top: -60px;
         font-size: 20px;
         font-weight: bold;
+        color: rgba(22,28,29,1);
     }
 
     .console_data {