add Logout

ui/App/App.jsx

@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react';
 
 import user from "../api/resources/user";
 import Login from "./views/Login";
-import {Redirect, Route, Switch} from "react-router";
+import {Redirect, Route, Switch, useHistory} from "react-router";
 import Controls from "./views/Controls";
 import {BrowserRouter} from "react-router-dom";
 import Logs from "./views/Logs";
@@ -12,12 +12,21 @@ import Layout from "./components/Layout";
 const App = () => {
 
     const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const history = useHistory();
 
     const handleAuthenticationStatus = async () => {
         const status = await user.status();
         setIsAuthenticated(status.success);
     };
 
+    const handleLogout = async () => {
+        const loggedOut = await user.logout();
+        if (loggedOut.success) {
+            setIsAuthenticated(false);
+            history.push('/login');
+        }
+    }
+
     const ProtectedRoute = useCallback(({component: Component, ...rest}) => (
         <Route {...rest} render={(props) => (
             isAuthenticated
@@ -34,7 +43,7 @@ const App = () => {
             <Switch>
                 <Route path="/login" render={() => (<Login handleLogin={handleAuthenticationStatus}/>)}/>
 
-                <Layout>
+                <Layout handleLogout={handleLogout}>
                     <ProtectedRoute exact path="/" component={Controls}/>
                     <ProtectedRoute path="/saves" component={Saves}/>
                     <ProtectedRoute path="/mods" component={Controls}/>

ui/App/components/Layout.jsx

@@ -1,10 +1,12 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, {useEffect, useState} from "react";
 import server from "../../api/resources/server";
-import {NavLink} from "react-router-dom";
+import {NavLink, useHistory} from "react-router-dom";
+import Button from "../elements/Button";
 
-const Layout = (props) => {
+const Layout = ({children, handleLogout}) => {
 
     const [serverStatus, setServerStatus] = useState(null);
+    const history = useHistory();
 
     useEffect(() => {
         (async () => {
@@ -15,17 +17,16 @@ const Layout = (props) => {
         })();
     }, []);
 
-    const Status = (props) => {
+    const Status = ({info}) => {
 
         let text = 'Unknown';
         let color = 'gray-light';
 
-        if (props.info && props.info.success) {
+        if (info && info.success) {
-            console.log(props.info);
+            if (info.data.status === 'running') {
-            if (props.info.data.status === 'running') {
                 text = 'Running';
                 color = 'green';
-            } else if (props.info.data.status === 'stopped') {
+            } else if (info.data.status === 'stopped') {
                 text = 'Stopped';
                 color = 'red';
             }
@@ -52,7 +53,7 @@ const Layout = (props) => {
             {/*Main*/}
             <div className="w-full md:w-5/6 bg-gray-100 bg-banner bg-fixed min-h-screen">
                 <div className="container mx-auto bg-gray-100 pt-16 px-6">
-                    {props.children}
+                    {children}
                 </div>
             </div>
 
@@ -84,7 +85,13 @@ const Layout = (props) => {
                 <div className="py-4 px-2 border-b-2 border-black">
                     <h1 className="text-dirty-white text-lg mb-2 mx-4">Administration</h1>
                     <div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
-                        <Link to="/user-management" last={true}>User Management</Link>
+                        <Link to="/user-management">User Management</Link>
+                        <Link to="/help" last={true}>Help</Link>
+                    </div>
+                </div>
+                <div className="py-4 px-2 border-b-2 border-black">
+                    <div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
+                        <Button type="danger" onClick={handleLogout}>Logout</Button>
                     </div>
                 </div>
             </div>

ui/App/elements/Button.jsx

@@ -1,10 +1,24 @@
 import React from "react";
 
-const Button = () => {
+const Button = ({ children, type, onClick, isSubmit }) => {
+
+    let color = '';
+
+    switch (type) {
+        case 'success':
+            color = 'bg-green hover:bg-green-light';
+            break;
+        case 'danger':
+            color = 'bg-red hover:bg-red-light';
+            break;
+        default:
+            color = 'bg-gray-light hover:bg-orange'
+    }
+
     return (
-        <button className="bg-green hover:bg-green-light text-black font-bold py-2 px-4 w-full"
+        <button onClick={onClick} className={color + '  text-black font-bold py-2 px-4 w-full'}
-                type="submit">
+                type={isSubmit ? 'submit' : 'button'}>
-            Sign In
+            {children}
         </button>
     );
 }

ui/App/views/Login.jsx

@@ -57,7 +57,7 @@ const Login = ({handleLogin}) => {
                         {errors.password && <span className="block text-red">Password is required</span>}
                     </div>
                     <div className="text-center">
-                        <Button/>
+                        <Button type="success" isSubmit={true}>Sign In</Button>
                     </div>
                 </div>
             </form>

ui/api/resources/user.js

@@ -8,5 +8,9 @@ export default {
     login: async data => {
         const response = await client.post('/api/login', JSON.stringify(data));
         return response.data;
+    },
+    logout: async () => {
+        const response = await client.get('/api/logout');
+        return response.data;
     }
 }