Final touches demo + add pages to pod view

Requirements.md

@@ -2,6 +2,29 @@
 
 ## Final sprint
 
+### To Fix By Demo
+
+- [ ] Add Policy Screen update
+- [ ] Final fixes generic policy
+- [ ] Change trust display on auditing screen
+  - [ ] Change contract to "Instantiated Policy"
+  - [ ] Instantiated Policy -> Trusted instead of verified, age  keep verified
+- [ ] Auth app -> My pod app
+  - [ ] My Data
+  - [ ] My Policies
+  - [ ] Relevant linking?
+- [X] Login information on every App: 
+  - [X] Green -> You are logged in\
+  - [X] Red -> You are not logged in
+  - [X] Blue -> Auditer 3 is logged in
+- [ ] Store login buttons:
+  - [ ] Remove its'me option
+  - [ ] Continue as Ruben -> Share WebID link (with profile avatar) (This is not a Login!)
+
+
+
+
+
 ### HAS TO HAPPEN
 - [X] VC and token validation on the auditing frontend
   - [X] Represent this with green checkmarks in the frontend

demo/sites/auditingsite/src/App.css

@@ -93,4 +93,33 @@
   overflow-x: hidden;
   word-break: break-all;
   margin: 0;
+}
+
+
+.header-greeting {
+  z-index: 1500;
+  font-size: 1.2em;
+  margin: 0;
+  padding: 0;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.header-greeting .user-name {
+  font-weight: bold;
+}
+
+.header-greeting > p { 
+  margin-right: 1em;
+}
+
+.header-greeting > img {
+  height: 2em;
+  width: 2em;
+  margin: auto;
+  border-radius: 1em;
 }

demo/sites/auditingsite/src/App.tsx

@@ -7,6 +7,11 @@ export default function App() {
 
   return (
     <div className="App">
+      <div className="header-greeting">
+        <p>Logged in as:</p> 
+        <p className="user-name">Auditor #3</p> 
+        <img src="./profile.png"/>
+      </div>
       <ClippedDrawer />
     </div>
   )

demo/sites/auditingsite/src/index.css

@@ -1,3 +1,9 @@
+@property --main-theme-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #1976d2;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -15,7 +21,7 @@ code {
 }
 
 nav {
-  background-color: lightskyblue;
+  background-color: var(--main-theme-color);
   margin: 0;
   height: 3em;
 }
@@ -75,14 +81,14 @@ nav {
 }
 /* Optional: show position indicator in red */
 ::-webkit-scrollbar-thumb {
-    background: #FF0000;
+    /* background: #FF0000; */
 }
 
 .policyentry {
   height: 100px;
   border: 2px solid gray;
   margin-top: 10px;
-  background-color:beige;
+  background-color:skyblue;
   text-align: left;
   border-radius: 1em;
   padding: .5em;

demo/sites/authorizationsite/src/App.css

@@ -1,3 +1,11 @@
+
+@property --main-theme-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #6cc24a;
+  /* old value: rgb(108, 194, 74); */
+}
+
 .App {
   text-align: center;
   height: 100vh;
@@ -48,10 +56,28 @@
 }
 
 .header-greeting {
+  font-size: 1.2em;
   margin: 0;
-  padding: 1em;
+  padding: 0;
+  padding-right: 1em;
   position: absolute;
   right: 0;
   top: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.header-greeting .user-name {
+  font-weight: bold;
+}
+
+.header-greeting > p { 
+  margin-right: 1em;
+}
 
+.header-greeting > img {
+  height: 2em;
+  width: 2em;
+  margin: auto;
+  border-radius: 1em;
 }

demo/sites/authorizationsite/src/App.tsx

@@ -8,6 +8,8 @@ import './App.css';
 import Home from './components/Home';
 import Navigate from './components/Navigate';
 import SolidAuth from './components/SolidAuth'
+import DataPage from "./components/DataPage";
+import PolicyPage from "./components/PolicyPage";
 
 const rubenWebID = 'http://localhost:3000/ruben/profile/card#me'
 
@@ -46,39 +48,9 @@ export default function App() {
       .catch(console.error)
   })  
 
-  // return (
-  //   <div className="App">
-  //     {
-  //       checkingLogin
-  //       ? 
-  //         <p>Loading Session information ...</p>
-  //         : (
-  //         <div>
-  //           <SolidAuth loggedIn={loggedIn} />
-  //           {loggedIn &&
-  //             <BrowserRouter>
-  //               <Navigate />
-  //               <Routes>
-  //                 <Route path='/' element={<Home />} />
-  //                 <Route path='/query' element={<Query />} />
-  //               </Routes>
-  //             </BrowserRouter>
-  //           }
-  //         </div>
-  //       )
-  //     }
-  //   </div>
-  // )
-
   return (
     <div className="App">
-
-              <BrowserRouter>
-                <Navigate />
-                <Routes>
-                  <Route path='/' element={<Home />} />
-                </Routes>
-              </BrowserRouter>
+      <Home />
     </div>
   )
 }

demo/sites/authorizationsite/src/components/DataPage.tsx

@@ -0,0 +1,6 @@
+
+
+export default function DataPage() {
+
+    return <div />
+}

demo/sites/authorizationsite/src/components/Home.tsx

@@ -1,73 +1,14 @@
 import { useEffect, useState } from "react";
-import { createAndSubmitPolicy, doPolicyFlowFromString, 
-    readPolicy, readPolicyDirectory } from "../util/PolicyManagement";
-import PolicyFormModal from "./FormModal"
-import { SimplePolicy } from "../util/policyCreation";
+import PolicyPage from "./PolicyPage";
+import BasicTabs from "./Tabs";
 
 export default function Home() { 
 
-    const [policyList, setPolicyList] = useState<SimplePolicy[]>([])
-    const [selectedPolicy, setSelectedPolicy] = useState<null|string>(null)
-
-    useEffect(() => {
-      async function getPolicies() {
-        let policies: SimplePolicy[] = []
-        try {
-            policies = await readPolicyDirectory();
-        } catch (_ignored) {}
-
-        setPolicyList(policies)
-      }
-      getPolicies()
-    }, [])
-
-    async function addPolicyFromText(policyText: string) {
-        console.log('Adding the following policy:')
-        console.log(policyText)
-        await doPolicyFlowFromString(policyText)
-        const policyObject = await readPolicy(policyText)
-        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>id: {policy.policyIRI}</p>
-                <p>{policy.description}</p>
-            </div>
-        )
-    }
-
-    const selectedPolicyText = selectedPolicy 
-        ? policyList.filter(p => p.policyIRI === selectedPolicy)[0]?.policyText || ''
-        : ''
 
     return (
-        <div id="policypage">
-            <div id="policymanagementcontainer" className="rowcontainer">
-                <div id="PolicyListContainer" className="columncontainer">
-                    <div id="policyList" >
-                        {
-                            policyList.map(renderPolicy)
-                        }
-                    </div>
-                    <PolicyFormModal addPolicy={addPolicyFromFormdata}/>
-                </div>
-                <div id="PolicyDisplayScreen">
-                    <textarea id="policyview" value={selectedPolicyText} readOnly/>
-                </div>
+        <div id="page-wrapper">
+            <div id="page-container" className="rowcontainer">
+                <BasicTabs />
             </div>
         </div>
     )

demo/sites/authorizationsite/src/components/Navigate.tsx

@@ -4,8 +4,12 @@ export default function Navigate() {
     return (
         <div>
             <nav>
-                <h3 className="header-title">Policy Authorization Companion</h3>
-                <p className="header-greeting">Welcome Ruben Verborgh</p>
+                <h3 className="header-title">My Datastore Companion</h3>
+                <div className="header-greeting">
+                    <p>Logged in as:</p> 
+                    <p className="user-name">Ruben Verborgh</p> 
+                    <img src="./profile.png"/>
+                </div>
             </nav>
         </div>
     )