124 lines
4.5 KiB
JavaScript
124 lines
4.5 KiB
JavaScript
import React from 'react';
|
|
import {App} from './App';
|
|
import {baseURL} from './Meshify';
|
|
|
|
export class Auth extends React.Component{
|
|
constructor(props){
|
|
super(props);
|
|
|
|
this.state = {login: false};
|
|
this.login = this.login.bind(this);
|
|
this.logout = this.logout.bind(this);
|
|
this.getLogin = this.getLogin.bind(this);
|
|
this.handleAuthInput = this.handleAuthInput.bind(this);
|
|
}
|
|
|
|
handleAuthInput(e){
|
|
this.setState({[e.target.name]: e.target.value});
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getLogin();
|
|
}
|
|
|
|
logout(){
|
|
fetch(baseURL + 'logout', {credentials: 'include'}).then(()=>{
|
|
this.setState({login: false, meshifyUsername: null, meshifyPassword: null});
|
|
})
|
|
|
|
}
|
|
|
|
getLogin(){
|
|
console.log("getting login");
|
|
// this.setState({login: true, meshifyUsername: 'api@henry-pump.com'});
|
|
fetch(baseURL + 'login', {credentials: 'include'}).then((response)=>response.json())
|
|
.then((responseJson)=>{
|
|
// console.log(responseJson)
|
|
if (typeof responseJson.username !== 'undefined'){
|
|
this.setState({login: true, meshifyUsername: responseJson.username})
|
|
} else {
|
|
this.setState({login: false})
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
|
|
login(){
|
|
const authToken = "Basic " + btoa(this.state.meshifyUsername + ":" + this.state.meshifyPassword);
|
|
this.setState({authToken: authToken});
|
|
fetch(baseURL + 'login', {
|
|
method:'post',
|
|
credentials: 'include',
|
|
headers:{
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({username: this.state.meshifyUsername, authToken: authToken})
|
|
}).then((response)=>response.json())
|
|
.then((responseJson)=>{
|
|
// console.log(responseJson);
|
|
if (responseJson.status === "success"){
|
|
this.setState({login: true, meshifyUsername: responseJson.username})
|
|
} else if (responseJson.status === 'failure'){
|
|
alert(responseJson.reason);
|
|
}
|
|
// this.getLogin();
|
|
})
|
|
}
|
|
|
|
render() {
|
|
if(this.state.login){
|
|
return (
|
|
<div id="loggedInUser">
|
|
<nav className="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
|
|
<a className="navbar-brand" href="#">POCloud Reports</a>
|
|
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul className="navbar-nav mr-auto">
|
|
<li className="nav-item active">
|
|
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
|
|
</li>
|
|
</ul>
|
|
<form className="form-inline my-2 my-lg-0">
|
|
<button className="btn btn-outline-danger my-2 my-sm-0" type="button" onClick={this.logout}>Logout {this.state.meshifyUsername}</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<App />
|
|
</div>
|
|
)
|
|
} else {
|
|
return (
|
|
<div>
|
|
|
|
<nav className="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
|
|
<a className="navbar-brand" href="#">POCloud Reports</a>
|
|
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul className="navbar-nav mr-auto">
|
|
<li className="nav-item active">
|
|
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
|
|
</li>
|
|
</ul>
|
|
<form className="form-inline my-2 my-lg-0">
|
|
<input className="form-control mr-sm-2" type="email" name="meshifyUsername" onChange={this.handleAuthInput} placeholder="Email" />
|
|
<input className="form-control mr-sm-2" type="password" name="meshifyPassword" onChange={this.handleAuthInput} placeholder="Password" />
|
|
<button className="btn btn-outline-success my-2 my-sm-0" type="button" onClick={this.login}>Login</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
}
|