From fe05313ce2f147457362a4ac19dea4ca2e2fba0b Mon Sep 17 00:00:00 2001 From: TBS093A Date: Thu, 9 May 2024 19:39:29 +0200 Subject: [PATCH] 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 | 37 +++++-- src/components/navbar.js | 28 +++++ src/pages/landing.js | 149 +++++++++++++------------- src/styles/form/form.scss | 0 src/styles/general.scss | 89 +++++++-------- 5 files changed, 177 insertions(+), 126 deletions(-) create mode 100644 src/components/navbar.js delete mode 100644 src/styles/form/form.scss diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index 8cb9b9e..dee4d89 100644 --- a/src/components/forms/formGenerator.js +++ b/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 (
diff --git a/src/components/navbar.js b/src/components/navbar.js new file mode 100644 index 0000000..43bbfed --- /dev/null +++ b/src/components/navbar.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import '../styles/general.scss'; + +import SmallCubeComponent from './smallCube.js'; + + +const NavBarComponent = () => { + return ( +
+
+
+
+ +
+
+
+
+

Menu |||

+
+
+
+
+ ) +} + + +export default NavBarComponent diff --git a/src/pages/landing.js b/src/pages/landing.js index 3dd0f20..05adc1c 100644 --- a/src/pages/landing.js +++ b/src/pages/landing.js @@ -4,82 +4,87 @@ 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 ( -
-
-

Affordable. Efficient. Accessible.

-

GUARANTED.

-

- Minimize your expenses without compromising on quality. -
- Our platform is built for individuals who need top-tier rendering -
- - without the top-tier investment. - -

- -

- GPU IS IMPORTANT... -

-

- ...But GPU server can be very expensive. -
- Configuration and administration take too long time. -
- - Everything of that needs so much additional knowledge. - -

-

- We Offer Ready Solution. -

-

- Boost your GPU power for your 3D and AI models stuff -
- - without overpay for servers... - -
- - ...without overtime for environment adjustments! - -

-

- "OK... So What Makes You So Different?" -

-

- GUARANTED -

-

- We only win if you win. You won't carry all the risk, we'll share it -

-

- RESLUTS -

-

- Our first priority is to get you results. -

-

- LOCAL -

-

-

-

- SPECIALIZED -

-

-

-
-
- -
+ <> + +
+
+

Affordable. Efficient. Accessible.

+

GUARANTED.

+

+ Minimize your expenses without compromising on quality. +
+ Our platform is built for individuals who need top-tier rendering +
+ + without the top-tier investment. + +

+ +

+ GPU IS IMPORTANT... +

+

+ ...But GPU server can be very expensive. +
+ Configuration and administration take too long time. +
+ + Everything of that needs so much additional knowledge. + +

+

+ We Offer Ready Solution. +

+

+ Boost your GPU power for your 3D and AI models stuff +
+ + without overpay for servers... + +
+ + ...without overtime for environment adjustments! + +

+

+ "OK... So What Makes You So Different?" +

+

+ GUARANTED +

+

+ We only win if you win. You won't carry all the risk, we'll share it +

+

+ RESLUTS +

+

+ Our first priority is to get you results. +

+

+ LOCAL +

+

+

+

+ SPECIALIZED +

+

+

+
+
+ +
+
-
+ ) } diff --git a/src/styles/form/form.scss b/src/styles/form/form.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/general.scss b/src/styles/general.scss index 7fbc23b..1a6f54a 100644 --- a/src/styles/general.scss +++ b/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,55 +317,48 @@ body, html { } } -.navigation_bar { - padding-top: 2%; - padding-bottom: 2%; - height: 96%; - width: 350px; - position: fixed; - right: 0; - color: green; - background-color: rgba(22,28,29,1); +.navbar { + position: fixed; + width: 70%; + background: $form-background; + text-align: left; + padding: 20px 15%; + z-index: 999; + + .content-container { display: flex; - transition-duration: 0.2s; + justify-content: space-between; - .nav_bar_clickable { - height: 110%; - width: 50px; - margin-top: -40px; - margin-left: -50px; - background-color: rgba(22,28,29,1); - transition-duration: 0.2s; - } - - .nav_bar_clickable:hover { - background-color: rgba(22,28,29,0.5); - } - - .nav_bar_general { - padding-left: 10px; - - p { - margin-bottom: 0px; - margin-top: 10px; - } - - pre { - margin-top: 10px; - margin-bottom: 0px; - } - - .nav_bar_header { - width: 100%; - display: flex; - font-weight: bold; - } - - .nav_bar_option { - width: 100%; - display: flex; - } + .content { + flex-direction: column; + + .section { + flex: 1; + margin-top: 20px; + margin-bottom: 20px; + + h4 { + color: $title-color; + margin-bottom: 5px; + margin-top: 5px; + } + + .graphic-container { + margin-top: 20px; + } + + p, a { + color: $subtitle-color; + line-height: 1.6; + text-decoration: none; + } + + a:hover { + color: $title-color; + } + } } + } } .float_form_auth {