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

@ -1,8 +1,8 @@
import { WebauthnDevice } from "@root/models/Webauthn";
import { WebauthnDevicesPath } from "./Api";
import { Get } from "./Client";
// getWebauthnDevices returns the list of webauthn devices for the authenticated user.
export async function getWebauthnDevices(): Promise<WebauthnDevice[]> {
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";
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) {
const handleAddClick = () => {
if (props.onClose) {
props.onClose({}, "backdropClick");
}
}
};
const handleCancelClick = () => {
if (props.onClose) {
props.onClose({}, "backdropClick");
}
}
};
return (
<Dialog {...props}>
<DialogTitle>Add new Security Key</DialogTitle>
<DialogContent>
<DialogContentText>
Provide the details for the new security key.
</DialogContentText>
<DialogContentText>Provide the details for the new security key.</DialogContentText>
<TextField
autoFocus
margin="dense"

View File

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

View File

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