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.
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;
