RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add loading skeleton to webauthn devices list in settings ui (#4406)

pull/4426/head
Stephen Kent 2022-11-25 22:22:40 -08:00 committed by GitHub
parent 2967500401
commit b842a22236
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx
View File

@ -1,6 +1,18 @@
import React, { useEffect, useState } from "react";
import { Box, Button, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
import {
Box,
Button,
Paper,
Skeleton,
Stack,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
@ -24,6 +36,7 @@ export default function TwoFactorAuthSettings(props: Props) {
const { createInfoNotification, createErrorNotification } = useNotifications();
const [webauthnShowDetails, setWebauthnShowDetails] = useState<number>(-1);
const [registrationInProgress, setRegistrationInProgress] = useState(false);
const [ready, setReady] = useState(false);
const [webauthnDevices, setWebauthnDevices] = useState<WebauthnDevice[] | undefined>();
@ -31,6 +44,7 @@ export default function TwoFactorAuthSettings(props: Props) {
(async function () {
const devices = await getWebauthnDevices();
setWebauthnDevices(devices);
setReady(true);
})();
}, []);
@ -83,34 +97,43 @@ export default function TwoFactorAuthSettings(props: Props) {
{"Add new device"}
</Button>
</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}
<Box>
{ready ? (
<>
{webauthnDevices ? (
<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>
) : null}
</>
) : (
<>
<Skeleton height={20} />
<Skeleton height={40} />
</>
)}
</Box>
</Stack>
</Box>
</Paper>