cleanups

speedtest/volumes/config/www/resources/js/components/Authentication/Authentication.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Row, Col} from 'react-bootstrap';
+import SessionsTable from './SessionsTable';
+import ResetPassword from './ResetPassword';
+
+export default class Authentication extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            showCollapse: false,
+            showModal: false
+        }
+    }
+
+    toggleCollapse = () => {
+        if(this.state.showCollapse) {
+            this.setState({
+                showCollapse: false
+            });
+        } else {
+            this.setState({
+                showCollapse: true
+            });
+        }
+    }
+
+    toggleModal = () => {
+        if(this.state.showModal) {
+            this.setState({
+                showModal: false
+            });
+        } else {
+            this.setState({
+                showModal: true
+            });
+        }
+    }
+
+    render() {
+        var showCollapse = this.state.showCollapse;
+        var showModal = this.state.showModal;
+
+        if( (window.config.auth == true && window.authenticated == true)) {
+            return (
+                <div>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <ResetPassword />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <SessionsTable />
+                        </Col>
+                    </Row>
+                </div>
+            );
+        } else {
+            return (
+                <></>
+            );
+        }
+    }
+}
+
+if (document.getElementById('Authentication')) {
+    ReactDOM.render(<Authentication />, document.getElementById('Authentication'));
+}

speedtest/volumes/config/www/resources/js/components/Authentication/ResetPassword.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Col, Collapse, Button, Modal, Form } from 'react-bootstrap';
+import SessionsTable from './SessionsTable';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+
+export default class ResetPassword extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            showModal: false,
+            currentPassword: '',
+            newPassword: '',
+            newPasswordConfirmation: '',
+            logoutDevices: false
+        }
+    }
+
+    toggleModal = () => {
+        if(this.state.showModal) {
+            this.setState({
+                showModal: false
+            });
+        } else {
+            this.setState({
+                showModal: true
+            });
+        }
+    }
+
+    updateTextField = (e) => {
+        this.setState({
+            [e.target.id]: e.target.value
+        })
+    }
+
+    updateCheckbox = (e) => {
+        this.setState({
+            [e.target.id]: e.target.checked
+        });
+    }
+
+    changePassword = (e) => {
+        e.preventDefault();
+
+        var data = {
+            currentPassword: this.state.currentPassword,
+            newPassword: this.state.newPassword,
+            newPassword_confirmation: this.state.newPasswordConfirmation,
+            logoutDevices: this.state.logoutDevices
+        }
+
+        var url = 'api/auth/change-password?token=' + window.token;
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success('Password updated');
+            this.toggleModal();
+            if(this.state.logoutDevices == true) {
+                location.reload(true);
+            }
+        })
+        .catch((err) => {
+            if(err.response) {
+                for(var key in err.response.data.error) {
+                    toast.error(err.response.data.error[key][0]);
+                }
+            }
+        })
+    }
+
+    render() {
+        var showModal = this.state.showModal;
+
+        return (
+            <div>
+                <Button variant="primary" onClick={this.toggleModal} className="mb-3">Change password</Button>
+                <Modal show={showModal} onHide={this.toggleModal}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Change password</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Form onSubmit={this.changePassword}>
+                            <Form.Group controlId="currentPassword">
+                                <Form.Label>Current password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Form.Group controlId="newPassword">
+                                <Form.Label>New Password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Form.Group controlId="newPasswordConfirmation">
+                                <Form.Label>Confirm New Password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Button variant="primary" type="submit" className="d-inline-block">Change password</Button>
+                            <Form.Group controlId="logoutDevices" className="d-inline-block ml-2">
+                                <Form.Check type="checkbox" label="Log everywhere out" onInput={this.updateCheckbox} />
+                            </Form.Group>
+                        </Form>
+                    </Modal.Body>
+                </Modal>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('ResetPassword')) {
+    ReactDOM.render(<ResetPassword />, document.getElementById('ResetPassword'));
+}

speedtest/volumes/config/www/resources/js/components/Authentication/SessionsTable.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Col, Table } from 'react-bootstrap';
+import Axios from 'axios';
+
+export default class SessionsTable extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            sessions: []
+        }
+    }
+
+    componentDidMount() {
+        this.getSessions();
+    }
+
+    getSessions = () => {
+        var url = 'api/auth/sessions?token=' + window.token;
+
+        Axios.get(url)
+        .then((resp) => {
+            this.setState({
+                sessions: resp.data.response
+            })
+        })
+    }
+
+    render() {
+        var sessions = this.state.sessions;
+
+        return (
+            <Container className="mb-4">
+                <Row>
+                    <Col sm={{ span: 12 }} className="mb-3 text-center">
+                        <h5>Login Sessions</h5>
+                        <Table responsive>
+                            <thead>
+                                <tr>
+                                    <th>IP</th>
+                                    <th>Expires</th>
+                                    <th>Created at</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {sessions.map((e,i) => {
+                                    return(
+                                        <tr key={i}>
+                                            <td>{e.ip}</td>
+                                            <td>{new Date(e.expires * 1000).toLocaleDateString() + ' ' + new Date(e.expires * 1000).toLocaleTimeString()}</td>
+                                            <td>{e.created_at}</td>
+                                        </tr>
+                                    )
+                                })}
+                            </tbody>
+                        </Table>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('SessionsTable')) {
+    ReactDOM.render(<SessionsTable />, document.getElementById('SessionsTable'));
+}