From 21590435e719fb7059ba85357043b22a10eb579c Mon Sep 17 00:00:00 2001
From: Blallo <blallo@autistici.org>
Date: Tue, 6 Aug 2019 14:04:27 +0200
Subject: [PATCH] Improved styling in web app.

---
 bot.z_web/src/Badge.js     | 19 +++++++++++--------
 bot.z_web/src/IndexPage.js |  6 ++++--
 bot.z_web/src/LoginForm.js | 37 ++++++++++++++++++++-----------------
 bot.z_web/src/Logoff.js    | 21 +++++++++++----------
 bot.z_web/src/ModalBox.js  | 22 ++++++++++++++++++++++
 bot.z_web/src/Movements.js | 16 ++++++----------
 6 files changed, 74 insertions(+), 47 deletions(-)
 create mode 100644 bot.z_web/src/ModalBox.js

diff --git a/bot.z_web/src/Badge.js b/bot.z_web/src/Badge.js
index b502d80..7338db6 100644
--- a/bot.z_web/src/Badge.js
+++ b/bot.z_web/src/Badge.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import ModalBox from './ModalBox.js';
+import { Button, Spinner } from 'react-bootstrap';
 import './App.css';
-import './bootstrap.min.css';
 
 
 function isCheckedIn(movements) {
@@ -68,15 +69,17 @@ class BadgePage extends React.Component {
 
     dynButton() {
         const badge = (
-            <div>
-            <button type="button" className="btn btn-primary" onClick={this.handleToggle}>{this.buttonValue()}</button>
-            </div>
+            <ModalBox
+            title="Badge"
+            data={<Button variant="primary" type="button" onClick={this.handleToggle}>{this.buttonValue()}</Button>}
+            />
         );
 
         const loading =
-            <div className="spinner-border text-primary" role="status">
-              <span className="sr-only">Loading...</span>
-            </div>;
+            <ModalBox
+                title="Badge"
+                data=<Spinner animation="border" variant="primary" />
+            />;
 
         if (this.state.loading) {
             return loading;
@@ -89,7 +92,7 @@ class BadgePage extends React.Component {
         if (this.state.loggedIn) {
             return this.dynButton();
         } else {
-            return (<div><h2>You have to login first!</h2></div>);
+            return (<ModalBox title="Badge" data=<h2>You have to login first!</h2> />);
         }
     }
 }
diff --git a/bot.z_web/src/IndexPage.js b/bot.z_web/src/IndexPage.js
index d41ac92..411f48b 100644
--- a/bot.z_web/src/IndexPage.js
+++ b/bot.z_web/src/IndexPage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
-import {Nav, Navbar} from "react-bootstrap";
+import { Nav, Navbar, Container } from "react-bootstrap";
 import LoginForm from './LoginForm.js';
 import MovementsPage from './Movements.js';
 import BadgePage from './Badge.js';
@@ -27,7 +27,7 @@ class IndexPage extends React.Component {
             <Navbar.Brand href="/">BotZ</Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
-            <Nav className="mr-auto">
+            <Nav variant="tabs" className="mr-auto">
             <Nav.Item>
             <Nav.Link as='div' eventKey="login">
             <Link to='/login'>Login</Link>
@@ -52,12 +52,14 @@ class IndexPage extends React.Component {
             </Navbar.Collapse>
             </Navbar>
             <div>
+            <Container>
             <Switch>
             <Route path="/login" component={() => <LoginForm targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
             <Route path="/movements" component={() => <MovementsPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
             <Route path="/badge" component={() => <BadgePage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
             <Route path="/logout" component={() => <LogoffPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
             </Switch>
+            </Container>
             </div>
             </Router>
         );
diff --git a/bot.z_web/src/LoginForm.js b/bot.z_web/src/LoginForm.js
index 38900f2..015e2b0 100644
--- a/bot.z_web/src/LoginForm.js
+++ b/bot.z_web/src/LoginForm.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Form, Button } from 'react-bootstrap';
+import { Form, Button, Spinner } from 'react-bootstrap';
+import ModalBox from './ModalBox.js';
 import './App.css';
 
 class LoginForm extends React.Component {
@@ -62,25 +63,27 @@ class LoginForm extends React.Component {
 
     dynForm() {
         const form =
-            <div className="container">
-            <h2>Login Form</h2>
-            <Form onSubmit={this.handleSubmit}>
-            <Form.Group controlId="username">
-            <Form.Control onChange={this.handleUserChange} type="text" name="username" placeholder="Username" />
-            </Form.Group>
+            <ModalBox
+                title=<h2>Login Form</h2>
+                data=
+                    <Form onSubmit={this.handleSubmit}>
+                    <Form.Group controlId="username">
+                    <Form.Control onChange={this.handleUserChange} type="text" name="username" placeholder="Username" />
+                    </Form.Group>
 
-            <Form.Group controlId="password">
-            <Form.Control onChange={this.handlePasswordChange} type="password" name="password" placeholder="Password" />
-            </Form.Group>
+                    <Form.Group controlId="password">
+                    <Form.Control onChange={this.handlePasswordChange} type="password" name="password" placeholder="Password" />
+                    </Form.Group>
 
-            <Button variant="primary" type="submit">Send</Button>
-            </Form>
-            </div>;
+                    <Button variant="primary" type="submit">Send</Button>
+                    </Form>
+            />;
 
         const loading =
-            <div className="spinner-border text-primary" role="status">
-              <span className="sr-only">Loading...</span>
-            </div>;
+            <ModalBox
+                title="Login"
+                data=<Spinner animation="border" variant="primary" />
+            />;
 
         if (this.state.loading) {
             return loading;
@@ -95,7 +98,7 @@ class LoginForm extends React.Component {
 
     render() {
         if (this.state.loggedIn) {
-            return (<div><h2>Yet logged in!</h2></div>);
+            return (<ModalBox title="Login" data=<h2>Yet logged in!</h2> />);
         }
         if (this.state.error) {
             return (<div><h2>Error!</h2></div>);
diff --git a/bot.z_web/src/Logoff.js b/bot.z_web/src/Logoff.js
index 0574da3..458c938 100644
--- a/bot.z_web/src/Logoff.js
+++ b/bot.z_web/src/Logoff.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Spinner, Button } from 'react-bootstrap';
+import ModalBox from './ModalBox.js';
 import './App.css';
 import './bootstrap.min.css';
 
@@ -41,17 +42,17 @@ class LogoffPage extends React.Component {
 
     dynButton() {
         const logout = (
-            <Container >
-            <button type="button" className="btn btn-primary" onClick={this.handleToggle}>{this.buttonValue()}</button>
-            </Container>
+            <ModalBox
+                title="Logoff"
+                data=<Button variant="primary" type="button" onClick={this.handleToggle}>{this.buttonValue()}</Button>
+            />
         );
 
         const loading =
-            <Container>
-            <div className="spinner-border text-primary" role="status">
-              <span className="sr-only">Loading...</span>
-            </div>
-            </Container>;
+            <ModalBox
+                title="Logout"
+                data=<Spinner animation="border" variant="primary" />
+            />;
 
         if (this.state.loading) {
             return loading;
@@ -64,7 +65,7 @@ class LogoffPage extends React.Component {
         if (this.state.loggedIn) {
             return this.dynButton();
         } else {
-            return (<div><h2>You have to login first!</h2></div>);
+            return (<ModalBox title="Logout" data=<h2>You have to login first!</h2> />);
         }
     }
 }
diff --git a/bot.z_web/src/ModalBox.js b/bot.z_web/src/ModalBox.js
new file mode 100644
index 0000000..e56ada2
--- /dev/null
+++ b/bot.z_web/src/ModalBox.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import './App.css';
+
+
+class ModalBox extends React.Component {
+    render() {
+        return (
+            <Modal.Dialog>
+            <Modal.Header>
+            <Modal.Title>{this.props.title}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+            {this.props.data}
+            </Modal.Body>
+            </Modal.Dialog>
+        );
+    }
+
+}
+
+export default ModalBox;
diff --git a/bot.z_web/src/Movements.js b/bot.z_web/src/Movements.js
index 8f185da..0b92b71 100644
--- a/bot.z_web/src/Movements.js
+++ b/bot.z_web/src/Movements.js
@@ -1,10 +1,10 @@
 import React from 'react';
+import ModalBox from './ModalBox.js';
 import './App.css';
-import './bootstrap.min.css';
 
 
-const Empty = <h3>Empty</h3>;
-const Error = <h2>Error</h2>;
+const Empty = <ModalBox title="Movements" data=<h3>Empty</h3> />;
+const Error = <ModalBox title="Movements" data=<h3>Error</h3> />;
 
 
 class MovementsPage extends React.Component {
@@ -25,7 +25,7 @@ class MovementsPage extends React.Component {
     }
 
     handleTable() {
-        if (this.state.movements.length > 0) {
+        if (this.state.movements !== undefined) {
             return <ul>{this.state.movements.map(movs => <li key={movs.time}>{movs.time}&nbsp; - &nbsp;{movs.type}</li>)}</ul>;
         } else {
             return Empty;
@@ -33,11 +33,7 @@ class MovementsPage extends React.Component {
     }
 
     render() {
-        const movements =
-            <div>
-            <h2>Movements</h2>
-            {this.handleTable()}
-            </div>;
+        const movements = <ModalBox title="Movements" data={this.handleTable()} />;
 
         if (this.state.error) {
             return Error;
@@ -45,7 +41,7 @@ class MovementsPage extends React.Component {
         if (this.state.loggedIn) {
             return movements;
         } else {
-            return (<div><h2>You have to login first!</h2></div>);
+            return (<ModalBox title="Movements" data=<h2>You have to login first!</h2> />);
         }
     }
 }