Невозможно создать пользовательскую страницу входа с помощью Admin-On-Rest

Некоторое время пытался выяснить, как настроить пользовательскую страницу входа в 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.

Спасибо


person kunal pareek    schedule 28.04.2017    source источник


Ответы (2)


В репозитории admin-on-rest-demo есть рабочий пример:

Пользовательский компонент входа:

https://github.com/marmelab/admin-on-rest-demo/blob/master/src/Login.js

Это интеграция в админку:

https://github.com/marmelab/admin-on-rest-demo/blob/master/src/App.js#L45

Какую версию ор вы используете?

person Gildas Garcia    schedule 03.05.2017
comment
Конечно эти рабочие. Я хочу поделиться своим аналогичным ответом: stackoverflow.com/a/43655863/2132069 - person kodmanyagha; 04.05.2017
comment
Именно из-за документации я выбрал admin-on-rest. Но наглядного примера нет нигде, кроме того, что в комментарии выше. @Kodamanyagha Я связал ваш ответ в моем вопросе выше. Но вы упомянули что-то о передаче реквизита. И ваше решение не подключалось к моему приложению из коробки. Я пытался найти способ связаться с вами. Но у меня слишком мало представителей в stackOverflow, чтобы комментировать ваш ответ. Продолжал посещать ваш блог, надеясь найти тот пост, о котором вы говорили. :) - person kunal pareek; 05.05.2017

Кажется, я делал что-то не так.

У моей пользовательской страницы входа в систему (выше) была скрытая ошибка. Линия

import Notification from 'admin-on-rest';

Это должно было быть

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

Однако.

Admin-on-rest неявно заменял страницу администратора по умолчанию моей пользовательской страницей. Я приписывал ошибку своим ограниченным знаниям Redux и React-Redux. Но решение оказалось проще.

person kunal pareek    schedule 04.05.2017