Некоторое время пытался выяснить, как настроить пользовательскую страницу входа в admin-on-rest v-1.0.0.
Необходимо включить вход на основе электронной почты. Для этого я немного изменил код страницы входа администратора в режиме покоя по умолчанию (ниже)
Заменил имя пользователя на адрес электронной почты и изменил authClient на loopbackRestClient.
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 LockIcon from 'material-ui/svg-icons/action/lock-outline';
import { cyan500, pinkA200 } from 'material-ui/styles/colors';
import defaultTheme from 'admin-on-rest';
import { userLogin as userLoginAction } from 'admin-on-rest';
import Notification 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 ',
},
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 EmailLogin extends Component {
login = (auth) => this.props.userLogin(auth, this.props.location.state ? this.props.location.state.nextPathname : '/');
render() {
const { handleSubmit, submitting, theme } = this.props;
const muiTheme = getMuiTheme(theme);
const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme);
console.log(styles.form)
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div style={{ ...styles.main, backgroundColor: primary1Color }}>
<Card style={styles.card}>
<div style={styles.avatar}>
<Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} />
</div>
<form onSubmit={handleSubmit(this.login)}>
<div style={styles.form}>
<div style={styles.input} >
<Field
name="email"
floatingLabelText={"email"}
component={renderInput}
disabled={submitting}
placeholder={"email"}
/>
</div>
<div style={styles.input}>
<Field
name="password"
component={renderInput}
type="password"
disabled={submitting}
/>
</div>
</div>
<CardActions>
<RaisedButton
type="submit"
primary
disabled={submitting}
icon={submitting && <CircularProgress size={25} thickness={2} />}
fullWidth
/>
</CardActions>
</form>
</Card>
<Notification />
</div>
</MuiThemeProvider>
);
}
}
EmailLogin.propTypes = {
...propTypes,
authClient: PropTypes.func,
previousRoute: PropTypes.string,
theme: PropTypes.object,
userLogin: PropTypes.func.isRequired,
};
EmailLogin.defaultProps = {
theme: defaultTheme,
};
const enhance = compose(
reduxForm({
form: 'signIn',
validate: (values, props) => {
const errors = {};
return errors;
},
}),
connect(null, { userLogin: userLoginAction }),
);
export default enhance( EmailLogin );
Я добавил вышеуказанное в реквизит loginPage для администратора в моем app.js.
Однако admin-on-rest, похоже, показывает страницу по умолчанию.
Я скопировал BtcLoginPage из этого вопроса
Есть ли примеры создания настраиваемая страница входа?
Но администратор по-прежнему показывает только страницу по умолчанию (ту, что с именем пользователя).
Пожалуйста, посоветуйте. Как я могу создать пользовательскую страницу с помощью Admin-On-Rest.
Спасибо