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

68
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 {modalStyle} from "./model/theme.js";
import {createShare} from "./model/handler.js";
const NewShareModal = (props) => {
const newShareForm = useFormik({
const form = useFormik({
initialValues: {
shareMode: "public",
backendMode: "proxy",
target: "",
insecure: false,
},
onSubmit: (v) => {
createShare(v);
@ -16,6 +17,8 @@ const NewShareModal = (props) => {
},
});
const httpBackendModes = ["proxy", "web", "caddy", "drive"];
return (
<Modal
open={props.isOpen}
@ -23,44 +26,85 @@ const NewShareModal = (props) => {
>
<Box sx={{ ...modalStyle }}>
<h2>Share...</h2>
<form onSubmit={newShareForm.handleSubmit}>
<form onSubmit={form.handleSubmit}>
<TextField
fullWidth
select
id="shareMode"
name="shareMode"
label="Share Mode"
value={newShareForm.values.shareMode}
onChange={newShareForm.handleChange}
onBlur={newShareForm.handleBlur}
value={form.values.shareMode}
onChange={form.handleChange}
onBlur={form.handleBlur}
sx={{ mt: 2 }}
>
<MenuItem value="public">public</MenuItem>
<MenuItem value="private">private</MenuItem>
</TextField>
{form.values.shareMode === "public" && (
<TextField
fullWidth select
id="backendMode"
name="backendMode"
label="Backend Mode"
value={newShareForm.values.backendMode}
onChange={newShareForm.handleChange}
onBlur={newShareForm.handleBlur}
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="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
fullWidth
id="target"
name="target"
label="Target"
value={newShareForm.values.target}
onChange={newShareForm.handleChange}
onBlur={newShareForm.handleBlur}
value={form.values.target}
onChange={form.handleChange}
onBlur={form.handleBlur}
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>
</form>
</Box>