@ftchinese/ftc-login-react

ftc-login-react

The login component for FTC. React version. It is a part of ftc-header-react.

Install

cd yourProject
npm install react react-dom prop-types
npm install "@ftchinese/ftc-login-react" --save 

Usage

Example:

import Login from '@ftchinese/ftc-login-react';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Login postUrl="/users/login" findPasswordUrl="http://www.ftchinese.com/users/findpassword" registerUrl="http://user.ftchinese.com/register" />,
  document.getElementById('root')
);

Props of Login

You can know about it by the proptypes:

static propTypes = {
  accountType: PropTypes.oneOf(['email', 'username', 'both']).isRequired,
  postUrl: PropTypes.string.isRequired,
  findPasswordUrl: PropTypes.string,
  registerUrl: PropTypes.string,
  closeFunc: PropTypes.func,
  show: PropTypes.bool,
  validateFailed: PropTypes.bool

};

accountType

Type string. Required. Default 'email'. The type of the account, which can be one of 'email', 'username', 'both'.

postUrl

Type string. Required. The url for posting data when clicking the 'submit' button.

findPasswordUrl

Type string. Optional.The url of the page for finding password.

registerUrl

Type string. Optional.The url of the page for new user's registering.

closeFunc

Type Function. Optional. Default null.

It decide this component is a smart or dumb.

If it is null, the component is smart and the show prop only decides the initial showing or hiding of the component. And when clicking the cross on the right left of the window or clicking the gray background, the build-in function closeOverlay of the component will be called.

Otherwise, if it is not null, the component is dumb and the show prop totally decides the showing or hiding of the component. The closeFunc will be a function provided by the parent component and change the state of the parent, then the show prop will be changed according to the state of the parent. And the closeFunc is called when clicking the close button on the right left of the login window or the gray background.

show

Type Boolean.Optional. Default true. Only decides to show the login window or not initally when where is no closeFunc. However, it totally decides the showing or hiding of the component when there is closeFunc. More details see above closeFunc

validateFaield

Type Boolean.Optional.If it is true, it will show the err infomation for validating failed. The information word is '用户不存在或密码错误'.