Logout with openid and simulator update
This commit is contained in:
Riddhi Dave
parent
1f776222c7
commit
46ec04029b
|
|
@ -0,0 +1 @@
|
|||
node_modules/
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import Navigationbar from './Navigationbar';
|
||||
import Comp_image from './Comp_image';
|
||||
import { Redirect, withRouter, Route, NavLink, Navbar, BrowserRouter as Router, Switch } from 'react-router-dom'
|
||||
import { Redirect, withRouter, Route, NavLink, Navbar, BrowserRouter as Router, Switch} from 'react-router-dom'
|
||||
import './App.css';
|
||||
import header from '../images/spiri_logo.jpg';
|
||||
import logo from '../images/spiri.png';// Tell Webpack this JS file uses this image
|
||||
|
|
@ -11,8 +11,6 @@ import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
|
|||
import axios from 'axios';
|
||||
import LoadingOverlay from 'react-loading-overlay';
|
||||
import { thisExpression } from '@babel/types';
|
||||
//import { withAuth } from '@okta/okta-react';
|
||||
|
||||
|
||||
class App extends Component{
|
||||
state = {
|
||||
|
|
@ -20,7 +18,8 @@ class App extends Component{
|
|||
isAuthenticated: false,
|
||||
user: undefined,
|
||||
launch: false,
|
||||
isNavbar: false
|
||||
isNavbar: false,
|
||||
url: ""
|
||||
};
|
||||
|
||||
constructor(props){
|
||||
|
|
@ -30,12 +29,11 @@ class App extends Component{
|
|||
this.state.csrfToken = cookies.get('XSRF-TOKEN');
|
||||
console.log(this.state.csrfToken);
|
||||
this.local = "localhost:8080";
|
||||
this.prod = "174.138.41.124:8080";
|
||||
this.prod = "174.138.41.124";
|
||||
this.status = "local"
|
||||
if (this.status === "local") {
|
||||
this.ip = this.local;
|
||||
}
|
||||
this.yourOktaDomain = "dev-125890.okta.com";
|
||||
this.simulatorWindow = null;
|
||||
this.shellWindow = null;
|
||||
this.routeLogin = this.routeLogin.bind(this);
|
||||
|
|
@ -45,33 +43,26 @@ class App extends Component{
|
|||
this.submit = this.submit.bind(this);
|
||||
this.getSimulator = this.settingsSimulator.bind(this);
|
||||
this.launchSimulator = this.launchSimulator.bind(this);
|
||||
this.handleUrl = this.handleUrl.bind(this);
|
||||
this.attach = this.attach.bind(this);
|
||||
this.heartbeat = this.heartbeat.bind(this);
|
||||
this.wait = this.wait.bind(this);
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
console.log("hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
|
||||
async componentDidMount() {
|
||||
const response = await fetch(`http://${this.ip}/api/user`, {credentials: 'include'});
|
||||
console.log(response.ok);
|
||||
console.log("999999999999999999999999999999999999999");
|
||||
const body = await response.text();
|
||||
console.log("-----------------------");
|
||||
console.log(response.ok)
|
||||
console.log("-----------------------");
|
||||
if (body === '') {
|
||||
this.setState(({isAuthenticated: false}))
|
||||
this.login()
|
||||
} else {
|
||||
this.setState({isAuthenticated: true, user: JSON.parse(body)})
|
||||
}
|
||||
console.log(this.state.isAuthenticated);
|
||||
|
||||
console.log(this.state.user);
|
||||
console.log("########################################");
|
||||
console.log(this.state.isAuthenticated);
|
||||
}
|
||||
|
||||
routeMain() {
|
||||
routeMain(){
|
||||
let path = '/';
|
||||
this.props.history.push(path);
|
||||
}
|
||||
|
|
@ -79,7 +70,6 @@ class App extends Component{
|
|||
login() {
|
||||
console.log(window.location)
|
||||
window.location.href = `//${this.ip}/task/list`;
|
||||
//window.location.href = `//${this.ip}/private`;
|
||||
}
|
||||
wait(ms){
|
||||
var start = new Date().getTime();
|
||||
|
|
@ -93,20 +83,16 @@ class App extends Component{
|
|||
let path = '/';
|
||||
this.props.history.push(path);
|
||||
}
|
||||
|
||||
//http://174.138.41.124:8080/api/logout
|
||||
//https://${this.yourOktaDomain}/api/v1/users/${this.state.user.sub}/sessions
|
||||
|
||||
async logout() {
|
||||
//const proxyurl = `https://cors-anywhere.herokuapp.com/`;
|
||||
//const proxyurl = `https://arcane-beach-51923.herokuapp.com/`;
|
||||
|
||||
//fetch(`https://${this.yourOktaDomain}/api/v1/users/${this.state.user.sub}/sessions`,
|
||||
fetch(`https://${this.yourOktaDomain}/api/v1/sessions/me`,
|
||||
async logout() {
|
||||
fetch(`http://localhost:8080/api/logout`,
|
||||
{
|
||||
method : 'DELETE',
|
||||
//credentials: 'same-origin'
|
||||
method : 'GET',
|
||||
mode: 'no-cors',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then((response) => response)
|
||||
.then((json) => {
|
||||
|
|
@ -125,19 +111,12 @@ class App extends Component{
|
|||
console.log(this.state.isAuthenticated);
|
||||
})
|
||||
.then(reponse => {
|
||||
window.location.href = "http://localhost:8080/api/logout";
|
||||
window.location.href = "https://localhost:8433/openid/end-session";
|
||||
})
|
||||
.then(reponse => {
|
||||
this.wait(3000);
|
||||
window.location.href = "http://localhost:3006/";
|
||||
});
|
||||
|
||||
|
||||
|
||||
//window.location.href = `http://localhost:8080/api/logout`;
|
||||
|
||||
console.log("YYYYYYYYYYYYYYYYYYYYYYYYYY");
|
||||
console.log("YYYYYYYYYYYYYYYYYYYYYYYYYY");
|
||||
});
|
||||
}
|
||||
|
||||
submit() {
|
||||
|
|
@ -166,84 +145,94 @@ class App extends Component{
|
|||
fetch(`http://${this.ip}/simulator/logheartbeat/${this.state.user.sub}`, {credentials: 'include'})
|
||||
.then((response) => response.json())
|
||||
.then((responseData) =>
|
||||
{
|
||||
|
||||
{
|
||||
console.log("Heart Beating")
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
launchSimulator(urlAction) {
|
||||
//launchSimulator() {
|
||||
const url = urlAction;
|
||||
//const url = "http://localhost";
|
||||
window.location.href = "http://localhost:3006/simulator";
|
||||
//this.simulatorWindow = window.open(url + ":8888", '_blank');
|
||||
//this.shellWindow = window.open(url + ":4200", '_self');
|
||||
}
|
||||
|
||||
settingsSimulator(launch) {
|
||||
if (launch){
|
||||
const httpClient = axios.create();
|
||||
httpClient.defaults.timeout = 600000;
|
||||
|
||||
// TODO : detach the heartbeat
|
||||
|
||||
httpClient.get(`http://${this.ip}/simulator/stop/${this.state.user.sub}`, { withCredentials: true })
|
||||
.then(res => {
|
||||
this.setState({launch: false});
|
||||
})
|
||||
}
|
||||
else {
|
||||
this.setState({isLoading : true, launch: true});
|
||||
this.attach(this.state.launch);
|
||||
|
||||
const httpClient = axios.create();
|
||||
httpClient.defaults.timeout = 600000;
|
||||
|
||||
httpClient.get(`http://${this.ip}/simulator/start/${this.state.user.sub}/${this.state.user.given_name}/spiri-friend2019@`, { withCredentials: true })
|
||||
.then(res => {
|
||||
this.setState({simulator: res.data, isLoading: false});
|
||||
this.launchSimulator(this.state.simulator.publicIp);
|
||||
})
|
||||
this.launchSimulator();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const options = this.state.isAuthenticated ? (
|
||||
<div id="navbar" class="navbar-collapse">
|
||||
<ul>
|
||||
<Navigationbar submit={this.submit}/>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
):(
|
||||
|
||||
//launchSimulator() {
|
||||
this.url = urlAction;
|
||||
//const url = "http://localhost";
|
||||
|
||||
<div id="navbar" class="navbar-collapse">
|
||||
<div class="SpiriHeader">
|
||||
<a class="Brand" href="/">
|
||||
<img align="left" src={header} width={'70cm'} height={'70cm'} />
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink style={{ textDecoration: 'none' }} onClick={this.login} class="login" to="">
|
||||
Login
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
window.location.href = "/simulator";
|
||||
//this.simulatorWindow = window.open(url + ":8888", '_blank');
|
||||
//this.shellWindow = window.open(url + ":4200", '_self');
|
||||
|
||||
}
|
||||
handleUrl = (urlValue) => {
|
||||
this.setState({url: urlValue});
|
||||
}
|
||||
settingsSimulator(launch) {
|
||||
if (launch){
|
||||
const httpClient = axios.create();
|
||||
httpClient.defaults.timeout = 600000;
|
||||
|
||||
// TODO : detach the heartbeat
|
||||
|
||||
httpClient.get(`http://${this.ip}/simulator/stop/${this.state.user.sub}`, { withCredentials: true })
|
||||
.then(res => {
|
||||
this.setState({launch: false});
|
||||
})
|
||||
}
|
||||
else {
|
||||
this.setState({isLoading : true, launch: true});
|
||||
this.attach(this.state.launch);
|
||||
|
||||
const httpClient = axios.create();
|
||||
httpClient.defaults.timeout = 600000;
|
||||
|
||||
httpClient.get(`http://${this.ip}/simulator/start/${this.state.user.sub}/${this.state.user.given_name}/spiri-friend2019@`, { withCredentials: true })
|
||||
.then(res => {
|
||||
this.setState({simulator: res.data, isLoading: false, url: this.state.simulator.publicIp });
|
||||
this.launchSimulator(this.state.simulator.publicIp);
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const options = this.state.isAuthenticated ?
|
||||
(
|
||||
<div id="navbar" class="navbar-collapse">
|
||||
<ul>
|
||||
<Navigationbar submit={this.submit}/>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
||||
:
|
||||
(
|
||||
<div id="navbar" class="navbar-collapse">
|
||||
<div class="SpiriHeader">
|
||||
<a class="Brand" href="/">
|
||||
<img align="left" src={header} width={'70cm'} height={'70cm'} />
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink style={{ textDecoration: 'none' }} onClick={this.login} class="login" to="">
|
||||
Login
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
const launch_ = this.state.launch ?
|
||||
<div>
|
||||
<div id="sim">
|
||||
<iframe name="top_" src={'http://'+ this.state.url +':4200'} width="100%" height="375px" frameBorder="0"></iframe>
|
||||
<iframe name="bottom_" src={'http://'+ this.state.url +':8888'} width="100%" height="375px" frameBorder="0"></iframe>
|
||||
</div>
|
||||
</div>:
|
||||
<div class="SpiriImage">
|
||||
<img src={logo} width={'1000cm'} height={'563cm'} />
|
||||
</div>
|
||||
const simulator = this.state.isAuthenticated ?
|
||||
<div class="SimulatorButton">
|
||||
{/*<h2>Welcome, {this.state.user.name}!</h2>*/}
|
||||
|
|
@ -256,33 +245,21 @@ class App extends Component{
|
|||
</button>
|
||||
|
||||
</div> :
|
||||
null
|
||||
|
||||
const mainBody = <div>
|
||||
|
||||
null
|
||||
const mainBody = <div>
|
||||
{options}
|
||||
{simulator}
|
||||
<div class="SpiriImage">
|
||||
<img src={logo} width={'1000cm'} height={'563cm'} />
|
||||
</div>
|
||||
{launch_}
|
||||
|
||||
<div className="Text">
|
||||
<Comp_image/>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="App">
|
||||
{mainBody}
|
||||
</div>
|
||||
<footer>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="App">
|
||||
|
||||
|
||||
{mainBody}
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
)
|
||||
};
|
||||
}
|
||||
export default withRouter(withCookies(App));
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ class Comp_image extends Component{
|
|||
<div className="Comp_image">
|
||||
<div className="SpiriText">
|
||||
<br/>
|
||||
<b> Concours de drones, ENVOL</b>
|
||||
|
||||
<br/>
|
||||
<b>2019-2020</b>
|
||||
<b>2020-2021</b>
|
||||
<br/>
|
||||
<br/>
|
||||
<text>
|
||||
|
|
|
|||
|
|
@ -1,115 +0,0 @@
|
|||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.SpiriHeader {
|
||||
height: 150;
|
||||
width: 150;
|
||||
}
|
||||
|
||||
.navbar-collapse li {
|
||||
display: inline;
|
||||
padding-right: 40px;
|
||||
|
||||
}
|
||||
|
||||
.navbar-collapse li a{
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.navbar-collapse{
|
||||
background-color:white;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
font-size: larger;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a.Brand {
|
||||
height: 150;
|
||||
width: 150;
|
||||
}
|
||||
|
||||
.Brand {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SpiriImage {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.SimulatorButton {
|
||||
background-color: rgba(255, 255, 255, 0.233);
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-size: xx-large;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Set a style for the submit button */
|
||||
/*.SimulatorButton {
|
||||
background-color: rgb(8, 12, 14);
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
opacity: 0.5;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
.App {
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import Comp_image from './Comp_image';
|
||||
import { Redirect, withRouter, Route, NavLink, Navbar, BrowserRouter as Router, Switch } from 'react-router-dom'
|
||||
import './Final_login.css';
|
||||
import header from '../images/spiri_logo.jpg'; // Tell Webpack this JS file uses this image
|
||||
import logo from '../images/spiri.png'; // Tell Webpack this JS file uses this image
|
||||
import { withCookies } from 'react-cookie';
|
||||
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
|
||||
|
||||
|
||||
class Final_login extends Component{
|
||||
state = {
|
||||
isLoading: false,
|
||||
isAuthenticated: false,
|
||||
user: undefined,
|
||||
launch: false
|
||||
};
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
const {cookies} = props;
|
||||
console.log(cookies);
|
||||
this.state.csrfToken = cookies.get('XSRF-TOKEN');
|
||||
this.yourOktaDomain = "dev-125890.okta.com";
|
||||
this.local = "localhost:8080";
|
||||
this.prod = "174.138.41.124:8080";
|
||||
this.status = "local"
|
||||
if (this.status === "local") {
|
||||
this.ip = this.local;
|
||||
}
|
||||
this.simulatorWindow = null;
|
||||
this.shellWindow = null;
|
||||
this.login = this.login.bind(this);
|
||||
this.routeMain =this.routeMain.bind(this);
|
||||
}
|
||||
|
||||
routeMain() {
|
||||
let path = '/home';
|
||||
this.props.history.push(path);
|
||||
console.log("Inside");
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const response = await fetch(`http://${this.ip}/task/list`, {credentials: 'include'});
|
||||
|
||||
this.state.isAuthenticated = response.ok;
|
||||
console.log(response);
|
||||
console.log(response.ok);
|
||||
}
|
||||
|
||||
login() {
|
||||
console.log("hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
|
||||
|
||||
//console.log(response.ok);
|
||||
console.log("999999999999999999999999999999999999999");
|
||||
//const body = response
|
||||
console.log("-----------------------");
|
||||
//console.log(body )
|
||||
console.log("-----------------------");
|
||||
|
||||
|
||||
if (this.state.isAuthenticated) {
|
||||
console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAA")
|
||||
this.routeMain();
|
||||
// this.setState(({isAuthenticated: false}))
|
||||
} else {
|
||||
console.log("Empty");
|
||||
window.location.href = `//${this.ip}/task/list`;
|
||||
//this.setState({isAuthenticated: true, user: JSON.parse(body)})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const options = <div id="navbar" class="navbar-collapse">
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink style={{ textDecoration: 'none' }} onClick={this.login} class="login" to="/home" >
|
||||
Login
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
const mainBody =
|
||||
<div>
|
||||
<div class="SpiriHeader">
|
||||
<a class="Brand" href="/">
|
||||
<img src={header} width={'70cm'} height={'70cm'} />
|
||||
</a>
|
||||
{options}
|
||||
</div>
|
||||
|
||||
<div class="SpiriImage">
|
||||
<img src={logo} width={'1000cm'} height={'563cm'} />
|
||||
</div>
|
||||
|
||||
<div className="Text">
|
||||
<Comp_image/>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
{mainBody}
|
||||
</div>
|
||||
|
||||
)
|
||||
|
||||
};
|
||||
}
|
||||
export default withRouter(withCookies(Final_login));
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Redirect,withRouter } from 'react-router-dom';
|
||||
import LoginForm from './LoginForm';
|
||||
import { withAuth } from '@okta/okta-react';
|
||||
|
||||
export default withRouter(withAuth(class Login extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { authenticated: null };
|
||||
this.checkAuthentication = this.checkAuthentication.bind(this);
|
||||
this.checkAuthentication();
|
||||
}
|
||||
|
||||
async checkAuthentication() {
|
||||
const authenticated = await this.props.auth.isAuthenticated();
|
||||
if (authenticated !== this.state.authenticated) {
|
||||
this.setState({ authenticated });
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.checkAuthentication();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.authenticated === null) return null;
|
||||
return this.state.authenticated ? <Redirect to={{ pathname: '/' }}/> : <LoginForm baseUrl={this.props.baseUrl} />;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.LoginForm {
|
||||
/* The image used */
|
||||
background-image: url("spiri_bridge.png");
|
||||
margin-top: 10em;
|
||||
margin-left: 2em;
|
||||
margin-right: 20em;
|
||||
|
||||
/* Control the height of the image */
|
||||
min-height: 500px;
|
||||
|
||||
/* Center and scale the image nicely */
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Add styles to the form container */
|
||||
.container {
|
||||
margin-left: 60em;
|
||||
max-width: 600px;
|
||||
padding: 16px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Full-width input fields */
|
||||
input[type=text], input[type=password] {
|
||||
width: 200%;
|
||||
padding: 15px;
|
||||
margin: 5px 0 22px 0;
|
||||
border: none;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=password]:focus {
|
||||
background-color: #ddd;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Set a style for the submit button */
|
||||
.btn {
|
||||
background-color: rgb(8, 12, 14);
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import OktaAuth from '@okta/okta-auth-js';
|
||||
import { withAuth } from '@okta/okta-react';
|
||||
import './LoginForm.css';
|
||||
|
||||
|
||||
export default withAuth(class LoginForm extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sessionToken: null,
|
||||
username: '',
|
||||
password: '',
|
||||
}
|
||||
|
||||
this.oktaAuth = new OktaAuth({ url: props.baseUrl });
|
||||
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
||||
this.handlePasswordChange = this.handlePasswordChange.bind(this);
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
this.oktaAuth.signIn({
|
||||
username: this.state.username,
|
||||
password: this.state.password
|
||||
})
|
||||
.then(res => this.setState({
|
||||
sessionToken: res.sessionToken
|
||||
}))
|
||||
.catch(err => console.log('Found an error', err));
|
||||
}
|
||||
|
||||
handleUsernameChange(e) {
|
||||
this.setState({username: e.target.value});
|
||||
}
|
||||
|
||||
handlePasswordChange(e) {
|
||||
this.setState({password: e.target.value});
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
if (this.state.sessionToken) {
|
||||
this.props.auth.redirect({sessionToken: this.state.sessionToken});
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="LoginForm">
|
||||
<form onSubmit={this.handleSubmit} className="container">
|
||||
<h1>Login</h1>
|
||||
<label>
|
||||
Username:
|
||||
<br></br>
|
||||
<input
|
||||
id="username" type="text"
|
||||
value={this.state.username}
|
||||
onChange={this.handleUsernameChange} />
|
||||
<br></br>
|
||||
Password:
|
||||
<input
|
||||
id="password" type="password"
|
||||
value={this.state.password}
|
||||
onChange={this.handlePasswordChange} />
|
||||
</label>
|
||||
<input className="btn" id="submit" type="submit" value="Submit" />
|
||||
</form>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.Logoutpage {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
text-align: right;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
import { withAuth } from '@okta/okta-react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import './Logout.css';
|
||||
import { confirmAlert } from 'react-confirm-alert'; // Import
|
||||
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
|
||||
|
||||
export default withRouter(withAuth(class Logout extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { authenticated: null };
|
||||
this.checkAuthentication = this.checkAuthentication.bind(this);
|
||||
this.routeChange = this.routeChange.bind(this);
|
||||
this.submit = this.submit(this);
|
||||
this.checkAuthentication();
|
||||
}
|
||||
|
||||
async checkAuthentication() {
|
||||
const authenticated = await this.props.auth.isAuthenticated();
|
||||
if (authenticated !== this.state.authenticated) {
|
||||
this.setState({ authenticated });
|
||||
}
|
||||
}
|
||||
|
||||
routeChange() {
|
||||
let path = '/';
|
||||
this.props.history.push(path);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.checkAuthentication();
|
||||
}
|
||||
|
||||
submit() {
|
||||
confirmAlert({
|
||||
title: 'Confirm to logout',
|
||||
message: 'Are you sure?',
|
||||
buttons: [
|
||||
{
|
||||
label: 'Yes',
|
||||
onClick: () => this.props.auth.logout()
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
onClick: () => this.routeChange()
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
if ((this.state.authenticated === null ) || (this.state.authenticated === false))
|
||||
return (
|
||||
<div>
|
||||
<h1> You are not logged in </h1>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
null
|
||||
);
|
||||
}
|
||||
}));
|
||||
|
|
@ -26,17 +26,6 @@ class Navigationbar extends Component {
|
|||
Progress
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link style={{ textDecoration: 'none' }} class="tasks" to="/tasks">
|
||||
Tasks
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link style={{ textDecoration: 'none' }} class="tasks" to="/">
|
||||
Simulator
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink style={{ textDecoration: 'none' }} onClick={this.props.submit} class="logout" to="/">
|
||||
Logout
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
#sim {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/* Size properties */
|
||||
padding-top: 5px;
|
||||
/* Font properties */
|
||||
color: #FFFFFF;
|
||||
font-size: 80%;
|
||||
/* Create a gradient */
|
||||
background-color: #418CE5;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418CE5', endColorstr='#256EC6');
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#418CE5), to(#256EC6));
|
||||
background: -moz-linear-gradient(top, #418CE5, #256EC6);
|
||||
/* Links are not allowed on another line */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#sim a:link, #ovoMenu a:visited, #ovoMenu a:active, #ovoMenu a:hover {
|
||||
color: #FFFFFF;
|
||||
/* Corners */
|
||||
-moz-border-radius-topleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
/* Size */
|
||||
margin-left: 12px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
/* Display it as a block */
|
||||
display: inline-block;
|
||||
/* Height of the link */
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
/* No underline */
|
||||
text-decoration: none;
|
||||
/* No outline */
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#sim a:hover {
|
||||
/* Other background */
|
||||
background-color: #13529E;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#13529E', endColorstr='#084084');
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#13529E), to(#084084));
|
||||
background: -moz-linear-gradient(top, #13529E, #084084);
|
||||
}
|
||||
|
||||
#sim a.active:link, #ovoMenu a.active:visited, #ovoMenu a.active:active, #ovoMenu a.active:hover {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
background: none;
|
||||
background-color: #E9E9E9;
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Button, ButtonGroup, Container, Table } from 'reactstrap';
|
||||
import { Link, withRouter } from 'react-router-dom';
|
||||
import { withCookies, Cookies } from 'react-cookie';
|
||||
import { instanceOf } from 'prop-types';
|
||||
import Navigationbar from './Navigationbar';
|
||||
|
||||
|
||||
class Simulator extends Component {
|
||||
static propTypes = {
|
||||
cookies: instanceOf(Cookies).isRequired
|
||||
};
|
||||
|
||||
state = {
|
||||
isLoading: true,
|
||||
isAuthenticated: false,
|
||||
user: undefined,
|
||||
simulator: undefined
|
||||
};
|
||||
|
||||
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<div>
|
||||
<Navigationbar/>
|
||||
<div id="sim">
|
||||
<iframe name="top_" src="http://174.138.41.124:4200" width="100%" height="375px" frameBorder="0"></iframe>
|
||||
<iframe name="bottom_" src="http://174.138.41.124:8080" width="100%" height="375px" frameBorder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
export default Simulator;
|
||||
Loading…
Reference in New Issue