fix: lint
parent
9b66bb4fe2
commit
bbc9e6422e
|
@ -131,17 +131,17 @@ export interface AssertionPublicKeyCredentialResultJSON {
|
|||
}
|
||||
|
||||
export interface WebauthnDevice {
|
||||
id: string;
|
||||
created_at: Date;
|
||||
last_used_at?: Date;
|
||||
rpid: string;
|
||||
username: string;
|
||||
description: string;
|
||||
kid: string;
|
||||
public_key: Uint8Array;
|
||||
attestation_type: string;
|
||||
transport: string;
|
||||
aaguid: string;
|
||||
sign_count: number;
|
||||
clone_warning: boolean;
|
||||
id: string;
|
||||
created_at: Date;
|
||||
last_used_at?: Date;
|
||||
rpid: string;
|
||||
username: string;
|
||||
description: string;
|
||||
kid: string;
|
||||
public_key: Uint8Array;
|
||||
attestation_type: string;
|
||||
transport: string;
|
||||
aaguid: string;
|
||||
sign_count: number;
|
||||
clone_warning: boolean;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
@ -41,13 +66,13 @@ export default function SettingsView(props: Props) {
|
|||
<Drawer
|
||||
variant="permanent"
|
||||
sx={{
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
[`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
[`& .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,32 +110,44 @@ export default function SettingsView(props: Props) {
|
|||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{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>
|
||||
<Tooltip title={x.public_key}>
|
||||
<div style={{overflow: "hidden", textOverflow: "ellipsis", width: '300px'}}>
|
||||
<Typography noWrap>{x.public_key}</Typography>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<IconButton aria-label="edit">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
}) : null}
|
||||
{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>
|
||||
<Tooltip title={x.public_key}>
|
||||
<div
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
width: "300px",
|
||||
}}
|
||||
>
|
||||
<Typography noWrap>{x.public_key}</Typography>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<IconButton aria-label="edit">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
|
|
|
@ -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(),
|
||||
],
|
||||
};
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue