Demo HMI2024

README.md

@@ -52,3 +52,4 @@ DEBUG="portal:*"
 ```
 
 
+Test for Gernot

public/css/style.css

@@ -49,12 +49,41 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 80px;
-  background-color: #525286;
-  color: #FFFFFF;
+  height: 110px;
+  background-color: #1ED760;
+  color: #000;
   margin-bottom: 0px;
 }
 
+.header img {
+  image-align: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: 110px;
+  width:  300px; 
+}
+
+.header a {
+  color: #000000;
+  float: center;
+  text-align: center;
+  height: 130px;
+
+}
+
+h2#my-header-h2 {
+  color: #000;
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+  margin: 0px;
+  background-color: #1ED760;
+}
+
+div#my-header-div {
+  background-color: #1ED760;
+}
+
 .title {
     color: inherit;
     text-decoration: none;
@@ -132,6 +161,15 @@ body {
     padding: 0;
 } /* margin: 0; */
 
+#my-divid {
+    margin: 20;
+    padding: 20;
+}
+
+#my-h2 {
+    margin-top: 10px;
+}
+
 .content-row {
     text-align: center;
     margin-left: auto;
@@ -140,15 +178,17 @@ body {
 }
 
 .content-delivery-row {
+    float: center;
     margin-top: 50px;
+    padding-left: 20px;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
 }
 
 .delivery-id {
     margin-top: 40px;
-    color: #525286;
+    color: #000;
     margin-bottom: 50px;
 }
 

server.js

@@ -179,7 +179,7 @@ async function get_delivery(delivery_id, req_session) {
 		err: null,
 		delivery: null
     }
-    var path = req_session.cb_endpoint + '/entities/' + delivery_id;
+    var path = 'https://one.batterypass.fiware.dev/orion-ld/ngsi-ld/v1' + '/entities/' + delivery_id;
     var url = new URL(path);
     url.searchParams.append('options', 'keyValues');
 
@@ -216,7 +216,7 @@ async function get_entities(type, req_session) {
 		err: null,
 		entities: null
     }
-    var path = req_session.cb_endpoint + '/entities?type='+type;
+    var path = 'https://one.batterypass.fiware.dev/orion-ld/ngsi-ld/v1' + '/entities?type='+type;
     var url = new URL(path);
 	try {
 		debug('Get request URL: %o', url);
@@ -298,7 +298,7 @@ async function patch_delivery(id, attr, val, req_session) {
 		err: null,
 		status: null
     }
-    var path = req_session.cb_endpoint + '/entities/' + id + '/attrs/' + attr;
+    var path = 'https://one.batterypass.fiware.dev/orion-ld/ngsi-ld/v1' + '/entities/' + id + '/attrs/' + attr;
     var url = new URL(path);
     const body = {
 		type: "Property",
@@ -692,9 +692,13 @@ app.post('/portal', async (req, res) => {
 		var entity_attributes = [];
 
 		if (result.delivery) {			
-			entity = result.delivery;
+			entity = result.delivery.output;
 			entity_keys = Object.keys(entity);
+
 			for (var key in entity_keys) {
+
+				debug('GBEntitiyKeys: %o', entity[key]);
+
 				let attribute = {
 					attribute_name: key,
 					attribute_value: entity[key]

views/default.pug

@@ -11,8 +11,14 @@ html
     .mdl-layout.mdl-js-layout.mdl-layout--fixed-header
       main
         block header
-          header.header
-            a.title(href='/')
-              h1 #{title}
+          // header.header
+            // a.title(href='/')
+              // h1 #{title}              
+          div 
+            a.header(href='/')
+              img.header(src='https://thebatterypass.io/_next/static/media/logo_primary.ff8fcc3a.png' alt='Homepage')
+          div
+            h2#my-header-h2
+              |Demo: Login with Verifiable Credentials (VCs)
         block topnav
         block content

views/index.pug

@@ -1,13 +1,13 @@
 extends default
 
 block content
-  div.container-login
-    h1 Login
-    table(class='table-login' border='1' frame='void' rules='rows')
+  div#my-divid
+    h2#my-h2 Click link below to login
+    table(border='1' frame='void' rules='rows')
       if siop
         tr
           td
-            a.button(href=`/loginSiop`) Login with VC
+            a.button(href=`/loginSiop`) Login demo with VCs
       if siopJwtOnly
         tr
           td
@@ -16,3 +16,137 @@ block content
         tr
           td
             a.button(href=`/login?idp=` + i.id) #{i.name}
+  div#my-divid
+    h2#my-h2
+      | a) Description how to login with VCs and use the demo
+      br
+    h3#prerequisites Prerequisites:
+    ul
+      li You need to obtain a VC before, follow info below in b)
+      li Tested with Chrome browser (desktop + mobile)
+      li Camera must be allowed on mobile phone
+      li Pop-up windows and Javascript must be allowed on mobile
+    br
+    h3#step-by-step Step-by-step:
+    ol
+      li
+        p
+          | Open this page in desktop browser 
+          a(href='https://portal-one.batterypass.fiware.dev/') Link
+      li
+        p Change to mobile browser to the homepage of the demo-wallet, you should see your VC you have obtained before, something like “urn:uuid:xxxxxxx”)
+      li
+        p Change back to desktop browser and click link “Login demo with VCs”
+      li
+        p A new small window appears “Scan this QR code to authenticate with a mobile”
+      li
+        p Change to mobile browser and press “Scan QR” in Authentication card
+      li
+        p Scan QR code with mobile browser
+      li
+        p Press appearing button “Send credentials”
+      li
+        p Press button “Accept”
+      li
+        p Login done successfully
+      li
+        p After successful login:
+      li
+        p
+          | Enter in field Type: 
+          br
+          | “Battery” 
+          br
+          | and press button “Get entities”
+      li
+        p
+          | Enter in field Battery ID: 
+          br
+          | “urn:batterypass:4a1331e8-646b-423d-b75a-cee15c486555” 
+          br
+          | and press button “Get Battery”
+    h2#my-h2 
+      | b) Description how to obtain demo VCs
+      br
+    h3#step-by-step-1 Step-by-step:
+    ol
+      li
+        p
+          | Open Keycloak IDM in desktop browser: 
+          a(href='https://kc-two.batterypass.fiware.dev/realms/fiware-server/account/#/') Link
+      li
+        p
+          | Sign in into Keycloak IDM
+          br
+          | (user: battery-user password: battery-user)
+      li
+        p Click Link “Verifiable Credentials”
+      li
+        p Select option: “BatteryPassAuthCredential ldp_vc” in drob-down box
+      li
+        p
+          | Change to mobile phone and demo-wallet open in mobile browser:
+          br
+          a(href='https://demo-wallet.fiware.dev') https://demo-wallet.fiware.dev
+          br
+          | (You should see a blue button “Scan a QR”)
+      li
+        p Change back to Keycloak in the desktop browser
+      li
+        p
+          | Click blue button “Initiate Credential-Issuance(OIDC4CI)”
+          br
+          | (a QR code appears)
+      li
+        p
+          | Change back to wallet in mobile browser an press blue button “Scan a QR”
+          br
+          | (be quick, QR code is just valid for some seconds)
+      li
+        p Receive the VC,
+      li
+        p Press button “Save” and see the VC received
+      li
+        p Scroll down and press the button “Home”
+    table
+      thead
+        tr
+          th
+          th
+      tbody
+        tr
+          td Battery passport
+          td
+            a(href='https://thebatterypass.eu/') Project website
+            br
+            a(href='https://thebatterypass.eu/assets/images/technical-guidance/pdf/2024_BatteryPassport_Technical_Guidance.pdf') Technical Guidance document
+            br
+            a(href='https://thebatterypass.eu/assets/images/content-guidance/pdf/2023_Battery_Passport_Content_Guidance.pdf') Content Guidance document
+            br
+            a(href='https://thebatterypass.io/en/did:web:acme.battery.pass:0226151e-949c-d067-8ef3-162431e28976') Software demonstrator
+            br
+            a(href='https://thebatterypass.eu/assets/images/content-guidance/pdf/2023_Battery_Passport_Data_Attributes.xlsx') Data attribute longlist
+            br
+            a(href='https://thebatterypass.eu/assets/images/value-assessment/pdf/2024_BatteryPassport_Value_Assessment.pdf') Value assessment
+        tr
+          td Follow us
+          td
+            a(href='https://www.linkedin.com/company/batterypass/') LinkedIn
+            br
+            a(href='https://www.youtube.com/@BatteryPass') Youtube
+        tr
+          td FIWARE Data Space Connector
+          td
+            a(href='https://github.com/FIWARE/data-space-connector') Github
+        tr
+          td Contact us
+          td
+            a(href='https://thebatterypass.eu/resources/contact-us/') Contact form
+        tr
+          td
+            img(src='https://thebatterypass.eu/wp-content/uploads/logo_BMWK_EN.png' alt='BMWK Funding Attributions')
+          td
+            | This project receives funding from the German Federal Ministry for Economic Affairs and Climate Action by resolution of the German Bundestag under grant agreement No BZF335.
+            br
+            a(href='https://fiware-legal.readthedocs.io/en/latest/PersonalDataProtectionPolicy.html') PrivacyPolicy
+            a(href='https://www.fiware.org/imprint/') Imprint

views/portal.pug

@@ -3,7 +3,6 @@ extends portal-layout
 block user
   a(href=`/logout`)
         | Logout
-  p #{user}
 
 
 block search
@@ -12,19 +11,19 @@ block search
           p.portal-delivery
             | 
             label(for='entity_type') Type:
-            input(type='text', name='entity_type', id='entity_type', value=entity_type, size="50")
+            input(type='text', name='entity_type', id='entity_type', value="Battery", size="50")
             input(type='submit', value="Get entities") 
         form(action='/portal', method='POST')
           p.portal-delivery
             | 
-            label(for='entity_id') #{input_label}:
-            input(type='text', name='entity_id', id='entity_id', value=entity_id, size="50")
+            label(for='entity_id') Battery Passport ID:
+            input(type='text', name='entity_id', id='entity_id', value="urn:batterypass:4a1331e8-646b-423d-b75a-cee15c486555", size="50")
             input(type='submit', value=get_label) 
         hr
 block entities 
   div.content-delivery-row
     h2.delivery-id
-      #{entities}
+      | Battery passports available
     each i in entities
        table.table
           tr
@@ -115,7 +114,7 @@ block sd
 block delivery  
   div.content-delivery-row
     h2.delivery-id
-      | #{delivery.id}
+      | Data elements of output object
     table.table
       thead 
         tr
@@ -126,13 +125,4 @@ block delivery
           tr
             if i[0] != 'id' && i[0] != 'type' 
               td #{i[0]}
-              td.highlight #{i[1]} 
-              td 
-                form(action='/portal', method='POST')
-                  p.delivery-action
-                    | 
-                    input(type='text', name='entity_change_val', id='entity_change_val', value=i[1])
-                    input(type='hidden', name='entity_change_attr', id='entity_change_attr', value=i[0])
-                    input(type='hidden', name='entity_id', id='entity_id', value=delivery.id)
-                    input(type='submit', value='Change')
-
+              td.highlight #{i[1]["value"]}