extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-02-07 22:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

split ReleaseAccessModal out to a separate file (#724):

Browse Source
This commit is contained in:
Michael Quigley 2025-01-24 10:46:14 -05:00
parent 32f0d7ef93
commit a2f8cac474
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
ui100/src/AccessPanel.tsx
View File

@ -1,58 +1,12 @@
import {Node} from "@xyflow/react"; import {Node} from "@xyflow/react";
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Tooltip, Typography} from "@mui/material"; import {Button, Grid2, Tooltip, Typography} from "@mui/material";
import AccessIcon from "@mui/icons-material/Lan"; import AccessIcon from "@mui/icons-material/Lan";
import useStore from "./model/store.ts"; import useStore from "./model/store.ts";
import {useEffect, useRef, useState} from "react"; import {useEffect, useState} from "react";
import {Configuration, Frontend, MetadataApi, ShareApi} from "./api"; import {Configuration, Frontend, MetadataApi, ShareApi} from "./api";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import PropertyTable from "./PropertyTable.tsx"; import PropertyTable from "./PropertyTable.tsx";
import {modalStyle} from "./styling/theme.ts"; import ReleaseAccessModal from "./ReleaseAccessModal.tsx";
interface ReleaseAccessProps {
close: () => void;
isOpen: boolean;
detail: Frontend;
action: () => void;
}
const ReleaseAccessModal = ({ close, isOpen, detail, action }: ReleaseAccessProps) => {
const [feToken, setFeToken] = useState<String>("");
const [checked, setChecked] = useState<boolean>(false);
const checkedRef = useRef<boolean>(checked);
const toggleChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(!checkedRef.current);
}
useEffect(() => {
setChecked(false);
}, [isOpen]);
useEffect(() => {
if(detail && detail.token) {
setFeToken(detail.token);
}
}, [detail]);
return (
<Modal open={isOpen} onClose={close}>
<Box sx={{ ...modalStyle }}>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography variant="h5"><strong>Release Access</strong></Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography variant="body1">Would you like to release the access <code>{feToken}</code> ?</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{feToken}</code></p>} sx={{ mt: 2 }} />
</Grid2>
<Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
<Button color="error" variant="contained" disabled={!checked} onClick={action}>Release</Button>
</Grid2>
</Box>
</Modal>
);
}
interface AccessPanelProps { interface AccessPanelProps {
access: Node; access: Node;

2
ui100/src/AccountPanel.tsx
View File

@ -29,7 +29,7 @@ const AccountPanel = ({ account }: AccountPanelProps) => {
<Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2> <Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
</Grid2> </Grid2>
<Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center"> <Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
<h5 style={{ margin: 0 }}>Your zrok account identified by the email <code>{user.email}</code></h5> <h5 style={{ margin: 0 }}>Your zrok account, <code>{user.email}</code></h5>
</Grid2> </Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left"> <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
<Tooltip title="Change Password"> <Tooltip title="Change Password">

52
ui100/src/ReleaseAccessModal.tsx Normal file
View File

@ -0,0 +1,52 @@
import {Frontend} from "./api";
import {useEffect, useRef, useState} from "react";
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
import {modalStyle} from "./styling/theme.ts";
interface ReleaseAccessProps {
close: () => void;
isOpen: boolean;
detail: Frontend;
action: () => void;
}
const ReleaseAccessModal = ({ close, isOpen, detail, action }: ReleaseAccessProps) => {
const [feToken, setFeToken] = useState<String>("");
const [checked, setChecked] = useState<boolean>(false);
const checkedRef = useRef<boolean>(checked);
const toggleChecked = () => {
setChecked(!checkedRef.current);
}
useEffect(() => {
setChecked(false);
}, [isOpen]);
useEffect(() => {
if(detail && detail.token) {
setFeToken(detail.token);
}
}, [detail]);
return (
<Modal open={isOpen} onClose={close}>
<Box sx={{ ...modalStyle }}>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography variant="h5"><strong>Release Access</strong></Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography variant="body1">Would you like to release the access <code>{feToken}</code> ?</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{feToken}</code></p>} sx={{ mt: 2 }} />
</Grid2>
<Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
<Button color="error" variant="contained" disabled={!checked} onClick={action}>Release</Button>
</Grid2>
</Box>
</Modal>
);
}
export default ReleaseAccessModal;