Skip to content

Commit e8edef8

Browse files
sanderPostmasanderPostma
committed
DPP-89: Quick-fix deeplink
1 parent 7acf470 commit e8edef8

3 files changed

Lines changed: 62 additions & 38 deletions

File tree

  • packages/oid4vci-demo-frontend/src

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -108,14 +108,18 @@ class AuthenticationQR extends Component<AuthenticationQRProps> {
108108
this._isMounted = false
109109
}
110110

111-
render() {
112-
// Show the loader until we have details on which parameters to load into the QR code
113-
return this.state.qrCode ? (
114-
<div>{this.state.qrCode}</div>
115-
) : (
116-
<BallTriangle color="#352575" height="100" width="100" />
117-
)
118-
}
111+
render() {
112+
// Show the loader until we have details on which parameters to load into the QR code
113+
return this.state.qrCode ? (
114+
<NonMobileOS>
115+
<div>{this.state.qrCode}</div>
116+
</NonMobileOS>
117+
) : (
118+
<NonMobileOS>
119+
<BallTriangle color="#352575" height="100" width="100"/>
120+
</NonMobileOS>
121+
)
122+
}
119123

120124
/* We don't want to keep used and unused states indefinitely, so expire the QR code after a configured timeout */
121125
private refreshQRCode = () => {

‎packages/oid4vci-demo-frontend/src/pages/SSICredentialVerifyFromVPRequest/index.tsx‎

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom'
88
import MemoizedAuthenticationQR from '../../components/AuthenticationQR'
99
import SSIPrimaryButton from '../../components/SSIPrimaryButton'
1010
import { useMediaQuery } from 'react-responsive'
11-
import { NonMobile } from '../../index'
11+
import {MobileOS, NonMobile, NonMobileOS} from '../../index'
1212
import { useFlowRouter } from '../../router/flow-router'
1313
import { useEcosystem } from '../../ecosystem/ecosystem'
1414
import { SSICredentialVerifyFromVPRequestPageConfig } from '../../ecosystem/ecosystem-config'
@@ -66,7 +66,9 @@ export default function SSICredentialVerifyFromVPRequestPage(): React.ReactEleme
6666
height: '100%',
6767
backgroundColor: '#FFFFFF',
6868
alignItems: 'center',
69-
justifyContent: 'center'
69+
justifyContent: 'center',
70+
marginLeft: 4,
71+
marginRight: 4,
7072
}}>
7173
<div style={{
7274
display: 'flex',
@@ -85,35 +87,48 @@ export default function SSICredentialVerifyFromVPRequestPage(): React.ReactEleme
8587
marginBottom: '25%',
8688
marginTop: '25%'
8789
}}>
88-
<div style={{flexGrow: 1, display: 'flex', justifyContent: 'center', marginBottom: 0}}>
89-
{<MemoizedAuthenticationQR ecosystem={ecosystem}
90-
fgColor={'rgba(50, 57, 72, 1)'}
91-
width={pageConfig.rightPaneLeftPane?.qrCode?.width ?? 300}
92-
vpDefinitionId={flowRouter.getVpDefinitionId()}
93-
onAuthRequestRetrieved={console.log}
94-
onSignInComplete={onSignInComplete}
95-
setQrCodeData={setDeepLink}/>}
96-
</div>
97-
<div style={{
98-
paddingTop: 20,
99-
paddingBottom: 20,
100-
display: 'flex',
101-
flexDirection: 'column',
102-
alignItems: 'center',
103-
gap: '1rem'
104-
}}>
105-
<DeepLinkButton link={deepLink} buttonType={"secondary"} textColor={pageConfig.textColor} style={{width: 300}}/>
106-
<SSIPrimaryButton
107-
caption={t('credential_verify_request_right_pane_button_caption')}
108-
onClick={async () => {
109-
navigate('/information/manual/request');
110-
}}
111-
/>
112-
</div>
113-
11490

115-
<Text style={{flexGrow: 1}} className={`${style.pReduceLineSpace} poppins-semi-bold-16`}
116-
lines={t('credential_verify_request_right_pane_bottom_paragraph').split('\n')}/>
91+
<div style={{flexGrow: 1, display: 'flex', justifyContent: 'center', marginBottom: 0}}>
92+
<NonMobileOS>
93+
<div style={{flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
94+
{/*Whether the QR code is shown (mobile) is handled in the component itself */}
95+
{<MemoizedAuthenticationQR ecosystem={ecosystem}
96+
fgColor={'rgba(50, 57, 72, 1)'}
97+
width={pageConfig.rightPaneLeftPane?.qrCode?.width ?? 300}
98+
vpDefinitionId={flowRouter.getVpDefinitionId()}
99+
onAuthRequestRetrieved={console.log}
100+
onSignInComplete={onSignInComplete}
101+
setQrCodeData={setDeepLink}/>}
102+
</div>
103+
</NonMobileOS>
104+
<MobileOS>
105+
{<MemoizedAuthenticationQR ecosystem={ecosystem}
106+
vpDefinitionId={flowRouter.getVpDefinitionId()}
107+
onAuthRequestRetrieved={console.log}
108+
onSignInComplete={onSignInComplete}
109+
setQrCodeData={setDeepLink}/>}
110+
<div style={{gap: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'hidden'}}>
111+
<DeepLinkButton style={{flexGrow: 1}} link={deepLink}/>
112+
</div>
113+
</MobileOS>
114+
</div>
115+
<div style={{
116+
paddingTop: 40,
117+
paddingBottom: 20,
118+
display: 'flex',
119+
flexDirection: 'column',
120+
alignItems: 'center',
121+
gap: '1rem'
122+
}}>
123+
<SSIPrimaryButton
124+
caption={t('credential_verify_request_right_pane_button_caption')}
125+
onClick={async () => {
126+
navigate('/information/manual/request')
127+
}}
128+
/>
129+
<Text style={{flexGrow: 1}} className={`${style.pReduceLineSpace} poppins-semi-bold-16`}
130+
lines={t('credential_verify_request_right_pane_bottom_paragraph').split('\n')}/>
131+
</div>
117132
</div>
118133
<div style={{
119134
display: 'flex',

‎packages/oid4vci-demo-frontend/src/pages/SSICredentialVerifyRequestPage/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,11 @@ export default function SSICredentialVerifyRequestPage(): React.ReactElement | n
102102
</div>
103103
</NonMobileOS>
104104
<MobileOS>
105+
{<MemoizedAuthenticationQR ecosystem={ecosystem}
106+
vpDefinitionId={flowRouter.getVpDefinitionId()}
107+
onAuthRequestRetrieved={console.log}
108+
onSignInComplete={onSignInComplete}
109+
setQrCodeData={setDeepLink}/>}
105110
<div style={{gap: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'hidden'}}>
106111
{ pageConfig.mobile?.image &&
107112
<img src={`${pageConfig.mobile?.image}`} alt="success" style={{overflow: 'hidden'}}/>

0 commit comments

Comments
 (0)