tbs093a
/
render.app.frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

add universal validation for XSS & SQL Injection issues omit. add Navbar Component
feat/x_gpu/new_version
TBS093A 2024-05-09 19:39:29 +02:00
parent 24f22240d1
commit fe05313ce2
5 changed files with 177 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/forms/formGenerator.js
View File

@ -129,18 +129,35 @@ export const FormGenerator = ({
* { * {
* type: 'text', * type: 'text',
* name: 'name', * name: 'name',
* ref: React.createRef() * ref: React.createRef(),
* onChange: null OR validationFunc
* validationInfo: null OR useState("")
* } } input - basic text input * } } input - basic text input
* @param { * @param {
* { * {
* type: 'info', * type: 'info',
* action: 'Update' * action: 'Update',
* endpoint: 'Album' * endpoint: 'Album'
* } } info - information about form * } } info - information about form
*/ */
const TextInputGenerator = ({ const TextInputGenerator = ({
input, info 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 ( return (
<div className="form-field"> <div className="form-field">
<label> <label>
@ -150,15 +167,23 @@ const TextInputGenerator = ({
id={input.name + info.action + info.endpoint + 'Input'} id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off' autoComplete='off'
ref={input.ref} 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 <div
className="popup" 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"> <div className="popup-content">
{ input.validationInfo } { input.validationInfo === null ? textInputValidationInfo : input.validationInfo }
</div> </div>
</div> </div>
</div> </div>

28
src/components/navbar.js 100644
View File

@ -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

149
src/pages/landing.js
View File

@ -4,82 +4,87 @@ import '../styles/general.scss';
import UserRegisterForm from '../components/forms/user_auth/userRegister.js'; import UserRegisterForm from '../components/forms/user_auth/userRegister.js';
import FootComponent from '../components/foot.js'; import FootComponent from '../components/foot.js';
import NavBarComponent from '../components/navbar.js';
const LandingPage = () => { const LandingPage = () => {
return ( return (
<div className="landing-container"> <>
<header className="landing"> <NavBarComponent />
<h2>Affordable. Efficient. Accessible.</h2> <div className="landing-container">
<h1>GUARANTED.</h1> <header className="landing">
<p> <h2>Affordable. Efficient. Accessible.</h2>
Minimize your expenses without compromising on quality. <h1>GUARANTED.</h1>
<br /> <p>
Our platform is built for individuals who need top-tier rendering Minimize your expenses without compromising on quality.
<br /> <br />
<span className="span-white"> Our platform is built for individuals who need top-tier rendering
without the top-tier investment. <br />
</span> <span className="span-white">
</p> without the top-tier investment.
<button> </span>
GET A DEMO </p>
</button> <button>
<h4> GET A DEMO
GPU IS IMPORTANT... </button>
</h4> <h4>
<p> GPU IS IMPORTANT...
...But <span className="span-white">GPU server can be very expensive.</span> </h4>
<br /> <p>
Configuration and administration<span className="span-white"> take too long time.</span> ...But <span className="span-white">GPU server can be very expensive.</span>
<br /> <br />
<span className="span-white"> Configuration and administration<span className="span-white"> take too long time.</span>
Everything of that needs so much additional knowledge. <br />
</span> <span className="span-white">
</p> Everything of that needs so much additional knowledge.
<h2> </span>
We Offer Ready Solution. </p>
</h2> <h2>
<p> We Offer Ready Solution.
Boost your GPU power for your 3D and AI models stuff </h2>
<br /> <p>
<span className="span-white"> Boost your GPU power for your 3D and AI models stuff
without overpay for servers... <br />
</span> <span className="span-white">
<br /> without overpay for servers...
<span className="span-white"> </span>
...without overtime for environment adjustments! <br />
</span> <span className="span-white">
</p> ...without overtime for environment adjustments!
<h2> </span>
"OK... So What Makes You So Different?" </p>
</h2> <h2>
<h4> "OK... So What Makes You So Different?"
GUARANTED </h2>
</h4> <h4>
<p> GUARANTED
We only win if you win. You won't carry all the risk, we'll share it </h4>
</p> <p>
<h4> We only win if you win. You won't carry all the risk, we'll share it
RESLUTS </p>
</h4> <h4>
<p> RESLUTS
Our first priority is to get you results. </h4>
</p> <p>
<h4> Our first priority is to get you results.
LOCAL </p>
</h4> <h4>
<p> LOCAL
</p> </h4>
<h4> <p>
SPECIALIZED </p>
</h4> <h4>
<p> SPECIALIZED
</p> </h4>
</header> <p>
<main className="secondary-content"> </p>
<UserRegisterForm /> </header>
</main> <main className="secondary-content">
<UserRegisterForm />
</main>
</div>
<FootComponent /> <FootComponent />
</div> </>
) )
} }

0
src/styles/form/form.scss
View File

89
src/styles/general.scss
View File

@ -305,9 +305,9 @@ body, html {
} }
.bottom { .bottom {
border-top: 1px solid $subtitle-color; //border-top: 1px solid $subtitle-color;
padding-top: 10px; padding-top: 10px;
text-align: center; text-align: left;
p { p {
font-size: 0.8em; font-size: 0.8em;
@ -317,55 +317,48 @@ body, html {
} }
} }
.navigation_bar { .navbar {
padding-top: 2%; position: fixed;
padding-bottom: 2%; width: 70%;
height: 96%; background: $form-background;
width: 350px; text-align: left;
position: fixed; padding: 20px 15%;
right: 0; z-index: 999;
color: green;
background-color: rgba(22,28,29,1); .content-container {
display: flex; 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 {
.nav_bar_clickable:hover { color: $title-color;
background-color: rgba(22,28,29,0.5); margin-bottom: 5px;
} margin-top: 5px;
}
.nav_bar_general {
padding-left: 10px; .graphic-container {
margin-top: 20px;
p { }
margin-bottom: 0px;
margin-top: 10px; p, a {
} color: $subtitle-color;
line-height: 1.6;
pre { text-decoration: none;
margin-top: 10px; }
margin-bottom: 0px;
} a:hover {
color: $title-color;
.nav_bar_header { }
width: 100%; }
display: flex;
font-weight: bold;
}
.nav_bar_option {
width: 100%;
display: flex;
}
} }
}
} }
.float_form_auth { .float_form_auth {