Add webapp selection to ACL pane; tweak trusted apps pane

Author: Tim Berners-Lee

sharing/sharingPane.js

@@ -13,7 +13,7 @@ const UI = require('solid-ui')
 
 module.exports = {
 
-  icon: UI.icons.iconBase + 'noun_locked_2160665_000000.svg', // noun_locked_2160665_000000.svg padlock
+  icon: UI.icons.iconBase + 'padlock-timbl.svg', // noun_locked_2160665_000000.svg padlock
   // noun_123691.svg was rainbow
 
   name: 'sharing',

trustedApplications/trustedApplicationsPane.js

@@ -1,12 +1,12 @@
-/*   Profile Editing Pane
+/*   Trusted Apps Editing Pane
 **
 ** Unlike most panes, this is available any place whatever the real subject,
-** and allows the user to edit their own profile.
+** and allows the user to edit their own profil, sepciufically the set of apps they trust.
 **
-** Usage: paneRegistry.register('profile/profilePane')
 ** or standalone script adding onto existing mashlib.
 */
 
+/* global alert */
 const nodeMode = (typeof module !== 'undefined')
 var panes, UI
 
@@ -29,11 +29,11 @@ const thisPane = {
   name: 'trustedApplications',
 
   label: function (subject) {
-    var types = kb.findTypeURIs(subject)
-    if (types[UI.ns.foaf('Person').uri] || types[UI.ns.vcard('Individual').uri]) {
-      return 'Manage your trusted applications'
-    }
-    return null
+    // var types = kb.findTypeURIs(subject) // Show aloways like home pane
+    // if (types[UI.ns.foaf('Person').uri] || types[UI.ns.vcard('Individual').uri]) {
+    return 'Manage your trusted applications'
+    // }
+    // return null
   },
 
   render: function (subject, dom) {
@@ -53,7 +53,7 @@ const thisPane = {
       var profile = subject.doc()
       var editable = UI.store.updater.editable(profile.uri, kb)
 
-      main.appendChild(createText('h3', 'Manage your trusted applications'))
+      main.appendChild(createText('h3', 'Manage your trusted Web Applications'))
 
       if (!editable) {
         main.appendChild(UI.widgets.errorMessageBlock(dom, `Your profile ${subject.doc().uri} is not editable, so we cannot do much here.`))
@@ -67,27 +67,28 @@ const thisPane = {
 
       main.appendChild(createText('h4', 'Notes'))
       main.appendChild(createContainer('ol', [
-        main.appendChild(createText('li', 'Trusted applications will get access to all resources that you have access to.')),
-        main.appendChild(createText('li', 'You can limit which modes they have by default.')),
-        main.appendChild(createText('li', 'They will not gain more access than you have.'))
+        main.appendChild(createText('li', 'If put a web app in this list, you can then add it to specific files or folders in the sharing pane.')),
+        main.appendChild(createText('li', 'You can also give an app acecss to ALL of you data, by checking the box here.  Only do that if you know the app very well.')),
+        main.appendChild(createText('li', 'When a person uses the web app, they AND the app must both have access.'))
       ]))
-      main.appendChild(createText('p', 'Application URLs must be valid URL. Examples are http://localhost:3000, https://trusted.app, and https://sub.trusted.app.'))
+      main.appendChild(createText('p', `Application URLs must be valid URL, without the trailing slash. Examples are https://mine.gihub.io,
+      http://localhost:3000, https://trusted.app, and https://sub.trusted.app.`))
     }, err => {
       statusArea.appendChild(UI.widgets.errorMessageBlock(dom, err))
     })
     return div
   } // render()
 } //
 
-function createApplicationTable(subject) {
+function createApplicationTable (subject) {
   var applicationsTable = createElement('table', {
     'class': 'results'
   })
 
   // creating headers
   var header = createContainer('tr', [
     createText('th', 'Application URL'),
-    createText('th', 'Access modes'),
+    createText('th', 'Access modes to ALL your data'),
     createText('th', 'Actions')
   ])
   applicationsTable.appendChild(header)
@@ -103,12 +104,12 @@ function createApplicationTable(subject) {
 
   return applicationsTable
 
-  function updateTable() {
+  function updateTable () {
     applicationsTable.parentElement.replaceChild(createApplicationTable(subject), applicationsTable)
   }
 }
 
-function createApplicationEntry(subject, origin, appModes, updateTable) {
+function createApplicationEntry (subject, origin, appModes, updateTable) {
   var trustedApplicationState = { origin, appModes, formElements: { modes: [] } }
   return createContainer('tr', [
     createContainer('td', [
@@ -125,7 +126,7 @@ function createApplicationEntry(subject, origin, appModes, updateTable) {
           'class': 'controlButton',
           style: 'background: LightGreen;'
         }, {
-          click: () => addOrEditApplication()
+          click: () => addOrEditApplication(subject)
         }),
         createText('button', 'Delete', {
           'class': 'controlButton',
@@ -139,15 +140,16 @@ function createApplicationEntry(subject, origin, appModes, updateTable) {
           'class': 'controlButton',
           style: 'background: LightGreen;'
         }, {
-          click: () => addOrEditApplication()
+          click: () => addOrEditApplication(subject)
         })
       ])
   ])
 
-  function addOrEditApplication() {
+  function addOrEditApplication (me) {
+    const profile = me.doc()
     let origin
     try {
-      origin = $rdf.sym(trustedApplicationState.formElements.origin.value)
+      origin = $rdf.sym(trustedApplicationState.formElements.origin.value.trim())
     } catch (err) {
       return alert('Please provide an application URL you want to trust')
     }
@@ -160,19 +162,19 @@ function createApplicationEntry(subject, origin, appModes, updateTable) {
 
     // add new triples
     const application = new $rdf.BlankNode()
-    kb.add(subject, ns.acl('trustedApp'), application, subject)
-    kb.add(application, ns.acl('origin'), origin, subject)
+    kb.add(subject, ns.acl('trustedApp'), application, profile) // @@ Add to profile or preferences for private ones
+    kb.add(application, ns.acl('origin'), origin, profile)
     trustedApplicationState.formElements.modes
       .filter(checkbox => checkbox.checked)
       .map(checkbox => $rdf.sym(checkbox.value))
       .forEach(mode => {
-        kb.add(application, ns.acl('mode'), mode)
+        kb.add(application, ns.acl('mode'), mode, profile)
       })
 
     save()
   }
 
-  function removeApplication() {
+  function removeApplication () {
     let origin
     try {
       origin = $rdf.sym(trustedApplicationState.formElements.origin.value)
@@ -189,7 +191,7 @@ function createApplicationEntry(subject, origin, appModes, updateTable) {
     save()
   }
 
-  function save() {
+  function save () {
     // remove response triples - this should not be necessary, but do not know how to turn it off
     kb.statementsMatching(null, ns.link('response')).forEach(st => {
       kb.removeStatements([...kb.statementsMatching(st.subject)])
@@ -213,7 +215,7 @@ function createApplicationEntry(subject, origin, appModes, updateTable) {
   }
 }
 
-function createElement(elementName, attributes = {}, eventListeners = {}, onCreated = null) {
+function createElement (elementName, attributes = {}, eventListeners = {}, onCreated = null) {
   var element = document.createElement(elementName)
   if (onCreated) {
     onCreated(element)
@@ -227,19 +229,19 @@ function createElement(elementName, attributes = {}, eventListeners = {}, onCrea
   return element
 }
 
-function createContainer(elementName, children, attributes = {}, eventListeners = {}, onCreated = null) {
+function createContainer (elementName, children, attributes = {}, eventListeners = {}, onCreated = null) {
   var element = createElement(elementName, attributes, eventListeners, onCreated)
   children.forEach(child => element.appendChild(child))
   return element
 }
 
-function createText(elementName, textContent, attributes = {}, eventListeners = {}, onCreated = null) {
+function createText (elementName, textContent, attributes = {}, eventListeners = {}, onCreated = null) {
   var element = createElement(elementName, attributes, eventListeners, onCreated)
   element.textContent = textContent
   return element
 }
 
-function createModesInput({ appModes, formElements }) {
+function createModesInput ({ appModes, formElements }) {
   return ['Read', 'Write', 'Append', 'Control'].map(mode => {
     var isChecked = appModes.some(appMode => appMode.value === ns.acl(mode).value)
     return createContainer('label', [

ui/pane.js

@@ -7,7 +7,8 @@ const panes = require('pane-registry')
 
 module.exports = {
 
-  icon: (module.__dirname || __dirname) + '22-builder.png',
+  // noun_170702.svg' builder   noun_122196.svg form
+  icon: UI.icons.iconBase + 'noun_170702.svg',
 
   name: 'ui',
 
@@ -62,7 +63,9 @@ module.exports = {
     }
     if (!store) store = kb.any(kb.sym(docuri), ns.link('annotationStore'))
     if (!store) store = UI.widgets.defaultAnnotationStore(subject)
-    if (!store) store = kb.sym('http://tabulator.org/wiki/ontologyAnnotation/common') // fallback
+
+    if (!store) store = kb.sym('https://formsregistry.solid.community/public/formRegistry/') // fallback
+    // if (!store) store = kb.sym('http://tabulator.org/wiki/ontologyAnnotation/common') // fallback
 
     // A fallback which gives a different store page for each ontology would be good @@