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>

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>);
+}
+}