diff --git a/App.js b/App.js deleted file mode 100644 index 2d1707e..0000000 --- a/App.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import Instant2FAComponent from './src/Instant2fa-component.jsx'; - -const App = () => ( -
- -
-); - -export default App; diff --git a/README.md b/README.md index 467d916..0cc3266 100644 --- a/README.md +++ b/README.md @@ -1 +1,63 @@ -# Instant2fa-component +# Instant2FAComponent + +## Installation + +```bash +npm install --save instant2fa-component +``` + +## Settings page + +```javascript +// UserSettings.jsx +import React from 'react'; +import Instant2FAComponent from 'instant2fa-component'; + +const UserSettings = () => { + return ( +
+ +
+ ) +}; + +export default UserSettings; +``` + +## Verification page + +```javascript +// UserVerification.jsx +import React from 'react'; +import Instant2FAComponent from 'instant2fa-component'; + +const UserVerification = () => { + const onEvent = (event) => { + if (event.type === "verificationSuccess") { + var token = event.payload.token; + console.log("Verification token is: " + token); + + $.ajax({ + method: 'POST', + url: '/two-factor-verification', + data: { + instant2faToken: event.payload.token + } + }); + } + } + + return ( +
+ +
+ ) +}; + +export default UserVerification; +``` diff --git a/example/App.js b/example/App.js new file mode 100644 index 0000000..c79b41d --- /dev/null +++ b/example/App.js @@ -0,0 +1,19 @@ +import React from 'react'; +import Instant2FAComponent from '../src/Instant2FAComponent.jsx'; + +const App = () => { + const onError = (e) => { + alert("There was an error: " + e.message) + } + + return ( +
+ +
+ ) +}; + +export default App; diff --git a/index.html b/example/index.html similarity index 80% rename from index.html rename to example/index.html index d53681b..076db05 100644 --- a/index.html +++ b/example/index.html @@ -2,7 +2,7 @@ - Instant2fa-component + Instant2FA Component
diff --git a/main.js b/example/main.js similarity index 100% rename from main.js rename to example/main.js diff --git a/webpack.config.js b/example/webpack.config.js similarity index 100% rename from webpack.config.js rename to example/webpack.config.js diff --git a/index.js b/index.js index 99105d1..56bc212 100644 --- a/index.js +++ b/index.js @@ -1,2 +1,2 @@ -var Instant2FAComponent = require('./lib/Instant2fa-component').default; +var Instant2FAComponent = require('./lib/Instant2FAComponent').default; module.exports = Instant2FAComponent; diff --git a/package.json b/package.json index f900723..6a9143f 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "dev": "webpack-dev-server --inline --hot --port 3000", + "dev": "cd example && webpack-dev-server --inline --hot --port 3000", "compile": "npm-run-all --parallel compile:source compile:postcss", "compile:postcss": "postcss --use precss --use postcss-cssnext -d lib src/*.css", "compile:source": "babel src --out-dir lib", @@ -62,5 +62,8 @@ "url-loader": "^0.5.7", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2" + }, + "dependencies": { + "react-async-script-loader": "^0.2.2" } } diff --git a/src/Instant2fa-component.css b/src/Instant2FAComponent.css similarity index 100% rename from src/Instant2fa-component.css rename to src/Instant2FAComponent.css diff --git a/src/Instant2FAComponent.jsx b/src/Instant2FAComponent.jsx new file mode 100644 index 0000000..61710e0 --- /dev/null +++ b/src/Instant2FAComponent.jsx @@ -0,0 +1,42 @@ +import React, {Component} from 'react' +import ReactDOM from 'react-dom' +import scriptLoader from 'react-async-script-loader' + +class Instant2FAComponent extends Component { + + componentWillReceiveProps ({ isScriptLoaded, isScriptLoadSucceed }) { + if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished + if (isScriptLoadSucceed) { + this.init() + } else this.props.onError() + } + } + + componentDidMount () { + const { isScriptLoaded, isScriptLoadSucceed } = this.props + if (isScriptLoaded && isScriptLoadSucceed) { + this.init() + } + } + + init() { + window.Instant2FAPage.configure({ + element: ReactDOM.findDOMNode(this), + uri: this.props.uri + }, this.props.onEvent) + } + + render() { + return ( +
+ ) + } +} +Instant2FAComponent.propTypes = { + uri: React.PropTypes.string.isRequired, + onError: React.PropTypes.func, + onEvent: React.PropTypes.func +} +Instant2FAComponent.SCRIPT_URL = 'https://js.instant2fa.com/hosted.js' + +export default scriptLoader([Instant2FAComponent.SCRIPT_URL])(Instant2FAComponent) diff --git a/src/Instant2fa-component.jsx b/src/Instant2fa-component.jsx deleted file mode 100644 index d2e5025..0000000 --- a/src/Instant2fa-component.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -const Instant2FAComponent = () =>
Instant2fa-component
; - -export default Instant2FAComponent; diff --git a/test/Instant2fa-component.spec.js b/test/Instant2FAComponent.spec.js similarity index 81% rename from test/Instant2fa-component.spec.js rename to test/Instant2FAComponent.spec.js index 976ac84..2b4b667 100644 --- a/test/Instant2fa-component.spec.js +++ b/test/Instant2FAComponent.spec.js @@ -4,12 +4,12 @@ import expect from 'expect'; import expectJSX from 'expect-jsx'; import { shallow } from 'enzyme'; import { createRenderer } from 'react-addons-test-utils'; -import Instant2fa-component from '../src/Instant2fa-component'; +import Instant2FAComponent from '../src/Instant2FAComponent'; expect.extend(expectJSX); /* eslint-disable no-undef */ -describe('Instant2fa-component', () => { +describe('Instant2FAComponent', () => { it('should work', () => { });