Skip to content

Commit 148a801

Browse files
sanderPostmasanderPostma
committed
Merge remote-tracking branch 'origin/develop' into feature/DPP-89
# Conflicts: # packages/oid4vci-demo-frontend/src/components/Form/index.tsx # packages/oid4vci-demo-frontend/src/configs/kvk.json # packages/oid4vci-demo-frontend/src/configs/notary.json # packages/oid4vci-demo-frontend/src/pages/SSICredentialIssueRequestPage/index.tsx
2 parents 98cd429 + c338fda commit 148a801

9 files changed

Lines changed: 132 additions & 114 deletions

File tree

‎packages/oid4vci-demo-frontend/public/locales/development/en/translation.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,9 @@
9494
"title_please_check_your_email": "Please check your e-mail",
9595
"title_fill_5_digits": "Fill in the 5-digit code from the confirmation e-mail.",
9696
"paragraph_add_credential": "Let's add the credential to your wallet",
97+
"paragraph_add_credential_notaris": "Let's add the {{credentialName}} credential to your wallet.",
9798
"paragraph_scan_this_qr": "Scan this QR code using your wallet's QR scanner. When you already on your phone open your wallet by clicking on the Open in wallet button.",
99+
"paragraph_scan_this_qr_notaris": "Scan this QR code using your wallet's QR\n scanner to accept and store your credential.",
98100
"paragraph_confirm_email": "Confirm your account by entering the 5 digit confirmation code from the email.",
99101
"loading_verify_company_information_caption": "Verifying the company information",
100102
"loading_verify_identity_information_caption": "Verifying your identity",

‎packages/oid4vci-demo-frontend/public/locales/development/nl/translation.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,9 @@
9494
"title_please_check_your_email": "Controleer A.U.B. je e-mail",
9595
"title_fill_5_digits": "Vul de 5-cijferige code in vanuit de bevestigings-e-mail.",
9696
"paragraph_add_credential": "Laten we de credential aan je wallet toevoegen.",
97+
"paragraph_add_credential_notaris": "Let's add the {{credentialName}} credential to your wallet.",
9798
"paragraph_scan_this_qr": "Scan deze QR-code met de QR-scanner van je wallet. Als je al op je telefoon bent, open dan je wallet door op de knop 'Openen in wallet' te klikken.",
99+
"paragraph_scan_this_qr_notaris": "Scan this QR code using your wallet's QR\n scanner to accept and store your credential.",
98100
"paragraph_confirm_email": "Bevestig je account door de 5-cijferige bevestigingscode uit de e-mail in te voeren.",
99101
"loading_verify_company_information_caption": "Controleren van de bedrijfsinformatie",
100102
"loading_verify_information_description": "Even geduld, je wordt automatisch naar de volgende stap geleid.",

‎packages/oid4vci-demo-frontend/src/components/Form/index.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {FC, ReactElement, ReactNode, useEffect, useState} from 'react'
1+
import React, {CSSProperties, FC, ReactElement, ReactNode, useEffect, useState} from 'react'
22
import {SSICheckbox} from '@sphereon/ui-components.ssi-react'
33
import {useTranslation} from 'react-i18next'
44
import {DataFormElement, DataFormRow} from '../../ecosystem/ecosystem-config'
@@ -24,7 +24,7 @@ const evaluateDefaultValue = (field: DataFormElement, formInitData: ImmutableRec
2424
return fieldValue
2525
}
2626

27-
let defaultValue: FormFieldValue = formInitData?.[field.id] ?? field.defaultValue ?? ''
27+
let defaultValue: FormFieldValue = formInitData?.[field.key] ?? field.defaultValue ?? ''
2828
if (defaultValue === '*RANDOM8') { // TODO this is for a demo, create something more sophisticated later
2929
defaultValue = Math.floor(Math.random() * 89999999 + 10000000)
3030
} else if (defaultValue === '*RANDOM-IBAN') { // TODO this is for a demo, create something more sophisticated later
@@ -47,7 +47,7 @@ const Form: FC<Props> = (props: Props): ReactElement => {
4747
}
4848
}
4949

50-
const getFieldElementFrom = (field: DataFormElement): ReactElement => {
50+
const getFieldElementFrom = (field: DataFormElement, style?: CSSProperties): ReactElement => {
5151
const defaultValue: FormFieldValue = evaluateDefaultValue(field, formInitData, formData)
5252
switch (field.type) {
5353
case 'checkbox':
@@ -61,11 +61,13 @@ const Form: FC<Props> = (props: Props): ReactElement => {
6161
onValueChange={async (value: FormFieldValue): Promise<void> => onChangeValue(value, field.key)}
6262
/>
6363
case 'text':
64-
case 'date':
64+
case 'date':
6565
return <InputField
66+
labelStyle={field.labelStyle}
67+
inlineStyle={style}
6668
label={field.label ? t(field.label) ?? undefined : undefined}
6769
type={field.type}
68-
readonly={field.readonly || formInitData?.[field.id] !== undefined || Boolean(field.readonlyWhenAbsentInPayload)}
70+
readonly={field.readonly || formInitData?.[field.key] !== undefined || Boolean(field.readonlyWhenAbsentInPayload)}
6971
defaultValue={defaultValue}
7072
customValidation={field.customValidation ? new RegExp(field.customValidation) : undefined}
7173
onChange={async (value: FormFieldValue): Promise<void> => onChangeValue(value, field.key)}
@@ -76,8 +78,9 @@ const Form: FC<Props> = (props: Props): ReactElement => {
7678
}
7779

7880
const getRowElementFrom = (row: DataFormRow): ReactElement => {
81+
const elementWidth = row.length > 1 ? { width: `${100 / row.length}%`} : undefined
7982
return <div className={style.formRowContainer}>
80-
{row.map((field: DataFormElement): ReactNode => getFieldElementFrom(field))}
83+
{row.map((field: DataFormElement): ReactNode => getFieldElementFrom(field, elementWidth))}
8184
</div>
8285
}
8386

‎packages/oid4vci-demo-frontend/src/components/InputField/index.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React, {ChangeEvent, FC, FocusEvent, HTMLInputTypeAttribute, ReactElement, useEffect, useState} from 'react'
1+
import React, {ChangeEvent, CSSProperties, FC, FocusEvent, HTMLInputTypeAttribute, ReactElement, useEffect, useState} from 'react'
22
import style from './index.module.css'
33
import {FormFieldValue} from '../../types'
44

55
type InputValue = string | number | ReadonlyArray<string> | undefined
66

77
type Props = {
8-
type: HTMLInputTypeAttribute;
8+
labelStyle?: CSSProperties
9+
inlineStyle?: CSSProperties
10+
type: HTMLInputTypeAttribute
911
label?: string
1012
defaultValue?: FormFieldValue
1113
placeholder?: string
@@ -16,6 +18,8 @@ type Props = {
1618

1719
const InputField: FC<Props> = (props: Props): ReactElement => {
1820
const {
21+
labelStyle,
22+
inlineStyle,
1923
readonly = false,
2024
defaultValue,
2125
placeholder,
@@ -48,15 +52,15 @@ const InputField: FC<Props> = (props: Props): ReactElement => {
4852
}
4953
}
5054

51-
return <div className={style.container}>
55+
return <div style={{ ...(inlineStyle ?? {})}} className={style.container}>
5256
{ label &&
53-
<label className="poppins-normal-10 inputFieldLabel">
57+
<label style={labelStyle} className="poppins-normal-10 inputFieldLabel">
5458
{label}
5559
</label>
5660
}
5761
<input
5862
type={type}
59-
style={{ ...(!isValid && { borderColor: 'red' }) }}
63+
style={{...(inlineStyle && { width: '100%' }), ...(!isValid && { borderColor: 'red' })}}
6064
placeholder={placeholder}
6165
readOnly={readonly}
6266
tabIndex={readonly ? -1 : undefined} // Do not tab-stop in read-only fields

‎packages/oid4vci-demo-frontend/src/configs/kvk.json‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,16 @@
9090
"verifyRequest": {
9191
"bottomParagraph": "coc_credential_verify_request_right_pane_bottom_paragraph",
9292
"backgroundColor": "#005371",
93+
"showQRCodeTopTitle": true,
94+
"rightPaneLeftPane": {
95+
"qrCode": {
96+
"fgColor": "#000000",
97+
"bottomText": {
98+
"credential_verify_request_right_pane_bottom_title": "",
99+
"credential_verify_request_right_pane_bottom_paragraph": "credential_verify_request_right_pane_bottom_paragraph"
100+
}
101+
}
102+
},
93103
"logo": {
94104
"src": "coc/logo.svg",
95105
"alt": "chamber of commerce logo",
@@ -132,10 +142,11 @@
132142
"backgroundColor": "#005371"
133143
},
134144
"issueRequest": {
135-
"title": "coc_qrcode_right_pane_top_title",
145+
"title": "title_secure_your_credential",
136146
"topParagraph": "paragraph_add_credential",
137147
"bottomParagraph": "paragraph_scan_this_qr",
138148
"backgroundColor": "#005371",
149+
"rightPaneHeight": "70%",
139150
"logo": {
140151
"src": "coc/logo.svg",
141152
"alt": "chamber of commerce logo",
@@ -157,6 +168,7 @@
157168
"sharing_data_right_pane_title": "coc_sharing_data_right_pane_title",
158169
"sharing_data_right_pane_paragraph": "coc_sharing_data_right_pane_top_paragraph",
159170
"backgroundColor": "#005371",
171+
"primaryButtonResourceId": "Share",
160172
"logo": {
161173
"src": "coc/logo.svg",
162174
"alt": "chamber of commerce logo",
@@ -177,17 +189,19 @@
177189
{
178190
"id": "ssi_information_request_page_form_company_name",
179191
"key": "Bedrijfsnaam",
180-
"title": "ssi_information_request_page_form_company_name_label",
181-
"type": "string",
192+
"label": "ssi_information_request_page_form_company_name_label",
193+
"labelStyle": { "color": "#424242" },
194+
"type": "text",
182195
"required": true
183196
}
184197
],
185198
[
186199
{
187200
"id": "ssi_information_request_page_form_coc_number",
188201
"key": "KvkNummer",
189-
"title": "ssi_information_request_page_form_coc_number_label",
190-
"type": "string",
202+
"label": "ssi_information_request_page_form_coc_number_label",
203+
"labelStyle": { "color": "#424242" },
204+
"type": "text",
191205
"required": true,
192206
"defaultValue": "*RANDOM8"
193207
}
@@ -196,41 +210,46 @@
196210
{
197211
"id": "ssi_information_request_page_form_company_location",
198212
"key": "Bedrijfslocatie",
199-
"title": "ssi_information_request_page_form_company_location_label",
200-
"type": "string",
213+
"label": "ssi_information_request_page_form_company_location_label",
214+
"labelStyle": { "color": "#424242" },
215+
"type": "text",
201216
"required": true
202217
}
203218
],
204219
[
205220
{
206221
"id": "ssi_information_request_page_first_name_director",
207222
"key": "firstName",
208-
"title": "ssi_information_request_page_form_first_name_director_label",
209-
"type": "string",
223+
"label": "ssi_information_request_page_form_first_name_director_label",
224+
"labelStyle": { "color": "#424242" },
225+
"type": "text",
210226
"required": true
211227
},
212228
{
213229
"id": "ssi_information_request_page_form_last_name_director",
214230
"key": "lastName",
215-
"title": "ssi_information_request_page_form_last_name_director_label",
216-
"type": "string",
231+
"label": "ssi_information_request_page_form_last_name_director_label",
232+
"labelStyle": { "color": "#424242" },
233+
"type": "text",
217234
"required": true
218235
}
219236
],
220237
[
221238
{
222239
"id": "ssi_information_request_page_form_place_of_birth",
223240
"key": "Geboorteplaats",
224-
"title": "ssi_information_request_page_form_place_of_birth_label",
225-
"type": "string",
241+
"label": "ssi_information_request_page_form_place_of_birth_label",
242+
"labelStyle": { "color": "#424242" },
243+
"type": "text",
226244
"required": true
227245
}
228246
],
229247
[
230248
{
231249
"id": "ssi_information_request_page_form_date_of_birth",
232250
"key": "Geboortedatum",
233-
"title": "ssi_information_request_page_form_date_of_birth_label",
251+
"label": "ssi_information_request_page_form_date_of_birth_label",
252+
"labelStyle": { "color": "#424242" },
234253
"type": "date",
235254
"required": true
236255
}
@@ -265,6 +284,9 @@
265284
"id": "credentialOffer",
266285
"operation": "execute",
267286
"action": "create-credential-offer",
287+
"actionParams": {
288+
"issueCredentialType": "KvkInschrijving"
289+
},
268290
"nextId": "issueRequest"
269291
},
270292
{
@@ -303,6 +325,9 @@
303325
"styles": {
304326
"mainContainer": {
305327
"backgroundColor": "#005371"
328+
},
329+
"button": {
330+
"width": "327px"
306331
}
307332
}
308333
},

0 commit comments

Comments
 (0)