feat(forms & navbar): upgrade forms generator & add navbar

add universal validation for XSS & SQL Injection issues omit. add Navbar Component

src/components/forms/formGenerator.js

@@ -129,18 +129,35 @@ export const FormGenerator = ({
  * {
  *  type: 'text',
  *  name: 'name',
- *  ref: React.createRef()
+ *  ref: React.createRef(),
+ *  onChange: null OR validationFunc
+ *  validationInfo: null OR useState("")
  * }    } input - basic text input
  * @param {
  * {
  *  type: 'info',
- *  action: 'Update'
+ *  action: 'Update',
  *  endpoint: 'Album'
  * }    } info - information about form
  */
 const TextInputGenerator = ({
     input, info
 }) => {
+
+    const [textInputValidationInfo, setTextInputValidationInfo] = useState("Empty")
+
+    const inputRegex = /^[^'";<>=]+$/
+
+    const defaultValidation = (event) => {
+        if (event.target.value === "") {
+            setTextInputValidationInfo("Empty")
+        } else if (!inputRegex.test(event.target.value)) {
+            setTextInputValidationInfo("Please provide correct value")
+        } else {
+            setTextInputValidationInfo("Success")
+        }
+    }
+
     return (
         <div className="form-field">
             <label>
@@ -150,15 +167,23 @@ const TextInputGenerator = ({
                 id={input.name + info.action + info.endpoint + 'Input'}
                 autoComplete='off'
                 ref={input.ref}
-                onChange={input.onChange}
+                onChange={ input.onChange === null ? defaultValidation : input.onChange}
-                className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
+                className={
+                    [ "Empty", "Success"].includes(
+                        input.validationInfo === null ? textInputValidationInfo : input.validationInfo
+                    ) ? "" : "input-incorrect"
+                }
             />
             <div
                 className="popup"
-                style={ [ "Empty", "Success"].includes(input.validationInfo) ? {"display": "none", "height": "0px"} : {"display": "block"} }
+                style={
+                    [ "Empty", "Success"].includes(
+                        input.validationInfo === null ? textInputValidationInfo : input.validationInfo
+                    ) ? {"display": "none", "height": "0px"} : {"display": "block"}
+                }
             >
                 <div className="popup-content">
-                    { input.validationInfo }
+                    { input.validationInfo === null ? textInputValidationInfo : input.validationInfo }
                 </div>
             </div>
         </div>

src/components/navbar.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import '../styles/general.scss';
+
+import SmallCubeComponent from './smallCube.js';
+
+
+const NavBarComponent = () => {
+    return (
+        <div className="navbar">
+            <div className="content-container">
+                <div className="content">
+                    <div className="section">
+                        <SmallCubeComponent />
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="section">
+                        <h4>Menu |||</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+export default NavBarComponent

src/pages/landing.js

@@ -4,9 +4,13 @@ import '../styles/general.scss';
 
 import UserRegisterForm from '../components/forms/user_auth/userRegister.js';
 import FootComponent from '../components/foot.js';
+import NavBarComponent from '../components/navbar.js';
+
 
 const LandingPage = () => {
     return (
+        <>
+            <NavBarComponent />
             <div className="landing-container">
                 <header className="landing">
                     <h2>Affordable. Efficient. Accessible.</h2>
@@ -78,8 +82,9 @@ const LandingPage = () => {
                 <main className="secondary-content">
                     <UserRegisterForm />
                 </main>
-            <FootComponent />
             </div>
+            <FootComponent />
+        </>
     )
 }
 

src/styles/general.scss

@@ -305,9 +305,9 @@ body, html {
     }
 
     .bottom {
-      border-top: 1px solid $subtitle-color;
+      //border-top: 1px solid $subtitle-color;
       padding-top: 10px;
-      text-align: center;
+      text-align: left;
 
       p {
         font-size: 0.8em;
@@ -317,53 +317,46 @@ body, html {
   }
 }
 
-.navigation_bar {
+.navbar {
-    padding-top: 2%;
-    padding-bottom: 2%;
-    height: 96%;
-    width: 350px;
   position: fixed;
-    right: 0;
+  width: 70%;
-    color: green;
+  background: $form-background;
-    background-color: rgba(22,28,29,1);
+  text-align: left;
+  padding: 20px 15%;
+  z-index: 999;
+
+  .content-container {
     display: flex;
-    transition-duration: 0.2s;
+    justify-content: space-between;
 
-    .nav_bar_clickable {
+    .content {
-        height: 110%;
+      flex-direction: column;
-        width: 50px;
+
-        margin-top: -40px;
+      .section {
-        margin-left: -50px;
+        flex: 1;
-        background-color: rgba(22,28,29,1);
+        margin-top: 20px;
-        transition-duration: 0.2s;
+        margin-bottom: 20px;
+
+        h4 {
+          color: $title-color;
+          margin-bottom: 5px;
+          margin-top: 5px;
         }
 
-    .nav_bar_clickable:hover {
+        .graphic-container {
-        background-color: rgba(22,28,29,0.5);
+          margin-top: 20px;
         }
 
-    .nav_bar_general {
+        p, a {
-        padding-left: 10px;
+          color: $subtitle-color;
-
+          line-height: 1.6;
-        p {
+          text-decoration: none;
-            margin-bottom: 0px;
-            margin-top: 10px;
         }
 
-        pre {
+        a:hover {
-            margin-top: 10px;
+          color: $title-color;
-            margin-bottom: 0px;
         }
-
-        .nav_bar_header {
-            width: 100%;
-            display: flex;
-            font-weight: bold;
       }
-
-        .nav_bar_option {
-            width: 100%;
-            display: flex;
     }
   }
 }