是否有任何如何创建自定义登录页面的例子？

Question

创建您自己的自定义登录页面在文档的身份验证部分中提到，但我找不到任何资源来指导您如何执行此操作。

本质上我只想使用电子邮件而不是用户名。我试图从https://github.com/marmelab/admin-on-rest/blob/master/src/mui/auth/Login.js复制默认的登录组件，只是将username更改为email，但我看到在增强功能中使用compose.js时出现错误。

Answer 1

我做到了。请检查：

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

有一些逻辑。管理员休息是设置“道具”，“道具”有一些方法，例如翻译，处理登录等...一个工作示例在这里：https://btc.nixarsoft.com如果你的头脑混乱，那么你可以问问这里。今天我会为这个问题写一篇博文。

将此文件保存到文件后加上名字“BtcLoginPage.js”，并从您的App.js文件中导入。然后添加到您的标签：loginPage = {} BtcLoginPage

最新的状态必须是这样的：

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;