Implements SEA example (minor)

zrrrzzt · Jan 17, 2018 · f52dc0b · f52dc0b
1 parent c1e2b07
commit f52dc0b
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -3,17 +3,37 @@
 
 # gun-restrict-examples
 
-Example of how to restrict put with [GUN](https://github.com/amark/gun)
-
-The solutions are based on an answer from [stackoverflow](https://stackoverflow.com/questions/38598391/jwt-authentication-with-gundb)
+Examples of how to restrict writes and still have public reads with [GUN](https://github.com/amark/gun)
 
 ## Setup
 
 Clone or download the repo.
 
 cd into directory and run ```npm install```
 
-## Restricted put example
+## Restricted writes with SEA
+
+Open a terminal and start the services
+
+```bash
+$ npm run sea
+```
+This will start 3 servers
+- The GUN server at localhost port 8000
+- The authenticated site on localhost port 3000
+- The unauthenticated site on localhost port 4000 
+
+Open your browser at [http://localhost:3000](http://localhost:3000)
+
+Use the link to open the unathorized site
+
+### What to expect
+
+Everything you write on the authenticated site will be synced to the unathenticated, but not the other way around.
+
+Shut down the services with `CTRL + C` in the terminal
+
+## Restricted put with token example
 
 Open a terminal and start the services
 
@@ -45,6 +65,10 @@ $ npm run unrestricted
 ```
 Now your sync will work both ways.
 
+## Acknowledgements
+
+The solutions are based on an answer from [stackoverflow](https://stackoverflow.com/questions/38598391/jwt-authentication-with-gundb), the [SEA contact example](https://github.com/amark/gun/blob/master/examples/contact/index.html) and of course the [GUN Gitter](https://gitter.im/amark/gun)
+
 ## License
 
 [MIT](LICENSE)

diff --git a/gun-servers/server-gun-restricted.js b/gun-servers/server-gun-restricted.js
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "test": "nsp check && standard && ava",
     "unrestricted": "concurrently -k \"node www/server\" \"node gun-servers/server-gun-unrestricted\" \"node www/server 4000 not-authenticated.html\"",
+    "sea": "concurrently -k \"node www/server 3000 authenticated-sea.html\" \"node gun-servers/server-gun-unrestricted\" \"node www/server 4000 not-authenticated-sea.html\"",
     "start": "concurrently -k \"node www/server\" \"node gun-servers/server-gun-restricted-put\" \"node www/server 4000 not-authenticated.html\"",
     "refresh": "rm -rf node_modules && rm package-lock.json && npm install"
   },

diff --git a/www/authenticated-sea.html b/www/authenticated-sea.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+      <title>GUN restricted SEA</title>
+  </head>
+  <body>
+    <h1>Hello from authenticated with SEA</h1>
+    <div>
+      Visit the unauthed site
+      <p id="unauthed"></p> 
+    </div>
+    <form action="/" id="gunForm">
+      <input type="text" id="gunField">
+    </form>
+    <div>
+      <ul id="gunList"></ul>
+    </div>
+    <script src="http://localhost:8000/gun.js"></script>
+    <script src="http://localhost:8000/gun/lib/cryptomodules.js"></script>
+    <script src="http://localhost:8000/gun/sea.js"></script>
+    <script src="authenticated-sea.js"></script>
+  </body>
+</html>
diff --git a/www/authenticated-sea.js b/www/authenticated-sea.js
@@ -0,0 +1,67 @@
+localStorage.clear()
+
+function init () {
+  addListener(document.getElementById('gunForm'), 'submit', addLine)
+}
+
+const gun = Gun(`http://localhost:8000/gun`)
+const user = gun.user()
+
+user.create('alice', 'asdf', login)
+
+function login(ack){
+	console.log("login...")
+	user.auth('alice', 'asdf', write)
+}
+
+function write (data) {
+  user.get('lines').set('ready')
+  generateUnauthLink(data.pub)
+}
+
+function generateUnauthLink (key) {
+  const p = document.getElementById('unauthed')
+  p.innerHTML = `<a href="http://localhost:4000?key=${key}" target="_blank">press me</a>`
+}
+
+function addListener (element, type, func) {
+  element.removeEventListener(type, func)
+  element.addEventListener(type, func)
+}
+
+function addLine (e) {
+  e.preventDefault()
+  const field = document.getElementById('gunField')
+  user.get('lines').set(field.value)
+  field.value = ''
+}
+
+function createLi (data) {
+  const li = document.createElement('li')
+  li.innerHTML = data
+  return li
+}
+
+function updateLines () {
+  console.log('updateLines')
+  const ul = document.getElementById('gunList')
+  ul.innerHTML = ''
+  user.get('lines').map().val((value, index) => {
+    const li = createLi(value)
+    ul.appendChild(li)
+  })
+}
+
+gun.on('auth', () => {
+  updateLines()
+})
+
+function ready (fn) {
+  if (document.readyState !== 'loading') {
+    fn()
+  } else {
+    document.addEventListener('DOMContentLoaded', fn)
+  }
+}
+
+ready(init)
diff --git a/www/not-authenticated-sea.html b/www/not-authenticated-sea.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+      <title>GUN restricted test</title>
+  </head>
+  <body>
+    <h1>Hello from unauthenticated SEA</h1>
+    <form action="/" id="gunForm">
+      <input type="text" id="gunField">
+    </form>
+    <div>
+      <ul id="gunList"></ul>
+    </div>
+    <script src="http://localhost:8000/gun.js"></script>
+    <script src="http://localhost:8000/gun/lib/cryptomodules.js"></script>
+    <script src="http://localhost:8000/gun/sea.js"></script>
+    <script src="not-authenticated-sea.js"></script>
+  </body>
+</html>
diff --git a/www/not-authenticated-sea.js b/www/not-authenticated-sea.js
@@ -0,0 +1,50 @@
+localStorage.clear()
+const url = new URL(window.location.href)
+const publicKey = url.searchParams.get('key')
+
+function init () {
+  addListener(document.getElementById('gunForm'), 'submit', addLine)
+}
+
+const gun = Gun('http://localhost:8000/gun')
+
+function addListener (element, type, func) {
+  element.removeEventListener(type, func)
+  element.addEventListener(type, func)
+}
+
+function addLine (e) {
+  e.preventDefault()
+  const field = document.getElementById('gunField')
+  gun.get('lines').set(field.value)
+  field.value = ''
+}
+
+function createLi (data) {
+  const li = document.createElement('li')
+  li.innerHTML = data
+  return li
+}
+
+function updateLines () {
+  const ul = document.getElementById('gunList')
+  ul.innerHTML = ''
+  gun.get(`pub/${publicKey}`).get('lines').map().val((value, index) => {
+    const li = createLi(value)
+    ul.appendChild(li)
+  })
+}
+
+gun.get(`pub/${publicKey}`).get('lines').on(() => {
+  updateLines()
+})
+
+function ready (fn) {
+  if (document.readyState !== 'loading') {
+    fn()
+  } else {
+    document.addEventListener('DOMContentLoaded', fn)
+  }
+}
+
+ready(init)