Fix for 401/403 Errors

src/form/pane.js

@@ -6,6 +6,8 @@
 import * as UI from 'solid-ui'
 import { authn } from 'solid-logic'
 import * as $rdf from 'rdflib'
+import '../styles/formPane.css'
+
 const ns = UI.ns
 
 export const formPane = {
@@ -27,15 +29,16 @@
     const kb = context.session.store
     const dom = context.dom
 
-    const mention = function complain (message, style) {
+    const mention = function mention (message, className) {
       const pre = dom.createElement('p')
-      pre.setAttribute('style', style || 'color: grey; background-color: white')
+      pre.classList.add('formPaneMessage')
+      pre.classList.add(className || 'formPaneMessageInfo')
       box.appendChild(pre).textContent = message
       return pre
     }
 
-    const complain = function complain (message, style) {
-      mention(message, 'style', style || 'color: grey; background-color: #fdd;')
+    const complain = function complain (message) {
+      mention(message, 'formPaneMessageError')
     }
 
     const complainIfBad = function (ok, body) {
@@ -103,7 +106,7 @@
                   complainIfBad
                 )
               )
-              e.setAttribute('style', 'margin-left: auto; display: block;')
+              e.classList.add('formPaneEditButton')
             }
           }
           const anchor = dom.createElement('a')
@@ -174,7 +177,7 @@
 
     // 3. In a workspace store
     // @@ TODO: Can probably remove _followeach (not done this time because the commit is a very safe refactor)
     const _followeach = function (kb, subject, path) {
       if (path.length === 0) return [subject]
       const oo = kb.each(subject, path[0])
       let res = []

src/humanReadablePane.js

@@ -7,6 +7,7 @@
 import { Util } from 'rdflib'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
+import './styles/humanReadablePane.css'
 
 // Helper function to check if a URI has a markdown file extension
 const isMarkdownFile = (uri) => {
@@ -171,13 +172,18 @@
     if (ct) {
       // console.log('humanReadablePane: c-t:' + ct)
     } else {
       console.log('humanReadablePane: unknown content-type?')
     }
 
     //  @@ When we can, use CSP to turn off scripts within the iframe
     div.setAttribute('class', 'docView')
     div.setAttribute('style', 'display: block; width: 100%; max-width: 100%; box-sizing: border-box;')
 
+    const setFrameDisplayStyles = function (frame, lines) {
+      frame.classList.add('doc', 'humanReadableFrame')
+      frame.style.setProperty('--human-readable-height', `${lines}em`)
+    }
+
     // render markdown to html in a DIV element
     const renderMarkdownContent = function (frame) {
       kb.fetcher.webOperation('GET', subject.uri).then(response => {
@@ -216,7 +222,7 @@
 
     if (isMarkdown) {
       // For markdown, use a DIV element and render the content
-      const frame = myDocument.createElement('DIV')
+      const frame = myDocument.createElement('div')
       renderMarkdownContent(frame)
       const frameContainer = myDocument.createElement('div')
       frameContainer.setAttribute('style', 'display: block; width: 100%; max-width: 100%; box-sizing: border-box;')
@@ -232,7 +238,7 @@
       div.appendChild(frameContainer)
     } else {
       // For other content types, use IFRAME
-      const frame = myDocument.createElement('IFRAME')
+      const frame = myDocument.createElement('iframe')
 
       // Apply sandbox for HTML/XHTML
       if (ct === 'text/html' || ct === 'application/xhtml+xml') {

src/pad/padPane.ts

@@ -394,7 +394,7 @@ const paneDef: PaneDefinition = {
         // give the user links to the new app
 
         const p = div.appendChild(dom.createElement('p'))
-        p.setAttribute('style', 'font-size: 140%;')
+        p.classList.add('padPaneSuccess')
         p.innerHTML =
           'Your <a href=\'' +
           newIndexDoc.uri +
@@ -420,7 +420,7 @@ const paneDef: PaneDefinition = {
 
       const title =
         store.any(subject, ns.dc('title')) || store.any(subject, ns.vcard('fn'))
-      if (paneOptions.solo && typeof window !== 'undefined' && title) {
+      if (paneOptions?.solo && typeof window !== 'undefined' && title) {
         window.document.title = title.value
       }
       options.exists = exists