forked from community/device-mgt-core
parent
03b6faa7c2
commit
44737750b8
@ -0,0 +1,116 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||||
|
*
|
||||||
|
* WSO2 Inc. licenses this file to you 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import {Card, CardTitle, CardActions, CardMedia} from 'material-ui/Card';
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
|
||||||
|
import Checkbox from 'material-ui/Checkbox';
|
||||||
|
|
||||||
|
class Login extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
userName: "",
|
||||||
|
password: "",
|
||||||
|
rememberMe: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
handleLogin(event) {
|
||||||
|
console.log(this.state);
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onUserNameChange(event) {
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
userName: event.target.value
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onPasswordChange(event) {
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
password: event.target.value
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
rememberMe() {
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
rememberMe: !this.state.rememberMe
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Card>
|
||||||
|
<CardTitle title="Login to App Publisher"/>
|
||||||
|
|
||||||
|
<CardMedia>
|
||||||
|
</CardMedia>
|
||||||
|
|
||||||
|
<CardActions>
|
||||||
|
<ValidatorForm
|
||||||
|
ref="form"
|
||||||
|
onSubmit={this.handleLogin.bind(this)}
|
||||||
|
onError={errors => console.log(errors)}>
|
||||||
|
|
||||||
|
<TextValidator
|
||||||
|
floatingLabelText="User Name"
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
onChange={this.onUserNameChange.bind(this)}
|
||||||
|
name="userName"
|
||||||
|
validators={['required']}
|
||||||
|
errorMessages={['User Name is required']}
|
||||||
|
value={this.state.userName}
|
||||||
|
/>
|
||||||
|
<br/>
|
||||||
|
<TextValidator
|
||||||
|
floatingLabelText="Password"
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
onChange={this.onPasswordChange.bind(this)}
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
value={this.state.password}
|
||||||
|
validators={['required']}
|
||||||
|
errorMessages={['Password is required']}
|
||||||
|
/>
|
||||||
|
<br/>
|
||||||
|
<Checkbox label="Remember me."
|
||||||
|
onCheck={this.rememberMe.bind(this)}
|
||||||
|
checked={this.state.rememberMe}/>
|
||||||
|
<br/>
|
||||||
|
<RaisedButton type="submit" label="Login"/>
|
||||||
|
</ValidatorForm>
|
||||||
|
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Login;
|
Loading…
Reference in new issue