diff --git a/src/components/AuthMethodSelector.tsx b/src/components/AuthMethodSelector.tsx index 2490b30..5be17a0 100644 --- a/src/components/AuthMethodSelector.tsx +++ b/src/components/AuthMethodSelector.tsx @@ -53,17 +53,16 @@ type SwedenProps = Omit & { acrValues: string[] } -const QR_ACR_VALUE = 'urn:grn:authn:se:bankid:another-device:qr'; export function Sweden(props: SwedenProps) { const {acrValues} = props; const {action, uiLocales} = useContext(CriiptoVerifyContext); const language = props.language || uiLocales as Language || 'en'; - const hasQR = acrValues.includes(QR_ACR_VALUE); - const filteredAcrValues = acrValues.filter(s => s !== QR_ACR_VALUE); + const hasQR = acrValues.includes(SEBankIDQrCode.acr_values); + const filteredAcrValues = acrValues.filter(s => s !== SEBankIDQrCode.acr_values); const userAgent = getUserAgent(typeof navigator !== 'undefined' ? navigator.userAgent : props.userAgent); const mobileOS = userAgent?.os.name === 'iOS' ? 'iOS' : userAgent?.os.name === 'Android' ? 'android' : null; - const [showQR, setShowQR] = useState(hasQR && !mobileOS); + const showQR = hasQR && !mobileOS; return (
@@ -81,14 +80,18 @@ export function Sweden(props: SwedenProps) { /> ))} {showQR ? ( - + + )} + /> ) : (hasQR && mobileOS) ? ( { - event.preventDefault(); - setShowQR(true); - }} + acrValue={SEBankIDQrCode.acr_values} /> ) : null} diff --git a/src/components/SEBankIDQRCode.tsx b/src/components/SEBankIDQRCode.tsx index cd0695e..34f2c53 100644 --- a/src/components/SEBankIDQRCode.tsx +++ b/src/components/SEBankIDQRCode.tsx @@ -7,6 +7,7 @@ import CriiptoVerifyContext from "../context"; import logo from './SEBankIDQRCode/logo@2x.png'; import './SEBankIDQRCode/SEBankIDQRCode.css'; +import AuthMethodButton from "./AuthMethodButton"; interface Props { redirectUri?: string, @@ -28,7 +29,10 @@ interface Props { isCompleting: boolean error: OAuth2Error | Error | null retry: () => void -}) => React.ReactElement + }) => React.ReactElement + + /** Render fallback element while loading */ + fallback?: React.ReactElement } interface QrResponse { @@ -47,11 +51,6 @@ function searchParamsToPOJO(input: URLSearchParams) { }, {}); } -// const logo = new Image(); -// logo.src = logoSrc; - -// const LOGO_RATIO = 0.15; - export default function SEBankIDQrCode(props: Props) { const canvasRef = useRef(null); const wrapperRef = useRef(null); @@ -180,6 +179,10 @@ export default function SEBankIDQrCode(props: Props) {
); + if (!qrCode && props.fallback) { + return props.fallback; + } + if (props.children) { return props.children({ qrElement, @@ -193,6 +196,8 @@ export default function SEBankIDQrCode(props: Props) { return qrElement; } +SEBankIDQrCode.acr_values = 'urn:grn:authn:se:bankid:another-device:qr'; + type UseDrawOptions = { width?: number, canvas: HTMLCanvasElement | null, diff --git a/src/components/SEBankIDSameDeviceButton.tsx b/src/components/SEBankIDSameDeviceButton.tsx index 46f8772..eecfd6e 100644 --- a/src/components/SEBankIDSameDeviceButton.tsx +++ b/src/components/SEBankIDSameDeviceButton.tsx @@ -164,7 +164,6 @@ export default function SEBankIDSameDeviceButton(props: Props) { }) .catch(err => { setInitiated(false); - setError(err?.toString()); }); }, [buildAuthorizeUrl, redirectUri, strategy]);