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

feat(refactor): combine old useful func to new stuff + other 

refactor LoginPage, add LandingPage, add Components for easy re-use, combine scss files / etc.
feat/x_gpu/new_version
TBS093A 2024-04-30 00:49:00 +02:00
parent 91da004a7e
commit b91896e6a5
8 changed files with 341 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import React, { useState } from 'react' import React, { useState } from 'react'
/** /**
* *
* @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input * @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
* @param { [] } refList - react ref objects list for handler validation * @param { [] } refList - react ref objects list for handler validation
* @param { } action - fetch method * @param { } action - fetch method
@ -16,7 +16,7 @@ export const FormGenerator = ({
if ( inputList[0].action === 'Async' ) { if ( inputList[0].action === 'Async' ) {
await action(refList) await action(refList)
} else if ( } else if (
inputList[0].action === 'Download' inputList[0].action === 'Download'
|| inputList[0].action === 'Upload' || inputList[0].action === 'Upload'
) { ) {
@ -55,7 +55,7 @@ export const FormGenerator = ({
) )
} else if (input.type === 'password') { } else if (input.type === 'password') {
return ( return (
<PasswordInputGenerator <PasswordInputGenerator
input={input} input={input}
info={info} info={info}
key={key} key={key}
@ -63,7 +63,7 @@ export const FormGenerator = ({
) )
} else if (input.type === 'links-listing') { } else if (input.type === 'links-listing') {
return ( return (
<DownloadFilesListInputGenerator <DownloadFilesListInputGenerator
input={input} input={input}
info={info} info={info}
key={key} key={key}
@ -79,7 +79,7 @@ export const FormGenerator = ({
) )
} else if (input.type === 'choice-listing') { } else if (input.type === 'choice-listing') {
return ( return (
<ChoiceListingGenerator <ChoiceListingGenerator
input={input} input={input}
info={info} info={info}
key={key} key={key}
@ -87,7 +87,7 @@ export const FormGenerator = ({
) )
} else if (input.type === 'range') { } else if (input.type === 'range') {
return ( return (
<RangeInputGenerator <RangeInputGenerator
input={input} input={input}
info={info} info={info}
key={key} key={key}
@ -107,13 +107,13 @@ export const FormGenerator = ({
{ {
info.button_value === '' info.button_value === ''
? <></> ? <></>
: <button : <button
type='submit' type='submit'
> >
{ info.button_value } { info.button_value }
</button> </button>
} }
</form> </form>
) )
} }
@ -121,11 +121,11 @@ export const FormGenerator = ({
/** /**
* Text input generator, example: * Text input generator, example:
* @param { * @param {
* { * {
* type: 'text', * type: 'text',
* name: 'name', * name: 'name',
* ref: React.createRef() * ref: React.createRef()
* } } input - basic text input * } } input - basic text input
* @param { * @param {
* { * {
* type: 'info', * type: 'info',
@ -137,10 +137,10 @@ const TextInputGenerator = ({
input, info input, info
}) => { }) => {
return ( return (
<div className="input_generate"> <div className="form-field">
<div className="input_labels"> <label>
{input.name + ':'} {input.name}
</div> </label>
<input <input
id={input.name + info.action + info.endpoint + 'Input'} id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off' autoComplete='off'
@ -153,11 +153,11 @@ const TextInputGenerator = ({
/** /**
* Text input generator, example: * Text input generator, example:
* @param { * @param {
* { * {
* type: 'password', * type: 'password',
* name: 'name', * name: 'name',
* ref: React.createRef() * ref: React.createRef()
* } } input - basic text input * } } input - basic text input
* @param { * @param {
* { * {
* type: 'info', * type: 'info',
@ -169,10 +169,10 @@ const PasswordInputGenerator = ({
input, info input, info
}) => { }) => {
return ( return (
<div className="input_generate"> <div className="form-field">
<div className="input_labels"> <label>
{input.name + ':'} {input.name}
</div> </label>
<input <input
id={input.name + info.action + info.endpoint + 'Input'} id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off' autoComplete='off'
@ -190,7 +190,7 @@ const ObjectIterator = ({
<> <>
{ {
typeof object == "object" ? typeof object == "object" ?
Object.keys( object ).map( Object.keys( object ).map(
( key ) => { ( key ) => {
return ( return (
@ -211,12 +211,12 @@ const ObjectIterator = ({
/** /**
* Text input generator, example: * Text input generator, example:
* @param { * @param {
* { * {
* type: 'drop-box', * type: 'drop-box',
* name: 'name', * name: 'name',
* values: list, * values: list,
* link: link to the file * link: link to the file
* } } input - basic text input * } } input - basic text input
* @param { * @param {
* { * {
* type: 'info', * type: 'info',
@ -233,17 +233,17 @@ const DownloadFilesListInputGenerator = ({
id={input.name + info.action + info.endpoint + 'DropBox'} id={input.name + info.action + info.endpoint + 'DropBox'}
> >
{input.name + ':'} {input.name + ':'}
{ {
input.values.length == 0 ? input.values.length == 0 ?
() => { () => {
return ( return (
<div> <div>
empty empty
</div> </div>
) )
} }
: input.values.map( (item, index) => { : input.values.map( (item, index) => {
return ( return (
@ -255,17 +255,17 @@ const DownloadFilesListInputGenerator = ({
{ {
typeof item == 'string' ? typeof item == 'string' ?
item item
: Object.keys(item).map( : Object.keys(item).map(
( key, index ) => { ( key, index ) => {
return( return(
<div style={{ paddingLeft: '10px' }}> <div style={{ paddingLeft: '10px' }}>
{ key + ': ' } { key + ': ' }
{ {
typeof item[key] === "object" ? typeof item[key] === "object" ?
Object.keys( item[key] ).map( Object.keys( item[key] ).map(
( key_two, index ) => { ( key_two, index ) => {
return ( return (
@ -273,12 +273,12 @@ const DownloadFilesListInputGenerator = ({
{ key_two + ': '} { key_two + ': '}
{ {
typeof item[key][key_two] == 'object' ? typeof item[key][key_two] == 'object' ?
Object.keys( item[key][key_two] ).map( Object.keys( item[key][key_two] ).map(
(key_three, index) => { (key_three, index) => {
return ( return (
<div style={{ paddingLeft: '30px' }}> <div style={{ paddingLeft: '30px' }}>
{ key_three + ": " } { key_three + ": " }
{ "x: " + item[key][key_two][key_three].x + ", " } { "x: " + item[key][key_two][key_three].x + ", " }
{ "y: " + item[key][key_two][key_three].y + ", " } { "y: " + item[key][key_two][key_three].y + ", " }
{ "z: " + item[key][key_two][key_three].z + ", " } { "z: " + item[key][key_two][key_three].z + ", " }
@ -286,9 +286,9 @@ const DownloadFilesListInputGenerator = ({
) )
} }
) )
: :
item[key][key_two] item[key][key_two]
} }
@ -296,20 +296,20 @@ const DownloadFilesListInputGenerator = ({
) )
} }
) )
: :
item[key] item[key]
} }
</div> </div>
) )
} }
) )
} }
<br /> <br />
<br /> <br />
<a <a
href={ input.link + index + '/' } href={ input.link + index + '/' }
> >
download download
@ -330,12 +330,12 @@ const DownloadFilesListInputGenerator = ({
/** /**
* Text input generator, example: * Text input generator, example:
* @param { * @param {
* { * {
* type: 'chice-listing', * type: 'chice-listing',
* name: 'name', * name: 'name',
* values: list, * values: list,
* ref: React.createRef() * ref: React.createRef()
* } } input - basic text input * } } input - basic text input
* @param { * @param {
* { * {
* type: 'info', * type: 'info',
@ -388,14 +388,14 @@ const ChoiceListingGenerator = ({
/** /**
* Upload file input generator, example: * Upload file input generator, example:
* @param { * @param {
* { * {
* type: 'file', * type: 'file',
* name: 'name', * name: 'name',
* endpoint: 'Album', * endpoint: 'Album',
* fileType: 'image' or 'audio', * fileType: 'image' or 'audio',
* dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState * dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState
* file: file, setFile: setFile() #useState * file: file, setFile: setFile() #useState
* } } input - * } } input -
*/ */
const UploadInputGenerator = ({ const UploadInputGenerator = ({
input, info input, info
@ -456,15 +456,15 @@ const UploadInputGenerator = ({
/** /**
* Text input generator, example: * Text input generator, example:
* @param { * @param {
* { * {
* type: 'range', * type: 'range',
* name: 'name', * name: 'name',
* min: min range value, * min: min range value,
* max: max range value, * max: max range value,
* step: step of value, * step: step of value,
* unit: unit of range value, * unit: unit of range value,
* ref: React.createRef() * ref: React.createRef()
* } } input - basic text input * } } input - basic text input
* @param { * @param {
* { * {
* type: 'info', * type: 'info',
@ -501,7 +501,7 @@ const RangeInputGenerator = ({
) )
} }
const RangeGenerator = ({ const RangeGenerator = ({
key, key,
label, label,
labelStyle, labelStyle,
@ -547,16 +547,16 @@ const RangeGenerator = ({
/** /**
* Text input generator, example: * Text input generator, example:
* @param { * @param {
* { * {
* type: 'vector', * type: 'vector',
* name: 'name', * name: 'name',
* refDict: * refDict:
* { * {
* x: React.createRef(), * x: React.createRef(),
* y: React.createRef(), * y: React.createRef(),
* z: React.createRef() * z: React.createRef()
* } * }
* } } input - basic text input * } } input - basic text input
* @param { * @param {
* { * {
* type: 'info', * type: 'info',
@ -580,7 +580,7 @@ const VectorInputGenerator = ({
let name = input.name + key + info.action + info.endpoint + 'Input' let name = input.name + key + info.action + info.endpoint + 'Input'
return ( return (
<div style={ { display: 'flex', width: '140px' } }> <div style={ { display: 'flex', width: '140px' } }>
<RangeGenerator <RangeGenerator
key={key} key={key}
label={key} label={key}
labelStyle={ { width: '5px', marginTop: '15px' } } labelStyle={ { width: '5px', marginTop: '15px' } }
@ -605,4 +605,4 @@ const VectorInputGenerator = ({
} }
export default FormGenerator export default FormGenerator

33
src/components/forms/user_auth/userLogin.js
View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux' // import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice' // import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk' // import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
import FormGenerator from '../formGenerator' import FormGenerator from '../formGenerator'
@ -13,8 +13,9 @@ const UserLoginForm = () => {
const usernameInput = React.createRef() const usernameInput = React.createRef()
const passwordInput = React.createRef() const passwordInput = React.createRef()
const dispatch = useDispatch() // const dispatch = useDispatch()
const { info } = useSelector( userAuthSelector ) // const { info } = useSelector( userAuthSelector )
const info = ""
let refList = [ let refList = [
usernameInput, usernameInput,
@ -25,17 +26,17 @@ const UserLoginForm = () => {
{ {
type: 'info', type: 'info',
action: 'Create', action: 'Create',
endpint: 'user/auth/login', endpint: 'user/auth',
button_value: 'Sign In' button_value: 'CONTINUE'
}, },
{ {
type: 'text', type: 'text',
name: 'Username', name: 'EMAIL',
ref: usernameInput ref: usernameInput
}, },
{ {
type: 'password', type: 'password',
name: 'Password', name: 'PASSWORD',
ref: passwordInput ref: passwordInput
} }
] ]
@ -45,16 +46,16 @@ const UserLoginForm = () => {
username: refs[0].current.value, username: refs[0].current.value,
password: refs[1].current.value password: refs[1].current.value
} }
dispatch( // dispatch(
userAuthAsyncThunk.fetchLogin( // userAuthAsyncThunk.fetchLogin(
pass // pass
) // )
) // )
} }
return ( return (
<div> <div>
<FormGenerator <FormGenerator
inputList={ inputList } inputList={ inputList }
refList={ refList } refList={ refList }
action={ login } action={ login }
@ -67,4 +68,4 @@ const UserLoginForm = () => {
} }
export default UserLoginForm export default UserLoginForm

22
src/components/graphic-container.js 100644
View File

@ -0,0 +1,22 @@
import React from 'react';
import '../styles/LoginPage.cube.scss';
const GraphicContainerComponent = () => {
return (
<div className="graphic-container">
<div className="cube">
<div className="front"></div>
<div className="back"></div>
<div className="right"></div>
<div className="left"></div>
<div className="top"></div>
<div className="bottom"></div>
</div>
</div>
)
}
export default GraphicContainerComponent

59
src/pages/index.js
View File

@ -1,64 +1,11 @@
import React from 'react'; import React from 'react';
import '../styles/general.000.scss'; import LoginPage from './user/login.js';
import '../styles/LoginPage.cube.scss'; import LandingPage from './landing.js';
// import { Provider } from 'react-redux';
// import { store } from '../redux/store';
// import Root from './func_group/root';
// if you have problem with watchers - use it:
// echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
// const IndexPage = () => {
// if (typeof window !== `undefined` && store !== 0)
// return (
// <Provider store={ store }>
// <Root />
// </Provider>
// )
// else
// return (
// <>
// </>
// )
// }
const IndexPage = () => { const IndexPage = () => {
return ( return (
<div className="login-container"> <LandingPage />
<header className="header">
<h1>X-GPU</h1>
</header>
<main className="main-content">
<div className="graphic-container">
<div className="cube">
<div className="front"></div>
<div className="back"></div>
<div className="right"></div>
<div className="left"></div>
<div className="top"></div>
<div className="bottom"></div>
</div>
</div>
<form className="login-form">
<div className="form-field">
<label htmlFor="login">
EMAIL
</label>
<input type="text" id="login" name="login" />
</div>
<div className="form-field">
<label htmlFor="password">
PASSWORD
</label>
<input type="password" id="password" name="password" />
</div>
<button type="submit">CONTINUE</button>
</form>
</main>
</div>
) )
} }

40
src/pages/landing.js 100644
View File

@ -0,0 +1,40 @@
import React from 'react';
import '../styles/general.scss';
import GraphicContainerComponent from '../components/graphic-container.js';
const LandingPage = () => {
return (
<div className="login-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
<span className="span-white">
who need top-tier rendering without the top-tier investment.
</span>
</p>
<button>
GET A DEMO
</button>
<p>
<span className="span-first-color">
GPU Is Important...
</span>
<br />
...but
</p>
</header>
<main className="main-content">
<GraphicContainerComponent />
</main>
</div>
)
}
export default LandingPage

25
src/pages/user/login.js 100644
View File

@ -0,0 +1,25 @@
import React from 'react';
import '../../styles/general.scss';
import '../../styles/LoginPage.cube.scss';
import GraphicContainerComponent from '../../components/graphic-container.js';
import UserLoginForm from '../../components/forms/user_auth/userLogin.js';
const LoginPage = () => {
return (
<div className="login-container">
<header className="header">
<h1>XGPU</h1>
</header>
<main className="main-content">
<GraphicContainerComponent />
<UserLoginForm />
</main>
</div>
)
}
export default LoginPage

218
src/styles/general.scss
View File

@ -1,70 +1,108 @@
$first-color: rgba(0, 90, 25, 1);
$secondary-color: white;
$third-color: #242b2f;
body { $title-color: white;
$subtitle-color: #a6a6a6;
$marked-subtitle-color: $first-color;
$background-color: #242b2f;
$background-base-start: $first-color;
$background-base-end: rgb(51,54,51, 1);
$header-background: 0;
$form-background: rgba(0,0,0,0.5);
$header-color: $form-background;
$button-background: $first-color;
$border-color: $first-color;
$input-background: #222;
$font-family-default: neue-haas-unica, sans-serif;
body, html {
margin: 0 auto; margin: 0 auto;
height: 100%;
overflow: hidden; overflow: hidden;
background: font-family: $font-family-default;
linear-gradient( tab-size: 4;
10deg, background: $background-color;
black 0%, // linear-gradient(
#0a670a 40%, // 10deg,
#097309 50%, // black 0%,
#0a670a 60%, // #0a670a 40%,
black 100% // #097309 50%,
); // #0a670a 60%,
// black 100%
// );
width: 100%; width: 100%;
height: 100%; height: 100%;
input { .header {
width: 200px; text-align: center;
height: 30px; padding: 20px;
margin-left: 20px; background: $header-background;
margin-top:10px; color: $header-color;
margin-bottom: 5px; z-index: 3; // Ensure the login form is above the cube
// border: 0px; position: relative; // Required for z-index to take effect
// border-radius: 10px;
font-size: 12pt;
text-align: center;
color: rgba(111,108,106,1);
background-color: rgba(0,0,0,0);
border-bottom: 2px solid;
border-right: 0px;
border-top: 0px;
border-left: 0px;
border-color: green;
transition-duration: 0.5s; h1 {
font-size: 72px;
}
}
.landing {
text-align: center;
padding: 20px;
background: $header-background;
color: $title-color;
z-index: 3; // Ensure the login form is above the cube
position: relative; // Required for z-index to take effect
h1 {
font-size: 60px;
font-weight: 800;
color: $title-color;
} }
input:hover { h2 {
border-color: rgba(111,108,106,1); font-size: 60px;
font-weight: 700;
color: $title-color;
} }
input:active { p {
background-color: rgba(0,128,0,1); font-size: 20px;
font-weight: 400;
color: $subtitle-color;
} }
.input_generate { span {
font-size: 20px;
font-weight: 400;
padding-left: 5px;
} }
.span-white {
color: $title-color;
}
.span-first-color {
color: $first-color;
}
button { button {
height: 30px; margin-top: 35px;
margin-left: 20px; margin-bottom: 35px;
margin-top:10px; padding-top: 20px;
margin-bottom: 5px; padding: 25px;
// border: 0px; border-radius: 5px;
border-radius: 10px; background: $button-background;
font-size: 12pt; font-size: 20px;
text-align: center; font-family: $font-family-default;
color: green; font-weight: 800;
background-color: rgba(0,0,0,0); color: rgba(0,0,0,0.5);
border: 2px solid; border: none;
border-color: green; cursor: pointer;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-top: 12px;
transition-duration: 0.1s; transition-duration: 0.1s;
} }
@ -72,6 +110,77 @@ body {
background-color: green; background-color: green;
color: black color: black
} }
}
.main-content {
//flex: 1;
//display: flex;
margin-top: 0%;
align-items: center;
justify-content: space-evenly;
.form {
background: $form-background;
padding: 50px;
width: 350px;
color: $subtitle-color;
// border: 2px solid $border-color;
border-radius: 10px;
margin-top: -400px;
margin-right: auto;
margin-left: auto;
z-index: 2; // Ensure the login form is above the cube
position: relative; // Required for z-index to take effect
.form-field {
margin-bottom: 15px;
label {
display: block;
margin-bottom: 15px;
}
input {
width: 90%;
padding: 5%;
background: $input-background;
border: 1px solid $border-color;
border-radius: 5px;
color: white;
transition-duration: 0.5s;
}
input:hover {
border-color: rgba(111,108,106,1);
}
input:active {
background-color: rgba(0,128,0,1);
}
}
button {
padding: 5%;
width: 100%;
margin-top: 30px;
border-radius: 5px;
background: $button-background;
font-family: $font-family-default;
font-weight: 800;
color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
transition-duration: 0.1s;
}
button:hover {
background-color: green;
color: black
}
}
}
} }
.navigation_bar { .navigation_bar {
@ -122,7 +231,7 @@ body {
width: 100%; width: 100%;
display: flex; display: flex;
} }
} }
} }
.float_form_auth { .float_form_auth {
@ -137,7 +246,6 @@ body {
input { input {
width: 75%; width: 75%;
float: right; float: right;
} }
.input_generate { .input_generate {
@ -255,7 +363,7 @@ body {
} }
button { button {
width: 100%; width: 100%;
margin-top: 25px; margin-top: 25px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -317,4 +425,4 @@ body {
button { button {
margin-left: 0px; margin-left: 0px;
} }
} }

0
src/styles/landing.scss 100644
View File