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>
diff --git a/ui-react/src/components/app/LoopUI.js b/ui-react/src/components/app/LoopUI.js
index 7de6ad0..d058543 100644
--- a/ui-react/src/components/app/LoopUI.js
+++ b/ui-react/src/components/app/LoopUI.js
@@ -31,14 +31,15 @@
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 @@
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 @@
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 994255c..0000000
--- 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 fb398ef..0000000
--- 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 5169435..0000000
--- 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>);
-}
-}