@ftchinese/ftc-login-react

The login partial of ftc-header. It is the react version.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Aug 16, 2018Apr 14, 2018Minified + gzip package size for @ftchinese/ftc-login-react in KB

Readme

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 '用户不存在或密码错误'.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.