feat(library): add initial version of library

App.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import Instant2FAComponent from './src/Instant2FAComponent.jsx';
 
-const App = () => (
-  <div>
-    <Instant2FAComponent />
-  </div>
-);
+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;

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 (
+    <div>
+      <Instant2FAComponent
+        uri='YOUR_SETTINGS_PAGE_URI'
+      ></Instant2FAComponent>
+    </div>
+  )
+};
+
+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 (
+    <div>
+      <Instant2FAComponent
+        uri='YOUR_VERIFICATION_PAGE_URI'
+        onEvent={onEvent}
+      ></Instant2FAComponent>
+    </div>
+  )
+};
+
+export default UserVerification;
+```

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"
   }
 }

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 = () => <div>Instant2fa-component</div>;
+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 (
+      <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)