Introduce modal

Test Modal for Operational policy and use react-router to show it

Issue-ID: CLAMP-415
Change-Id: Ie0df5f1085925224076062c7d331dc2f4c72d032
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

4 files changed, 37 insertions, 219 deletions

diff --git a/ui-react/src/components/app/LoopUI.js b/ui-react/src/components/app/LoopUI.js
index 7de6ad01b..d058543a2 100644
--- a/ui-react/src/components/app/LoopUI.js
+++ b/ui-react/src/components/app/LoopUI.js
@@ -31,14 +31,15 @@ import { GlobalClampStyle } from '../../theme/globalStyle.js';
 import ClosedLoopSvg from '../loop_viewer/svg/ClosedLoopSvg';
 import ClosedLoopLogs from '../loop_viewer/logs/ClosedLoopLogs';
 import ClosedLoopStatus from '../loop_viewer/status/ClosedLoopStatus';
+import UserService from '../backend_communication/UserService';
 
-const ProjectNameStyle = styled.a`
+const ProjectNameStyled = styled.a`
 	vertical-align: middle;
 	padding-left: 30px;
 	font-size: 30px;
 
 `
-const LoopViewDivStyle = styled.div`
+const LoopViewDivStyled = styled.div`
 	height: 90vh;
 	overflow: hidden;
 	margin-left: 10px;
@@ -50,52 +51,69 @@ const LoopViewDivStyle = styled.div`
 	border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
 `
 
-const LoopViewHeaderDivStyle = styled.div`
+const LoopViewHeaderDivStyled = styled.div`
 	background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
 	padding: 10px 10px;
 	color: ${props => props.theme.loopViewerHeaderFontColor};
 `
 
-const LoopViewBodyDivStyle = styled.div`
+const LoopViewBodyDivStyled = styled.div`
 	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
 	padding: 10px 10px;
 	color: ${props => (props.theme.loopViewerHeaderFontColor)};
 	height: 95%;
 `
 
-const LoopViewLoopNameSpanStyle = styled.span`
+const LoopViewLoopNameSpanStyled = styled.span`
 	font-weight: bold;
 	color: ${props => (props.theme.loopViewerHeaderFontColor)};
 	background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
 `
 
 export default class LoopUI extends React.Component {
+	state = {
+		userName: null,
+		loopName: "Empty (NO loop loaded yet)",
+	};
 
-	loopName="Empty (NO loop loaded yet)";
+	constructor() {
+		super();
+		this.getUser = this.getUser.bind(this);
+	}
+
+ 	componentDidMount() {
+		 this.getUser();
+	 }
+
+	getUser() {
+		UserService.LOGIN().then(user => {
+			this.setState({userName:user})
+		});
+	}
 		
 	renderMenuNavBar() {
 		return (
 			<MenuBar />
 		);
 	}
-	
+
 	renderUserLoggedNavBar() {
 		return (
 			<Navbar.Text>
-				Signed in as: <a href="login">{localStorage.getItem('user')}</a>
+				Signed in as: <a href="/login">{this.state.userName}</a>
 			</Navbar.Text>
 		);
 	}
-	
+
 	renderLogoNavBar() {
 		return (
 			<Navbar.Brand>
 				<img height="50px" width="234px" src={logo} alt=""/>
-				<ProjectNameStyle>CLAMP</ProjectNameStyle>
+				<ProjectNameStyled>CLAMP</ProjectNameStyled>
 			</Navbar.Brand>
 		);
 	}
-	
+
 	renderNavBar() {
 		return (
 		<Navbar expand="lg">
@@ -108,34 +126,34 @@ export default class LoopUI extends React.Component {
 	
 	renderLoopViewHeader() {
 		return (
-			<LoopViewHeaderDivStyle>
-				Loop Viewer - <LoopViewLoopNameSpanStyle id="loop_name">{this.loopName}</LoopViewLoopNameSpanStyle> 
-			</LoopViewHeaderDivStyle>
+			<LoopViewHeaderDivStyled>
+				Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled> 
+			</LoopViewHeaderDivStyled>
 		);
 	}
 	
 	renderLoopViewBody() {
 		return (
-			<LoopViewBodyDivStyle>
+			<LoopViewBodyDivStyled>
 				<ClosedLoopSvg />
 				<ClosedLoopLogs />
 				<ClosedLoopStatus />
-			</LoopViewBodyDivStyle>
+			</LoopViewBodyDivStyled>
 		);
 	}
 	
 	renderLoopViewer() {
 		return (
-			<LoopViewDivStyle>
+			<LoopViewDivStyled>
 					{this.renderLoopViewHeader()}
 					{this.renderLoopViewBody()}
-			</LoopViewDivStyle>
+			</LoopViewDivStyled>
 	 		);
 	}
 	
 	render() {
 		return (
-				<div>
+			<div id="main_div">
 				 	<GlobalClampStyle />
 					{this.renderNavBar()}
 					{this.renderLoopViewer()}
diff --git a/ui-react/src/components/app/login/BasicAuthLogin.js b/ui-react/src/components/app/login/BasicAuthLogin.js
deleted file mode 100644
index 994255cd3..000000000
--- a/ui-react/src/components/app/login/BasicAuthLogin.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import styled from 'styled-components';
-import LoopService from '../../backend_communication/LoopService';
-
-const LoginHeaderStyle = styled.span`
-  font-size: 20px;
-  font-weight: bold;
-  padding-left: 10px;
-	color: ${props => props.theme.loopViewerHeaderFontColor};
-`
-const LoginDivStyle = styled.div`
-  font-size: 12px;
-	background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-	padding: 10px 10px;
-	color: ${props => props.theme.loopViewerHeaderFontColor};
-`
-const LoginSubmitButtonStyle = styled.button`
-  font-size: 12px;
-	padding: 5px 10px;
-	color: ${props => props.theme.loopViewerHeaderFontColor};
-  border: 2px solid;
-  border-radius: 8px;
-`
-const LoginTextInputStyle = styled.input`
-  padding: 10px 10px;
-  margin-left: 20px;
-  border: 1px solid #ced4da;
-  border-radius: 3px;
-	color: ${props => props.theme.loopViewerHeaderFontColor};
-`
-
-export default class BasicAuthLogin extends React.Component {
-    constructor(props) {
-        super(props);
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.handleChange = this.handleChange.bind(this);
-        console.log('BasicAuthLogin');
-        this.state = {
-            username: '',
-            password: '',
-            submitted: 'false'
-        };
-    }
-
-    handleChange(e) {
-        const { name, value } = e.target;
-        this.setState({ [name]: value });
-    }
-
-    handleSubmit(e) {
-            e.preventDefault();
-            this.setState({ submitted: true });
-            const { username, password } = this.state;
-            LoopService.login(username, password)
-            .then(
-              user => {
-                  const { from } = { from: { pathname: "/" } };
-                  this.props.history.push(from);
-              },
-              error => {
-                  const { from } = { from: { pathname: "/loginFailed" } };
-                  this.props.history.push(from);
-                  console.log ("Basic login failed");
-              }
-        );
-    }
-
-    render() {
-      const { username, password, submitted} = this.state;
-        return (
-            <div>
-                <LoginHeaderStyle>Login</LoginHeaderStyle>
-                <form name="form" onSubmit={this.handleSubmit}>
-                    <LoginDivStyle className={(submitted && !username ? ' has-error' : '')}>
-                        <label htmlFor="username">Username</label>
-                        <LoginTextInputStyle name="username" value={username} onChange={this.handleChange} />
-                        {submitted && !username &&
-                            <div className="help-block">Username is required</div>
-                        }
-                    </LoginDivStyle>
-                    <LoginDivStyle className={(submitted && !password ? ' has-error' : '')}>
-                        <label htmlFor="password">Password</label>
-                        <LoginTextInputStyle type="password" name="password" value={password} onChange={this.handleChange} />
-                        {submitted && !password &&
-                            <div className="help-block">Password is required</div>
-                        }
-                    </LoginDivStyle>
-                    <LoginDivStyle>
-                        <LoginSubmitButtonStyle className="btn btn-primary">Login</LoginSubmitButtonStyle>
-                    </LoginDivStyle>
-                </form>
-            </div>
-        );
-    }
-}
diff --git a/ui-react/src/components/app/login/LoginFailedPage.js b/ui-react/src/components/app/login/LoginFailedPage.js
deleted file mode 100644
index fb398efd3..000000000
--- a/ui-react/src/components/app/login/LoginFailedPage.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react'
-
-
-export default class LoginFailedPage extends React.Component {
-	render () {
-		return (
-      		<div id='main'>
-      			<div class="divRow"><b>Login Failed!</b></div>
-      			<div class="divRow">Please cick <a href="/">here</a> to go back to the main page.</div>
-      		</div>
-		);
-	}
-}
diff --git a/ui-react/src/components/app/login/LoginPage.js b/ui-react/src/components/app/login/LoginPage.js
deleted file mode 100644
index 5169435c2..000000000
--- a/ui-react/src/components/app/login/LoginPage.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-
-import LoopService from '../../backend_communication/LoopService';
-
-export default class LoginPage extends React.Component {
-    constructor(props) {
-        super(props);
-        console.log('LoginPage')
-        LoopService.login().then(
-                user => {
-                    const { from } = { from: { pathname: "/" } };
-                    this.props.history.push(from);
-                },
-                error => {
-                  const { from } = { from: { pathname: "/" } };
-                  this.props.history.push(from);
-                  console.log ("Certification login failed");
-                }
-            );
-    }
-    render() {
-      return (
-        <div>
-  			</div>);
-}
-}