wip sharing

src/components/properties.js

@@ -17,24 +17,35 @@ class AppProperties extends Tonic {
     const notifications = document.querySelector('#notifications')
     const editor = document.querySelector('app-editor')
     const project = document.querySelector('app-project')
-    const config = new Config(app.currentProject?.id)
+    const config = new Config(app.state.currentProject?.id)
 
-    //
-    // if the user changes the project link, we need to update the project.
-    // projects are keyed on the bundle id, so get the bundle id from the
-    // config, then update the sharedSecret, then await configt the network.
-    //
-    if (event === 'project-link') {
+    if (event === 'org-name' || event === 'shared-secret') {
+      const app = this.props.parent
+      const config = new Config(app.state.currentProject?.id)
       if (!config) return
 
       let bundleId = await config.get('meta', 'bundle_identifier')
       if (bundleId) bundleId = bundleId.replace(/"/g, '')
-
       const { data: dataBundle } = await app.db.projects.get(bundleId)
-      dataBundle.sharedSecret = el.value
+
+      if (event === 'org-name') {
+        dataBundle.orgName = el.value
+        dataBundle.clusterId = await sha256(el.value, { bytes: true })
+      }
+
+      if (event === 'shared-secret') {
+        const sharedKey = await Encryption.createSharedKey(el.value)
+        const derivedKeys = await Encryption.createKeyPair(sharedKey)
+        const subclusterId = Buffer.from(derivedKeys.publicKey)
+
+        dataBundle.sharedKey = sharedKey
+        dataBundle.sharedSecret = el.value
+        dataBundle.subclusterId = subclusterId
+      }
 
       await app.db.projects.put(bundleId, dataBundle)
       await app.initNetwork()
+      this.reRender()
     }
 
     //
@@ -96,7 +107,7 @@ class AppProperties extends Tonic {
     const elCopy = Tonic.match(e.target, '[symbol-id="copy-icon"]')
 
     if (elCopy) {
-      navigator.clipboard.writeText('union://' + elCopy.nextElementSibling.value)
+      navigator.clipboard.writeText(elCopy.nextElementSibling.value)
       return
     }
 
@@ -119,7 +130,9 @@ class AppProperties extends Tonic {
   async render () {
     const app = this.props.parent
     const settings = app.state.settings
-    const config = new Config(settings.currentProject?.id)
+    const currentProject = app.state.currentProject
+    const cwd = currentProject?.id
+    const config = new Config(cwd)
     const previewWindows = []
 
     if (settings?.previewWindows) {
@@ -147,39 +160,38 @@ class AppProperties extends Tonic {
     let bundleId = await config.get('meta', 'bundle_identifier')
     if (bundleId) bundleId = bundleId.replace(/"/g, '')
 
-    let sharedSecret = ''
-    const cwd = app.state.currentProject?.id
+    let project = {}
 
     const { data: hasBundle } = await app.db.projects.has(bundleId)
 
     if (hasBundle) {
-      const { data: dataBundle } = await app.db.projects.get(bundleId)
-      sharedSecret = dataBundle.sharedSecret
+      const { data } = await app.db.projects.get(bundleId)
+      project = data
     } else if (cwd) {
+      console.log('NO BUNDLE FOUND, CREATING', bundleId, cwd)
       //
       // The clusterId is hard coded for now.
       //
-      const cluster = await sha256('socket-app-studio', { bytes: true })
-      const clusterId = cluster.toString('base64')
+      const clusterId = await sha256('socket-app-studio', { bytes: true })
 
-      sharedSecret = (await Encryption.createId()).toString('hex')
-      const sharedKey = await Encryption.createSharedKey(sharedSecret)
+      project.sharedSecret = (await Encryption.createId()).toString('hex')
+      const sharedKey = await Encryption.createSharedKey(project.sharedSecret)
       const derivedKeys = await Encryption.createKeyPair(sharedKey)
-
-      const subcluster = Buffer.from(derivedKeys.publicKey)
-      const subclusterId = subcluster.toString('base64')
+      const subclusterId = Buffer.from(derivedKeys.publicKey)
 
       //
       // Projects are keyed off the bundleId
       //
-      await app.db.projects.put(bundleId, {
+      Object.assign(project, {
         bundleId,
         clusterId,
         subclusterId,
         sharedKey,
-        sharedSecret // TODO(@heapwolf): encrypt sharedSecret via await configtial global password
+        orgName: 'socket-app-studio',
       })
 
+      await app.db.projects.put(bundleId, project)
+
       //
       // We need to tell the network to start listening for this subcluster
       //
@@ -286,12 +298,29 @@ class AppProperties extends Tonic {
           label="Sharing"
         >
           <tonic-input
-            label="Project Link"
+            label="Organization"
+            id="org-name"
+            data-event="org-name"
+            spellcheck="false"
+            value="${project.orgName}"
+          ></tonic-input>
+
+          <tonic-input
+            label="Shared Secret"
             id="shared-secret"
+            data-event="shared-secret"
+            spellcheck="false"
+            value="${project.sharedSecret}"
+          ></tonic-input>
+
+          <tonic-input
+            label="Project Link"
+            id="project-link"
             symbol-id="copy-icon"
             position="right"
-            data-event="project-link"
-            value="${sharedSecret}"
+            spellcheck="false"
+            readonly="true"
+            value="union://${project.sharedSecret}?bundleId=${encodeURIComponent(bundleId)}&orgName=${project.orgName}"
           ></tonic-input>
 
           <label>Project Status</label>

src/components/sprite.js

@@ -88,7 +88,7 @@ class AppSprite extends Tonic {
             c0.09-0.09,0.21-0.16,0.31-0.24C46.94,2.33,47.88,2.06,48.82,1.77z"/>
         </symbol>
 
-        <symbol id="search" viewBox="0 0 100 100">
+        <symbol id="search-icon" viewBox="0 0 100 100">
           <path d="M55.4,18c-13.8,0-25.1,11.2-25.1,25.1c0,5.6,1.9,10.7,5,14.9L17.1,76.2l5.2,5.2l18.2-18.2c4.2,3.1,9.3,5,14.9,5
             c13.8,0,25.1-11.2,25.1-25.1S69.3,18,55.4,18z M55.4,60.8c-9.8,0-17.8-8-17.8-17.8s8-17.8,17.8-17.8s17.8,8,17.8,17.8
             S65.2,60.8,55.4,60.8z"/>

src/components/subscribe.js

@@ -1,6 +1,6 @@
 import fs from 'socket:fs'
 import path from 'socket:path'
-import { Encryption } from 'socket:network'
+import { Encryption, sha256 } from 'socket:network'
 import { spawn, exec } from 'socket:child_process'
 
 import Tonic from '@socketsupply/tonic'
@@ -13,7 +13,50 @@ export class DialogSubscribe extends TonicDialog {
   }
 
   async click (e) {
-    // TODO(@heapwolf): create project entry, call initNetwork
+    super.click(e)
+
+    const el = Tonic.match(e.target, '[data-event]')
+    if (!el) return
+
+    const app = this.props.parent
+
+    const { event } = el.dataset
+
+    if (event === 'subscribe') {
+      const coInput = this.querySelector('#subscribe-shared-secret')
+      const url = new URL(coInput.value.trim())
+
+      const cId = url.searchParams.get('clusterId')
+      const bundleId = url.searchParams.get('bundleId')
+
+      if (!bundleId || !cId) {
+        const notifications = document.querySelector('#notifications')
+        notifications.create({
+          type: 'error',
+          title: 'Error',
+          message: 'Invalid Project Link'
+        })
+
+        super.hide()
+        return
+      }
+
+      const sharedSecret = url.hostname
+      const clusterId = await sha256(cId, { bytes: true })
+      const sharedKey = await Encryption.createSharedKey(sharedSecret)
+      const derivedKeys = await Encryption.createKeyPair(sharedKey)
+      const subclusterId = Buffer.from(derivedKeys.publicKey)
+
+      const project = {
+        bundleId,
+        clusterId,
+        subclusterId,
+        sharedKey,
+        sharedSecret
+      }
+
+      await app.db.projects.put(bundleId, project)
+    }
   }
 
   async render () {
@@ -23,19 +66,21 @@ export class DialogSubscribe extends TonicDialog {
       </header>
       <main>
         <p>
-          Enter the unique link for the project you want to subscribe to.
+          Enter the unique link for the project you want to subscribe to. You will receive updates as "patch requests".
         </p>
 
         <tonic-input
-          id="shared-secret-subscribe"
+          id="subscribe-shared-secret"
           label="Project Link"
+          placeholder="union://abc?bundleId=com.beep.boop&clusterId=haxortown"
+          value=""
           width="100%"
         >
         </tonic-input>
       </main>
       <footer>
         <div></div>
-        <tonic-button width="164px" data-event="force">Subscribe</tonic-button>
+        <tonic-button width="164px" data-event="subscribe">Subscribe</tonic-button>
       </footer>
     `
   }

src/css/component-properties.css

@@ -30,21 +30,3 @@ app-properties label {
 app-properties .pull-right {
   place-self: end;
 }
-
-app-properties #shared-secret {
-  position: relative;
-}
-
-app-properties #shared-secret input {
-  text-indent: 70px;
-}
-
-app-properties #shared-secret:before {
-  content: 'union://';
-  position: absolute;
-  height: 18px;
-  width: auto;
-  top: 53px;
-  left: 11px;
-  z-index: 1;
-}

src/css/component-subscribe.css

@@ -1,8 +1,8 @@
 dialog-subscribe {
   display: grid;
   grid-template-rows: auto 1fr;
-  max-width: 500px;
-  min-height: 280px;
+  max-width: 750px;
+  min-height: 300px;
   display: grid;
   font-family: var(--tonic-monospace);
 }
@@ -40,5 +40,5 @@ dialog-subscribe tonic-input:first-of-type {
 }
 
 dialog-subscribe main {
-  padding: 16px 16%;
+  padding: 16px 10%;
 }

src/css/view-home.css

@@ -10,6 +10,7 @@ view-home {
   opacity: 0;
   background: var(--tonic-background);
   padding: 6%;
+  overflow: hidden;
 }
 
 view-home.show {
@@ -24,6 +25,7 @@ view-home h1 {
   font-size: 38px;
   margin-top: 0;
   font-weight: 100;
+  white-space: nowrap;
 }
 
 view-home h1 b {
@@ -33,8 +35,27 @@ view-home h1 b {
   font-weight: 900;
 }
 
+
+view-home h2 {
+  text-transform: uppercase;
+  border-bottom: 1px solid;
+  color: var(--tonic-info);
+  margin-bottom: 4px;
+  padding: 2px 0;
+  font-family: var(--tonic-body);
+  font-weight: 100;
+}
+
+view-home .panel-label {
+  color: var(--tonic-info);
+  margin-bottom: 42px;
+  display: block;
+  font-family: var(--tonic-body);
+}
+
 view-home section {
   position: relative;
+  display: grid;
 }
 
 view-home section.hero {
@@ -57,3 +78,19 @@ view-home tonic-tab a[aria-selected="true"] {
   background: var(--tonic-accent);
   color: white;
 }
+
+view-home #tab-panel-profile section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6%;
+  align-items: end;
+}
+
+view-home #tab-panel-profile #profile-public-key textarea {
+  user-select: all;
+  -webkit-user-select: all;
+}
+
+view-home tonic-profile-image {
+  margin-right: auto;
+}

src/index.js

@@ -119,7 +119,7 @@ class AppView extends Tonic {
       currentProjectPath = path.join(path.DATA, 'projects', 'demo-project')
     }
 
-    currentProjectPath = path.join(currentProjectPath, this.state.settings.rootFile)
+    currentProjectPath = path.join(currentProjectPath, this.state.settings?.rootFile || 'src')
     return currentProjectPath.replace(path.DATA, '/preview')
   }
 
@@ -410,7 +410,8 @@ class AppView extends Tonic {
 
     try {
       settings = JSON.parse(await fs.promises.readFile(settingsFile, 'utf8'))
-    } catch {
+    } catch (err) {
+      console.log('NO SETTINGS', err)
       // NOPE
       return
     }
@@ -721,7 +722,7 @@ class AppView extends Tonic {
                 </tonic-split-bottom>
               </tonic-split>
 
-              <view-home id="view-home"></view-home>
+              <view-home id="view-home" parent=${this}></view-home>
               <view-image-preview id="image-preview" parent=${this}></view-image-preview>
             </tonic-split-right>
           </tonic-split>
@@ -742,8 +743,8 @@ class AppView extends Tonic {
 
       <dialog-subscribe
         id="dialog-subscribe"
-        width="50%"
-        height="20%"
+        width="65%"
+        height="30%"
         parent=${this}
       >
       </dialog-subscribe>