fix: lint

pull/4372/head
James Elliott 2022-11-13 10:18:57 +11:00
parent 9b66bb4fe2
commit bbc9e6422e
No known key found for this signature in database
GPG Key ID: 0F1C4A096E857E49
5 changed files with 120 additions and 66 deletions

View File

@ -131,17 +131,17 @@ export interface AssertionPublicKeyCredentialResultJSON {
} }
export interface WebauthnDevice { export interface WebauthnDevice {
id: string; id: string;
created_at: Date; created_at: Date;
last_used_at?: Date; last_used_at?: Date;
rpid: string; rpid: string;
username: string; username: string;
description: string; description: string;
kid: string; kid: string;
public_key: Uint8Array; public_key: Uint8Array;
attestation_type: string; attestation_type: string;
transport: string; transport: string;
aaguid: string; aaguid: string;
sign_count: number; sign_count: number;
clone_warning: boolean; clone_warning: boolean;
} }

View File

@ -1,9 +1,9 @@
import { WebauthnDevice } from "@root/models/Webauthn"; import { WebauthnDevice } from "@root/models/Webauthn";
import { WebauthnDevicesPath } from "./Api"; import { WebauthnDevicesPath } from "./Api";
import { Get } from "./Client"; import { Get } from "./Client";
// getWebauthnDevices returns the list of webauthn devices for the authenticated user. // getWebauthnDevices returns the list of webauthn devices for the authenticated user.
export async function getWebauthnDevices(): Promise<WebauthnDevice[]> { export async function getWebauthnDevices(): Promise<WebauthnDevice[]> {
return Get<WebauthnDevice[]>(WebauthnDevicesPath); return Get<WebauthnDevice[]>(WebauthnDevicesPath);
} }

View File

@ -1,28 +1,36 @@
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogProps, DialogTitle, TextField } from "@mui/material";
import React from "react"; import React from "react";
interface Props extends DialogProps {}; import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogProps,
DialogTitle,
TextField,
} from "@mui/material";
interface Props extends DialogProps {}
export default function AddSecurityKeyDialog(props: Props) { export default function AddSecurityKeyDialog(props: Props) {
const handleAddClick = () => { const handleAddClick = () => {
if (props.onClose) { if (props.onClose) {
props.onClose({}, "backdropClick"); props.onClose({}, "backdropClick");
} }
} };
const handleCancelClick = () => { const handleCancelClick = () => {
if (props.onClose) { if (props.onClose) {
props.onClose({}, "backdropClick"); props.onClose({}, "backdropClick");
} }
} };
return ( return (
<Dialog {...props}> <Dialog {...props}>
<DialogTitle>Add new Security Key</DialogTitle> <DialogTitle>Add new Security Key</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText> <DialogContentText>Provide the details for the new security key.</DialogContentText>
Provide the details for the new security key.
</DialogContentText>
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
@ -39,4 +47,4 @@ export default function AddSecurityKeyDialog(props: Props) {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );
} }

View File

@ -1,11 +1,36 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { AppBar, Box, Button, Drawer, Grid, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Paper, Stack, Switch, Table, TableBody, TableCell, TableHead, TableRow, Toolbar, Tooltip, Typography } from "@mui/material"; import DeleteIcon from "@mui/icons-material/Delete";
import SystemSecurityUpdateGoodIcon from '@mui/icons-material/SystemSecurityUpdateGood'; import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from '@mui/icons-material/Delete'; import SystemSecurityUpdateGoodIcon from "@mui/icons-material/SystemSecurityUpdateGood";
import EditIcon from '@mui/icons-material/Edit'; import {
import { getWebauthnDevices } from "@root/services/UserWebauthnDevices"; AppBar,
Box,
Button,
Drawer,
Grid,
IconButton,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Paper,
Stack,
Switch,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Toolbar,
Tooltip,
Typography,
} from "@mui/material";
import { WebauthnDevice } from "@root/models/Webauthn"; import { WebauthnDevice } from "@root/models/Webauthn";
import { getWebauthnDevices } from "@root/services/UserWebauthnDevices";
import AddSecurityKeyDialog from "./AddSecurityDialog"; import AddSecurityKeyDialog from "./AddSecurityDialog";
interface Props {} interface Props {}
@ -17,22 +42,22 @@ export default function SettingsView(props: Props) {
const [addKeyOpen, setAddKeyOpen] = useState<boolean>(false); const [addKeyOpen, setAddKeyOpen] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
(async function() { (async function () {
const devices = await getWebauthnDevices(); const devices = await getWebauthnDevices();
setWebauthnDevices(devices); setWebauthnDevices(devices);
})() })();
}, []); }, []);
const handleKeyClose = () => { const handleKeyClose = () => {
setAddKeyOpen(false); setAddKeyOpen(false);
} };
const handleAddKeyButtonClick = () => { const handleAddKeyButtonClick = () => {
setAddKeyOpen(true); setAddKeyOpen(true);
} };
return ( return (
<Box sx={{ display: 'flex' }}> <Box sx={{ display: "flex" }}>
<AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}> <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
<Toolbar variant="dense"> <Toolbar variant="dense">
<Typography style={{ flexGrow: 1 }}>Settings</Typography> <Typography style={{ flexGrow: 1 }}>Settings</Typography>
@ -41,13 +66,13 @@ export default function SettingsView(props: Props) {
<Drawer <Drawer
variant="permanent" variant="permanent"
sx={{ sx={{
width: drawerWidth, width: drawerWidth,
flexShrink: 0, flexShrink: 0,
[`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' }, [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: "border-box" },
}} }}
> >
<Toolbar variant="dense" /> <Toolbar variant="dense" />
<Box sx={{ overflow: 'auto' }}> <Box sx={{ overflow: "auto" }}>
<List> <List>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton selected={true}> <ListItemButton selected={true}>
@ -67,7 +92,9 @@ export default function SettingsView(props: Props) {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Stack spacing={1} direction="row"> <Stack spacing={1} direction="row">
<Button color="primary" variant="contained" onClick={handleAddKeyButtonClick}>Add</Button> <Button color="primary" variant="contained" onClick={handleAddKeyButtonClick}>
Add
</Button>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@ -79,36 +106,48 @@ export default function SettingsView(props: Props) {
<TableCell>Enabled</TableCell> <TableCell>Enabled</TableCell>
<TableCell>Activation</TableCell> <TableCell>Activation</TableCell>
<TableCell>Public Key</TableCell> <TableCell>Public Key</TableCell>
<TableCell>Actions</TableCell> <TableCell>Actions</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{webauthnDevices ? webauthnDevices.map((x, idx) => { {webauthnDevices
return ( ? webauthnDevices.map((x, idx) => {
<TableRow key={x.description}> return (
<TableCell>{x.description}</TableCell> <TableRow key={x.description}>
<TableCell><Switch defaultChecked={false} size="small" /></TableCell> <TableCell>{x.description}</TableCell>
<TableCell><Typography>{(false) ? "<ADATE>" : "Not enabled"}</Typography></TableCell> <TableCell>
<TableCell> <Switch defaultChecked={false} size="small" />
<Tooltip title={x.public_key}> </TableCell>
<div style={{overflow: "hidden", textOverflow: "ellipsis", width: '300px'}}> <TableCell>
<Typography noWrap>{x.public_key}</Typography> <Typography>{false ? "<ADATE>" : "Not enabled"}</Typography>
</div> </TableCell>
</Tooltip> <TableCell>
</TableCell> <Tooltip title={x.public_key}>
<TableCell> <div
<Stack direction="row" spacing={1}> style={{
<IconButton aria-label="edit"> overflow: "hidden",
<EditIcon /> textOverflow: "ellipsis",
</IconButton> width: "300px",
<IconButton aria-label="delete"> }}
<DeleteIcon /> >
</IconButton> <Typography noWrap>{x.public_key}</Typography>
</Stack> </div>
</TableCell> </Tooltip>
</TableRow> </TableCell>
) <TableCell>
}) : null} <Stack direction="row" spacing={1}>
<IconButton aria-label="edit">
<EditIcon />
</IconButton>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Stack>
</TableCell>
</TableRow>
);
})
: null}
</TableBody> </TableBody>
</Table> </Table>
</Paper> </Paper>

View File

@ -58,6 +58,13 @@ export default defineConfig(({ mode }) => {
port: 3000, port: 3000,
open: false, open: false,
}, },
plugins: [/* eslintPlugin({ cache: false }) */, htmlPlugin(), istanbulPlugin, react(), svgr(), tsconfigPaths()], plugins: [
,
/* eslintPlugin({ cache: false }) */ htmlPlugin(),
istanbulPlugin,
react(),
svgr(),
tsconfigPaths(),
],
}; };
}); });