diff --git a/web/account/qr-code-login.react.js b/web/account/qr-code-login.react.js --- a/web/account/qr-code-login.react.js +++ b/web/account/qr-code-login.react.js @@ -3,6 +3,7 @@ import { QRCodeSVG } from 'qrcode.react'; import * as React from 'react'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; import { qrCodeLinkURL } from 'lib/facts/links.js'; import { useSecondaryDeviceLogIn } from 'lib/hooks/login-hooks.js'; import { useQRAuth } from 'lib/hooks/qr-auth.js'; @@ -19,8 +20,10 @@ type QRCodeAuthMessagePayload, } from 'lib/types/tunnelbroker/qr-code-auth-message-types.js'; import { getContentSigningKey } from 'lib/utils/crypto-utils.js'; +import { getMessageForException } from 'lib/utils/errors.js'; import css from './qr-code-login.css'; +import VersionUnsupportedModal from '../modals/version-unsupported-modal.react.js'; import { base64DecodeBuffer, base64EncodeBuffer, @@ -82,6 +85,8 @@ } }, [setUnauthorizedDeviceID]); + const { pushModal } = useModalContext(); + const secondaryDeviceLogIn = useSecondaryDeviceLogIn(); const performRegistration = React.useCallback( async (userID: string) => { @@ -89,10 +94,17 @@ await secondaryDeviceLogIn(userID); } catch (err) { console.error('Secondary device registration error:', err); + const messageForException = getMessageForException(err); + if ( + messageForException === 'client_version_unsupported' || + messageForException === 'Unsupported version' + ) { + pushModal(); + } void generateQRCode(); } }, - [secondaryDeviceLogIn, generateQRCode], + [secondaryDeviceLogIn, pushModal, generateQRCode], ); React.useEffect(() => { diff --git a/web/components/log-out-if-missing-csat-handler.react.js b/web/components/log-out-if-missing-csat-handler.react.js --- a/web/components/log-out-if-missing-csat-handler.react.js +++ b/web/components/log-out-if-missing-csat-handler.react.js @@ -9,7 +9,7 @@ import { useSelector } from 'lib/utils/redux-utils.js'; import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; -import css from './version-handler.css'; +import css from './missing-csat-modal.css'; import Modal from '../modals/modal.react.js'; type Props = { diff --git a/web/components/missing-csat-modal.css b/web/components/missing-csat-modal.css new file mode 100644 --- /dev/null +++ b/web/components/missing-csat-modal.css @@ -0,0 +1,6 @@ +.modalContent { + color: var(--text-background-primary-default); + font-size: var(--s-font-14); + margin-top: 8px; + display: flex; +} diff --git a/web/components/version-handler.css b/web/components/version-handler.css deleted file mode 100644 --- a/web/components/version-handler.css +++ /dev/null @@ -1,21 +0,0 @@ -.modalContent { - color: var(--text-background-primary-default); - font-size: var(--s-font-14); - margin-top: 8px; - display: flex; -} - -.wrapper { - display: flex; - flex-shrink: 1; - justify-content: center; -} - -.ancestryContainer { - display: flex; - justify-content: center; - align-items: center; - height: 40px; - background-color: var(--frame-background-tertiary-default); - margin-top: 20px; -} diff --git a/web/components/version-handler.react.js b/web/components/version-handler.react.js --- a/web/components/version-handler.react.js +++ b/web/components/version-handler.react.js @@ -5,20 +5,8 @@ import { useModalContext } from 'lib/components/modal-provider.react.js'; import { allConnectionInfosSelector } from 'lib/selectors/keyserver-selectors.js'; -import css from './version-handler.css'; -import Modal from '../modals/modal.react.js'; +import VersionUnsupportedModal from '../modals/version-unsupported-modal.react.js'; import { useSelector } from '../redux/redux-utils.js'; -import { getVersionUnsupportedError } from '../utils/version-utils.js'; - -function VersionUnsupportedModal(): React.Node { - const { popModal } = useModalContext(); - const message = getVersionUnsupportedError(); - return ( - -
{message}
-
- ); -} function MinVersionHandler(): null { const connections = useSelector(allConnectionInfosSelector); diff --git a/web/modals/version-unsupported-modal.css b/web/modals/version-unsupported-modal.css new file mode 100644 --- /dev/null +++ b/web/modals/version-unsupported-modal.css @@ -0,0 +1,6 @@ +.modalContent { + color: var(--text-background-primary-default); + font-size: var(--s-font-14); + margin-top: 8px; + display: flex; +} diff --git a/web/modals/version-unsupported-modal.react.js b/web/modals/version-unsupported-modal.react.js new file mode 100644 --- /dev/null +++ b/web/modals/version-unsupported-modal.react.js @@ -0,0 +1,21 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; + +import css from './version-unsupported-modal.css'; +import Modal from '../modals/modal.react.js'; +import { getVersionUnsupportedError } from '../utils/version-utils.js'; + +function VersionUnsupportedModal(): React.Node { + const { popModal } = useModalContext(); + const message = getVersionUnsupportedError(); + return ( + +
{message}
+
+ ); +} + +export default VersionUnsupportedModal;