2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2019 AT&T Intellectual Property. All rights
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END============================================
20 * ===================================================================
23 import React from 'react';
24 import styled from 'styled-components';
25 import LoopService from '../../backend_communication/LoopService';
27 const LoginHeaderStyle = styled.span`
31 color: ${props => props.theme.loopViewerHeaderFontColor};
33 const LoginDivStyle = styled.div`
35 background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
37 color: ${props => props.theme.loopViewerHeaderFontColor};
39 const LoginSubmitButtonStyle = styled.button`
42 color: ${props => props.theme.loopViewerHeaderFontColor};
46 const LoginTextInputStyle = styled.input`
49 border: 1px solid #ced4da;
51 color: ${props => props.theme.loopViewerHeaderFontColor};
54 export default class BasicAuthLogin extends React.Component {
57 this.handleSubmit = this.handleSubmit.bind(this);
58 this.handleChange = this.handleChange.bind(this);
59 console.log('BasicAuthLogin');
68 const { name, value } = e.target;
69 this.setState({ [name]: value });
74 this.setState({ submitted: true });
75 const { username, password } = this.state;
76 LoopService.login(username, password)
79 const { from } = { from: { pathname: "/" } };
80 this.props.history.push(from);
83 const { from } = { from: { pathname: "/loginFailed" } };
84 this.props.history.push(from);
85 console.log ("Basic login failed");
91 const { username, password, submitted} = this.state;
94 <LoginHeaderStyle>Login</LoginHeaderStyle>
95 <form name="form" onSubmit={this.handleSubmit}>
96 <LoginDivStyle className={(submitted && !username ? ' has-error' : '')}>
97 <label htmlFor="username">Username</label>
98 <LoginTextInputStyle name="username" value={username} onChange={this.handleChange} />
99 {submitted && !username &&
100 <div className="help-block">Username is required</div>
103 <LoginDivStyle className={(submitted && !password ? ' has-error' : '')}>
104 <label htmlFor="password">Password</label>
105 <LoginTextInputStyle type="password" name="password" value={password} onChange={this.handleChange} />
106 {submitted && !password &&
107 <div className="help-block">Password is required</div>
111 <LoginSubmitButtonStyle className="btn btn-primary">Login</LoginSubmitButtonStyle>