extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-11-07 16:54:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

new share form improvements (#221)

Browse Source
This commit is contained in:
Michael Quigley 2024-10-29 13:23:51 -04:00
parent 2a6ecc6e9f
commit 472b39767a
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
1 changed files with 66 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
agent/agentUi/src/NewShareModal.jsx
View File

@ -1,14 +1,15 @@
import {Box, Button, MenuItem, Modal, TextField} from "@mui/material"; import {Box, Button, Checkbox, FormControlLabel, MenuItem, Modal, TextField} from "@mui/material";
import {useFormik} from "formik"; import {useFormik} from "formik";
import {modalStyle} from "./model/theme.js"; import {modalStyle} from "./model/theme.js";
import {createShare} from "./model/handler.js"; import {createShare} from "./model/handler.js";
const NewShareModal = (props) => { const NewShareModal = (props) => {
const newShareForm = useFormik({ const form = useFormik({
initialValues: { initialValues: {
shareMode: "public", shareMode: "public",
backendMode: "proxy", backendMode: "proxy",
target: "", target: "",
insecure: false,
}, },
onSubmit: (v) => { onSubmit: (v) => {
createShare(v); createShare(v);
@ -16,6 +17,8 @@ const NewShareModal = (props) => {
}, },
}); });
const httpBackendModes = ["proxy", "web", "caddy", "drive"];
return ( return (
<Modal <Modal
open={props.isOpen} open={props.isOpen}
@ -23,44 +26,85 @@ const NewShareModal = (props) => {
> >
<Box sx={{ ...modalStyle }}> <Box sx={{ ...modalStyle }}>
<h2>Share...</h2> <h2>Share...</h2>
<form onSubmit={newShareForm.handleSubmit}> <form onSubmit={form.handleSubmit}>
<TextField <TextField
fullWidth fullWidth
select select
id="shareMode" id="shareMode"
name="shareMode" name="shareMode"
label="Share Mode" label="Share Mode"
value={newShareForm.values.shareMode} value={form.values.shareMode}
onChange={newShareForm.handleChange} onChange={form.handleChange}
onBlur={newShareForm.handleBlur} onBlur={form.handleBlur}
sx={{ mt: 2 }} sx={{ mt: 2 }}
> >
<MenuItem value="public">public</MenuItem> <MenuItem value="public">public</MenuItem>
<MenuItem value="private">private</MenuItem> <MenuItem value="private">private</MenuItem>
</TextField> </TextField>
<TextField {form.values.shareMode === "public" && (
fullWidth select <TextField
id="backendMode" fullWidth select
name="backendMode" id="backendMode"
label="Backend Mode" name="backendMode"
value={newShareForm.values.backendMode} label="Backend Mode"
onChange={newShareForm.handleChange} value={form.values.backendMode}
onBlur={newShareForm.handleBlur} onChange={form.handleChange}
sx={{ mt: 2 }} onBlur={form.handleBlur}
> sx={{ mt: 2 }}
<MenuItem value="proxy">proxy</MenuItem> >
<MenuItem value="web">web</MenuItem> <MenuItem value="proxy">proxy</MenuItem>
</TextField> <MenuItem value="web">web</MenuItem>
<MenuItem value="caddy">caddy</MenuItem>
<MenuItem value="drive">drive</MenuItem>
</TextField>
)}
{form.values.shareMode === "private" && (
<TextField
fullWidth select
id="backendMode"
name="backendMode"
label="Backend Mode"
value={form.values.backendMode}
onChange={form.handleChange}
onBlur={form.handleBlur}
sx={{ mt: 2 }}
>
<MenuItem value="proxy">proxy</MenuItem>
<MenuItem value="web">web</MenuItem>
<MenuItem value="tcpTunnel">tcpTunnel</MenuItem>
<MenuItem value="udpTunnel">udpTunnel</MenuItem>
<MenuItem value="caddy">caddy</MenuItem>
<MenuItem value="drive">drive</MenuItem>
<MenuItem value="socks">socks</MenuItem>
<MenuItem value="vpn">vpn</MenuItem>
</TextField>
)}
<TextField <TextField
fullWidth fullWidth
id="target" id="target"
name="target" name="target"
label="Target" label="Target"
value={newShareForm.values.target} value={form.values.target}
onChange={newShareForm.handleChange} onChange={form.handleChange}
onBlur={newShareForm.handleBlur} onBlur={form.handleBlur}
sx={{ mt: 2 }} sx={{ mt: 2 }}
/> />
{httpBackendModes.includes(form.values.backendMode) && (
<Box>
<FormControlLabel
control={<Checkbox
id="insecure"
name="insecure"
label="Insecure"
checked={form.values.insecure}
onChange={form.handleChange}
onBlur={form.handleBlur}
/>}
label="Insecure"
sx={{ mt: 2 }}
/>
</Box>
)}
<Button color="primary" variant="contained" type="submit" sx={{ mt: 2 }}>Create Share</Button> <Button color="primary" variant="contained" type="submit" sx={{ mt: 2 }}>Create Share</Button>
</form> </form>
</Box> </Box>