mirror of
https://github.com/dstotijn/hetty.git
synced 2025-07-01 18:47:29 -04:00
Add project management
This commit is contained in:
David Stotijn
36
admin/src/pages/get-started/index.tsx
Normal file
36
admin/src/pages/get-started/index.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { Box, Link as MaterialLink, Typography } from "@material-ui/core";
|
||||
import Link from "next/link";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import Layout, { Page } from "../../components/Layout";
|
||||
|
||||
function Index(): JSX.Element {
|
||||
return (
|
||||
<Layout page={Page.GetStarted} title="Get started">
|
||||
<Box p={4}>
|
||||
<Box mb={3}>
|
||||
<Typography variant="h4">Get started</Typography>
|
||||
</Box>
|
||||
<Typography paragraph>
|
||||
You’ve loaded a (new) project. What’s next? You can now use the MITM
|
||||
proxy and review HTTP requests and responses via the{" "}
|
||||
<Link href="/proxy/logs" passHref>
|
||||
<MaterialLink color="secondary">Proxy logs</MaterialLink>
|
||||
</Link>
|
||||
. Stuck? Ask for help on the{" "}
|
||||
<MaterialLink
|
||||
href="https://github.com/dstotijn/hetty/discussions"
|
||||
color="secondary"
|
||||
target="_blank"
|
||||
>
|
||||
Discussions forum
|
||||
</MaterialLink>
|
||||
.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@ -1,17 +1,30 @@
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
CircularProgress,
|
||||
createStyles,
|
||||
IconButton,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
makeStyles,
|
||||
TextField,
|
||||
Theme,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
import SettingsEthernetIcon from "@material-ui/icons/SettingsEthernet";
|
||||
import SendIcon from "@material-ui/icons/Send";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
import FolderIcon from "@material-ui/icons/Folder";
|
||||
import DescriptionIcon from "@material-ui/icons/Description";
|
||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||
import Link from "next/link";
|
||||
|
||||
import { useState } from "react";
|
||||
import { gql, useMutation, useQuery } from "@apollo/client";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import Layout, { Page } from "../components/Layout";
|
||||
import { Alert } from "@material-ui/lab";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
@ -24,14 +37,108 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
lineHeight: 2,
|
||||
marginBottom: theme.spacing(5),
|
||||
},
|
||||
projectName: {
|
||||
marginTop: -6,
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
button: {
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
activeProject: {
|
||||
color: theme.palette.getContrastText(theme.palette.secondary.main),
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const ACTIVE_PROJECT = gql`
|
||||
query ActiveProject {
|
||||
activeProject {
|
||||
name
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const OPEN_PROJECT = gql`
|
||||
mutation OpenProject($name: String!) {
|
||||
openProject(name: $name) {
|
||||
name
|
||||
isActive
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function Index(): JSX.Element {
|
||||
const classes = useStyles();
|
||||
const router = useRouter();
|
||||
const [input, setInput] = useState(null);
|
||||
const { error: activeProjErr, data: activeProjData } = useQuery(
|
||||
ACTIVE_PROJECT,
|
||||
{
|
||||
pollInterval: 1000,
|
||||
}
|
||||
);
|
||||
const [
|
||||
openProject,
|
||||
{ error: openProjErr, data: openProjData, loading: openProjLoading },
|
||||
] = useMutation(OPEN_PROJECT, {
|
||||
onError: () => {},
|
||||
onCompleted({ openProject }) {
|
||||
if (openProject) {
|
||||
router.push("/get-started");
|
||||
}
|
||||
},
|
||||
update(cache, { data: { openProject } }) {
|
||||
cache.modify({
|
||||
fields: {
|
||||
activeProject() {
|
||||
const activeProjRef = cache.writeFragment({
|
||||
id: openProject.name,
|
||||
data: openProject,
|
||||
fragment: gql`
|
||||
fragment ActiveProject on Project {
|
||||
name
|
||||
isActive
|
||||
type
|
||||
}
|
||||
`,
|
||||
});
|
||||
return activeProjRef;
|
||||
},
|
||||
projects(_, { DELETE }) {
|
||||
cache.writeFragment({
|
||||
id: openProject.name,
|
||||
data: openProject,
|
||||
fragment: gql`
|
||||
fragment OpenProject on Project {
|
||||
name
|
||||
isActive
|
||||
type
|
||||
}
|
||||
`,
|
||||
});
|
||||
return DELETE;
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleForm = (e: React.SyntheticEvent) => {
|
||||
e.preventDefault();
|
||||
openProject({ variables: { name: input.value } });
|
||||
};
|
||||
|
||||
if (activeProjErr) {
|
||||
return (
|
||||
<Layout page={Page.Home} title="">
|
||||
<Alert severity="error">
|
||||
Error fetching active project: {activeProjErr.message}
|
||||
</Alert>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout page={Page.Home} title="">
|
||||
<Box p={4}>
|
||||
@ -42,38 +149,105 @@ function Index(): JSX.Element {
|
||||
The simple HTTP toolkit for security research.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography className={classes.subtitle} paragraph>
|
||||
What if security testing was intuitive, powerful, and good looking?
|
||||
What if it was <strong>free</strong>, instead of $400 per year?{" "}
|
||||
<span className={classes.titleHighlight}>Hetty</span> is listening on{" "}
|
||||
<code>:8080</code>…
|
||||
</Typography>
|
||||
<Box>
|
||||
<Link href="/proxy" passHref>
|
||||
|
||||
{activeProjData?.activeProject?.name ? (
|
||||
<div>
|
||||
<Box mb={1}>
|
||||
<Typography variant="h6">Active project:</Typography>
|
||||
</Box>
|
||||
<Box ml={-2} mb={2}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar className={classes.activeProject}>
|
||||
<DescriptionIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={activeProjData.activeProject.name} />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Box>
|
||||
<div>
|
||||
<Link href="/get-started" passHref>
|
||||
<Button
|
||||
className={classes.button}
|
||||
variant="outlined"
|
||||
component="a"
|
||||
color="secondary"
|
||||
size="large"
|
||||
startIcon={<PlayArrowIcon />}
|
||||
>
|
||||
Get started
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/projects" passHref>
|
||||
<Button
|
||||
className={classes.button}
|
||||
variant="outlined"
|
||||
component="a"
|
||||
size="large"
|
||||
startIcon={<FolderIcon />}
|
||||
>
|
||||
Manage projects
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleForm} autoComplete="off">
|
||||
<TextField
|
||||
className={classes.projectName}
|
||||
color="secondary"
|
||||
inputProps={{
|
||||
id: "projectName",
|
||||
ref: (node) => {
|
||||
setInput(node);
|
||||
},
|
||||
}}
|
||||
label="Project name"
|
||||
placeholder="Project name…"
|
||||
error={Boolean(openProjErr)}
|
||||
helperText={openProjErr && openProjErr.message}
|
||||
/>
|
||||
<Button
|
||||
className={classes.button}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
component="a"
|
||||
size="large"
|
||||
startIcon={<SettingsEthernetIcon />}
|
||||
disabled={
|
||||
openProjLoading || Boolean(openProjData?.openProject?.name)
|
||||
}
|
||||
startIcon={
|
||||
openProjLoading || openProjData?.openProject ? (
|
||||
<CircularProgress size={22} />
|
||||
) : (
|
||||
<AddIcon />
|
||||
)
|
||||
}
|
||||
>
|
||||
Setup proxy
|
||||
Create project
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/proxy" passHref>
|
||||
<Button
|
||||
className={classes.button}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
component="a"
|
||||
size="large"
|
||||
startIcon={<SendIcon />}
|
||||
>
|
||||
Send HTTP requests
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Link href="/projects" passHref>
|
||||
<Button
|
||||
className={classes.button}
|
||||
variant="outlined"
|
||||
component="a"
|
||||
size="large"
|
||||
startIcon={<FolderIcon />}
|
||||
>
|
||||
Open project…
|
||||
</Button>
|
||||
</Link>
|
||||
</form>
|
||||
)}
|
||||
</Box>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
33
admin/src/pages/projects/index.tsx
Normal file
33
admin/src/pages/projects/index.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { Box, Divider, Grid, Typography } from "@material-ui/core";
|
||||
import Layout, { Page } from "../../components/Layout";
|
||||
import NewProject from "../../components/projects/NewProject";
|
||||
import ProjectList from "../../components/projects/ProjectList";
|
||||
|
||||
function Index(): JSX.Element {
|
||||
return (
|
||||
<Layout page={Page.Projects} title="Projects">
|
||||
<Box p={4}>
|
||||
<Box mb={3}>
|
||||
<Typography variant="h4">Projects</Typography>
|
||||
</Box>
|
||||
<Typography paragraph>
|
||||
Projects contain settings and data generated/processed by Hetty. They
|
||||
are stored as SQLite database files on disk.
|
||||
</Typography>
|
||||
<Box my={4}>
|
||||
<Divider />
|
||||
</Box>
|
||||
<Box mb={8}>
|
||||
<NewProject />
|
||||
</Box>
|
||||
<Grid container>
|
||||
<Grid item xs={12} sm={8} md={6} lg={6}>
|
||||
<ProjectList />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
Reference in New Issue
Block a user