basics of a password page on startup

api/settings.php

@@ -0,0 +1,17 @@
+<?php
+require 'Database.php';
+
+$conn = Database::getInstance()->getConnection();
+
+
+if (isset($_POST['action'])) {
+    $action = $_POST['action'];
+    switch ($action) {
+        case "isPasswordNeeded":
+            echo '{"password": true}';
+            break;
+        case "checkPassword":
+
+            break;
+    }
+}

src/App.js

@@ -7,11 +7,13 @@ import RandomPage from "./pages/RandomPage/RandomPage";
 import 'bootstrap/dist/css/bootstrap.min.css';
 import SettingsPage from "./pages/SettingsPage/SettingsPage";
 import CategoryPage from "./pages/CategoryPage/CategoryPage";
+import {Spinner} from "react-bootstrap";
+import LoginPage from "./pages/LoginPage/LoginPage";
 
 class App extends React.Component {
     constructor(props, context) {
         super(props, context);
-        this.state = {page: "default"};
+        this.state = {page: "unverified"};
 
         // bind this to the method for being able to call methods such as this.setstate
         this.showVideo = this.showVideo.bind(this);
@@ -42,12 +44,42 @@ class App extends React.Component {
         } else if (this.state.page === "lastpage") {
             // return back to last page
             page = this.mypage;
+        } else if (this.state.page === "loginpage") {
+            // return back to last page
+            page = <LoginPage/>;
+        } else if (this.state.page === "unverified") {
+            // return back to last page
+            page =
+                <div className='loadSpinner'>
+                    <Spinner style={{marginLeft: "40px", marginBottom: "20px"}} animation="border" role="status">
+                        <span className="sr-only">Loading...</span>
+                    </Spinner>
+                    <div>Content loading...</div>
+                </div>;
         } else {
             page = <div>unimplemented yet!</div>;
         }
         return (page);
     }
 
+    componentDidMount() {
+        const updateRequest = new FormData();
+        updateRequest.append("action", "isPasswordNeeded");
+
+        fetch('/api/settings.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                        if (result.password === false) {
+                            this.setState({page: "default"});
+                        } else {
+                            this.setState({page: "loginpage"});
+                        }
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+
     render() {
         return (
             <div className="App">

src/css/App.css

@@ -10,3 +10,8 @@
 .nav-link:hover {
     color: rgba(255, 255, 255, 1);
 }
+
+.loadSpinner {
+    margin-top: 200px;
+    margin-left: 50%;
+}

src/pages/LoginPage/LoginPage.js

@@ -0,0 +1,60 @@
+import React from "react";
+import {Form} from "react-bootstrap";
+
+class LoginPage extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+
+        this.props = props;
+    }
+
+    render() {
+        return (
+            <>
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Login Page</span>
+                    <span className='pageheadersubtitle'>type correct password!</span>
+                    <hr/>
+                </div>
+                <div style={{marginLeft: "35%", width: "400px", marginTop: "100px"}}>
+                    <Form.Group>
+                        <Form.Label>Password</Form.Label>
+                        <Form.Control id='passfield' type="password" placeholder="Enter Password" onChange={(v) => {
+                            this.password = v.target.value
+                        }}/>
+                        <Form.Text className="text-muted">
+                            You can disable/enable this feature on settingspage.
+                        </Form.Text>
+                        <hr/>
+                        <button className='btn btn-success' type='submit' onClick={() => this.checkPassword()}>Submit
+                        </button>
+                    </Form.Group>
+                </div>
+
+            </>
+        );
+    }
+
+    checkPassword() {
+        const updateRequest = new FormData();
+        updateRequest.append("action", "checkPassword");
+        updateRequest.append("password", this.state.password);
+
+        fetch('/api/settings.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    if (result.correct) {
+                        // todo 2020-06-18: call a callback to return back to right page
+                    } else {
+                        // error popup
+                    }
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+}
+
+export default LoginPage;

src/pages/SettingsPage/SettingsPage.js

@@ -34,7 +34,10 @@ class SettingsPage extends React.Component {
         if (this.myinterval) {
             clearInterval(this.myinterval);
         }
+        // todo 2020-06-18: maybe not start on mount
         this.myinterval = setInterval(this.updateStatus, 1000);
+
+        // todo 2020-06-18: fetch path data here
     }
 
     componentWillUnmount() {