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<TunnelbrokerMessage[]>([]); const [recipient, setRecipient] = useState(''); - const [message, setMessage] = useState(''); + const [deviceID, setDeviceID] = React.useState<?string>(); + + React.useEffect(() => { + void (async () => { + const contentSigningKey = await getContentSigningKey(); + setDeviceID(contentSigningKey); + })(); + }, []); const listener = React.useCallback((msg: TunnelbrokerMessage) => { setMessages(prev => [...prev, msg]); @@ -89,11 +96,11 @@ `Encrypted message to ${recipient}`, recipient, ); - const deviceID = await getContentSigningKey(); + const signingKey = await getContentSigningKey(); const encryptedMessage: EncryptedMessage = { type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE, senderInfo: { - deviceID, + deviceID: signingKey, userID: currentUserID, }, encryptedData, @@ -120,6 +127,20 @@ </View> </View> + <Text style={styles.header}>DEVICE ID</Text> + <View style={styles.section}> + <View style={styles.submenuButton}> + <Text style={styles.submenuText}>{deviceID}</Text> + </View> + </View> + + <Text style={styles.header}>USER ID</Text> + <View style={styles.section}> + <View style={styles.submenuButton}> + <Text style={styles.submenuText}>{currentUserID}</Text> + </View> + </View> + <Text style={styles.header}>SEND MESSAGE</Text> <View style={styles.section}> 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<?string>(); + + React.useEffect(() => { + void (async () => { + const contentSigningKey = await getContentSigningKey(); + setDeviceID(contentSigningKey); + })(); + }, []); + const { pushModal, popModal } = useModalContext(); const showPasswordChangeModal = React.useCallback( () => pushModal(<PasswordChangeModal />), @@ -195,6 +208,29 @@ </div> ); } + let deviceData; + if (staffCanSee) { + deviceData = ( + <div className={css.preferencesContainer}> + <h4 className={css.preferencesHeader}>Device ID</h4> + <div className={css.content}> + <ul> + <li> + <span>{deviceID}</span> + </li> + </ul> + </div> + <h4 className={css.preferencesHeader}>User ID</h4> + <div className={css.content}> + <ul> + <li> + <span>{userID}</span> + </li> + </ul> + </div> + </div> + ); + } return ( <div className={css.container}> @@ -230,6 +266,7 @@ {preferences} {tunnelbroker} {backup} + {deviceData} </div> </div> );