got something working

- moved service worker script to root dir so that fetch events would be caught
- lazily copied page code into sw
- imp note saved page

Author: nexus-uw

assets/manifest.json

@@ -6,22 +6,14 @@
   "theme_color": "#000000",
   "background_color": "#ffffff",
   "serviceworker": {
-    "src": "/assets/service-worker.js"
+    "src": "/service-worker.js"
   },
   "share_target": {
-    "action": "/assets/share-target/",
+    "action": "/share-target/",
     "method": "POST",
     "enctype": "multipart/form-data",
     "params": {
-      "text": "text",
-      "files": [
-        {
-          "name": "img",
-          "accept": [
-            "image/*"
-          ]
-        }
-      ]
+      "text": "text"
     }
   }
 }

mokintoken.go

@@ -235,6 +235,12 @@ func cleanUpDb(db *sql.DB) {
 	}
 }
 
+func serveSingle(pattern string, filename string) {
+    http.HandleFunc(pattern, func(w http.ResponseWriter, r *http.Request) {
+        http.ServeFile(w, r, filename)
+    })
+}
+
 func main() {
 
 	db, err := sql.Open("sqlite3", "./database/mokintoken.sqlite")
@@ -256,6 +262,9 @@ func main() {
 	// this should be handled by a cdn
 	http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))
 
+  serveSingle("/service-worker.js", "./assets/service-worker.js")
+
+
 	port := os.Getenv("PORT")
 	if port == "" {
 		port = "8080"

resources/js/index.js

@@ -19,8 +19,8 @@ main()
 const registerServiceWorker = async () => {
   if ("serviceWorker" in navigator) {
     try {
-      const registration = await navigator.serviceWorker.register("/assets/service-worker.js", {
-        scope: "/assets/",
+      const registration = await navigator.serviceWorker.register("/service-worker.js", {
+        scope: "/",
       })
       if (registration.installing) {
         console.log("Service worker installing")
@@ -34,6 +34,7 @@ const registerServiceWorker = async () => {
     }
   }
 }
-
-registerServiceWorker();
+if (window.matchMedia('(display-mode: standalone)').matches) {
+  registerServiceWorker()
+}
 

resources/js/noteSaved.js

@@ -1,6 +1,21 @@
+import QRCode from 'qrcode'
+
+
 export class NoteSaved {
 
   constructor() {
-    console.log('note saved todo')
+    const hash = window.location.hash.slice(1)
+    const id = new URLSearchParams(window.location.search).get('id')
+
+    const clearnetShareLink = `${document.querySelector('meta[name="clearnet"]').getAttribute('content')}/decrypt/${id}#${hash}`
+    document.getElementById('clearnetShareLink').href = clearnetShareLink
+
+    const dakrnetShareLink = `${document.querySelector('meta[name="darknet"]').getAttribute('content')}/decrypt/${id}#${hash}`
+    document.getElementById('dakrnetShareLink').href = dakrnetShareLink
+
+    Promise.all([
+      QRCode.toCanvas(document.getElementById('clearnetShareQR'), clearnetShareLink),
+      QRCode.toCanvas(document.getElementById('darknetShareQR'), dakrnetShareLink)
+    ])
   }
 }

resources/js/service-worker.js

@@ -2,24 +2,65 @@ import nacl from 'tweetnacl'
 import naclUutil from 'tweetnacl-util'
 import { Base64 } from 'js-base64'
 
-console.log("ass" + nacl + naclUutil + Base64)
-
-
+console.log("ass " + nacl + naclUutil + Base64)
+// https://stackoverflow.com/questions/51562781/service-worker-fetch-event-is-not-firing
+self.addEventListener('activate', function (event) {
+  console.log('Claiming control')
+  return self.clients.claim()
+})
 self.addEventListener("fetch", (event) => {
+
   // Regular requests not related to Web Share Target.
-  if (event.request.method !== "POST" || new URL(event.request.url).pathname != "/assets/share-target") {
+  if (event.request.method !== "POST" || new URL(event.request.url).pathname != "/share-target/") {
     event.respondWith(fetch(event.request))
     return
   }
 
   // Requests related to Web Share Target.
   event.respondWith(
     (async () => {
+
       const formData = await event.request.formData()
+      const nonce = nacl.randomBytes(nacl.secretbox.nonceLength)
+      const key = nacl.randomBytes(nacl.secretbox.keyLength)
       // encrypt note or image
       // send to fetch api
+      const imgBase64 = null // todo - base64
+      const f = await fetch('/api/save-note', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          encryptedText: naclUutil.encodeBase64(
+            nacl.secretbox(
+              naclUutil.decodeUTF8(formData.get('text')),
+              nonce,
+              key
+            )
+          ),
+          encryptedImg: imgBase64 != null ? naclUutil.encodeBase64(
+            nacl.secretbox(
+              naclUutil.decodeUTF8(imgBase64),
+              nonce,
+              key
+            )
+          ) : null,
+          // code is hard
+          expiresHours: "4",
+          expiresViews: "1"
+        })
+      })
+      const { id } = await f.json()
+
+      const hash = Base64.encode(
+        JSON.stringify({
+          nonce: naclUutil.encodeBase64(nonce),
+          key: naclUutil.encodeBase64(key)
+        })
+      )
       // respond with saved note page
-      return Response.redirect('/noteSaved#todoshitinthehash', 303)
+      return Response.redirect(`/noteSaved?id=${id}#${hash}`, 303)
     })(),
   )
 })

resources/js/welcome.js

@@ -38,7 +38,7 @@ export class Welcome {
       try {
 
         const imgBase64 = await getImgBase64(document.getElementById('img'))
-
+        // maybe refactor this with service worker code
         const f = await fetch('/api/save-note', {
           method: 'POST',
           headers: {

views/noteSaved.html

@@ -1,6 +1,15 @@
 {{define "content"}}
 
 <main>
-  <h1 class="tc f1 pv6">NOTE SAVED TODO/h1>
+  <div id="" class="tc">
+    <h1>note successfully encrypted and ready to share</h1>
+    <h4>either share <a id="clearnetShareLink" target="_blank" style="margin-right: 7px;">this link</a></h4>
+    <div class="db"> <canvas id="clearnetShareQR" style="display:block; margin: auto;"></canvas></div>
+    <h5>or this QR code</h5>
+    <hr />
+    <h4>For hidden service access <a id="dakrnetShareLink" target="_blank" style="margin-right: 7px;">link</a></h4>
+    <div class="db"> <canvas id="darknetShareQR" style="display:block; margin: auto;"></canvas></div>
+
+  </div>
 </main>
 {{end}}