Merge pull request #120 from solid/auth-upgrade

[WIP] Auth Upgrade

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mashlib",
-  "version": "1.7.4",
+  "version": "1.7.5-beta.2",
   "description": "Data mashup library",
   "main": "./index.js",
   "files": [
@@ -47,8 +47,8 @@
   "dependencies": {
     "normalize.css": "^8.0.1",
     "rdflib": "^2.2.7",
-    "solid-panes": "^3.5.5",
-    "solid-ui": "^2.4.8"
+    "solid-panes": "^3.5.6-beta.1",
+    "solid-ui": "^2.4.9-beta"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.5",

src/global/footer.ts

@@ -1,6 +1,5 @@
-import { Fetcher, IndexedFormula, NamedNode, sym } from 'rdflib'
+import { Fetcher, IndexedFormula, NamedNode } from 'rdflib'
 import { authn } from 'solid-ui'
-import { SolidSession } from '../../typings/solid-auth-client'
 import { getName, getPod, getPodOwner } from './metadata'
 
 export async function initFooter (store: IndexedFormula, fetcher: Fetcher) {
@@ -11,12 +10,14 @@ export async function initFooter (store: IndexedFormula, fetcher: Fetcher) {
 
   const pod = getPod()
   const podOwner = await getPodOwner(pod, store, fetcher)
-  authn.solidAuthClient.trackSession(rebuildFooter(footer, store, pod, podOwner))
+  rebuildFooter(footer, store, pod, podOwner)()
+  authn.authSession.onLogin(rebuildFooter(footer, store, pod, podOwner))
+  authn.authSession.onLogout(rebuildFooter(footer, store, pod, podOwner))
 }
 
 function rebuildFooter (footer: HTMLElement, store: IndexedFormula, pod: NamedNode | null, podOwner: NamedNode | null) {
-  return async (session: SolidSession | null) => {
-    const user = session ? sym(session.webId) : null
+  return async () => {
+    const user = authn.currentUser()
     footer.innerHTML = ''
     footer.appendChild(await createControllerInfoBlock(store, user, pod, podOwner))
   }

src/global/header.ts

@@ -1,7 +1,6 @@
-import { IndexedFormula, NamedNode, sym } from 'rdflib'
+import { IndexedFormula, NamedNode } from 'rdflib'
 import { authn, widgets } from 'solid-ui'
 import { icon } from './icon'
-import { SolidSession } from '../../typings/solid-auth-client'
 import { emptyProfile } from './empty-profile'
 import { throttle } from '../helpers/throttle'
 import { getPod } from './metadata'
@@ -14,12 +13,15 @@ export async function initHeader (store: IndexedFormula) {
   }
 
   const pod = getPod()
-  authn.solidAuthClient.trackSession(rebuildHeader(header, store, pod))
+  rebuildHeader(header, store, pod)()
+  authn.authSession.onLogin(rebuildHeader(header, store, pod))
+  authn.authSession.onSessionRestore(rebuildHeader(header, store, pod))
+  authn.authSession.onLogout(rebuildHeader(header, store, pod))
 }
 
 function rebuildHeader (header: HTMLElement, store: IndexedFormula, pod: NamedNode) {
-  return async (session: SolidSession | null) => {
-    const user = session ? sym(session.webId) : null
+  return async () => {
+    const user = authn.currentUser()
     header.innerHTML = ''
     header.appendChild(await createBanner(store, pod, user))
   }
@@ -90,7 +92,7 @@ async function createUserMenu (store: IndexedFormula, user: NamedNode): Promise<
   menuItems.forEach(item => {
     loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(item.label, () => openDashboardPane(outliner, item.tabName || item.paneName))))
   })
-  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton('Log out', () => authn.solidAuthClient.logout())))
+  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton('Log out', () => authn.authSession.logout())))
 
   const loggedInMenu = document.createElement('nav')
   loggedInMenu.classList.add('header-user-menu__navigation-menu')

src/index.ts

@@ -14,7 +14,7 @@ global.mashlib = {
   versionInfo
 }
 
-global.panes.runDataBrowser = function () {
+global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
   // Set up cross-site proxy
   const fetcher: any = $rdf.Fetcher
   fetcher.crossSiteProxyTemplate = window.origin + '/xss/?uri={uri}'
@@ -32,7 +32,7 @@ global.panes.runDataBrowser = function () {
   // Authenticate the user
   authn.checkUser().then(function (_profile: $rdf.NamedNode | null) {
     // Set up the view for the current subject
-    const uri = window.location.href
+    uri = uri || window.location.href
     const subject = store.sym(uri)
     const outliner = panes.getOutliner(document)
     outliner.GotoSubject(subject, true, undefined, true, undefined)

static/browse.html

@@ -48,6 +48,28 @@
       console.log('ready for user input')
     }
 
+    // Add the Login Buttons
+    const loginButtonArea = document.getElementById("loginButtonArea");
+    if (!UI.authn.currentUser()) {
+      // HACK This is a really ugly way to add a login box.
+      // TODO make it prettier
+      UI.authn.checkUser()
+      loginButtonArea.appendChild(UI.authn.loginStatusBox(document, null, {}))
+    }
+    UI.authn.authSession.onLogin(() => {
+      loginButtonArea.innerHTML = '';
+      loginButtonArea.appendChild(UI.authn.loginStatusBox(document, null, {}))
+      // HACK doing this doesn't automatically refresh pages. But, it doesn't work
+      // in the previous version of the data browser, so for now I'm moving on
+      // To test this, navigate to a folder view, then log in. It will not automatically
+      // redirect
+      go()
+    })
+    UI.authn.authSession.onSessionRestore(() => {
+      loginButtonArea.innerHTML = '';
+      loginButtonArea.appendChild(UI.authn.loginStatusBox(document, null, {}))
+      go()
+    })
 });
 </script>
 </head>
@@ -58,6 +80,7 @@
       <td style="padding:1em; width:5em;" id="icon">URI:</td>
       <td><input id="uriField" type="text" style="font-size:100%; min-width:30em; padding:0.5em; width:95%;"/></td>
       <td  style="width:5em;"><input type="button" id="goButton" value="Go" /></td>
+      <td id="loginButtonArea"></td>
     </tr>
     <tr>
       <div class="TabulatorOutline" id="DummyUUID" role="main">

webpack.config.js

@@ -22,7 +22,6 @@ module.exports = (env, args) => {
       extensions: ['.js', '.ts'],
       alias: production ? {} : {
         'rdflib': path.resolve('./node_modules/rdflib'),
-        'solid-auth-client': path.resolve('./node_modules/solid-auth-client'),
         'solid-ui': path.resolve('./node_modules/solid-ui')
       }
     },