From a2f8cac474852c4118e63e8c47b9c8930310f738 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Fri, 24 Jan 2025 10:46:14 -0500
Subject: [PATCH] split ReleaseAccessModal out to a separate file (#724):

---
 ui100/src/AccessPanel.tsx        | 52 ++------------------------------
 ui100/src/AccountPanel.tsx       |  2 +-
 ui100/src/ReleaseAccessModal.tsx | 52 ++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 50 deletions(-)
 create mode 100644 ui100/src/ReleaseAccessModal.tsx

diff --git a/ui100/src/AccessPanel.tsx b/ui100/src/AccessPanel.tsx
index 6fe7d5d2..c4a32632 100644
--- a/ui100/src/AccessPanel.tsx
+++ b/ui100/src/AccessPanel.tsx
@@ -1,58 +1,12 @@
 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 useStore from "./model/store.ts";
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useState} from "react";
 import {Configuration, Frontend, MetadataApi, ShareApi} from "./api";
 import DeleteIcon from "@mui/icons-material/Delete";
 import PropertyTable from "./PropertyTable.tsx";
-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 = (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>
-    );
-}
+import ReleaseAccessModal from "./ReleaseAccessModal.tsx";
 
 interface AccessPanelProps {
     access: Node;
diff --git a/ui100/src/AccountPanel.tsx b/ui100/src/AccountPanel.tsx
index fab278c1..1f92ef9e 100644
--- a/ui100/src/AccountPanel.tsx
+++ b/ui100/src/AccountPanel.tsx
@@ -29,7 +29,7 @@ const AccountPanel = ({ account }: AccountPanelProps) => {
                 <Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
             </Grid2>
             <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 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
                 <Tooltip title="Change Password">
diff --git a/ui100/src/ReleaseAccessModal.tsx b/ui100/src/ReleaseAccessModal.tsx
new file mode 100644
index 00000000..fd5e8ec6
--- /dev/null
+++ b/ui100/src/ReleaseAccessModal.tsx
@@ -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;
\ No newline at end of file