From 2967500401ef1ed5267d693c29f931ac1ffb2785 Mon Sep 17 00:00:00 2001
From: Stephen Kent <smkent@smkent.net>
Date: Sat, 19 Nov 2022 00:31:08 -0800
Subject: [PATCH] feat: hide empty webauthn devices table when there are no
 devices (#4405)

---
 .../WebauthnDevices.tsx                       | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx b/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx
index 6f50f2919..b6b99d150 100644
--- a/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx
+++ b/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx
@@ -83,34 +83,34 @@ export default function TwoFactorAuthSettings(props: Props) {
                             {"Add new device"}
                         </Button>
                     </Box>
-                    <Box>
-                        <Table>
-                            <TableHead>
-                                <TableRow>
-                                    <TableCell />
-                                    <TableCell>{translate("Name")}</TableCell>
-                                    <TableCell>{translate("Enabled")}</TableCell>
-                                    <TableCell align="center">{translate("Actions")}</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {webauthnDevices
-                                    ? webauthnDevices.map((x, idx) => {
-                                          return (
-                                              <WebauthnDeviceItem
-                                                  device={x}
-                                                  idx={idx}
-                                                  webauthnShowDetails={webauthnShowDetails}
-                                                  handleWebAuthnDetailsChange={handleWebAuthnDetailsChange}
-                                                  handleDeleteItem={handleDeleteItem}
-                                                  key={`webauthn-device-${idx}`}
-                                              />
-                                          );
-                                      })
-                                    : null}
-                            </TableBody>
-                        </Table>
-                    </Box>
+                    {webauthnDevices ? (
+                        <Box>
+                            <Table>
+                                <TableHead>
+                                    <TableRow>
+                                        <TableCell />
+                                        <TableCell>{translate("Name")}</TableCell>
+                                        <TableCell>{translate("Enabled")}</TableCell>
+                                        <TableCell align="center">{translate("Actions")}</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                    {webauthnDevices.map((x, idx) => {
+                                        return (
+                                            <WebauthnDeviceItem
+                                                device={x}
+                                                idx={idx}
+                                                webauthnShowDetails={webauthnShowDetails}
+                                                handleWebAuthnDetailsChange={handleWebAuthnDetailsChange}
+                                                handleDeleteItem={handleDeleteItem}
+                                                key={`webauthn-device-${idx}`}
+                                            />
+                                        );
+                                    })}
+                                </TableBody>
+                            </Table>
+                        </Box>
+                    ) : null}
                 </Stack>
             </Box>
         </Paper>