Improved styling in web app.

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> />);
         }
     }
 }

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>
         );

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,8 +63,9 @@ class LoginForm extends React.Component {
 
     dynForm() {
         const form =
-            <div className="container">
-            <h2>Login Form</h2>
+            <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" />
@@ -75,12 +77,13 @@ class LoginForm extends React.Component {
 
                     <Button variant="primary" type="submit">Send</Button>
                     </Form>
-            </div>;
+            />;
 
         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>);

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> />);
         }
     }
 }

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;

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> />);
         }
     }
 }