Compare commits

...

1 Commits

Author SHA1 Message Date
8c9f3aecd8 basics of a password page on startup 2020-06-18 21:34:34 +02:00
5 changed files with 118 additions and 1 deletions

17
api/settings.php Normal file
View File

@ -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;
}
}

View File

@ -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">

View File

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

View File

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

View File

@ -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() {