Commit eb765229 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into rifka

parents 1c965028 f9bd77ae
import React, { Component } from 'react';
import Images from '../assets/Images';
import { Checkbox, Button, InputAdornment, TextField, InputLabel } from '@material-ui/core';
import { Checkbox, Button, InputAdornment, TextField, InputLabel, Typography, IconButton } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
const CustomCheckbox = withStyles({
root: {
......@@ -14,6 +16,26 @@ const CustomCheckbox = withStyles({
})((props) => <Checkbox color="default" {...props} />);
class Login extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password: '',
showPass: false
}
}
componentDidMount() {
// this.coba()
}
coba(e) {
this.setState({
username: e
})
}
render() {
return (
<div style={{ flex: 1, display: 'flex' }}>
......@@ -30,9 +52,11 @@ class Login extends Component {
id="username"
type={"text"}
name={"username"}
value={this.state.username}
onChange={(e) => this.setState({username: e.target.value})}
variant="outlined"
error={false}
style={{ width: '100%', height: 51, marginTop: 32 }}
style={{ width: '100%', height: 51, marginTop: 32, fontSize: 14 }}
helperText=""
InputProps={{
endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
......@@ -42,14 +66,23 @@ class Login extends Component {
<TextField
label="Kata Sandi *"
id="password"
type={"password"}
type={this.state.showPass ? 'text' : 'password'}
name={"password"}
variant="outlined"
error={true}
error={false}
style={{ width: '100%', height: 51, marginTop: 12 }}
helperText=""
InputProps={{
endAdornment: <InputAdornment position="end"><img src={Images.key} /></InputAdornment>,
endAdornment: <InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
style={{color: '#4b4b4b', opacity: 0.5}}
onClick={() => this.setState({showPass: !this.state.showPass})}
edge="end"
>
{this.state.showPass ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />}
</IconButton>
</InputAdornment>,
}}
/>
......@@ -59,7 +92,7 @@ class Login extends Component {
<span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer' }}>Lupa Kata Sandi?</span>
</div>
<Button variant="contained" style={{ marginTop: 23, width: '100%', height: 35, borderRadius: 4 }} disabled>
Login
<Typography style={{fontSize: 12}}>Login</Typography>
</Button>
</div>
</div>
......
import React, { Component } from 'react';
import Images from '../assets/Images';
import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
class ResetPassword extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password: ''
}
}
user(username) {
this.setState({
username: username
})
}
render() {
return (
<div style={{ flex: 1, display: 'flex', backgroundColor: '#51c6ea', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
<div style={{padding: 60, display: 'flex', flexDirection: 'column', width: 318, height: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
<img src={Images.tia} />
<TextField
label="Email *"
id="username"
type={"text"}
name={"username"}
value={this.state.username}
onChange={(username) => this.setState({username: username.target.value})}
variant="outlined"
error={false}
style={{ width: 250, height: 51, margin: 32, fontSize: 14 }}
helperText=""
InputProps={{
endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
}}
/>
<Button variant="contained" style={{ width: 250, height: 51, marginLeft: 32, marginBottom: 24, borderRadius: 4 }} disabled>
<Typography style={{fontSize: 12}}>Lanjut</Typography>
</Button>
</div>
</div>
);
}
}
export default ResetPassword;
\ No newline at end of file
......@@ -11,6 +11,7 @@ import Home from '../container/Home'
import Login from '../container/Login'
import Register from '../container/Register'
import Screen404 from '../container/Screen404'
import ResetPassword from '../container/ResetPassword'
// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
......@@ -33,6 +34,7 @@ export default function BasicExample() {
/>
</Route>
<Route path="/login" component={Login} />
<Route path="/reset" component={ResetPassword} />
<Route path="/register" component={Register}/>
<PrivateRoute path="/home" component={Home} />
<Route path="*">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment