diff --git a/native/profile/tunnelbroker-menu.react.js b/native/profile/tunnelbroker-menu.react.js --- a/native/profile/tunnelbroker-menu.react.js +++ b/native/profile/tunnelbroker-menu.react.js @@ -43,8 +43,15 @@ useTunnelbroker(); const [messages, setMessages] = useState([]); const [recipient, setRecipient] = useState(''); - const [message, setMessage] = useState(''); + const [deviceID, setDeviceID] = React.useState(); + + React.useEffect(() => { + void (async () => { + const contentSigningKey = await getContentSigningKey(); + setDeviceID(contentSigningKey); + })(); + }, []); const listener = React.useCallback((msg: TunnelbrokerMessage) => { setMessages(prev => [...prev, msg]); @@ -89,7 +96,6 @@ `Encrypted message to ${recipient}`, recipient, ); - const deviceID = await getContentSigningKey(); const encryptedMessage: EncryptedMessage = { type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE, senderInfo: { @@ -105,7 +111,7 @@ } catch (e) { console.log(`Error sending encrypted content to device: ${e.message}`); } - }, [currentUserID, recipient, sendMessage]); + }, [currentUserID, deviceID, recipient, sendMessage]); return ( + DEVICE ID + + + {deviceID} + + + + USER ID + + + {currentUserID} + + + SEND MESSAGE diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js --- a/web/settings/account-settings.react.js +++ b/web/settings/account-settings.react.js @@ -9,7 +9,10 @@ import { accountHasPassword } from 'lib/shared/account-utils.js'; import { IdentityClientContext } from 'lib/shared/identity-client-context.js'; import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js'; -import { createOlmSessionsWithOwnDevices } from 'lib/utils/crypto-utils.js'; +import { + createOlmSessionsWithOwnDevices, + getContentSigningKey, +} from 'lib/utils/crypto-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import css from './account-settings.css'; @@ -34,6 +37,16 @@ ); const identityContext = React.useContext(IdentityClientContext); + const userID = useSelector(state => state.currentUserInfo?.id); + const [deviceID, setDeviceID] = React.useState(); + + React.useEffect(() => { + void (async () => { + const contentSigningKey = await getContentSigningKey(); + setDeviceID(contentSigningKey); + })(); + }, []); + const { pushModal, popModal } = useModalContext(); const showPasswordChangeModal = React.useCallback( () => pushModal(), @@ -195,6 +208,29 @@ ); } + let deviceData; + if (staffCanSee) { + deviceData = ( +
+

Device ID

+
+
    +
  • + {deviceID} +
  • +
+
+

User ID

+
+
    +
  • + {userID} +
  • +
+
+
+ ); + } return (
@@ -230,6 +266,7 @@ {preferences} {tunnelbroker} {backup} + {deviceData}
);