diff options
Diffstat (limited to 'ui-react/src/components/app')
| -rw-r--r-- | ui-react/src/components/app/LoopUI.js | 56 | ||||
| -rw-r--r-- | ui-react/src/components/app/login/BasicAuthLogin.js | 117 | ||||
| -rw-r--r-- | ui-react/src/components/app/login/LoginFailedPage.js | 35 | ||||
| -rw-r--r-- | ui-react/src/components/app/login/LoginPage.js | 48 |
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 7de6ad01..d058543a 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 994255cd..00000000 --- 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 fb398efd..00000000 --- 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 5169435c..00000000 --- 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>); -} -} |