Skip to content

Commit 5c51c26

Browse files
author
Maikel Maas
committed
VDX-278 Fixed Notary web demo issues
1 parent 3a2a543 commit 5c51c26

6 files changed

Lines changed: 68 additions & 91 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: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {FC, ReactElement, ReactNode, useState} from 'react'
1+
import React, {CSSProperties, FC, ReactElement, ReactNode, 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'
@@ -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,8 +61,10 @@ 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}
6870
readonly={field.readonly || formInitData?.[field.id] !== undefined || Boolean(field.readonlyWhenAbsentInPayload)}
@@ -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/notary.json‎

Lines changed: 47 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"general": {
3-
"credentialName": "Notaris Credential",
3+
"credentialName": "Notaris",
44
"issueCredentialType": "NotaryCompanyVerification",
55
"oid4vpAgentBaseUrl": "https://notary.demo.sphereon.com/agent",
66
"oid4vciAgentBaseUrl": "https://notary.demo.sphereon.com/agent",
@@ -88,51 +88,16 @@
8888
}
8989
}
9090
},
91-
"SSICredentialVerifyRequestPage": {
91+
"issueSuccess": {
9292
"photoLeft": "notary/guest_credential.svg",
93-
"photoRight": "notary/undraw_messenger_re_8bky_grey.svg.svg"
93+
"photoRight": "notary/undraw_messenger_re_8bky_grey.svg.svg",
94+
"rightPaneTitle": "title_secure_your_credential",
95+
"rightPaneParagraph": "credentials_right_pane_top_paragraph"
9496
},
95-
"SSISelectCredentialPage": {
96-
"logo": {
97-
"src": "notary/logo.svg",
98-
"alt": "notary.demo.sphereon.com",
99-
"width": 167,
100-
"height": 70
101-
},
102-
"styles": {
103-
"mainContainer": {
104-
"backgroundColor": "#202537",
105-
"textGradient": "linear-gradient(135deg, #7276F7 0%, #7C40E8 100%)"
106-
}
107-
}
108-
},
109-
"SSICredentialIssuedSuccessPage": {
110-
"photoLeft": "notary/guest_credential.svg",
111-
"photoRight": "notary/undraw_messenger_re_8bky_grey.svg.svg"
112-
},
113-
"SSIInformationSharedSuccessPage": {
114-
"photoLeft": "notary/guest_credential.svg",
115-
"photoRight": "notary/undraw_certification_re_ifll_grey.svg",
116-
"logo": {
117-
"src": "notary/guest_credential.svg",
118-
"alt": "Van Auckland Notary",
119-
"width": 700,
120-
"height": 700
121-
},
122-
"mobile": {
123-
"logo": {
124-
"src": "notary/logo.svg",
125-
"alt": "notary",
126-
"width": 200,
127-
"height": 200
128-
}
129-
},
130-
"backgroundColor": "#BEBEBE"
131-
},
132-
"SSICredentialIssueRequestPage": {
97+
"issueRequest": {
13398
"title": "title_secure_your_credential",
134-
"topParagraph": "paragraph_add_credential",
135-
"bottomParagraph": "paragraph_scan_this_qr",
99+
"topParagraph": "paragraph_add_credential_notaris",
100+
"bottomParagraph": "paragraph_scan_this_qr_notaris",
136101
"logo": {
137102
"src": "notary/guest_credential.svg",
138103
"alt": "Van Auckland Notary",
@@ -151,60 +116,76 @@
151116
"image": "undraw_certification_re_ifll_1.svg"
152117
}
153118
},
154-
"SSIInformationRequestPage": {
155-
"photo": "notary/guest_credential.svg",
156-
"text_top_of_image": "common_left_pane_title",
119+
"infoRequest": {
157120
"sharing_data_right_pane_title": "manual_fill_data_right_pane_title",
158121
"sharing_data_right_pane_paragraph": "sharing_data_fill_out_right_pane_paragraph",
159122
"form": [
160123
[
161124
{
162125
"id": "ssi_information_request_page_form_company_name",
163126
"key": "Bedrijfsnaam",
164-
"title": "ssi_information_request_page_form_company_name_label",
165-
"type": "string",
127+
"label": "ssi_information_request_page_form_company_name_label",
128+
"labelStyle": {
129+
"color": "rgba(48, 48, 48, 0.8)"
130+
},
131+
"type": "text",
166132
"required": true
167133
}
168134
],
169135
[
170136
{
171137
"id": "ssi_information_request_page_form_company_location",
172138
"key": "Bedrijfslocatie",
173-
"title": "ssi_information_request_page_form_company_location_label",
174-
"type": "string",
139+
"label": "ssi_information_request_page_form_company_location_label",
140+
"labelStyle": {
141+
"color": "rgba(48, 48, 48, 0.8)"
142+
},
143+
"type": "text",
175144
"required": true
176145
}
177146
],
178147
[
179148
{
180149
"id": "ssi_information_request_page_first_name_director",
181150
"key": "Voornaam",
182-
"title": "ssi_information_request_page_form_first_name_director_label",
183-
"type": "string",
151+
"label": "ssi_information_request_page_form_first_name_director_label",
152+
"labelStyle": {
153+
"color": "rgba(48, 48, 48, 0.8)"
154+
},
155+
"type": "text",
184156
"required": true
185157
},
186158
{
187159
"id": "ssi_information_request_page_form_last_name_director",
188160
"key": "Achternaam",
189-
"title": "ssi_information_request_page_form_last_name_director_label",
190-
"type": "string",
161+
"label": "ssi_information_request_page_form_last_name_director_label",
162+
"labelStyle": {
163+
"color": "rgba(48, 48, 48, 0.8)"
164+
},
165+
"type": "text",
191166
"required": true
192167
}
193168
],
194169
[
195170
{
196171
"id": "ssi_information_request_page_form_place_of_birth",
197172
"key": "Geboorteplaats",
198-
"title": "ssi_information_request_page_form_place_of_birth_label",
199-
"type": "string",
173+
"label": "ssi_information_request_page_form_place_of_birth_label",
174+
"labelStyle": {
175+
"color": "rgba(48, 48, 48, 0.8)"
176+
},
177+
"type": "text",
200178
"required": true
201179
}
202180
],
203181
[
204182
{
205183
"id": "ssi_information_request_page_form_date_of_birth",
206184
"key": "Geboortedatum",
207-
"title": "ssi_information_request_page_form_date_of_birth_label",
185+
"label": "ssi_information_request_page_form_date_of_birth_label",
186+
"labelStyle": {
187+
"color": "rgba(48, 48, 48, 0.8)"
188+
},
208189
"type": "date",
209190
"required": true
210191
}
@@ -225,35 +206,13 @@
225206
"width": 700,
226207
"height": 700
227208
},
228-
"backgroundColor": "#BEBEBE"
229-
},
230-
"SSILandingPage": {
231-
"photoLeft": "notary/landing_manual_grey.svg",
232-
"photoRight": "notary/landing_wallet_grey.svg",
233-
"logo": {
234-
"src": "notary/logo.svg",
235-
"alt": "notary",
236-
"width": 125,
237-
"height": 125
238-
},
239-
"styles": {
240-
"mainContainer": {
241-
"backgroundColor": "white"
242-
},
243-
"leftCardView": {
244-
"textColor": "#FBFBFB",
245-
"backgroundColor": "#326D85"
246-
},
247-
"rightCardView": {
248-
"textColor": "#FBFBFB",
249-
"buttonType": "primary"
250-
}
251-
}
209+
"backgroundColor": "#BEBEBE",
210+
"primaryButtonResourceId": "Share"
252211
}
253212
},
254213
"routes": [
255214
{
256-
"vpDefinitionId": "knb-auckland",
215+
"id": "default",
257216
"steps": [
258217
{
259218
"id": "infoRequest",
@@ -266,6 +225,9 @@
266225
"id": "credentialOffer",
267226
"operation": "execute",
268227
"action": "create-credential-offer",
228+
"actionParams": {
229+
"issueCredentialType": "NotaryCompanyVerification"
230+
},
269231
"nextId": "issueRequest"
270232
},
271233
{
@@ -301,6 +263,9 @@
301263
"styles": {
302264
"mainContainer": {
303265
"backgroundColor": "#252E7E"
266+
},
267+
"button": {
268+
"width": "327px"
304269
}
305270
}
306271
},

‎packages/oid4vci-demo-frontend/src/ecosystem/ecosystem-config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,7 @@ export interface DataFormElement {
251251
defaultValue?: FormFieldValue
252252
label?: string
253253
labelUrl?: string
254+
labelStyle?: CSSProperties
254255
readonly?: boolean
255256
customValidation?: string
256257
display?: {

0 commit comments

Comments
 (0)