temp

web/app/Http/Controllers/Controller.php

@@ -10,4 +10,9 @@ use Illuminate\Routing\Controller as BaseController;
 class Controller extends BaseController
 {
     use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+
+    function register() {
+        return Response()->json('lmao');
+    }
+
 }

web/resources/js/helpers/Auth.js

@@ -1,9 +1,53 @@
 // © XlXi 2021
 // Graphictoria 5
 
-function CreateAccount(loginForm)
+import axios from "axios";
+import Config from '../config.js';
+
+axios.defaults.withCredentials = true
+
+var url = Config.BaseUrl.replace('http://', '');
+var protocol = Config.Protocol;
+
+export async function CreateAccount(form)
 {
-	
+    console.log(form.get('username'));
+
+    const finished = false;
+    const body = form;
+
+    await axios.post(`${protocol}apis.${url}/account/register`, body, {headers: {"Access-Control-Allow-Origin": "*"}}).then(res=>{
+        console.log(res);
+    }).catch(error=>console.log(error));
+
+    return new Promise((resolve, reject)=>{
+
+        if (finished) {
+            resolve("good");
+        }else{
+            resolve({message: `bad`, inputs: [`username`]});
+        }
+    });
 }
 
-export { CreateAccount };
+export const LoginToAccount = async (form) => {
+
+    console.log(form.get('Username'));
+
+    const finished = true;
+    const body = form;
+
+    await axios.post(`${protocol}${url}/api/login`, body).then(res=>{
+        console.log(body);
+    }).catch(error=>console.log(error));
+
+    return new Promise((resolve, reject)=>{
+
+        if (finished) {
+            resolve("good");
+        }else{
+            reject({message: `bad`, inputs: [`username`]});
+        }
+    });
+
+}

web/resources/js/layouts/App.js

@@ -83,14 +83,7 @@ const App = () => {
 			state.offlineFetched == true ?
 			<Router>
 				<Navbar maintenanceEnabled={state.maintenance} />
-				{
+				{state.banners && state.banners.length >= 1 ? state.banners : null}
-					
-					state.banners && state.banners.length >= 1 ? 
-					state.banners 
-					:
-					null
-					
-				}
 				
 				<Route render={({ location }) => {
 						return (

web/resources/js/pages/Auth/Login.js

@@ -1,24 +1,56 @@
 // © XlXi 2021
 // Graphictoria 5
 
-import React from 'react';
+import React, {useState} from 'react';
 import { Link } from 'react-router-dom';
 
 import ReCAPTCHA from 'react-google-recaptcha';
+import { CreateAccount, LoginToAccount } from '../../Helpers/Auth';
+import Loader from '../../Components/Loader';
 
 const LoginForm = (props) => {
+
+	const [waitingForSubmission, setWaitingForSubmission] = useState(false);
+	
+	const [validity, setValidity] = useState({error: false, message: ``, inputs: []});
+	
+	async function SubmitLogin(form)
+	{
+		setWaitingForSubmission(true);
+		await LoginToAccount(form).then(res=>{
+			if (res != `good`) {
+				setValidity({error: true, message:res.message, inputs: res.inputs});
+				setTimeout(()=>{setValidity({...validity, error: false, inputs: res.inputs});}, 4000);
+			}
+		}).catch(error=>console.log(error));
+		setWaitingForSubmission(false);
+	}
+
 	return (
+		waitingForSubmission ? <Loader/> :
 		<>
 			<div className="col-md-8 mb-2">
-				<input type="username" className="form-control mb-4" placeholder="Username"/>
+				{validity.error?
-				<input type="password" className="form-control mb-3" placeholder="Password"/>
+					<div className={`px-5 mb-10`}>
+						<div className={`error-dialog`}>
+							<p className={`mb-0`}>{validity.message}</p>
+						</div>
+					</div> 
+				: null}
+				<form onSubmit={(e)=>{
+					e.preventDefault();
+					SubmitLogin(new FormData(e.target));
+				}} class="fs">
+				<input type="username" className={`form-control mb-4 ${(validity.inputs.find(input=>input == `username`)? `is-invalid` : ``)}`} placeholder="Username" name="Username"/>
+				<input type="password" className={`form-control mb-4 ${(validity.inputs.find(input=>input == `password`)? `is-invalid` : ``)}`} placeholder="Password" name="Password"/>
 				<div className="d-flex mb-3">
 					<ReCAPTCHA
 						sitekey="6LeyHsUbAAAAAJ9smf-als-hXqrg7a-lHZ950-fL"
 						className="mx-auto"
 					/>
 				</div>
-				<button className="btn btn-primary px-5">SIGN IN</button><br/>
+				<button className="btn btn-primary px-5" type={`submit`}>SIGN IN</button><br/>
+				</form>
 				<Link to="/passwordreset" className="text-decoration-none fw-normal center">Forgot your password?</Link>
 			</div>
 			<div className="col">

web/resources/js/pages/Auth/Register.js

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import ReCAPTCHA from 'react-google-recaptcha';
 
 import Loader from '../../Components/Loader.js';
+import { CreateAccount } from '../../Helpers/Auth.js';
 
 const RegisterForm = (props) => {
 	const RegistrationAreas = [
@@ -34,14 +35,75 @@ const RegisterForm = (props) => {
 	
 	const [waitingForSubmission, setWaitingForSubmission] = useState(false);
 	
-	const [values, setValues] = useState({
+	const [validity, setValidity] = useState({error: false, message: ``, inputs: []});
+	
+	async function SubmitRegistration(form)
+	{
+		const formData = new FormData(form);
+		setWaitingForSubmission(true);
+		await CreateAccount(formData).then(res=>{
+			if (res != `good`) {
+				setValidity({error: true, message:res.message, inputs: res.inputs});
+				setTimeout(()=>{setValidity({...validity, error: false, inputs: res.inputs});}, 4000);
+			}
+		}).catch(error=>console.log(error));
+		setWaitingForSubmission(false);
+	}
+	
+	return (
+		waitingForSubmission
+		?
+		<Loader />
+		:
+		(
+			<>
+				<div className="px-5 mb-2">
+					<div className="alert alert-warning graphictoria-alert" style={{ "borderRadius": "10px" }}>
+						<p className="mb-0">Make sure your password is unique!</p>
+					</div>
+				</div>
+				{validity.error?
+					<div className={`px-5 mb-10`}>
+						<div className={`error-dialog`}>
+							<p className={`mb-0`}>{validity.message}</p>
+						</div>
+					</div> 
+				: null}
+				<div className="px-sm-5">
+					<form onSubmit={(e)=>{e.preventDefault();SubmitRegistration(e.target);}}>
+					{
+						RegistrationAreas.map(({ text, type, id }, index) => 
+							<input key={ index } onChange={(e)=>{}} type={ type } className={ `form-control mb-2 ${(validity.inputs.find(input=>input == id)? `is-invalid` : ``)}` } placeholder={ text } id={ id } name={id}/>
+						)
+					}
+					<div className="mt-3">
+						<div className="d-flex mb-2">
+							<ReCAPTCHA
+								sitekey="6LeyHsUbAAAAAJ9smf-als-hXqrg7a-lHZ950-fL"
+								className="mx-auto"
+							/>
+						</div>
+						<button className="btn btn-success px-5">SIGN UP</button>
+					</div>
+					</form>
+					<Link to="/login" className="text-decoration-none fw-normal center">Already have an account?</Link>
+					<p className="text-muted my-2">By creating an account, you agree to our <a href="/legal/terms-of-service" className="text-decoration-none fw-normal" target="_blank">Terms of Service</a> and our <a href="/legal/privacy-policy" className="text-decoration-none fw-normal" target="_blank">Privacy Policy</a>.</p>
+				</div>
+			</>
+		)
+	);
+};
+
+export default RegisterForm;
+
+/*
+const [values, setValues] = useState({
 		username: '',
 		email: '',
 		password: '',
 		confirmation: ''
 	});
-	
+const [validity, setValidity] = useState({
-	const [validity, setValidity] = useState({
 		username: false,
 		email: false,
 		password: false,
@@ -63,45 +125,4 @@ const RegisterForm = (props) => {
 			[id] : value
 		}));
     }
-	
+*/
-	function SubmitRegistration()
-	{
-		setWaitingForSubmission(true);
-	}
-	
-	return (
-		waitingForSubmission
-		?
-		<Loader />
-		:
-		(
-			<>
-				<div className="px-5 mb-2">
-					<div className="alert alert-warning graphictoria-alert" style={{ "borderRadius": "10px" }}>
-						<p className="mb-0">Make sure your password is unique!</p>
-					</div>
-				</div>
-				<div className="px-sm-5">
-					{
-						RegistrationAreas.map(({ text, type, id }, index) => 
-							<input key={ index } onChange={ handleChange } type={ type } className={ `form-control mb-2${ validityMessages[id] !== '' ? (validity[id] === true ? ' is-valid' : ' is-invalid') : ''}` } placeholder={ text } id={ id } />
-						)
-					}
-					<div className="mt-3">
-						<div className="d-flex mb-2">
-							<ReCAPTCHA
-								sitekey="6LeyHsUbAAAAAJ9smf-als-hXqrg7a-lHZ950-fL"
-								className="mx-auto"
-							/>
-						</div>
-						<button className="btn btn-success px-5" onClick={ SubmitRegistration }>SIGN UP</button>
-					</div>
-					<Link to="/login" className="text-decoration-none fw-normal center">Already have an account?</Link>
-					<p className="text-muted my-2">By creating an account, you agree to our <a href="/legal/terms-of-service" className="text-decoration-none fw-normal" target="_blank">Terms of Service</a> and our <a href="/legal/privacy-policy" className="text-decoration-none fw-normal" target="_blank">Privacy Policy</a>.</p>
-				</div>
-			</>
-		)
-	);
-};
-
-export default RegisterForm;

web/resources/sass/Graphictoria.scss

@@ -811,4 +811,26 @@ a.list-group-item {
 	html.gtoria-light & {
 		background-color: $white !important;
 	}
-}
+}
+
+// Dialog
+
+.error-dialog.show {
+  display: block;
+}
+
+.error-dialog {
+  padding: 5px;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  text-align: center;
+  background-color: var(--bs-red);
+  
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-name: dropdownEase;
+
+  -webkit-animation-duration: 0.2s;
+  -webkit-animation-fill-mode: both;
+  -webkit-animation-name: dropdownEase;
+}

web/routes/apis.php

@@ -4,6 +4,7 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\BannerController;
 use App\Http\Controllers\GamesController;
+use App\Http\Controllers\Controller;
 
 /*
 |--------------------------------------------------------------------------
@@ -26,6 +27,8 @@ Route::get('/games/metadata', 'GamesController@isAvailable');
 
 Route::post('/maintenance/bypass', 'MaintenanceController@bypass');
 
+Route::post('/account/register', 'Controller@register');
+
 Route::fallback(function(){
 	return response('{"errors":[{"code":404,"message":"NotFound"}]}', 404)
 		->header('Cache-Control', 'private')

web/routes/web.php

@@ -51,4 +51,4 @@ Route::get('/legal/dmca', function(){
 
 Route::get('/games', function(){
     return view('main');
-});
+});