From 6a8ad5411c8cde1d78b1ee010fdbef0050ed0508 Mon Sep 17 00:00:00 2001 From: Pim Otte Date: Wed, 15 May 2019 09:24:47 +0200 Subject: [PATCH 1/3] Revert "Remove download functionality" This reverts commit 33bd74e00d25a20776081872b55832d9be680688. --- clerk-frontend/src/need-wizard/NeedWizard.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/clerk-frontend/src/need-wizard/NeedWizard.js b/clerk-frontend/src/need-wizard/NeedWizard.js index fca2e10..e6fd383 100755 --- a/clerk-frontend/src/need-wizard/NeedWizard.js +++ b/clerk-frontend/src/need-wizard/NeedWizard.js @@ -45,13 +45,27 @@ class NeedWizard extends Component { }) } + _download(type) { + if(type === 'paperWallet') { + let a = document.createElement('a'); + document.body.appendChild(a); + a.download = this.state.personalDid+'.png'; + a.href = this.state.canvas.toDataURL('image/png') + a.click() + } else { + window.alert('Download option ('+type+') not supported...') + } + } + renderButtons() { let prevButton = ; let nextButton = ; let wrongInfoButton = ; let rightInfoButton = ; - let downloadButton = ; // currently still mock - let appleWalletButton = ; + + let downloadButton = ; // currently still mock + let appleWalletButton = ; + let finishButton = ; if (this.state.step === 0) { From 5fd416d73ac3b4bd2559b3bb92652750ab076504 Mon Sep 17 00:00:00 2001 From: Pim Otte Date: Wed, 15 May 2019 11:00:34 +0200 Subject: [PATCH 2/3] Download to pdf --- clerk-frontend/package-lock.json | 165 ++++++++++++++++++ clerk-frontend/package.json | 1 + .../configuration/clerk-frontend-config.json | 2 +- .../src/need-wizard/DeliveryStep.js | 20 ++- clerk-frontend/src/need-wizard/NeedWizard.js | 12 +- docker-compose-travis.yml | 2 +- .../waardepapieren-config-compose.json | 2 +- .../configuration/waardepapieren-config.json | 2 +- 8 files changed, 192 insertions(+), 14 deletions(-) diff --git a/clerk-frontend/package-lock.json b/clerk-frontend/package-lock.json index a56bd46..02c9a0a 100644 --- a/clerk-frontend/package-lock.json +++ b/clerk-frontend/package-lock.json @@ -2642,6 +2642,11 @@ } } }, + "base64-arraybuffer": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz", + "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=" + }, "base64-js": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz", @@ -3057,6 +3062,103 @@ "resolved": "https://registry.npmjs.org/canvas-text-wrapper/-/canvas-text-wrapper-0.10.2.tgz", "integrity": "sha512-nFnN8q8ydtkBUWVn/dAdetpwNOkz3KtyD6jTI2HGD43ant2FQcnLugAVaGLJloyRTNK/exn7efpYy2zPV5bHiQ==" }, + "canvg": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/canvg/-/canvg-1.5.3.tgz", + "integrity": "sha512-7Gn2IuQzvUQWPIuZuFHrzsTM0gkPz2RRT9OcbdmA03jeKk8kltrD8gqUzNX15ghY/4PV5bbe5lmD6yDLDY6Ybg==", + "requires": { + "jsdom": "^8.1.0", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^1.4.1", + "xmldom": "^0.1.22" + }, + "dependencies": { + "abab": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz", + "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=" + }, + "acorn": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz", + "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=" + }, + "acorn-globals": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz", + "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=", + "requires": { + "acorn": "^2.1.0" + } + }, + "cssstyle": { + "version": "0.2.37", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz", + "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=", + "requires": { + "cssom": "0.3.x" + } + }, + "jsdom": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-8.5.0.tgz", + "integrity": "sha1-1Nj12/J2hjW2KmKCO5R89wcevJg=", + "requires": { + "abab": "^1.0.0", + "acorn": "^2.4.0", + "acorn-globals": "^1.0.4", + "array-equal": "^1.0.0", + "cssom": ">= 0.3.0 < 0.4.0", + "cssstyle": ">= 0.2.34 < 0.3.0", + "escodegen": "^1.6.1", + "iconv-lite": "^0.4.13", + "nwmatcher": ">= 1.3.7 < 2.0.0", + "parse5": "^1.5.1", + "request": "^2.55.0", + "sax": "^1.1.4", + "symbol-tree": ">= 3.1.0 < 4.0.0", + "tough-cookie": "^2.2.0", + "webidl-conversions": "^3.0.1", + "whatwg-url": "^2.0.1", + "xml-name-validator": ">= 2.0.1 < 3.0.0" + } + }, + "parse5": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz", + "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=" + }, + "stackblur-canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-1.4.1.tgz", + "integrity": "sha1-hJqm+UsnL/JvZHH6QTDtH35HlVs=" + }, + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + }, + "whatwg-url": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-2.0.1.tgz", + "integrity": "sha1-U5ayBD8CDub3BNnEXqhRnnJN5lk=", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "xml-name-validator": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz", + "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=" + } + } + }, "capture-exit": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-1.2.0.tgz", @@ -4353,6 +4455,14 @@ } } }, + "css-line-break": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz", + "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=", + "requires": { + "base64-arraybuffer": "^0.1.5" + } + }, "css-loader": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz", @@ -6478,6 +6588,10 @@ "schema-utils": "^1.0.0" } }, + "file-saver": { + "version": "github:eligrey/FileSaver.js#e865e37af9f9947ddcced76b549e27dc45c1cb2e", + "from": "github:eligrey/FileSaver.js#1.3.8" + }, "filename-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", @@ -7957,6 +8071,14 @@ "util.promisify": "1.0.0" } }, + "html2canvas": { + "version": "1.0.0-alpha.12", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz", + "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=", + "requires": { + "css-line-break": "1.0.1" + } + }, "htmlparser2": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", @@ -9868,6 +9990,19 @@ "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=" }, + "jspdf": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-1.5.3.tgz", + "integrity": "sha512-J9X76xnncMw+wIqb15HeWfPMqPwYxSpPY8yWPJ7rAZN/ZDzFkjCSZObryCyUe8zbrVRNiuCnIeQteCzMn7GnWw==", + "requires": { + "canvg": "1.5.3", + "file-saver": "github:eligrey/FileSaver.js#1.3.8", + "html2canvas": "1.0.0-alpha.12", + "omggif": "1.0.7", + "promise-polyfill": "8.1.0", + "stackblur-canvas": "2.2.0" + } + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", @@ -11086,6 +11221,11 @@ "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, + "nwmatcher": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz", + "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==" + }, "nwsapi": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.3.tgz", @@ -11203,6 +11343,11 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "omggif": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.7.tgz", + "integrity": "sha1-WdLuywJj3oRjWz/riHwMmXPx5J0=" + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -15222,6 +15367,11 @@ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" }, + "promise-polyfill": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.0.tgz", + "integrity": "sha512-OzSf6gcCUQ01byV4BgwyUCswlaQQ6gzXc23aLQWhicvfX9kfsUiUhgt3CCQej8jDnl8/PhGF31JdHX2/MzF3WA==" + }, "prompts": { "version": "0.1.14", "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.14.tgz", @@ -16279,6 +16429,11 @@ "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=" }, + "rgbcolor": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", + "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=" + }, "rimraf": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", @@ -17262,6 +17417,11 @@ "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz", "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==" }, + "stackblur-canvas": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.2.0.tgz", + "integrity": "sha512-5Gf8dtlf8k6NbLzuly2NkGrkS/Ahh+I5VUjO7TnFizdJtgpfpLLEdQlLe9umbcnZlitU84kfYjXE67xlSXfhfQ==" + }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -19033,6 +19193,11 @@ "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==" }, + "xmldom": { + "version": "0.1.27", + "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz", + "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk=" + }, "xregexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz", diff --git a/clerk-frontend/package.json b/clerk-frontend/package.json index 8c02628..37e611b 100644 --- a/clerk-frontend/package.json +++ b/clerk-frontend/package.json @@ -6,6 +6,7 @@ "@discipl/abundance-service": "^0.4.1", "@discipl/core-ephemeral": "^0.7.0", "@discipl/paper-wallet": "^0.6.0", + "jspdf": "^1.5.3", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "^2.1.8", diff --git a/clerk-frontend/src/configuration/clerk-frontend-config.json b/clerk-frontend/src/configuration/clerk-frontend-config.json index 4e2557a..eff8602 100644 --- a/clerk-frontend/src/configuration/clerk-frontend-config.json +++ b/clerk-frontend/src/configuration/clerk-frontend-config.json @@ -1,5 +1,5 @@ { - "DEFAULT_EPHEMERAL_ENDPOINT" : "http://localhost:3232", + "DEFAULT_EPHEMERAL_ENDPOINT" : "http://localhost:3000", "DEFAULT_EPHEMERAL_WEBSOCKET_ENDPOINT" : "ws://localhost:3233", "PRODUCT_NEED" : "BRP_UITTREKSEL_NEED", "SOURCE_ARGUMENT" : "BSN", diff --git a/clerk-frontend/src/need-wizard/DeliveryStep.js b/clerk-frontend/src/need-wizard/DeliveryStep.js index d39714e..0dc44c5 100644 --- a/clerk-frontend/src/need-wizard/DeliveryStep.js +++ b/clerk-frontend/src/need-wizard/DeliveryStep.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import * as paperWallet from '@discipl/paper-wallet' import CONFIGURATION from '../configuration/clerk-frontend-config.json' +import * as jsPDF from 'jspdf' let template = CONFIGURATION.EXPORT_TYPES['@discipl/paper-wallet'].template @@ -16,9 +17,9 @@ class ConfirmStep extends Component { this.canvasRef = React.createRef() } - deliveryChanged(link,vc) { + deliveryChanged(canvas) { if (this.props.deliveryChanged) { - this.props.deliveryChanged(link,vc) + this.props.deliveryChanged(canvas) } } @@ -29,10 +30,25 @@ class ConfirmStep extends Component { console.log("Issued") + let pdf = new jsPDF({ + orientation: 'p', + unit: 'pt', + format: [595.28, 841.89] + }) + this.canvasRef.current.width = template.canvasWidth this.canvasRef.current.height = template.canvasHeight await paperWallet.toCanvas(vc, template, this.canvasRef.current) + + let imageData = this.canvasRef.current.toDataURL('image/png') + + + + + pdf.addImage(imageData, 'png', 0, 0, template.canvasWidth, template.canvasHeight) + + this.deliveryChanged(pdf) } render() { diff --git a/clerk-frontend/src/need-wizard/NeedWizard.js b/clerk-frontend/src/need-wizard/NeedWizard.js index e6fd383..325f3c6 100755 --- a/clerk-frontend/src/need-wizard/NeedWizard.js +++ b/clerk-frontend/src/need-wizard/NeedWizard.js @@ -5,6 +5,7 @@ import NeedStep from './NeedStep' import ConfirmStep from './ConfirmStep' import DeliveryStep from './DeliveryStep' + const MAX_STEP = 3; class NeedWizard extends Component { @@ -47,11 +48,7 @@ class NeedWizard extends Component { _download(type) { if(type === 'paperWallet') { - let a = document.createElement('a'); - document.body.appendChild(a); - a.download = this.state.personalDid+'.png'; - a.href = this.state.canvas.toDataURL('image/png') - a.click() + this.state.pdf.save('uittreksel.pdf') } else { window.alert('Download option ('+type+') not supported...') } @@ -113,11 +110,10 @@ class NeedWizard extends Component { }) } - deliveryChanged(attestationLink, canvas) { + deliveryChanged( pdf) { this.setState({ ...this.state, - 'attestationLink': attestationLink, - 'canvas': canvas + 'pdf': pdf }) } diff --git a/docker-compose-travis.yml b/docker-compose-travis.yml index 05c95e0..26ec558 100644 --- a/docker-compose-travis.yml +++ b/docker-compose-travis.yml @@ -23,4 +23,4 @@ services: mock-nlx: build: mock-nlx/ ports: - - 4080:4080 + - 80:80 diff --git a/waardepapieren-service/configuration/waardepapieren-config-compose.json b/waardepapieren-service/configuration/waardepapieren-config-compose.json index 50a3b02..458cb43 100644 --- a/waardepapieren-service/configuration/waardepapieren-config-compose.json +++ b/waardepapieren-service/configuration/waardepapieren-config-compose.json @@ -1,7 +1,7 @@ { "EPHEMERAL_ENDPOINT" : "http://localhost:3232", "EPHEMERAL_WEBSOCKET_ENDPOINT" : "ws://localhost:3233", - "NLX_OUTWAY_ENDPOINT" : "http://mock-nlx:4080", + "NLX_OUTWAY_ENDPOINT" : "http://mock-nlx:80", "NLX_CERT": "/certs/org.crt", "NLX_KEY": "/certs/org.key", "LOG_LEVEL": "info", diff --git a/waardepapieren-service/configuration/waardepapieren-config.json b/waardepapieren-service/configuration/waardepapieren-config.json index 9a85c53..4254cb9 100644 --- a/waardepapieren-service/configuration/waardepapieren-config.json +++ b/waardepapieren-service/configuration/waardepapieren-config.json @@ -1,7 +1,7 @@ { "EPHEMERAL_ENDPOINT" : "http://localhost:3232", "EPHEMERAL_WEBSOCKET_ENDPOINT" : "ws://localhost:3233", - "NLX_OUTWAY_ENDPOINT" : "http://localhost:4080", + "NLX_OUTWAY_ENDPOINT" : "http://localhost:80", "NLX_CERT": "/certs/org.crt", "NLX_KEY": "/certs/org.key", "LOG_LEVEL": "info", From 12e449bdf2292e3b8a7d3437f6ae1968df900a2e Mon Sep 17 00:00:00 2001 From: Pim Otte Date: Wed, 15 May 2019 11:36:54 +0200 Subject: [PATCH 3/3] Revert port weirdness --- docker-compose-travis.yml | 2 +- docker-compose.yml | 2 +- .../configuration/waardepapieren-config-compose.json | 2 +- waardepapieren-service/configuration/waardepapieren-config.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docker-compose-travis.yml b/docker-compose-travis.yml index 26ec558..05c95e0 100644 --- a/docker-compose-travis.yml +++ b/docker-compose-travis.yml @@ -23,4 +23,4 @@ services: mock-nlx: build: mock-nlx/ ports: - - 80:80 + - 4080:4080 diff --git a/docker-compose.yml b/docker-compose.yml index b62e24a..b527f64 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -31,4 +31,4 @@ services: - TLS_ORG_KEY=/certs/org.key - DISABLE_LOGDB=1 ports: - - 4080:80 + - 4080:4080 diff --git a/waardepapieren-service/configuration/waardepapieren-config-compose.json b/waardepapieren-service/configuration/waardepapieren-config-compose.json index 458cb43..50a3b02 100644 --- a/waardepapieren-service/configuration/waardepapieren-config-compose.json +++ b/waardepapieren-service/configuration/waardepapieren-config-compose.json @@ -1,7 +1,7 @@ { "EPHEMERAL_ENDPOINT" : "http://localhost:3232", "EPHEMERAL_WEBSOCKET_ENDPOINT" : "ws://localhost:3233", - "NLX_OUTWAY_ENDPOINT" : "http://mock-nlx:80", + "NLX_OUTWAY_ENDPOINT" : "http://mock-nlx:4080", "NLX_CERT": "/certs/org.crt", "NLX_KEY": "/certs/org.key", "LOG_LEVEL": "info", diff --git a/waardepapieren-service/configuration/waardepapieren-config.json b/waardepapieren-service/configuration/waardepapieren-config.json index 4254cb9..9a85c53 100644 --- a/waardepapieren-service/configuration/waardepapieren-config.json +++ b/waardepapieren-service/configuration/waardepapieren-config.json @@ -1,7 +1,7 @@ { "EPHEMERAL_ENDPOINT" : "http://localhost:3232", "EPHEMERAL_WEBSOCKET_ENDPOINT" : "ws://localhost:3233", - "NLX_OUTWAY_ENDPOINT" : "http://localhost:80", + "NLX_OUTWAY_ENDPOINT" : "http://localhost:4080", "NLX_CERT": "/certs/org.crt", "NLX_KEY": "/certs/org.key", "LOG_LEVEL": "info",