everything ported to typescript (#221)

agent/agentUiTs/src/AgentUi.tsx

@@ -4,11 +4,13 @@ import NavBar from "./NavBar.tsx";
 import {AgentObject, buildOverview} from "./model/overview.ts";
 import Overview from "./Overview.tsx";
 import NewShareModal from "./NewShareModal.tsx";
+import NewAccessModal from "./NewAccessModal.tsx";
 
 const AgentUi = () => {
     const [version, setVersion] = useState("unset");
     const [overview, setOverview] = useState(new Array<AgentObject>());
     const [newShareOpen, setNewShareOpen] = useState(false);
+    const [newAccessOpen, setNewAccessOpen] = useState(false);
 
     const openNewShare = () => {
         setNewShareOpen(true);
@@ -17,6 +19,13 @@ const AgentUi = () => {
         setNewShareOpen(false);
     }
 
+    const openNewAccess = () => {
+        setNewAccessOpen(true);
+    }
+    const closeNewAccess = () => {
+        setNewAccessOpen(false);
+    }
+
     useEffect(() => {
 		GetAgentApi().agentVersion()
             .then(r => {
@@ -49,9 +58,10 @@ const AgentUi = () => {
 
     return (
         <>
-            <NavBar version={version} shareClick={openNewShare} />
+            <NavBar version={version} shareClick={openNewShare} accessClick={openNewAccess} />
             <Overview overview={overview} />
             <NewShareModal isOpen={newShareOpen} close={closeNewShare} />
+            <NewAccessModal isOpen={newAccessOpen} close={closeNewAccess} />
         </>
     );
 }

agent/agentUiTs/src/NavBar.tsx

@@ -6,9 +6,10 @@ import ShareIcon from "@mui/icons-material/Share";
 interface NavBarProps {
     version: string;
     shareClick: () => void;
+    accessClick: () => void;
 }
 
-function NavBar({ version, shareClick }: NavBarProps) {
+function NavBar({ version, shareClick, accessClick }: NavBarProps) {
     return (
         <Box ssx={{ flexGrow: 1 }}>
             <AppBar position="static">
@@ -24,7 +25,7 @@ function NavBar({ version, shareClick }: NavBarProps) {
                             <Button color="inherit" onClick={shareClick}><ShareIcon /></Button>
                         </Grid2>
                         <Grid2 display="flex" justifyContent="right">
-                            <Button color="inherit" ><LanIcon /></Button>
+                            <Button color="inherit" onClick={accessClick}><LanIcon /></Button>
                         </Grid2>
                     </Grid2>
                 </Toolbar>

agent/agentUiTs/src/NewAccessModal.tsx

@@ -0,0 +1,68 @@
+import {useState} from "react";
+import {useFormik} from "formik";
+import {GetAgentApi} from "./model/api.ts";
+import {Box, Button, Modal, TextField} from "@mui/material";
+import {modalStyle} from "./model/theme.ts";
+
+interface NewAccessModalProps {
+    close: () => void;
+    isOpen: boolean;
+}
+
+function NewAccessModal({ close, isOpen }: NewAccessModalProps) {
+    const [errorMessage, setErrorMessage] = useState(<></>);
+
+    const newAccessForm = useFormik({
+        initialValues: {
+            token: "",
+            bindAddress: "",
+        },
+        onSubmit: v => {
+            setErrorMessage(<></>);
+            GetAgentApi().agentAccessPrivate(v)
+                .then(r => {
+                    close();
+                })
+                .catch(e => {
+                    e.response.json().then(ex => {
+                        setErrorMessage(<p>{ex.message}</p>);
+                        console.log(ex.message);
+                    })
+                });
+        }
+    });
+
+    return (
+          <Modal open={isOpen} onClose={close}>
+              <Box sx={{...modalStyle}}>
+                  <h2>Access...</h2>
+                  {errorMessage}
+                  <form onSubmit={newAccessForm.handleSubmit}>
+                      <TextField
+                          fullWidth
+                          id="token"
+                          name="token"
+                          label="Share Token"
+                          value={newAccessForm.values.token}
+                          onChange={newAccessForm.handleChange}
+                          onBlur={newAccessForm.handleBlur}
+                          sx={{mt: 2}}
+                      />
+                      <TextField
+                          fullWidth
+                          id="bindAddress"
+                          name="bindAddress"
+                          label="Bind Address"
+                          value={newAccessForm.values.bindAddress}
+                          onChange={newAccessForm.handleChange}
+                          onBlur={newAccessForm.handleBlur}
+                          sx={{mt: 2}}
+                      />
+                      <Button color="primary" variant="contained" type="submit" sx={{mt: 2}}>Create Access</Button>
+                  </form>
+              </Box>
+          </Modal>
+    );
+}
+
+export default NewAccessModal;