successfully implement react component to static page

dfarrenk · Jan 28, 2018 · cff777f · cff777f
1 parent fa670df
commit cff777f
Show file tree

Hide file tree

Showing 29 changed files with 992 additions and 40 deletions.
diff --git a/cryptoshopreact/public/login.html b/cryptoshopreact/public/login.html
@@ -6,59 +6,68 @@
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Login</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+   <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+   <!-- <script src="/umd/client-auth.js"></script> -->
 </head>
 
 <body>
-   <form action="/login" method="POST">
+   <!-- <form action="/login" method="POST">
       <label for="username">Username: </label>
       <input type="text" name="username" id="username" />
       <label for="password">Password: </label>
       <input type="password" name="password" id="password" />
       <input type="submit" value="Submit" />
-   </form>
+   </form> -->
+   <div id="root"></div>
 </body>
-
 <script type="text/javascript">
-	const form = document.querySelector("form");
-	
-	form.addEventListener("submit", function(evt) {
-		console.log("here");
-		console.log(this);
-		evt.preventDefault();
-		const userdat = {
-			username: this.username.value,
-			password: this.password.value
-		};
-		
-		$.ajax({
-			method: "POST",
-			data: userdat,
-			url: "/login"
-		}).then((response) => {
-			console.log(response);
-			tokenSession(response.token).then(getMainPage);
-		}).catch(console.log.bind(console));	
+const form = document.querySelector("form");
+
+form.addEventListener("submit", function(evt) {
+   console.log("here");
+   console.log(this);
+   evt.preventDefault();
+   const userdat = {
+      username: this.username.value,
+      password: this.password.value
+   };
+
+   $.ajax({
+      method: "POST",
+      data: userdat,
+      url: "/login"
+   }).then((response) => {
+      console.log(response);
+      tokenSession(response.token).then(getMainPage);
+   }).catch(console.log.bind(console));
 
-	});
+});
 
-	function tokenSession(token) {
-		sessionStorage.setItem("token", token);
-		return Promise.resolve(token);
-	}
+function tokenSession(token) {
+   sessionStorage.setItem("token", token);
+   return Promise.resolve(token);
+}
 
-	function getMainPage(token) {
-
-		$.ajax({
-			method: "GET",
-			url: "/user"
-			// beforeSend: function(request) {
-			// 	request.setRequestHeader("Authorization", `bearer ${token}`);
-			// }
-		}).then((res) => {
-			console.log("authorized");
-			location.assign("/user");
-		}).catch(console.log.bind(console));
-	}
+function getMainPage(token) {
+
+   $.ajax({
+      method: "GET",
+      url: "/user"
+      // beforeSend: function(request) {
+      // 	request.setRequestHeader("Authorization", `bearer ${token}`);
+      // }
+   }).then((res) => {
+      console.log("authorized");
+      location.assign("/user");
+   }).catch(console.log.bind(console));
+}
+</script>
+<script>
+	ReactDOM.render(
+	   React.createElement(UserAuth),
+	   document.getElementById("root")
+	);
 </script>
 
 </html>
diff --git a/server.js b/server.js
@@ -30,6 +30,7 @@ const certificate = httpsConf;
 const server_s = https.createServer(certificate, app);
 
 const staticPath = Join(__dirname, "./view");
+// const reactPath = Join(__dirname, "./userauth");
 app.use(express.static(staticPath));
 app.use("*", express.static(staticPath));
 

diff --git a/userauth/.gitignore b/userauth/.gitignore
@@ -0,0 +1,7 @@
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*
diff --git a/userauth/.travis.yml b/userauth/.travis.yml
@@ -0,0 +1,16 @@
+sudo: false
+
+language: node_js
+node_js:
+  - 8
+
+before_install:
+  - npm install codecov.io coveralls
+
+after_success:
+  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
+  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+
+branches:
+  only:
+    - master
diff --git a/userauth/CONTRIBUTING.md b/userauth/CONTRIBUTING.md
@@ -0,0 +1,25 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= v4 must be installed.
+
+## Installation
+
+- Running `npm install` in the component's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Running Tests
+
+- `npm test` will run the tests once.
+
+- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `npm run clean` will delete built resources.
diff --git a/userauth/README.md b/userauth/README.md
@@ -0,0 +1,16 @@
+# client-auth
+
+[![Travis][build-badge]][build]
+[![npm package][npm-badge]][npm]
+[![Coveralls][coveralls-badge]][coveralls]
+
+Describe client-auth here.
+
+[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
+[build]: https://travis-ci.org/user/repo
+
+[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
+[npm]: https://www.npmjs.org/package/npm-package
+
+[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
+[coveralls]: https://coveralls.io/github/user/repo
diff --git a/userauth/demo/src/index.js b/userauth/demo/src/index.js
@@ -0,0 +1,11 @@
+import React, {Component} from 'react'
+import {render} from 'react-dom'
+import Auth from '../../src'
+
+class Demo extends Component {
+  render() {
+    return <Auth />
+  }
+}
+
+render(<Demo/>, document.querySelector('#demo'))
diff --git a/userauth/nwb.config.js b/userauth/nwb.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  type: 'react-component',
+  npm: {
+    esModules: true,
+    umd: {
+      global: 'UserAuth',
+      externals: {
+        react: 'React'
+      }
+    }
+  }
+}