Is there any examples of how to create a custom lo

Question

Creating your own custom login page is mentioned in the authentication section of the documentation but I cannot find any resources instructing you on how to do so.

Essentially I'd just like to use an email instead of a username. I tried to copy the default Login component from https://github.com/marmelab/admin-on-rest/blob/master/src/mui/auth/Login.js and just change username to email but I'm seeing an error to do with use of compose.js in the enhance function.

Answer 1

I did it. Please check that:

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 BtcLoginPage 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>HESABINIZA BURADAN GİRİŞ YAPABİLİRSİNİZ</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={"TELEFON NUMARANIZ"}
                    disabled={submitting}
                />
            </div>
            <div>
                <Field
                    name="password"
                    component={renderInput}
                    floatingLabelText={"ŞİFRE"}
                    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>ÜCRETSİZ HESABINIZI BURADAN OLUŞTURABİLİRSİNİZ</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={"AD"}
    disabled={submitting}
/>

                    </Col>
                    <Col xs={6} md={6}>

<Field
    name="lastname"
    component={renderInput}
    floatingLabelText={"SOYAD"}
    disabled={submitting}
/>
                    </Col>
                </Row>
            </div>
            <div>
                <Field
                    name="registerUsername"
                    component={renderInput}
                    floatingLabelText={"TELEFON NUMARANIZ"}
                    disabled={submitting}
                />
            </div>
            <div>
                <Field
                    name="registerPassword"
                    component={renderInput}
                    floatingLabelText={"ŞİFRE"}
                    type="password"
                    disabled={submitting}
                />
            </div>
            <div>
                <Field
                    name="registerPassword2"
                    component={renderInput}
                    floatingLabelText={"ŞİFRE (tekrar)"}
                    type="password"
                    disabled={submitting}
                />
            </div>
            <div>
                <br />
                Yeni hesap açtığınızda <a href="sozlesme">SÖZLEŞMEYİ</a> kabul etmiş sayılırsınız.
            </div>
        </div>
        <CardActions>
            <RaisedButton
                type="submit"
                primary
                disabled={submitting}
                icon={submitting && <CircularProgress size={25} thickness={2} />}
                label={"KAYIT OL"}
                fullWidth
            />
        </CardActions>
    </form>
</Card>
                        </Col>

                    </Row>



                </div>
            </MuiThemeProvider>
        );
    }
}

BtcLoginPage.defaultProps = {
    theme: defaultTheme,
};

const enhance = compose(
    translate,
    reduxForm({
        form: 'signIn',
        validate: (values, props) => {
            const errors = {};

            if (!values.username) errors.username = "Lütfen telefon numaranızı giriniz.";
            if (!values.password) errors.password = "Lütfen şifrenizi giriniz.";

            return errors;
        },
    }),
    connect(null, { push: pushAction }),
);

export default enhance(BtcLoginPage);

There are some logics. Admin On Rest is setting "props", "props" has some methods for example translate, handleLogin etc... A working example is in here: https://btc.nixarsoft.com If your mind confused then you can ask here. I will write a blog post today for this issue.

Save this file with name "BtcLoginPage.js" and import it from your App.js file. Then add this to your tag: loginPage={BtcLoginPage}

Last status must be like this:

import React from 'react';
import { simpleRestClient, fetchUtils, Admin, Resource } from 'admin-on-rest';
import { Delete } from 'admin-on-rest/lib/mui';
import Market from './Market/index';

import PostIcon from 'material-ui/svg-icons/action/book';
import UserIcon from 'material-ui/svg-icons/social/group';
import DashboardIcon from 'material-ui/svg-icons/places/pool';
import authClient from './authClient';
import myApiRestClient from './restClient';
import Menu from './Menu';
import BtcLoginPage from './BtcLoginPage';

import apiUrl from './apiUrl';
const restClient = simpleRestClient(apiUrl, httpClient);

const App = () => (
    <Admin authClient={authClient} menu={Menu} loginPage={BtcLoginPage} title="Example App">
        <Resource name="market" list={Market} icon={DashboardIcon} />
    </Admin>
);

export default App;