diff --git a/src/app/organisms/emoji-verification/EmojiVerification.jsx b/src/app/organisms/emoji-verification/EmojiVerification.jsx index d1d3325..7d67e09 100644 --- a/src/app/organisms/emoji-verification/EmojiVerification.jsx +++ b/src/app/organisms/emoji-verification/EmojiVerification.jsx @@ -20,30 +20,14 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import { useStore } from '../../hooks/useStore'; import { accessSecretStorage } from '../settings/SecretStorageAccess'; -function EmojiVerificationContent({ request, requestClose }) { +function EmojiVerificationContent({ data, requestClose }) { const [sas, setSas] = useState(null); const [process, setProcess] = useState(false); + const { request, targetDevice } = data; const mx = initMatrix.matrixClient; const mountStore = useStore(); - useEffect(() => { - mountStore.setItem(true); - const handleChange = () => { - if (request.done || request.cancelled) requestClose(); - }; - - if (request === null) return null; - const req = request; - req.on('change', handleChange); - return () => { - req.off('change', handleChange); - if (!req.cancelled && !req.done) { - req.cancel(); - } - }; - }, [request]); - - const acceptRequest = async () => { + const beginVerification = async () => { if (isCrossVerified(mx.deviceId) && !hasPrivateKey(getDefaultSSKey())) { const keyData = await accessSecretStorage('Session verification'); if (!keyData) { @@ -54,22 +38,12 @@ function EmojiVerificationContent({ request, requestClose }) { setProcess(true); await request.accept(); - let targetDevice; - try { - targetDevice = request.targetDevice; - } catch { - targetDevice = { - userId: mx.getUserId(), - deviceId: request.channel.devices[0], - }; - } - const verifier = request.beginKeyVerification('m.sas.v1', targetDevice); - const handleVerifier = (data) => { + const handleVerifier = (sasData) => { verifier.off('show_sas', handleVerifier); if (!mountStore.getItem()) return; - setSas(data); + setSas(sasData); setProcess(false); }; verifier.on('show_sas', handleVerifier); @@ -86,6 +60,26 @@ function EmojiVerificationContent({ request, requestClose }) { setProcess(true); }; + useEffect(() => { + mountStore.setItem(true); + const handleChange = () => { + if (targetDevice && request.started) { + beginVerification(); + } + if (request.done || request.cancelled) requestClose(); + }; + + if (request === null) return null; + const req = request; + req.on('change', handleChange); + return () => { + req.off('change', handleChange); + if (!req.cancelled && !req.done) { + req.cancel(); + } + }; + }, [request]); + const renderWait = () => ( <> @@ -118,6 +112,17 @@ function EmojiVerificationContent({ request, requestClose }) { ); } + if (targetDevice) { + return ( +
+ Please accept the request from other device. +
+ {renderWait()} +
+
+ ); + } + return (
Click accept to start the verification process @@ -125,23 +130,25 @@ function EmojiVerificationContent({ request, requestClose }) { { process ? renderWait() - : + : }
); } EmojiVerificationContent.propTypes = { - request: PropTypes.shape({}).isRequired, + data: PropTypes.shape({}).isRequired, requestClose: PropTypes.func.isRequired, }; function useVisibilityToggle() { - const [request, setRequest] = useState(null); + const [data, setData] = useState(null); const mx = initMatrix.matrixClient; useEffect(() => { - const handleOpen = (req) => setRequest(req); + const handleOpen = (request, targetDevice) => { + setData({ request, targetDevice }); + }; navigation.on(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen); mx.on('crypto.verification.request', handleOpen); return () => { @@ -150,17 +157,17 @@ function useVisibilityToggle() { }; }, []); - const requestClose = () => setRequest(null); + const requestClose = () => setData(null); - return [request, requestClose]; + return [data, requestClose]; } function EmojiVerification() { - const [request, requestClose] = useVisibilityToggle(); + const [data, requestClose] = useVisibilityToggle(); return ( @@ -171,8 +178,8 @@ function EmojiVerification() { onRequestClose={requestClose} > { - request !== null - ? + data !== null + ? :
}
diff --git a/src/app/organisms/settings/DeviceManage.jsx b/src/app/organisms/settings/DeviceManage.jsx index a7409aa..dad5b96 100644 --- a/src/app/organisms/settings/DeviceManage.jsx +++ b/src/app/organisms/settings/DeviceManage.jsx @@ -138,7 +138,7 @@ function DeviceManage() { const verifyWithEmojis = async (deviceId) => { const req = await mx.requestVerification(mx.getUserId(), [deviceId]); - openEmojiVerification(req); + openEmojiVerification(req, { userId: mx.getUserId(), deviceId }); }; const verify = (deviceId, isCurrentDevice) => { diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js index 9e85949..70f270b 100644 --- a/src/client/action/navigation.js +++ b/src/client/action/navigation.js @@ -167,9 +167,10 @@ export function openReusableDialog(title, render, afterClose) { }); } -export function openEmojiVerification(request) { +export function openEmojiVerification(request, targetDevice) { appDispatcher.dispatch({ type: cons.actions.navigation.OPEN_EMOJI_VERIFICATION, request, + targetDevice, }); } diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js index 42ab019..7e7ab69 100644 --- a/src/client/state/navigation.js +++ b/src/client/state/navigation.js @@ -189,6 +189,7 @@ class Navigation extends EventEmitter { this.emit( cons.events.navigation.EMOJI_VERIFICATION_OPENED, action.request, + action.targetDevice, ); }, };