74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import { Spinner, Button } from 'react-bootstrap';
|
|
import ModalBox from './ModalBox.js';
|
|
import './App.css';
|
|
import './bootstrap.min.css';
|
|
|
|
|
|
class LogoffPage extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {logged_in: props.loggedIn, loading: false};
|
|
}
|
|
|
|
componentDidMount() {
|
|
fetch(this.props.targetUrl + '/status', {credentials: 'include'})
|
|
.then(response => response.json())
|
|
.then(data => this.setState({
|
|
loggedIn: data.logged_in
|
|
}));
|
|
}
|
|
|
|
handleToggle = (event) => {
|
|
this.setState({loading: true})
|
|
|
|
fetch(this.props.targetUrl + '/logout', {
|
|
method: 'POST',
|
|
credentials: 'include'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => this.setState({
|
|
loggedIn: data.logged_in, loading: false
|
|
}));
|
|
}
|
|
|
|
buttonValue() {
|
|
if (this.state.loggedIn) {
|
|
return "LOGOUT";
|
|
} else {
|
|
return "LOGIN";
|
|
}
|
|
}
|
|
|
|
dynButton() {
|
|
const logout = (
|
|
<ModalBox
|
|
title="Logoff"
|
|
data=<Button variant="primary" type="button" onClick={this.handleToggle}>{this.buttonValue()}</Button>
|
|
/>
|
|
);
|
|
|
|
const loading =
|
|
<ModalBox
|
|
title="Logout"
|
|
data=<Spinner animation="border" variant="primary" />
|
|
/>;
|
|
|
|
if (this.state.loading) {
|
|
return loading;
|
|
} else {
|
|
return logout;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.state.loggedIn) {
|
|
return this.dynButton();
|
|
} else {
|
|
return (<ModalBox title="Logout" data=<h2>You have to login first!</h2> />);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default LogoffPage;
|