aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/app
diff options
context:
space:
mode:
authorxuegao <xg353y@intl.att.com>2019-07-09 11:52:20 +0200
committerxuegao <xg353y@intl.att.com>2019-07-10 11:58:56 +0200
commit7c7323d8ec54e65ac7a9a5e8c7cd8bdc755ea70a (patch)
tree7f77ec10c6f9bd3b13f6c94978477ee3323b9a41 /ui-react/src/components/app
parentc8d6130e6355a6f8f460c114ed7bac0221eb0020 (diff)
Create login page and add wiki/contact item
Create the login page for Clamp Ui; Add wiki/contact page which chould be selected from the menu bar. Issue-ID: CLAMP-416, CLAMP-417 Change-Id: Idddafd9c59a1e4d2897e962c831060e55083025c Signed-off-by: xuegao <xg353y@intl.att.com>
Diffstat (limited to 'ui-react/src/components/app')
-rw-r--r--ui-react/src/components/app/LoopUI.js5
-rw-r--r--ui-react/src/components/app/NotFound.js36
-rw-r--r--ui-react/src/components/app/login/BasicAuthLogin.js117
-rw-r--r--ui-react/src/components/app/login/LoginFailedPage.js35
-rw-r--r--ui-react/src/components/app/login/LoginPage.js48
5 files changed, 238 insertions, 3 deletions
diff --git a/ui-react/src/components/app/LoopUI.js b/ui-react/src/components/app/LoopUI.js
index d0f5aa32..7de6ad01 100644
--- a/ui-react/src/components/app/LoopUI.js
+++ b/ui-react/src/components/app/LoopUI.js
@@ -70,8 +70,7 @@ const LoopViewLoopNameSpanStyle = styled.span`
`
export default class LoopUI extends React.Component {
-
- user = "testuser";
+
loopName="Empty (NO loop loaded yet)";
renderMenuNavBar() {
@@ -83,7 +82,7 @@ export default class LoopUI extends React.Component {
renderUserLoggedNavBar() {
return (
<Navbar.Text>
- Signed in as: <a href="login">{this.user}</a>
+ Signed in as: <a href="login">{localStorage.getItem('user')}</a>
</Navbar.Text>
);
}
diff --git a/ui-react/src/components/app/NotFound.js b/ui-react/src/components/app/NotFound.js
new file mode 100644
index 00000000..d4b53fd7
--- /dev/null
+++ b/ui-react/src/components/app/NotFound.js
@@ -0,0 +1,36 @@
+/*-
+ * ============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 NotFound extends React.Component {
+ render () {
+ return (
+ <div id='main'>
+ <div class="divRow"><b>Page Not Found!</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/BasicAuthLogin.js b/ui-react/src/components/app/login/BasicAuthLogin.js
new file mode 100644
index 00000000..994255cd
--- /dev/null
+++ b/ui-react/src/components/app/login/BasicAuthLogin.js
@@ -0,0 +1,117 @@
+/*-
+ * ============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
new file mode 100644
index 00000000..fb398efd
--- /dev/null
+++ b/ui-react/src/components/app/login/LoginFailedPage.js
@@ -0,0 +1,35 @@
+/*-
+ * ============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
new file mode 100644
index 00000000..5169435c
--- /dev/null
+++ b/ui-react/src/components/app/login/LoginPage.js
@@ -0,0 +1,48 @@
+/*-
+ * ============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>);
+}
+}