feat: Show device labels in devtools

SocialGouv · Mar 28, 2023 · 3292923 · 3292923
1 parent 4dcc0ea
commit 3292923
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ The only external requirement is a PostgreSQL database.
 
 ## Documentation
 
-- [Cryptography](./docs/cryptography)
+- [Cryptography](./docs/docs/cryptography)
 
 ## Contributing
 

diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
@@ -615,9 +615,30 @@ export class Client {
   }
 
   public async getEnrolledDevices() {
-    return listDevicesResponseBody.parse(
+    await this.sodium.ready
+    if (this.#state.state !== 'loaded') {
+      throw new Error('Account locked: cannot list enrolled devices')
+    }
+    const devices = listDevicesResponseBody.parse(
       await this.#apiCall('GET', '/v1/auth/devices')
     )
+    const deviceLabelCipher = getDeviceLabelCipher(
+      this.sodium,
+      this.#state.identity.userId,
+      this.#state.identity.keychainBaseKey
+    )
+    try {
+      return devices.map(device => ({
+        ...device,
+        label: device.label
+          ? z
+              .string()
+              .parse(decrypt(this.sodium, device.label, deviceLabelCipher))
+          : undefined,
+      }))
+    } finally {
+      this.sodium.memzero(deviceLabelCipher.key)
+    }
   }
 
   // Key Ops --

diff --git a/packages/devtools/src/tabs/DevicesTab.tsx b/packages/devtools/src/tabs/DevicesTab.tsx
@@ -1,4 +1,12 @@
-import { Badge, BoxProps, Button, Flex, Stack, Text } from '@chakra-ui/react'
+import {
+  Badge,
+  Box,
+  BoxProps,
+  Button,
+  Flex,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 import {
   useE2ESDKClient,
   useE2ESDKClientIdentity,
@@ -40,16 +48,27 @@ const YourDevicesSection = (props: BoxProps) => {
       <Stack spacing={4} px={4}>
         {devices.map(device => (
           <Flex key={device.id} alignItems="baseline">
-            <Text fontFamily="mono" fontSize="xs">
-              {device.id}
-            </Text>
-            {client.currentDeviceId === device.id && (
-              <Badge fontSize="2xs" colorScheme="green" ml={2}>
-                Current
-              </Badge>
-            )}
+            <Box>
+              <Text fontWeight="medium" fontSize="xs">
+                {device.label ?? 'Unnamed device'}
+              </Text>
+              <Text fontFamily="mono" fontSize="xs" color="gray.500">
+                {device.id}
+                {client.currentDeviceId === device.id && (
+                  <Badge
+                    fontSize="2xs"
+                    colorScheme="green"
+                    ml={2}
+                    fontFamily="body"
+                  >
+                    Current
+                  </Badge>
+                )}
+              </Text>
+            </Box>
             <Text ml="auto" fontSize="xs" color="gray.500">
-              {device.sessions.length} session(s)
+              {device.sessions.length || 'no'} session
+              {device.sessions.length > 1 ? 's' : ''}
             </Text>
           </Flex>
         ))}