From 63133a6d936f991f3d41a121ce6c69b1a9b88fe1 Mon Sep 17 00:00:00 2001 From: Jesse Pollak Date: Mon, 21 Nov 2016 17:53:18 -0500 Subject: [PATCH 1/4] chore(files): renmae files --- App.js | 2 +- README.md | 2 +- index.html | 2 +- index.js | 2 +- src/{Instant2fa-component.css => Instant2FAComponent.css} | 0 src/{Instant2fa-component.jsx => Instant2FAComponent.jsx} | 0 ...stant2fa-component.spec.js => Instant2FAComponent.spec.js} | 4 ++-- 7 files changed, 6 insertions(+), 6 deletions(-) rename src/{Instant2fa-component.css => Instant2FAComponent.css} (100%) rename src/{Instant2fa-component.jsx => Instant2FAComponent.jsx} (100%) rename test/{Instant2fa-component.spec.js => Instant2FAComponent.spec.js} (81%) diff --git a/App.js b/App.js index 2d1707e..7fecb15 100644 --- a/App.js +++ b/App.js @@ -1,5 +1,5 @@ import React from 'react'; -import Instant2FAComponent from './src/Instant2fa-component.jsx'; +import Instant2FAComponent from './src/Instant2FAComponent.jsx'; const App = () => (
diff --git a/README.md b/README.md index 467d916..7342abc 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# Instant2fa-component +# Instant2FA Component diff --git a/index.html b/index.html index d53681b..076db05 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Instant2fa-component + Instant2FA Component
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/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/Instant2fa-component.jsx b/src/Instant2FAComponent.jsx similarity index 100% rename from src/Instant2fa-component.jsx rename to src/Instant2FAComponent.jsx 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', () => { }); From f58ac7b4ca906b95927476e2a8fa2c8b4b4d31ae Mon Sep 17 00:00:00 2001 From: Jesse Pollak Date: Wed, 23 Nov 2016 14:44:03 -0500 Subject: [PATCH 2/4] feat(library): add initial version of library --- App.js | 19 ++++++++--- README.md | 64 ++++++++++++++++++++++++++++++++++++- package.json | 3 ++ src/Instant2FAComponent.jsx | 43 +++++++++++++++++++++++-- 4 files changed, 120 insertions(+), 9 deletions(-) diff --git a/App.js b/App.js index 7fecb15..e6e93eb 100644 --- a/App.js +++ b/App.js @@ -1,10 +1,19 @@ import React from 'react'; import Instant2FAComponent from './src/Instant2FAComponent.jsx'; -const App = () => ( -
- -
-); +const App = () => { + const onError = (e) => { + alert("There was an error: " + e.message) + } + + return ( +
+ +
+ ) +}; export default App; diff --git a/README.md b/README.md index 7342abc..10c0e5e 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 './src/Instant2FAComponent.jsx'; + +const UserSettings = () => { + return ( +
+ +
+ ) +}; + +export default UserSettings; +``` + +## Verification page + +```javascript +// UserVerification.jsx +import React from 'react'; +import Instant2FAComponent from './src/Instant2FAComponent.jsx'; + +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/package.json b/package.json index f900723..1e2e230 100644 --- a/package.json +++ b/package.json @@ -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/Instant2FAComponent.jsx b/src/Instant2FAComponent.jsx index d2e5025..61710e0 100644 --- a/src/Instant2FAComponent.jsx +++ b/src/Instant2FAComponent.jsx @@ -1,5 +1,42 @@ -import React from 'react'; +import React, {Component} from 'react' +import ReactDOM from 'react-dom' +import scriptLoader from 'react-async-script-loader' -const Instant2FAComponent = () =>
Instant2fa-component
; +class Instant2FAComponent extends Component { -export default Instant2FAComponent; + 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) From 17c7e16166fb8936e3a77ccd50ddbf1e166a34f5 Mon Sep 17 00:00:00 2001 From: Jesse Pollak Date: Wed, 23 Nov 2016 14:50:33 -0500 Subject: [PATCH 3/4] docs(readme): update readme with correct require --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 10c0e5e..0cc3266 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ npm install --save instant2fa-component ```javascript // UserSettings.jsx import React from 'react'; -import Instant2FAComponent from './src/Instant2FAComponent.jsx'; +import Instant2FAComponent from 'instant2fa-component'; const UserSettings = () => { return ( @@ -31,7 +31,7 @@ export default UserSettings; ```javascript // UserVerification.jsx import React from 'react'; -import Instant2FAComponent from './src/Instant2FAComponent.jsx'; +import Instant2FAComponent from 'instant2fa-component'; const UserVerification = () => { const onEvent = (event) => { From 2d12711c9ca321f934d1c031c8eb93cfade89827 Mon Sep 17 00:00:00 2001 From: Jesse Pollak Date: Wed, 23 Nov 2016 16:02:45 -0500 Subject: [PATCH 4/4] refactor(example): move example to example/ folder --- App.js => example/App.js | 2 +- index.html => example/index.html | 0 main.js => example/main.js | 0 webpack.config.js => example/webpack.config.js | 0 package.json | 2 +- 5 files changed, 2 insertions(+), 2 deletions(-) rename App.js => example/App.js (83%) rename index.html => example/index.html (100%) rename main.js => example/main.js (100%) rename webpack.config.js => example/webpack.config.js (100%) diff --git a/App.js b/example/App.js similarity index 83% rename from App.js rename to example/App.js index e6e93eb..c79b41d 100644 --- a/App.js +++ b/example/App.js @@ -1,5 +1,5 @@ import React from 'react'; -import Instant2FAComponent from './src/Instant2FAComponent.jsx'; +import Instant2FAComponent from '../src/Instant2FAComponent.jsx'; const App = () => { const onError = (e) => { diff --git a/index.html b/example/index.html similarity index 100% rename from index.html rename to example/index.html 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/package.json b/package.json index 1e2e230..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",