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',
* 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}
className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
onChange={ input.onChange === null ? defaultValidation : input.onChange}
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>

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

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

89
src/styles/general.scss
View File

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