Merge pull request #53 from discipl/issue50/configurabillity

Configurability and smaller QR code
discipl · Apr 8, 2019 · 2b2473f · 2b2473f
2 parents e486252 + a3ba191
commit 2b2473f
Show file tree

Hide file tree

Showing 20 changed files with 2,907 additions and 2,805 deletions.
diff --git a/clerk-frontend/Dockerfile b/clerk-frontend/Dockerfile
@@ -9,7 +9,6 @@ RUN npm install --unsafe-perm
 ADD src /app/src
 RUN npm run build
 
-
 FROM nginx:1.15.8
 ADD nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=0 /app/build /usr/share/nginx/html
+COPY --from=0 /app/build /usr/share/nginx/html
diff --git a/clerk-frontend/cypress/integration/scenario_spec.js b/clerk-frontend/cypress/integration/scenario_spec.js
@@ -22,7 +22,7 @@ describe('clerk-frontend', () => {
       let canvas = canvasArray[0]
       let context = canvas.getContext('2d')
       // This a pixel just from the top left of the QR code based on the offset
-      let pixel = context.getImageData(320, 420, 1, 1)
+      let pixel = context.getImageData(320, 520, 1, 1)
       expect(pixel.data).to.deep.equal(new Uint8ClampedArray([255, 255, 255, 255]))
     })
 

diff --git a/clerk-frontend/package-lock.json b/clerk-frontend/package-lock.json
diff --git a/clerk-frontend/package.json b/clerk-frontend/package.json
@@ -1,14 +1,14 @@
 {
   "name": "clerk-frontend",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "dependencies": {
     "@discipl/abundance-service": "~0.3.0",
     "@discipl/core-ephemeral": "^0.4.0",
-    "@discipl/paper-wallet": "~0.3.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-scripts": "2.1.3",
+    "@discipl/paper-wallet": "^0.4.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "^2.1.8",
     "rxjs": "^6.4.0"
   },
   "scripts": {
@@ -29,6 +29,6 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "cypress": "^3.1.5"
+    "cypress": "^3.2.0"
   }
 }
diff --git a/clerk-frontend/src/configuration/wpsvc.json b/clerk-frontend/src/configuration/wpsvc.json
@@ -0,0 +1,60 @@
+{
+  "EPHEMERAL_ENDPOINT" : "http://localhost:3232",
+  "EPHEMERAL_WEBSOCKET_ENDPOINT" : "ws://localhost:3233",
+  "PRODUCT_NEED" : "BRP_UITTREKSEL_NEED",
+  "SOURCE_ARGUMENT" : "BSN",
+  "PRODUCT_ACCEPT" : "BRP_UITTREKSEL_ACCEPT",
+  "PRODUCT_NAME" : "Gewaarmerkt digitaal afschrift van gegevens uit de basisregistratie personen (BRP)",
+  "PRODUCT_DESCRIPTION" : "Uittreksel Basis Registratie Persoonsgegevens",
+  "PRODUCT_PURPOSE" : "Bewijs leveren voor verblijfadres in woonplaats",
+  "EXPORT_TYPES" : {
+    "@discipl/paper-wallet" : {
+      "template" : {
+
+        "backgroundImage" : "form-assets/another_pdf_template.png",
+
+        "logoImage": "form-assets/logo.png",
+        "logoWidth": 210,
+        "logoHeight": 160,
+        "logoOffsetX": 0,
+        "logoOffsetY": 0,
+
+        "disciplImage": "form-assets/discipl.png",
+        "disciplWidth": 90,
+        "disciplHeight": 90,
+        "disciplOffsetX": 460,
+        "disciplOffsetY": 35,
+
+        "canvasWidth": 595,
+        "canvasHeight": 838,
+
+        "productHeaderFont": "bold 11.5px helvetica",
+        "productHeaderText": "Gewaarmerkt digitaal afschrift van gegevens uit de basisregistratie personen (BRP)",
+        "productHeaderOffsetX": 40,
+        "productHeaderOffsetY": 190,
+
+        "subheaderFont": "11.5px helvetica",
+        "subheaderText": "Onderstaand persoon is bij de gemeente Haarlem ingeschreven",
+        "subheaderOffsetX": 40,
+        "subheaderOffsetY": 210,
+
+        "claimDataFont": "11.5px helvetica",
+        "prefixAttributes": true,
+        "claimDataOffsetX": 40,
+        "claimDataOffsetY": 255,
+        "claimDataLineSpacing": 15,
+
+        "qrOffsetX": 320,
+        "qrOffsetY": 520,
+        "qrWidth": 150,
+        "qrHeight": 150,
+
+        "footerFont": "10px helvetica",
+        "footerWidth": 500,
+        "footerHeight": 200,
+        "footerOffsetX": 600,
+        "footerOffsetY": 30
+      }
+    }
+  }
+}
diff --git a/clerk-frontend/src/need-wizard/ConfirmStep.js b/clerk-frontend/src/need-wizard/ConfirmStep.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import * as abundance from '@discipl/abundance-service'
 import { take } from 'rxjs/operators'
 
-const BRP_UITTREKSEL = 'BRP_UITTREKSEL_NEED'
-const BSN_CLAIM_PREDICATE = 'BSN'
+import CONFIGURATION from '../configuration/wpsvc.json'
 
 const timeoutPromise = (timeoutMillis) => {
   return new Promise(function (resolve, reject) {
@@ -20,12 +19,13 @@ class ConfirmStep extends Component {
 
   async componentDidMount() {
     await timeoutPromise(100)
-    let needSsid = await abundance.need('ephemeral', BRP_UITTREKSEL)
+
+    let needSsid = await abundance.need('ephemeral', CONFIGURATION.PRODUCT_NEED)
     await timeoutPromise(100)
     let matchPromise = (await abundance.observe(needSsid.did, 'ephemeral')).pipe(take(1)).toPromise()
     await timeoutPromise(100)
 
-    await abundance.getCoreAPI().claim(needSsid, { [BSN_CLAIM_PREDICATE]: this.props.bsn })
+    await abundance.getCoreAPI().claim(needSsid, { [CONFIGURATION.SOURCE_ARGUMENT]: this.props.bsn })
     await timeoutPromise(100)
     let match = await matchPromise
 
@@ -35,6 +35,7 @@ class ConfirmStep extends Component {
       this.props.ssidsChanged(personalDid, needSsid)
     }
 
+
     let brpPromise = (await abundance.getCoreAPI().observe(personalDid, null, true)).pipe(take(1)).toPromise()
 
     let brp = await brpPromise

diff --git a/clerk-frontend/src/need-wizard/DeliveryStep.js b/clerk-frontend/src/need-wizard/DeliveryStep.js
@@ -2,92 +2,49 @@ import React, { Component } from 'react';
 import * as abundance from '@discipl/abundance-service'
 import * as paperWallet from '@discipl/paper-wallet'
 import { take } from 'rxjs/operators'
-import { loadImage } from 'canvas'
-
-const BRP_UITTREKSEL_ACCEPT = 'BRP_UITTREKSEL_ACCEPT'
-const AGREE = 'Gewaarmerkt digitaal afschrift van gegevens uit de basisregistratie personen (BRP)'
-
-let template = {
-  // background
-  backgroundImage: 'form-assets/another_pdf_template.png',
-  // logo from municipality
-  logoImage: 'form-assets/logo.png',
-  logoWidth: 210,
-  logoHeight: 160,
-  logoOffsetX: 0,
-  logoOffsetY: 0,
-  // logo discipl
-  disciplImage: 'form-assets/discipl.png',
-  disciplWidth: 90,
-  disciplHeight: 90,
-  disciplOffsetX: 460,
-  disciplOffsetY: 35,
-  // canvas size (prone for deletion?)
-  canvasWidth: 595, // 8.27 inch @ 72 dpi
-  canvasHeight: 838, // 11.64 inch @ 72 dpi
-  // header
-  productHeaderFont: 'bold 11.5px helvetica',
-  productHeaderText: AGREE,
-  productHeaderOffsetX: 40,
-  productHeaderOffsetY: 190,
-  // subheader
-  subheaderFont: '11.5px helvetica',
-  subheaderText: 'Onderstaand persoon is bij de gemeente Haarlem ingeschreven',
-  subheaderOffsetX: 40,
-  subheaderOffsetY: 210,
-  // claimdata
-  claimDataFont: '11.5px helvetica',
-  prefixAttributes: true,
-  claimDataOffsetX: 40,
-  claimDataOffsetY: 255,
-  claimDataLineSpacing: 15,
-  // QR code
-  qrOffsetX: 320,
-  qrOffsetY: 420,
-  qrWidth: 250,
-  qrHeight: 250,
-  // footer
-  footerFont: '10px helvetica',
-  footerWidth: 500,
-  footerHeight: 200,
-  footerOffsetX: 600,
-  footerOffsetY: 30
-}
+import { createCanvas, loadImage } from 'canvas'
+
+import CONFIGURATION from '../configuration/wpsvc.json'
+
+let template = CONFIGURATION.EXPORT_TYPES['@discipl/paper-wallet'].template
 
 class ConfirmStep extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {}
+    this.state = {
+      attestationLink : null,
+      canvas : null
+    }
 
     this.canvasRef = React.createRef()
   }
 
+  deliveryChanged(link,vc) {
+    if (this.props.deliveryChanged) {
+      this.props.deliveryChanged(link,vc)
+    }
+  }
+
   async componentDidMount() {
     console.log(this.props)
 
-    let agreePromise = (await abundance.getCoreAPI().observe(this.props.personalDid, { [AGREE]: null })).pipe(take(1)).toPromise()
+    let agreePromise = (await abundance.getCoreAPI().observe(this.props.personalDid, { [CONFIGURATION.PRODUCT_NAME]: null })).pipe(take(1)).toPromise()
 
     // Express acceptance of document
-    await abundance.getCoreAPI().claim(this.props.needSsid, { [BRP_UITTREKSEL_ACCEPT]: '' })
+    await abundance.getCoreAPI().claim(this.props.needSsid, { [CONFIGURATION.PRODUCT_ACCEPT]: '' })
 
     let agree = await agreePromise
-    // Get attes
-    let attestationLink = agree.claim.data[AGREE]
-    let attestation = await abundance.getCoreAPI().get(attestationLink)
-
-    let brpClaimLink = attestation.data[AGREE]
 
-    console.log(brpClaimLink)
+    let vc = await paperWallet.issue(agree.claim.data[CONFIGURATION.PRODUCT_NAME])
 
-    let vc = await paperWallet.issue(attestationLink)
 
-    console.log(vc)
+    this.canvasRef.current.width = template.canvasWidth
+    this.canvasRef.current.height = template.canvasHeight
 
-    this.canvasRef.current.width = paperWallet.template.canvasWidth
-    this.canvasRef.current.height = paperWallet.template.canvasHeight
 
     await paperWallet.toCanvas(vc, template, this.canvasRef.current)
+
     let context = this.canvasRef.current.getContext('2d')
     // Draw logo
     context.drawImage(await loadImage(template.logoImage), template.logoOffsetX, template.logoOffsetY, template.logoWidth, template.logoHeight)
@@ -101,7 +58,7 @@ class ConfirmStep extends Component {
     context.fillText(template.subheaderText, template.subheaderOffsetX, template.subheaderOffsetY)
     // draw footer
     context.font = template.footerFont
-    context.fillText("Dit is een automatisch gegenereerd document en daarom niet ondertekent.", 110, 776)
+    context.fillText("Dit is een automatisch gegenereerd document en daarom niet ondertekend.", 110, 776)
     context.fillText("De gegevens zijn verkregen via NLX en geborgd in de QR-code", 140, 788)
     context.fillText("U kunt de echtheid van dit document controleren via een bijbehorende app of online", 85, 800)
     // draw a line

diff --git a/clerk-frontend/src/need-wizard/NeedStep.js b/clerk-frontend/src/need-wizard/NeedStep.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-const BRP_UITTREKSEL = 'BRP_UITTREKSEL_NEED'
+import CONFIGURATION from '../configuration/wpsvc.json'
 const NEEDS = [
   {
-    'predicate': BRP_UITTREKSEL,
+    'predicate': CONFIGURATION.PRODUCT_NEED,
     'description': 'Uittreksel Basis Registratie Persoonsgegevens'
   }
 ]

diff --git a/clerk-frontend/src/need-wizard/NeedWizard.js b/clerk-frontend/src/need-wizard/NeedWizard.js
@@ -20,6 +20,7 @@ class NeedWizard extends Component {
     this.bsnChanged = this.bsnChanged.bind(this);
     this.needChanged = this.needChanged.bind(this);
     this.ssidsChanged = this.ssidsChanged.bind(this);
+    this.deliveryChanged = this.deliveryChanged.bind(this);
   }
 
   _prev() {
@@ -82,14 +83,22 @@ class NeedWizard extends Component {
   }
 
   ssidsChanged(personalDid, needSsid) {
-    console.log(this)
+
     this.setState({
       ...this.state,
       'personalDid': personalDid,
       'needSsid': needSsid
     })
   }
 
+  deliveryChanged(attestationLink, canvas) {
+    this.setState({
+      ...this.state,
+      'attestationLink': attestationLink,
+      'canvas': canvas
+    })
+  }
+
   renderStep () {
     switch(this.state.step) {
       case 0:
@@ -99,7 +108,7 @@ class NeedWizard extends Component {
       case 2:
         return <ConfirmStep bsn={this.state.bsn} need={this.state.need} ssidsChanged={this.ssidsChanged}/>
       case 3:
-        return <DeliveryStep personalDid={this.state.personalDid} needSsid={this.state.needSsid} />
+        return <DeliveryStep personalDid={this.state.personalDid} needSsid={this.state.needSsid} deliveryChanged={this.deliveryChanged}/>
       default:
         console.log('Unsupported step')
     }
@@ -109,7 +118,7 @@ class NeedWizard extends Component {
     return (
       <div className="NeedWizard">
         <h2>Verstrekken bewijs inschrijving BRP</h2>
-        <h3>Gemeentelijk ambtenaar</h3>
+        <h3>door gemeentelijk ambtenaar</h3>
         {this.renderStep()}
         {this.renderButtons()}
       </div>

diff --git a/mock-nlx/index.js b/mock-nlx/index.js
@@ -4,12 +4,58 @@ var app = express()
 app.get('/brp/basisregistratie/natuurlijke_personen/bsn/663678651', (req, res) => {
   res.writeHead(200, { 'Content-Type': 'application/json' });
   res.write(JSON.stringify({
-      'voornamen': 'Frans',
-      'geslachtsnaam': 'Hals',
-      'straatnaam': 'Groot Heiligland',
-      'huisnummer': '4',
-      'postcode': '2011 ES',
-      'woonplaats': 'Utrecht'
+      "aanduiding_naamsgebruik": "V",
+      "aanschrijving": {
+        "adelijke_titel": "",
+        "geslachtsnaam": "Vlasman",
+        "voorletters": "S.",
+        "voornamen": "Sanne",
+        "voorvoegsel_geslachtsnaam": ""
+      },
+      "burgerservicenummer": "663678651",
+      "emailadres": "[email protected]",
+      "geboorte": {
+        "datum": "05/07/1970",
+        "land": "Nederland",
+        "stad": "Utrecht"
+      },
+      "identificatie": "da02a3ac-4412-11e9-b210-d663bd873d93",
+      "kinderen": [
+        {
+          "url": "/natuurlijke_personen/da02f050-4412-11e9-b210-d663bd873d93"
+        },
+        {
+          "url": "/natuurlijke_personen/da02f1ae-4412-11e9-b210-d663bd873d93"
+        }
+      ],
+      "naam": {
+        "adelijke_titel": "",
+        "geslachtsnaam": "Vlasman",
+        "voorletters": "S.",
+        "voornamen": "Sanne",
+        "voorvoegsel_geslachtsnaam": ""
+      },
+      "ouders": [],
+      "overlijden": {
+        "datum": "",
+        "land": "",
+        "stad": ""
+      },
+      "partner": {},
+      "postadres": {
+        "huisnummer": 21,
+        "postcode": "3512JC",
+        "straatnaam": "Domplein",
+        "woonplaats": "Utrecht"
+      },
+      "telefoonnummer": "(06)594-38-045",
+      "url": "/natuurlijke_personen/da02a3ac-4412-11e9-b210-d663bd873d93",
+      "verblijfadres": {
+        "huisnummer": 21,
+        "postcode": "3512JC",
+        "straatnaam": "Domplein",
+        "woonplaats": "Utrecht"
+      }
     }
   ))
   res.end()