Reactjs 无法使用Rest上的Admin创建自定义登录页

已经尝试了一段时间，想知道如何在RESTV-1.0.0上的admin中设置自定义登录页

需要启用基于电子邮件的登录。为此，我稍微更改了rest登录页面的默认管理员代码（如下所示）

将用户名替换为电子邮件，并将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 );

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从'redux form'导入{propTypes，reduxForm，Field}；
从'react redux'导入{connect}；
从“重新组合/组合”导入组合；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
从“物料界面/卡片”导入{Card，CardActions}；
从“材质ui/化身”导入化身；
从“物料界面/RaisedButton”导入RaisedButton；
从“物料界面/文本字段”导入文本字段；
从“物料界面/循环进度”导入循环进度；
从“材质ui/svg图标/动作/锁定轮廓”导入锁定图标；
从“材质ui/样式/颜色”导入{cyan500，pinkA200}；
从“rest上的管理员”导入defaultTheme；
从“rest上的管理员”导入{userLogin as userLoginAction}；
从“rest上的管理员”导入通知；
常量样式={
主要内容：{
显示：“flex”，
flexDirection:'列'，
最小高度：“100vh”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
卡片：{
最小宽度：300，
},
化身：{
边距：“1em”，
textAlign:'中心'，
},
表格：{
填充：“0 1em 1em 1em”，
},
输入：{
显示：“flex”，
},
};
函数getColorsFromTheme（主题）{
if（！theme）返回{primary1Color:cyan500，accent1Color:pinkA200}；
常数{
调色板：{
原色，
埃森特1色，
},
}=主题；
返回{primary1Color，accent1Color}；
}
//看http://redux-form.com/6.4.3/examples/material-ui/
const renderInput=（{meta:{toucted，error}={}，input:{…inputProps}，…props}）=>
;
类EmailLogin扩展组件{
login=（auth）=>this.props.userLogin（auth，this.props.location.state？this.props.location.state.nextPathname:“/”）；
render（）{
const{handleSubmit，submiting，theme}=this.props；
const muiTheme=getMuiTheme（主题）；
const{primary1Color，accent1Color}=getColorsFromTheme（muiTheme）；
console.log（styles.form）
返回(

但是管理员仍然只显示默认页面（带有用户名的页面）

请提供建议。如何使用Rest上的Admin创建自定义页面

谢谢
存储库中有一个工作示例：

自定义登录组件：


它集成到管理中：


您正在使用哪个版本的aor？
存储库中有一个工作示例：

自定义登录组件：


它集成到管理中：


您正在使用哪个版本的aor？
似乎我做错了什么

我的自定义登录页（上面）有一个无声错误。该行

import Notification from 'admin-on-rest';

失败了吗

import { Notification } from 'admin-on-rest';

不过

rest上的管理员隐式地将默认管理员页面替换为我的自定义页面。我将此错误归因于我对Redux和React Redux的了解有限。但解决方案更简单。
似乎我做错了什么

我的自定义登录页（上面）有一个无声错误。该行

import Notification from 'admin-on-rest';

失败了吗

import { Notification } from 'admin-on-rest';

不过

rest上的管理员隐式地将默认管理员页面替换为我的自定义页面。我将此错误归因于我对Redux和React Redux的有限了解。但解决方案更简单。
当然这些都有效。我想分享我类似的答案：文档是我选择rest上的管理员的原因。但除了以上评论中的一个。@Kodamanyagha我已将您在上面的问题中的答案链接起来。但是您提到了一些关于传递道具的内容。而且您的解决方案没有直接连接到我的应用程序。我一直在尝试与您联系。但是我在stackOverflow上的代表太少，无法对您的答案发表评论。继续访问您的应用程序希望找到您谈论的帖子的博客。：）当然，这些都是有效的。我想分享我类似的答案：文档是我选择rest上的admin的原因。但是除了上面评论中的一个例子之外，其他地方都没有明确的例子。@Kodamanyagha我已经在我上面的问题中链接了你的答案。但是你提到了一些关于传递道具的内容。你的解决方案没有连接到外部框到我的应用程序。我一直在试图找到与你联系的方法。但我在stackOverflow上的代表太少，无法对你的答案发表评论。一直访问你的博客，希望找到你谈论的帖子。：）