Feat: form-based policy creation

Author: Dexagod

demo/data/demo/public/authorizationsite/src/components/DatePicker.tsx

@@ -0,0 +1,30 @@
+import React, { useRef, useState } from 'react';
+
+function getDateCompatString(date: Date) {
+    return date.toISOString().split('T')[0]
+}
+
+const DatePicker = (props: any) => {
+    const [date, setDate] = useState(props.value)
+    const dateInputRef = useRef(null);
+  
+    const onChange = (e: any) => {
+        const date = new Date(e.target.value)
+        setDate(date);
+        props.onChange(date)
+    };
+  
+    return (
+      <div>
+        <input
+          type="date"
+          onChange={onChange}
+          value={getDateCompatString(date)}
+          ref={dateInputRef}
+        />
+      </div>
+    );
+};
+export default DatePicker
+  
+  

demo/data/demo/public/authorizationsite/src/components/FormModal.tsx

@@ -0,0 +1,116 @@
+import React, { useState, useEffect }from 'react';
+import Backdrop from '@mui/material/Backdrop';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { TextField } from '@mui/material';
+import DatePicker from './DatePicker';
+import { PolicyFormData, terms } from '../util/PolicyManagement';
+
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 600,
+  height: 600,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+const purposeValues: Map<string, string> = new Map([
+  ["age-verification", 'urn:solidlab:uma:claims:purpose:age-verification'],
+  ["some-random-purpose", 'urn:solidlab:uma:claims:purpose:some-random-purpose']
+]) 
+
+const PolicyFormModal = (props: any) => {
+  const [open, setOpen] = useState(false);
+
+  let now = new Date()
+  let end = new Date()
+  end.setDate(end.getDate() + 7)
+  
+  const [target, setTarget] = useState<string>(terms.views.age);
+  const [assignee, setAssignee] = useState<string>(terms.agents.vendor);
+  const [startDate, setStartDate] = useState<Date>(now);
+  const [endDate, setEndDate] = useState<Date>(end);
+  const [purpose, setPurpose] = useState<string>('urn:solidlab:uma:claims:purpose:age-verification');
+  const [description, setDescription] = useState<string>('Age verification for food store');
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => { 
+    setOpen(false) 
+  };
+
+  function commitPolicy(e: any) {
+    e.preventDefault();
+    handleClose()
+    props.addPolicy({target, assignee, startDate, endDate, purpose, description} as PolicyFormData);
+  }
+
+  return (
+    <div id="addPolicy">
+      <button id='addPolicyButton' onClick={handleOpen}>Add Policy</button>
+      {/* <Button onClick={handleOpen}>Open modal</Button> */}
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            timeout: 500,
+          },
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <h1>Add policy</h1>
+            <form onSubmit={commitPolicy}>
+              <label key='target'>target: <input value={target} readOnly/></label>
+              <br />
+              <label key='assignee'>assignee: <input value={assignee} readOnly/></label>
+              <br />
+              <label key='startdate'>start date:  <DatePicker value={startDate} onChange={(date: Date) => setStartDate(date)} /></label>
+              <br />
+              <label key='enddate'>end date:  <DatePicker value={endDate} onChange={(date: Date) => setEndDate(date) } /></label>
+              <br />
+              <label key='purpose'>purpose: 
+                <select name='purpose' onChange={(e: any) => setPurpose(e.target.value)}>
+                  {
+                    Array.from(purposeValues.keys()).map(key => (
+                      <option key={key} value={purposeValues.get(key)}>{key}</option>
+                    ))
+                  }
+                </select>
+              </label>
+              <br />
+              <label key='description'>description: <input value={description} onChange={(e:any) => setDescription(e.target.value)}/></label>
+              
+              <br />
+              <br />
+              <input type='submit' />
+            </form>
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}
+
+// targetIRI: string, 
+//   requestingPartyIRI: string, 
+//   constraints?: { 
+//     startDate?: Date, 
+//     endDate?: Date, 
+//     purpose?: string 
+//   }
+
+
+export default PolicyFormModal;

demo/data/demo/public/authorizationsite/src/components/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { createPolicy, doPolicyFlowFromString, readPolicy, readPolicyDirectory } from "../util/PolicyManagement";
+import { createAndSubmitPolicy, doPolicyFlowFromString, readPolicy, readPolicyDirectory } from "../util/PolicyManagement";
 import PolicyModal from "./Modal";
+import PolicyFormModal from "./FormModal"
 import { SimplePolicy } from "../util/policyCreation";
 
 export default function Home() { 
@@ -16,18 +17,26 @@ export default function Home() {
       getPolicies()
     }, [])
 
-    async function addPolicy(policyText: string) {
+    async function addPolicyFromText(policyText: string) {
         console.log('Adding the following policy:')
         console.log(policyText)
         await doPolicyFlowFromString(policyText)
         const policyObject = await readPolicy(policyText)
-        setPolicyList(policyList.concat(policyObject))
+        if(policyObject) setPolicyList(policyList.concat(policyObject))
+    }
+
+    async function addPolicyFromFormdata(formdata: any) {
+        console.log('Adding the following policy:')
+        console.log(formdata)
+        const policyObject = await createAndSubmitPolicy(formdata)
+        if(policyObject) setPolicyList(policyList.concat(policyObject))
     }
 
     function renderPolicy(policy: SimplePolicy) {
         return (
             <div key={policy.policyLocation} className={`policyentry ${policy.policyIRI === selectedPolicy ? 'selectedentry' : ''}`} onClick={() => setSelectedPolicy(policy.policyIRI)}>
-                <p>{policy.policyIRI}</p>
+                <p>id: {policy.policyIRI}</p>
+                <p>{policy.description}</p>
             </div>
         )
     }
@@ -45,7 +54,7 @@ export default function Home() {
                             policyList.map(renderPolicy)
                         }
                     </div>
-                    <PolicyModal addPolicy={addPolicy}/>
+                    <PolicyFormModal addPolicy={addPolicyFromFormdata}/>
                 </div>
                 <div id="PolicyDisplayScreen">
                     <textarea id="policyview" value={selectedPolicyText} readOnly/>

demo/data/demo/public/authorizationsite/src/index.css

@@ -36,22 +36,19 @@ nav {
 
 
 #policypage {
-  background-color: green;
   height: 80vh;
   margin-top: 5vh;
 }
 
 #policymanagementcontainer {
-  background-color: red;
+  background-color: #fffbe4;
   height: 200px;
   width: 80vw;
   margin: auto;
   display: flex;
   height: 100%;
-}
-
-#policyList {
-  flex: 80%;
+  overflow: hidden;
+  border: 1px solid black;
 }
 
 #addPolicy {
@@ -69,13 +66,26 @@ nav {
 #policyList {
   flex: 80%;
   overflow-y: scroll;
+  padding: 30px;
+}
+
+::-webkit-scrollbar {
+    width: 0;  /* Remove scrollbar space */
+    background: transparent;  /* Optional: just make scrollbar invisible */
+}
+/* Optional: show position indicator in red */
+::-webkit-scrollbar-thumb {
+    background: #FF0000;
 }
 
 .policyentry {
   height: 100px;
-  border: 1px solid black;
+  border: 2px solid gray;
   margin-top: 10px;
   background-color:beige;
+  text-align: left;
+  border-radius: 1em;
+  padding: .5em;
 }
 
 .selectedentry {

demo/data/demo/public/authorizationsite/src/util/PolicyManagement.ts

@@ -1,12 +1,21 @@
 /* eslint-disable max-len */
 
-import { Parser, Writer, Store } from 'n3';
+import { Parser, Writer, Store, DataFactory } from 'n3';
 import { SimplePolicy, demoPolicy } from "./policyCreation";
 
+export type PolicyFormData = {
+  target: string,
+  assignee: string, 
+  startDate: Date,
+  endDate: Date,
+  purpose: string,
+  description: string,
+}
+
 const parser = new Parser();
 const writer = new Writer();
 
-const terms = {
+export const terms = {
   solid: {
     umaServer: 'http://www.w3.org/ns/solid/terms#umaServer',
     viewIndex: 'http://www.w3.org/ns/solid/terms#viewIndex',
@@ -49,57 +58,64 @@ export async function readPolicyDirectory () {
   let resourceURIs = resourceQuads.map(q => q.object.value)
 
   console.log('IRIS', responseText, resourceURIs)
-  const policyObjects = await Promise.all(resourceURIs.map(async (location) => {
+  let policyObjects = await Promise.all(resourceURIs.map(async (location) => {
     const resource = await fetch(location);
     const resourceText = await resource.text()
     const policy = await readPolicy(resourceText)
     return policy
   }))
-  
-  return policyObjects || []
+  policyObjects = policyObjects.filter(e => e !== null)
+  return (policyObjects || []) as SimplePolicy[]
 
 }
 
 export async function readPolicy(policyText: string) {
+  if (policyText === '') return null;
   const parsed = await new Parser().parse(policyText)
   const store = new Store()
   store.addQuads(parsed)
   const policyIRI = store.getQuads(null, 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type', 'http://www.w3.org/ns/odrl/2/Agreement', null)[0]?.subject.value
   const ruleIRI = store.getQuads(null, 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type', 'http://www.w3.org/ns/odrl/2/Permission', null)[0]?.subject.value
+  const description = store.getQuads(null, 'http://purl.org/dc/elements/1.1/description', null, null)[0]?.object.value
   let simplePolicy: SimplePolicy = {
     representation: store,
     policyIRI,
     ruleIRIs: [ruleIRI],
     policyText: policyText,
+    description,
   }
 
   return simplePolicy
 }
 
-export async function createPolicy(policyText: string) {
+export async function createAndSubmitPolicy(formdata: PolicyFormData) {
   console.log('Creating policy')
 
   const policyContainer = 'http://localhost:3000/ruben/settings/policies/';
 
-
-  log(`Having been notified in some way of the access request, Ruben could go to his Authz Companion app, and add a policy allowing the requested access.`);
-
-  const startDate = new Date();
-  const endDate = new Date(startDate.valueOf() + 14 * 24 * 60 * 60 * 1000);
-  const purpose = 'urn:solidlab:uma:claims:purpose:age-verification'
-  const policy = demoPolicy(terms.views.age, terms.agents.vendor, { startDate, endDate, purpose })
+  const policy = demoPolicy(formdata.target, formdata.assignee, 
+    { startDate: formdata.startDate, endDate: formdata.endDate, purpose: formdata.purpose })
+    
+  const descriptionQuad = DataFactory.quad(
+    DataFactory.namedNode(policy.policyIRI), 
+    DataFactory.namedNode('http://purl.org/dc/elements/1.1/description'),
+    DataFactory.literal(formdata.description)
+  )
+  const policyString = writer.quadsToString(policy.representation.getQuads(null, null, null, null).concat(descriptionQuad))
 
   // create container if it does not exist yet
   await initContainer(policyContainer)
   const policyCreationResponse = await fetch(policyContainer, {
     method: 'POST',
     headers: { 'content-type': 'text/turtle' },
-    body: writer.quadsToString(policy.representation.getQuads(null, null, null, null))
+    body: policyString
   });
 
   if (policyCreationResponse.status !== 201) { log('Adding a policy did not succeed...'); throw 0; }
 
   log(`Now that the policy has been set, and the agent has possibly been notified in some way, the agent can try the access request again.`);
+  policy.policyText = policyString
+  return policy
 
 }
 

demo/data/demo/public/authorizationsite/src/util/policyCreation.ts

@@ -17,6 +17,7 @@ export interface SimplePolicy {
 
   policyLocation?: string;
   policyText?: string;
+  description?: string;
 }
 
 /**