Merge pull request #1 from clef/feat/initial-library

Add initial library
clef · Nov 23, 2016 · aa1195c · aa1195c
2 parents 348a32e + 2d12711
commit aa1195c
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 21 deletions.
diff --git a/App.js b/App.js
diff --git 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 (
+    <div>
+      <Instant2FAComponent
+        uri='YOUR_SETTINGS_PAGE_URI'
+      ></Instant2FAComponent>
+    </div>
+  )
+};
+
+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 (
+    <div>
+      <Instant2FAComponent
+        uri='YOUR_VERIFICATION_PAGE_URI'
+        onEvent={onEvent}
+      ></Instant2FAComponent>
+    </div>
+  )
+};
+
+export default UserVerification;
+```
diff --git a/example/App.js 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 (
+    <div>
+      <Instant2FAComponent
+        uri='https://hosted.instant2fa.com/users/123456'
+        onError={onError}
+      ></Instant2FAComponent>
+    </div>
+  )
+};
+
+export default App;
diff --git a/index.html → example/index.html b/index.html → example/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Instant2fa-component</title>
+    <title>Instant2FA Component</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/main.js → example/main.js b/main.js → example/main.js
diff --git a/webpack.config.js → example/webpack.config.js b/webpack.config.js → example/webpack.config.js
diff --git 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
@@ -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 → src/Instant2FAComponent.css b/src/Instant2fa-component.css → src/Instant2FAComponent.css
diff --git a/src/Instant2FAComponent.jsx 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 (
+      <div></div>
+    )
+  }
+}
+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
diff --git a/test/Instant2fa-component.spec.js → test/Instant2FAComponent.spec.js b/test/Instant2fa-component.spec.js → 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', () => {
 
   });