Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Login.propTypes = {
- ...propTypes,
- authClient: PropTypes.func,
- previousRoute: PropTypes.string,
- theme: PropTypes.object.isRequired,
- translate: PropTypes.func.isRequired,
- userLogin: PropTypes.func.isRequired,
- isLogging: PropTypes.bool.isRequired,
- };
- function mapStateToProps(state, props) {
- return {
- isLogging: state.loginReducer > 0
- };
- }
- const enhance = compose(
- translate,
- reduxForm({
- form: 'signIn',
- validate: (values, props) => {
- const errors = {};
- const { translate } = props;
- if (!values.username) errors.username = translate('aor.validation.required');
- if (!values.password) errors.password = translate('aor.validation.required');
- return errors;
- },
- }),
- connect(mapStateToProps, { userLogin: userLoginAction }),
- );
- export default enhance(Login);
- <CardActions>
- <RaisedButton type="submit" primary disabled={isLogging} icon={isLogging && <CircularProgress size={25} thickness={2} />} label={translate('aor.auth.sign_in')} fullWidth />
- </CardActions>
- import React, { Component } from 'react';
- import PropTypes from 'prop-types';
- import { propTypes, reduxForm, Field } from 'redux-form';
- import { connect } from 'react-redux';
- import compose from 'recompose/compose';
- 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 TextField from 'material-ui/TextField';
- import CircularProgress from 'material-ui/CircularProgress';
- import { cyan500, pinkA200, white } from 'material-ui/styles/colors';
- import defaultTheme, {translate, Notification, userLogin as userLoginAction } from 'admin-on-rest';
- const styles = {
- main: {
- display: 'flex',
- flexDirection: 'column',
- minHeight: '100vh',
- alignItems: 'center',
- justifyContent: 'center',
- },
- card: {
- minWidth: 300,
- },
- avatar: {
- margin: '1em',
- textAlign: 'center ',
- },
- avatarText:{
- verticalAlign:'middle',
- fontSize:20,
- },
- 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 };
- }
- // see http://redux-form.com/6.4.3/examples/material-ui/
- const renderInput = ({ meta: { touched, error } = {}, input: { ...inputProps }, ...props }) =>
- <TextField
- errorText={touched && error}
- {...inputProps}
- {...props}
- fullWidth
- />;
- class Login extends Component {
- login = (auth) => this.props.userLogin(auth, this.props.location.state ? this.props.location.state.nextPathname : '/');
- render() {
- const { handleSubmit, submitting, theme, translate, isLogging } = this.props;
- const muiTheme = getMuiTheme(theme);
- const { primary1Color } = getColorsFromTheme(muiTheme);
- return (
- <MuiThemeProvider muiTheme={muiTheme}>
- <div style={{ ...styles.main, backgroundColor: primary1Color }}>
- <Card style={styles.card}>
- <div style={styles.avatar}>
- <div>
- <Avatar backgroundColor={white} src="EnsembleGreenLogo.png" size={45} />
- </div>
- <div>
- <span style={styles.avatarText}>Ensemble SmartWAN Manager</span>
- </div>
- </div>
- <form onSubmit={handleSubmit(this.login)}>
- <div style={styles.form}>
- <div style={styles.input} >
- <Field
- name="username"
- component={renderInput}
- floatingLabelText={translate('aor.auth.username')}
- disabled={submitting}
- />
- </div>
- <div style={styles.input}>
- <Field
- name="password"
- component={renderInput}
- floatingLabelText={translate('aor.auth.password')}
- type="password"
- disabled={submitting}
- />
- </div>
- </div>
- <CardActions>
- <RaisedButton
- type="submit"
- primary
- disabled={isLogging}
- icon={isLogging && <CircularProgress size={25} thickness={2} />}
- label={translate('aor.auth.sign_in')}
- fullWidth
- />
- </CardActions>
- </form>
- </Card>
- <Notification />
- </div>
- </MuiThemeProvider>
- );
- }
- }
- Login.propTypes = {
- ...propTypes,
- authClient: PropTypes.func,
- previousRoute: PropTypes.string,
- theme: PropTypes.object.isRequired,
- translate: PropTypes.func.isRequired,
- userLogin: PropTypes.func.isRequired,
- isLogging: PropTypes.bool.isRequired,
- };
- Login.defaultProps = {
- theme: defaultTheme,
- };
- function mapStateToProps(state, props) {
- return {
- isLogging: state.loginReducer > 0
- };
- }
- const enhance = compose(
- translate,
- reduxForm({
- form: 'signIn',
- validate: (values, props) => {
- const errors = {};
- const { translate } = props;
- if (!values.username) errors.username = translate('aor.validation.required');
- if (!values.password) errors.password = translate('aor.validation.required');
- return errors;
- },
- }),
- connect(mapStateToProps, { userLogin: userLoginAction }),
- );
- export default enhance(Login);
- import { USER_LOGIN_LOADING, USER_LOGIN_SUCCESS, USER_LOGIN_FAILURE, USER_CHECK } from 'admin-on-rest';
- export default (previousState = 0, { type }) => {
- switch (type) {
- case USER_LOGIN_LOADING:
- return previousState + 1;
- case USER_LOGIN_SUCCESS:
- case USER_LOGIN_FAILURE:
- case USER_CHECK:
- return Math.max(previousState - 1, 0);
- default:
- return previousState;
- }
- };
- <Admin
- menu={createMenus}
- loginPage={Login}
- dashboard={Dashboard}
- appLayout={Layout}
- customReducers={{ loginReducer }}
- >
- import loginReducer from './loginReducer';
- import Login from "./Login";
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement