small changes and fixes to error messages

src/components/EditPrivacy.vue

@@ -332,7 +332,7 @@
                   </div>
 
                   <!-- For the case that a container/resource does not have an existing .acl -->
-                  <div id="noAclExists" v-if="hasAcl === null">
+                  <div id="noAclExists" v-if="(hasAcl === null) && (!cannotMakeAcl)">
                     <v-alert
                       type="warning"
                       title="There is no .acl (permissions file) for this resource"
@@ -343,21 +343,42 @@
                       <span>Generate .acl</span>
                     </button>
                   </div>
+
+                  <!-- For the case that a an .acl connot be initialized (e.g. for a file) -->
+                  <div id="noAclMade" v-if="(hasAcl === null) && (cannotMakeAcl)">
+                    <v-alert
+                      type="error"
+                      title="Cannot initialize an .acl for this item"
+                      closable
+                      >The .acl of the container this file is located within will be used for access controls.</v-alert
+                    >
+                  </div>
                 </div>
               </div>
             </li>
           </ul>
         </div>
       </div>
     </div>
+
+    <hr />
+    <div class="req">
+      <h2>Privacy Editing Guide</h2>
+      <ol>
+        <li>Click the <b>Lock icon</b> next to a container or resource to see current access rights</li>
+        <li>Select the <b>"Add access rights +"</b> section to adjust access for a provided WebID</li>
+        <li>Use the nav bar above the container/resource list to navigate between containers</li>
+        <li><b>Note:</b> The left nav bar, the filter, and the info/notifications icons are not currently functional</li>
+      </ol>
+    </div>
   </body>
 </template>
 
 <script>
 import {
   getContainedResourceUrlAll,
 } from "@inrupt/solid-client";
-import { changeAcl, checkUrl, generateAcl } from "./privacyEdit";
+import { changeAcl, checkUrl, generateAcl, WorkingData } from "./privacyEdit";
 import { currentWebId, getPodURLs } from "./login";
 import {
   fetchPermissionsData,
@@ -389,6 +410,7 @@ export default {
       dirContents: WorkingData,
       containerContents: WorkingData,
       hasAcl: null,
+      cannotMakeAcl: false,
       currentLocation: "",
       currentUrl: null,
       urls: [],
@@ -636,6 +658,7 @@ export default {
       this.hasAcl = await fetchPermissionsData(path); // value is either .acl obj OR null (if .acl does not exist)
       if (this.hasAcl !== null) {
         this.hasAccess = await fetchAclAgents(path);
+        this.cannotMakeAcl = false;
       }
     },
 
@@ -645,8 +668,13 @@ export default {
      * @param path the URL of the resource or container for which an .acl is to be made
      */
     async makeNewAcl(path) {
-      await generateAcl(path, this.webId);
-      await this.getSpecificAclData(path)
+      try {
+        await generateAcl(path, this.webId);
+        await this.getSpecificAclData(path);
+      } catch (err) {
+        console.error(err);
+        this.cannotMakeAcl = true;
+      }
     },
   },
   mounted() {
@@ -909,4 +937,20 @@ label span {
 .new-acl:hover {
   background-color: #444;
 }
+.req {
+  font-family: "Courier New", monospace;
+  padding: 20px;
+  background: #d0e0fc;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.req h2 {
+  font-size: 30pt;
+  margin-top: 5px
+  ;
+}
+.req ol {
+  font-size: 16pt;
+  margin-left: 40px;
+}
 </style>

src/components/PodBrowser.vue

@@ -1,29 +1,40 @@
 <template>
   <v-container>
     <v-col cols="12">
+      <!-- Displays contents if the query returns results without an error -->
       <v-card
         title="Pod Contents"
         variant="tonal"
         justify="center"
         class="mx-auto"
         color="indigo-darken-3"
+        v-if="queryItems !== null"
       >
-        <v-infinite-scroll  >
+        <v-infinite-scroll>
           <template v-for="(item, index) in queryItems" :key="index">
             <!-- need a clever way to filter and display results here -->
-            <div
-              :class="['pa-2',
-                  index % 1 === 0
-                  ? 'bg-grey-lighten-2'
-                  : '',
-              ]"
-            >
+            <div :class="['pa-2', index % 1 === 0 ? 'bg-grey-lighten-2' : '']">
               {{ item }}
             </div>
           </template>
           <template v-slot:loading> </template>
         </v-infinite-scroll>
       </v-card>
+
+      <!-- Displays warning if query encounters an error -->
+      <v-card
+        variant="tonal"
+        justify="center"
+        class="mx-auto"
+        color="indigo-darken-3"
+        v-if="queryItems === null"
+      >
+        <v-alert
+          type="error"
+          title="Error occurred when querying Pod with Comunica"
+          >Apologies, but currently unable to display pod contents at the moment. Functionality will hopefully be fixed soon :/</v-alert
+        >
+      </v-card>
     </v-col>
   </v-container>
 </template>
@@ -70,7 +81,6 @@ export default {
     /*
     For the loading of the Pod data display
     */
-    
   },
   mounted() {
     // Delays the execution of these functions on page reload (to avoid async-related errors)

src/components/PodUpload.vue

@@ -133,7 +133,6 @@ export default {
   */
     async submitUpload() {
       this.filesUploaded = await handleFiles(this.files, this.pod);
-      console.log(this.filesUploaded)
       this.uploadDone = uploadSuccess(this.filesUploaded);
     },
   },

src/components/getData.ts

@@ -65,7 +65,7 @@ export async function fetchPermissionsData(url: UrlString): Promise<AclDataset |
   try {
     const solidDataWAcl = await getSolidDatasetWithAcl(url, { fetch: fetch });
     return getResourceAcl(solidDataWAcl);
-  }catch (error) {
+  } catch (error) {
     return null;
   }
 }

src/components/queryPod.ts

@@ -11,17 +11,21 @@ const myEngine = new QueryEngine();
  * @returns A Promise that resolves to a string[] of user Pod URLs, if available, or `undefined` if no pods are found.
 */
 
-async function executeQuery(source: string, session: Session): Promise<Bindings[]> {
+async function executeQuery(source: string, session: Session): Promise<Bindings[] | null> {
+  try {
+    const bindingsStream = await myEngine.queryBindings(`
+      SELECT ?o WHERE {
+        ?s <http://www.w3.org/ns/ldp#contains> ?o .
+      }`, {
+      sources: [source],
+      '@comunica/actor-http-inrupt-solid-client-authn:session': session
+    });
+
+    return await bindingsStream.toArray()
+  } catch (err) {
+    return null;
+  }
 
-  const bindingsStream = await myEngine.queryBindings(`
-  SELECT ?o WHERE {
-    ?s <http://www.w3.org/ns/ldp#contains> ?o .
-  }`, {
-  sources: [source],
-  '@comunica/actor-http-inrupt-solid-client-authn:session': session
-  });
-
-  return await bindingsStream.toArray()
 }
 
 export { executeQuery };

src/router.ts

@@ -10,9 +10,6 @@ import DataQuery from "./components/DataQuery.vue";
 import EditPrivacy from "./components/EditPrivacy.vue";
 import NotFound from "./components/Styling/NotFound.vue";
 
-// Async components to optimize loading of components as necessary
-// const PodUpload = () => import('./components/PodUpload.vue');
-// const NotFound = () => import('./components/Styling/NotFound.vue');
 
 import { isLoggedin } from "./components/login";
 
@@ -73,6 +70,7 @@ const router = createRouter({
 setTimeout(() => {
   router.beforeEach(async (to, from) => {
     // make sure the user is authenticated
+    console.log(from, ' --> ', to)
     if (!isLoggedin() && to.name !== "Login Page" && from.name === "Home") {
       return { name: "Login Page" };
     } else if (!isLoggedin() && to.name === "Home" && from.name !== "Login Page") {