Added base app

Has basic login UI, has methods to run speedtests

resources/js/components/ErrorPage.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter, Route, Link } from "react-router-dom";
+import { Container } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+
+export default class ErrorPage extends Component {
+    constructor(props) {
+        super(props);
+
+        var colour = '';
+        var message = false;
+        switch(this.props.code.toString()[0]) {
+            case 2:
+            case '2':
+                colour = 'success';
+                break;
+            case 4:
+            case '4':
+                colour = 'danger';
+                break;
+            case 5:
+            case '5':
+            default:
+                colour = 'warning';
+                break;
+        }
+
+        switch(this.props.code) {
+            case '400':
+                message = 'Bad request'
+                break;
+            case '401':
+                message = 'You aren\'t authenticated';
+                break;
+            case '403':
+                message = 'You aren\'t authorised to view this page';
+                break;
+            case '404':
+                message = 'Page not found';
+                break;
+            case '405':
+                message = 'Method not allowed'
+                break;
+            case '413':
+                message = 'Request too large'
+                break;
+            case '422':
+                message = 'Your request was unprocessable'
+                break;
+        }
+
+        this.state = {
+            code: this.props.code,
+            colour: colour,
+            message: message
+        };
+    }
+
+    render() {
+        const colour = this.state.colour;
+        const code = this.state.code;
+        const message = this.state.message;
+        return (
+            <Container fluid>
+                <Row className="fullscreen text-center align-items-center">
+                    <Col
+                        lg={{ span: 2, offset: 5}}
+                        md={{ span: 4, offset: 4}}
+                        sm={{ span: 4, offset: 4}}
+                        xs={{ span: 12}}
+                    >
+                        <h1 className={'text-' + colour + ' mb-0'}>{code}</h1>
+                        {message &&
+                            <p className={colour + '-text mt-0 mb-2'}>{message}</p>
+                        }
+                        <Link to="/" className={'waves-effect waves-' + colour + ' btn ' + colour}><Button variant={colour}>Go home</Button></Link>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('errorpage')) {
+    ReactDOM.render(<ErrorPage />, document.getElementById('errorpage'));
+}

resources/js/components/Example.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+export default class Index extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('main')) {
+    ReactDOM.render(<Index />, document.getElementById('main'));
+}

resources/js/components/Home/HomePage.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+export default class HomePage extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                Homepage coming soon...
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('homePage')) {
+    ReactDOM.render(<HomePage />, document.getElementById('homePage'));
+}

resources/js/components/Loader.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Spinner from 'react-bootstrap/Spinner';
+import { Container } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+
+export default class Loader extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+
+        };
+    }
+
+    render() {
+        return (
+            <Container fluid>
+                <Row className="fullscreen text-center align-items-center">
+                    <Col
+                        lg={{ span: 2, offset: 5}}
+                        md={{ span: 4, offset: 4}}
+                        sm={{ span: 4, offset: 4}}
+                        xs={{ span: 12}}
+                    >
+                        <Spinner animation="grow" size="lg"/>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('loader')) {
+    ReactDOM.render(<Loader />, document.getElementById('loader'));
+}

resources/js/components/Login.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Form, Toast } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+import Axios from 'axios';
+import { Alert } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+
+export default class Login extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            loginEmailInput: '',
+            loginPasswordInput: '',
+            toast: null,
+        }
+    }
+
+    login = (e) => {
+        e.preventDefault();
+
+        var data = {
+            email: this.state.loginEmailInput,
+            password: this.state.loginPasswordInput
+        };
+        var url = '/api/auth/login';
+
+        Axios.post(url, data)
+        .then((resp) => {
+            var token = resp.data;
+            this.props.setToken(token);
+        })
+        .catch((err) => {
+            toast.error('Something went wrong. Please try again.')
+        });
+    }
+
+    updateTextField = (e) => {
+        this.setState({
+            [e.target.id]: e.target.value
+        });
+    }
+
+    render() {
+        var error = this.state.error;
+
+        return (
+            <Container>
+                <Row className="fullscreen align-items-center">
+                    <Col
+                        lg={{ span: 4, offset: 4 }}
+                        md={{ span: 6, offset: 3 }}
+                        sm={{ span: 10, offset: 1 }}
+                        xs={{ span: 12 }}
+                    >
+                        <Form onSubmit={this.login}>
+                            <Form.Group controlId="loginEmailInput">
+                                <Form.Label>Email address</Form.Label>
+                                <Form.Control type="email" placeholder="admin@admin.com" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Form.Group controlId="loginPasswordInput">
+                                <Form.Label>Password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Button variant="primary" type="submit">Login</Button>
+                        </Form>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('login')) {
+    ReactDOM.render(<Login />, document.getElementById('login'));
+}

resources/js/components/Navbar.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+export default class Navbar extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('navbar')) {
+    ReactDOM.render(<Navbar />, document.getElementById('navbar'));
+}