solid-panes 3.7.3-1bd42721 → 3.7.3-322e9b27

package/src/trustedApplications/__snapshots__/trustedApplications.test.ts.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`getStatementsToAdd should return all required statements to add the given permissions for a given origin 1`] = `
+[
+  Statement {
+    "graph": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://profile.example",
+    },
+    "object": BlankNode {
+      "classOrder": 6,
+      "isBlank": 1,
+      "isVar": 1,
+      "termType": "BlankNode",
+      "value": "bn_mock_app_id",
+    },
+    "predicate": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#trustedApp",
+    },
+    "subject": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://profile.example#me",
+    },
+  },
+  Statement {
+    "graph": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://profile.example",
+    },
+    "object": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://origin.example",
+    },
+    "predicate": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#origin",
+    },
+    "subject": BlankNode {
+      "classOrder": 6,
+      "isBlank": 1,
+      "isVar": 1,
+      "termType": "BlankNode",
+      "value": "bn_mock_app_id",
+    },
+  },
+  Statement {
+    "graph": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://profile.example",
+    },
+    "object": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#Read",
+    },
+    "predicate": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#mode",
+    },
+    "subject": BlankNode {
+      "classOrder": 6,
+      "isBlank": 1,
+      "isVar": 1,
+      "termType": "BlankNode",
+      "value": "bn_mock_app_id",
+    },
+  },
+  Statement {
+    "graph": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://profile.example",
+    },
+    "object": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#Write",
+    },
+    "predicate": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#mode",
+    },
+    "subject": BlankNode {
+      "classOrder": 6,
+      "isBlank": 1,
+      "isVar": 1,
+      "termType": "BlankNode",
+      "value": "bn_mock_app_id",
+    },
+  },
+]
+`;
+
+exports[`getStatementsToDelete should return all statements for the given origin 1`] = `
+[
+  Statement {
+    "graph": DefaultGraph {
+      "classOrder": undefined,
+      "termType": "DefaultGraph",
+      "uri": "chrome:theSession",
+      "value": "",
+    },
+    "object": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://app.example",
+    },
+    "predicate": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#trustedApp",
+    },
+    "subject": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://profile.example#me",
+    },
+  },
+  Statement {
+    "graph": DefaultGraph {
+      "classOrder": undefined,
+      "termType": "DefaultGraph",
+      "uri": "chrome:theSession",
+      "value": "",
+    },
+    "object": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://origin.example",
+    },
+    "predicate": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#origin",
+    },
+    "subject": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://app.example",
+    },
+  },
+  Statement {
+    "graph": DefaultGraph {
+      "classOrder": undefined,
+      "termType": "DefaultGraph",
+      "uri": "chrome:theSession",
+      "value": "",
+    },
+    "object": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#Read",
+    },
+    "predicate": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "http://www.w3.org/ns/auth/acl#mode",
+    },
+    "subject": NamedNode {
+      "classOrder": 5,
+      "termType": "NamedNode",
+      "value": "https://app.example",
+    },
+  },
+]
+`;

package/src/trustedApplications/trustedApplications.dom.ts

@@ -0,0 +1,276 @@
+import { NamedNode, Statement, sym } from 'rdflib'
+import { ns } from 'solid-ui'
+import { store } from 'solid-logic'
+import { generateRandomString, getStatementsToAdd, getStatementsToDelete } from './trustedApplications.utils'
+
+interface FormElements {
+  modes: HTMLInputElement[]
+  // This appears to be used to store either a node from the store,
+  // or a reference to the input (checkbox) element for a particular mode.
+  // These typings were created post-hoc, so I'm not sure if that was intentional.
+  // Thus, this union type should be considered as descriptive rather than prescriptive.
+  origin: undefined | NamedNode | HTMLInputElement
+}
+
+export function createApplicationTable (subject: NamedNode) {
+  const applicationsTable = createElement('table', {
+    class: 'results'
+  })
+
+  // creating headers
+  const header = createContainer('tr', [
+    createText('th', 'Application URL'),
+    createText('th', 'Access modes'),
+    createText('th', 'Actions')
+  ])
+  applicationsTable.appendChild(header);
+
+  // creating rows
+  (store.each(subject, ns.acl('trustedApp'), undefined, undefined) as unknown as Statement[])
+    .flatMap(app => store
+      .each(app as any, ns.acl('origin'), undefined, undefined)
+      .map(origin => ({
+        appModes: store.each(app as any, ns.acl('mode'), undefined, undefined) as NamedNode[],
+        origin: origin as NamedNode
+      })))
+    .sort((a: any, b: any) => (a.origin.value < b.origin.value ? -1 : 1))
+    .forEach(
+      ({ appModes, origin }: { appModes: NamedNode[]; origin: NamedNode }) =>
+        applicationsTable.appendChild(
+          createApplicationEntry(subject, origin, appModes, updateTable)
+        )
+    )
+
+  // adding a row for new applications
+  applicationsTable.appendChild(
+    createApplicationEntry(subject, null, [ns.acl('Read')], updateTable)
+  )
+
+  return applicationsTable
+
+  function updateTable () {
+    applicationsTable.parentElement!.replaceChild(
+      createApplicationTable(subject),
+      applicationsTable
+    )
+  }
+}
+
+function createApplicationEntry (
+  subject: NamedNode,
+  origin: NamedNode | null,
+  appModes: NamedNode[],
+  updateTable: () => void
+): HTMLTableRowElement {
+  const trustedApplicationState = {
+    origin,
+    appModes,
+    formElements: {
+      modes: [],
+      origin: undefined
+    } as FormElements
+  }
+  return createContainer('tr', [
+    createContainer('td', [
+      createContainer(
+        'form',
+        [
+          createElement(
+            'input',
+            {
+              class: 'textinput',
+              placeholder: 'Write new URL here',
+              value: origin ? origin.value : ''
+            },
+            {},
+            element => {
+              trustedApplicationState.formElements.origin = element
+            }
+          )
+        ],
+        {},
+        {
+          submit: addOrEditApplication
+        }
+      )
+    ]),
+    createContainer('td', [
+      createContainer(
+        'form',
+        createModesInput(trustedApplicationState),
+        {},
+        {
+          submit: addOrEditApplication
+        }
+      )
+    ]),
+    createContainer('td', [
+      createContainer(
+        'form',
+        origin
+          ? [
+              createText('button', 'Update', {
+                class: 'controlButton',
+                style: 'background: LightGreen;'
+              }),
+              createText(
+                'button',
+                'Delete',
+                {
+                  class: 'controlButton',
+                  style: 'background: LightCoral;'
+                },
+                {
+                  click: removeApplication
+                }
+              )
+            ]
+          : [
+              createText('button', 'Add', {
+                class: 'controlButton',
+                style: 'background: LightGreen;'
+              })
+            ],
+        {},
+        {
+          submit: addOrEditApplication
+        }
+      )
+    ])
+  ])
+
+  function addOrEditApplication (event: Event) {
+    event.preventDefault()
+    let origin
+    try {
+      origin = sym(trustedApplicationState.formElements.origin!.value)
+    } catch (err) {
+      return alert('Please provide an application URL you want to trust')
+    }
+
+    const modes = trustedApplicationState.formElements.modes
+      .filter(checkbox => checkbox.checked)
+      .map(checkbox => checkbox.value)
+
+    const deletions = getStatementsToDelete(
+      trustedApplicationState.origin || origin,
+      subject,
+      store,
+      ns
+    )
+    const additions = getStatementsToAdd(
+      origin,
+      generateRandomString(),
+      modes,
+      subject,
+      ns
+    )
+    if (!store.updater) {
+      throw new Error('Store has no updater')
+    }
+    store.updater.update(deletions, additions, handleUpdateResponse)
+  }
+
+  function removeApplication (event: Event) {
+    event.preventDefault()
+    let origin
+    try {
+      origin = sym(trustedApplicationState.formElements.origin!.value)
+    } catch (err) {
+      return alert(
+        'Please provide an application URL you want to remove trust from'
+      )
+    }
+
+    const deletions = getStatementsToDelete(origin, subject, store, ns)
+    if (!store.updater) {
+      throw new Error('Store has no updater')
+    }
+    store.updater.update(deletions, [], handleUpdateResponse)
+  }
+
+  function handleUpdateResponse (uri: any, success: boolean, errorBody: any) {
+    if (success) {
+      return updateTable()
+    }
+    console.error(uri, errorBody)
+  }
+}
+
+function createElement<K extends keyof globalThis.HTMLElementTagNameMap> (
+  elementName: K,
+  attributes: { [name: string]: string } = {},
+  eventListeners: { [eventName: string]: globalThis.EventListener } = {},
+  // eslint-disable-next-line no-unused-vars
+  onCreated: null | ((createdElement: globalThis.HTMLElementTagNameMap[K]) => void) = null
+) {
+  const element = document.createElement(elementName)
+  if (onCreated) {
+    onCreated(element)
+  }
+  Object.keys(attributes).forEach(attName => {
+    element.setAttribute(attName, attributes[attName])
+  })
+  Object.keys(eventListeners).forEach(eventName => {
+    element.addEventListener(eventName, eventListeners[eventName])
+  })
+  return element
+}
+
+export function createContainer<K extends keyof globalThis.HTMLElementTagNameMap> (
+  elementName: K,
+  children: HTMLElement[],
+  attributes = {},
+  eventListeners = {},
+  onCreated = null
+) {
+  const element = createElement(
+    elementName,
+    attributes,
+    eventListeners,
+    onCreated
+  )
+  children.forEach(child => element.appendChild(child))
+  return element
+}
+
+export function createText<K extends keyof globalThis.HTMLElementTagNameMap> (
+  elementName: K,
+  textContent: string | null,
+  attributes = {},
+  eventListeners = {},
+  onCreated = null
+) {
+  const element = createElement(
+    elementName,
+    attributes,
+    eventListeners,
+    onCreated
+  )
+  element.textContent = textContent
+  return element
+}
+
+function createModesInput ({ appModes, formElements }: {
+  appModes: NamedNode[]
+  formElements: FormElements
+}) {
+  return ['Read', 'Write', 'Append', 'Control'].map(mode => {
+    const isChecked = appModes.some(
+      appMode => appMode.value === ns.acl(mode).value
+    )
+    return createContainer('label', [
+      createElement(
+        'input',
+        {
+          type: 'checkbox',
+          ...(isChecked ? { checked: '' } : {}),
+          value: ns.acl(mode).uri
+        },
+        {},
+        element => formElements.modes.push(element)
+      ),
+      createText('span', mode)
+    ])
+  })
+}

package/src/trustedApplications/trustedApplications.test.ts

@@ -0,0 +1,82 @@
+/* eslint-env jest */
+import { TextEncoder, TextDecoder } from 'util'
+global.TextEncoder = TextEncoder as any
+global.TextDecoder = TextDecoder as any
+
+import * as $rdf from 'rdflib'
+import solidNamespace from 'solid-namespace'
+import { generateRandomString, getStatementsToDelete, getStatementsToAdd } from './trustedApplications.utils'
+
+const ns = solidNamespace($rdf)
+
+describe('generateRandomString', () => {
+  it('generates a random string five characters long', () => {
+    expect(generateRandomString().length).toBe(5)
+  })
+})
+
+describe('getStatementsToDelete', () => {
+  it('should return an empty array when there are no statements', () => {
+    const mockStore = $rdf.graph()
+    const mockOrigin = $rdf.sym('https://origin.example')
+    const mockProfile = $rdf.sym('https://profile.example#me')
+    expect(
+      getStatementsToDelete(mockOrigin, mockProfile, mockStore, ns)
+    ).toEqual([])
+  })
+
+  it('should return all statements for the given origin', () => {
+    const mockStore = $rdf.graph()
+    const mockApplication = $rdf.sym('https://app.example')
+    const mockOrigin = $rdf.sym('https://origin.example')
+    const mockProfile = $rdf.sym('https://profile.example#me')
+    mockStore.add(mockApplication, ns.acl('origin'), mockOrigin)
+    mockStore.add(mockApplication, ns.acl('mode'), ns.acl('Read'))
+    mockStore.add(mockProfile, ns.acl('trustedApp'), mockApplication)
+    const statementsToDelete = getStatementsToDelete(
+      mockOrigin,
+      mockProfile,
+      mockStore,
+      ns
+    )
+    expect(statementsToDelete.length).toBe(3)
+    expect(statementsToDelete).toMatchSnapshot()
+  })
+
+  it('should not return statements for a different origin', () => {
+    const mockStore = $rdf.graph()
+    const mockApplication = $rdf.sym('https://app.example')
+    const mockOrigin = $rdf.sym('https://origin.example')
+    const mockProfile = $rdf.sym('https://profile.example#me')
+    mockStore.add(mockApplication, ns.acl('origin'), mockOrigin)
+    mockStore.add(mockApplication, ns.acl('mode'), ns.acl('Read'))
+    mockStore.add(mockProfile, ns.acl('trustedApp'), mockApplication)
+
+    const statementsToDelete = getStatementsToDelete(
+      $rdf.lit('A different origin'), // @@ TODO Remove casting
+      mockProfile,
+      mockStore,
+      ns
+    )
+    expect(statementsToDelete.length).toBe(0)
+    expect(statementsToDelete).toEqual([])
+  })
+})
+
+describe('getStatementsToAdd', () => {
+  it('should return all required statements to add the given permissions for a given origin', () => {
+    const mockOrigin = $rdf.sym('https://origin.example')
+    const mockProfile = $rdf.sym('https://profile.example#me')
+    const modes = [ns.acl('Read').value, ns.acl('Write').value]
+
+    const statementsToAdd = getStatementsToAdd(
+      mockOrigin,
+      'mock_app_id',
+      modes,
+      mockProfile,
+      ns
+    )
+    expect(statementsToAdd.length).toBe(4)
+    expect(statementsToAdd).toMatchSnapshot()
+  })
+})

package/src/trustedApplications/trustedApplications.utils.ts

@@ -0,0 +1,51 @@
+import { BlankNode, IndexedFormula, NamedNode, st, Literal, sym, Statement } from 'rdflib'
+import { Namespaces } from 'solid-namespace'
+
+export function getStatementsToDelete (
+  origin: NamedNode | Literal,
+  person: NamedNode,
+  kb: IndexedFormula,
+  ns: Namespaces
+): any {
+  const applicationStatements = kb.statementsMatching(
+    null,
+    ns.acl('origin'),
+    origin
+  )
+  const statementsToDelete = applicationStatements.reduce(
+    (memo, st) => {
+      return memo
+        .concat(
+          kb.statementsMatching(
+            person,
+            ns.acl('trustedApp'),
+            st.subject as NamedNode
+          )
+        )
+        .concat(kb.statementsMatching(st.subject))
+    },
+    [] as Array<Statement>
+  )
+  return statementsToDelete
+}
+
+export function getStatementsToAdd (
+  origin: NamedNode,
+  nodeName: string,
+  modes: string[],
+  person: NamedNode,
+  ns: Namespaces
+): any {
+  const application = new BlankNode(`bn_${nodeName}`) // NamedNode(`${person.doc().uri}#${nodeName}`)
+  return [
+    st(person, ns.acl('trustedApp'), application, person.doc()),
+    st(application, ns.acl('origin'), origin, person.doc()),
+    ...modes
+      .map(mode => sym(mode))
+      .map(mode => st(application, ns.acl('mode'), mode, person.doc()))
+  ]
+}
+
+export function generateRandomString () {
+  return Math.random().toString(36).substr(2, 5)
+}

package/src/trustedApplications/trustedApplications.view.ts

@@ -0,0 +1,80 @@
+import { PaneDefinition } from 'pane-registry'
+import { NamedNode } from 'rdflib'
+import { icons, login, widgets } from 'solid-ui'
+import { store } from 'solid-logic'
+import { createApplicationTable, createContainer, createText } from './trustedApplications.dom'
+
+const thisColor = '#418d99'
+
+const trustedApplicationView: PaneDefinition = {
+  global: true,
+  icon: `${icons.iconBase}noun_15177.svg`,
+  name: 'trustedApplications',
+  label: () => null,
+  render: (subject, context) => {
+    const dom = context.dom
+    const div = dom.createElement('div')
+    div.classList.add('trusted-applications-pane')
+    div.setAttribute(
+      'style',
+      'border: 0.3em solid ' +
+      thisColor +
+      '; border-radius: 0.5em; padding: 0.7em; margin-top:0.7em;'
+    )
+    const table = div.appendChild(dom.createElement('table'))
+    const main = table.appendChild(dom.createElement('tr'))
+    const bottom = table.appendChild(dom.createElement('tr'))
+    const statusArea = bottom.appendChild(dom.createElement('div'))
+    statusArea.setAttribute('style', 'padding: 0.7em;')
+    render(dom, main, statusArea).catch(err => statusArea.appendChild(widgets.errorMessageBlock(dom, err)))
+    return div
+  }
+}
+
+async function render (dom, main, statusArea): Promise<void> {
+  const authContext = await login.ensureLoadedProfile({ dom: dom, div: main, statusArea: statusArea, me: null })
+  const subject = authContext.me as NamedNode
+
+  const profile = subject.doc()
+  if (!store.updater) {
+    throw new Error('Store has no updater')
+  }
+  const editable = store.updater.editable(profile.uri, store)
+
+  main.appendChild(createText('h3', 'Manage your trusted applications'))
+
+  if (!editable) {
+    main.appendChild(
+      widgets.errorMessageBlock(dom, `Your profile ${subject.doc().uri} is not editable, so we cannot do much here.`)
+    )
+    return
+  }
+
+  main.appendChild(createText('p', 'Here you can manage the applications you trust.'))
+
+  const applicationsTable = createApplicationTable(subject)
+  main.appendChild(applicationsTable)
+
+  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('p', 'Application URLs must be valid URL. Examples are http://localhost:3000, https://trusted.app, and https://sub.trusted.app.')
+  )
+}
+
+export default trustedApplicationView

package/src/types.ts

@@ -0,0 +1,34 @@
+interface SolidAuthorization {
+   
+  access_token: string
+   
+  client_id: string
+   
+  id_token: string
+}
+
+interface SolidClaim {
+   
+  at_hash: string
+  aud: string
+  azp: string
+  cnf: {
+    jwk: string
+  }
+  exp: number
+  iat: number
+  iss: string
+  jti: string
+  nonce: string
+  sub: string
+}
+
+export interface SolidSession {
+  authorization: SolidAuthorization
+  credentialType: string
+  idClaims: SolidClaim
+  idp: string
+  issuer: string
+  sessionKey: string
+  webId: string
+}