@mitchallen/react-login-theme-grey
LoginThemeGrey React component
Installation
$ npm init
$ npm install @mitchallen/react-login-theme-grey --save
Usage
Usage Example
Take the code below and modify how the handleSubmit method acts to process the login info.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';
import LoginThemeGrey from '@mitchallen/react-login-theme-grey';
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
status: this.props.defaultStatus || 'Login',
username: '',
password: '',
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.validateForm = this.validateForm.bind(this);
}
validateForm() {
return this.state.username.length > 0
&& this.state.password.length > 0;
}
handleChange = (event) => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = async (event) => {
event.preventDefault();
this.setState({
status: this.props.successMessage ,
isLoading: false
});
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<hr size="1" />
<LoginThemeGrey
handleChange={this.handleChange.bind(this)}
handleSubmit={this.handleSubmit.bind(this)}
validateForm={this.validateForm.bind(this)}
status={this.state.status}
isLoading={this.state.isLoading}
username={this.state.username}
password={this.state.password}
/>
<hr size="1" />
</div>
);
}
}
App.defaultProps = {
submitMessage: 'submitting ...',
successMessage: 'You are logged in!'
}
App.propTypes = {
userHasAuthenticated: PropTypes.func.isRequired,
cognitoUserPoolId: PropTypes.string.isRequired,
cognitoAppClientId: PropTypes.string.isRequired
};
export default App;
Testing
Run the Tests
To test, go to the root folder and type (sans $):
$ npm test
Component Testing
Prerequisite
If you've never installed create-react-app (you may need to use sudo
):
$ npm install -g create-react-app
Create a local npm link
In the original component folder (you may need to use sudo
):
$ npm link
Create a test package
Create a root test folder and then do the following:
$ create-react-app react-login-theme-grey-test
$ cd react-login-theme-grey-test
$ npm link @mitchallen/react-login-theme-grey
Modify src/App.js
1: Add this line near the top:
import LoginThemeGrey from '@mitchallen/react-login-theme-grey';
NOTE: LoginThemeGrey must be Capitalized or component won't render.
2: Somewhere in the middle of the render method add this line:
<LoginThemeGrey />
Run The Test App
$ npm start
Cleanup
Remember to unlink when done.
Repo(s)
- bitbucket.org/mitchallen/react-login-theme-grey.git
- github.com/mitchallen/react-login-theme-grey.git
Contributing
In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
Version History
Version 0.1.1
- updated documentation
Version 0.1.0
- initial release