Last active
April 27, 2017 19:51
-
-
Save kodmanyagha/2ee0546413ebbbe1d8d6e4dee5d73872 to your computer and use it in GitHub Desktop.
admin on rest custom login page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component, PropTypes } from 'react'; | |
import { propTypes, reduxForm, Field } from 'redux-form'; | |
import { connect } from 'react-redux'; | |
import { push as pushAction } from 'react-router-redux'; | |
import compose from 'recompose/compose'; | |
import { Container, Row, Col } from 'react-grid-system'; | |
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; | |
import getMuiTheme from 'material-ui/styles/getMuiTheme'; | |
import { Card, CardActions } from 'material-ui/Card'; | |
import Avatar from 'material-ui/Avatar'; | |
import RaisedButton from 'material-ui/RaisedButton'; | |
import Snackbar from 'material-ui/Snackbar'; | |
import TextField from 'material-ui/TextField'; | |
import CircularProgress from 'material-ui/CircularProgress'; | |
import LockIcon from 'material-ui/svg-icons/action/lock-outline'; | |
import RegisterIcon from 'material-ui/svg-icons/social/people'; | |
import { cyan500, pinkA200 } from 'material-ui/styles/colors'; | |
import defaultTheme from 'admin-on-rest/lib/mui/defaultTheme'; | |
import { AUTH_LOGIN } from 'admin-on-rest/lib/auth'; | |
const styles = { | |
main: { | |
display: 'flex', | |
flexDirection: 'column', | |
minHeight: '100vh', | |
alignItems: 'center', | |
justifyContent: 'center', | |
}, | |
card: { | |
minWidth: 300, | |
width: '300px', | |
padding: '10px' | |
}, | |
avatar: { | |
margin: '1em', | |
textAlign: 'center ', | |
}, | |
form: { | |
padding: '0 1em 1em 1em', | |
}, | |
input: { | |
display: 'flex', | |
}, | |
}; | |
function getColorsFromTheme(theme) { | |
if (!theme) return { primary1Color: cyan500, accent1Color: pinkA200 }; | |
const { | |
palette: { | |
primary1Color, | |
accent1Color, | |
}, | |
} = theme; | |
return { primary1Color, accent1Color }; | |
} | |
const renderInput = ({ meta: { touched, error } = {}, input: { ...inputProps }, ...props }) => | |
<TextField | |
errorText={touched && error} | |
{...inputProps} | |
{...props} | |
fullWidth | |
/>; | |
var translate = function( key ) { | |
return key; | |
} | |
class CustomLoginPage extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { signInError: false }; | |
} | |
login = ({ username, password }) => { | |
const { authClient, push, location } = this.props; | |
if (!authClient) return; | |
return authClient(AUTH_LOGIN, { username, password }) | |
.then(() => push(location.state ? location.state.nextPathname : '/')) | |
.catch(e => this.setState({ signInError: e })); | |
console.log(username + " " + password); | |
return false; | |
} | |
handleRegister( data ) { | |
console.log(data); | |
} | |
render() { | |
const { handleSubmit, submitting, theme } = this.props; | |
const muiTheme = getMuiTheme(theme); | |
const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme); | |
const { signInError } = this.state; | |
return ( | |
<MuiThemeProvider muiTheme={muiTheme}> | |
<div style={{ ...styles.main, backgroundColor: primary1Color }}> | |
<Row> | |
<Col xs={4} md={4}> | |
<Card style={styles.card}> | |
<div style={styles.avatar}> | |
<Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} /> | |
<br /> | |
<strong>You can login here.</strong> | |
</div> | |
{signInError && <Snackbar open autoHideDuration={4000} message={signInError.message || signInError || translate('aor.auth.sign_in_error')} />} | |
<form onSubmit={handleSubmit(this.login)}> | |
<div> | |
<div> | |
<Field | |
name="username" | |
component={renderInput} | |
floatingLabelText={"YOUR USERNAME"} | |
disabled={submitting} | |
/> | |
</div> | |
<div> | |
<Field | |
name="password" | |
component={renderInput} | |
floatingLabelText={"PASSWORD"} | |
type="password" | |
disabled={submitting} | |
/> | |
</div> | |
</div> | |
<CardActions> | |
<RaisedButton | |
type="submit" | |
primary | |
disabled={submitting} | |
icon={submitting && <CircularProgress size={25} thickness={2} />} | |
label={"GİRİŞ YAP"} | |
fullWidth | |
/> | |
</CardActions> | |
</form> | |
</Card> | |
</Col> | |
<Col xs={4} md={4}></Col> | |
<Col xs={4} md={4}> | |
<Card style={styles.card}> | |
<div style={styles.avatar}> | |
<Avatar backgroundColor={accent1Color} icon={<RegisterIcon />} size={60} /> | |
<br /> | |
<strong>Create account from here</strong> | |
</div> | |
{signInError && <Snackbar open autoHideDuration={4000} message={signInError.message || signInError || translate('aor.auth.sign_in_error')} />} | |
<form onSubmit={this.handleRegister(this.login)}> | |
<div> | |
<div> | |
<Row> | |
<Col xs={6} md={6}> | |
<Field | |
name="firstname" | |
component={renderInput} | |
floatingLabelText={"First name"} | |
disabled={submitting} | |
/> | |
</Col> | |
<Col xs={6} md={6}> | |
<Field | |
name="lastname" | |
component={renderInput} | |
floatingLabelText={"Last name"} | |
disabled={submitting} | |
/> | |
</Col> | |
</Row> | |
</div> | |
<div> | |
<Field | |
name="registerUsername" | |
component={renderInput} | |
floatingLabelText={"Cellphone"} | |
disabled={submitting} | |
/> | |
</div> | |
<div> | |
<Field | |
name="registerPassword" | |
component={renderInput} | |
floatingLabelText={"Password"} | |
type="password" | |
disabled={submitting} | |
/> | |
</div> | |
<div> | |
<Field | |
name="registerPassword2" | |
component={renderInput} | |
floatingLabelText={"Password (again)"} | |
type="password" | |
disabled={submitting} | |
/> | |
</div> | |
</div> | |
<CardActions> | |
<RaisedButton | |
type="submit" | |
primary | |
disabled={submitting} | |
icon={submitting && <CircularProgress size={25} thickness={2} />} | |
label={"REGISTER"} | |
fullWidth | |
/> | |
</CardActions> | |
</form> | |
</Card> | |
</Col> | |
</Row> | |
</div> | |
</MuiThemeProvider> | |
); | |
} | |
} | |
CustomLoginPage.defaultProps = { | |
theme: defaultTheme, | |
}; | |
const enhance = compose( | |
translate, | |
reduxForm({ | |
form: 'signIn', | |
validate: (values, props) => { | |
const errors = {}; | |
if (!values.username) errors.username = "Please enter username."; | |
if (!values.password) errors.password = "Please enter password."; | |
return errors; | |
}, | |
}), | |
connect(null, { push: pushAction }), | |
); | |
export default enhance(CustomLoginPage); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment