wired up regeneration (#822)

ui100/src/App.tsx

@@ -11,12 +11,19 @@ const App = () => {
 
     useEffect(() => {
         const checkUser = () => {
+            console.log("checkUser");
             const user = localStorage.getItem("user");
             if (user) {
                 updateUser(JSON.parse(user));
             }
         }
         checkUser();
+
+        document.addEventListener("userUpdated", checkUser);
+
+        return () => {
+            document.removeEventListener("userUpdated", checkUser);
+        }
     }, []);
 
     const login = (user: User) => {

ui100/src/RegenerateAccountTokenModal.tsx

@@ -2,6 +2,8 @@ import {User} from "./model/user.ts";
 import {useEffect, useRef, useState} from "react";
 import {modalStyle} from "./styling/theme.ts";
 import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
+import {getAccountApi, getMetadataApi} from "./model/api.ts";
+import useApiConsoleStore from "./model/store.ts";
 
 interface RegenerateAccountTokenModalProps {
     close: () => void;
@@ -10,7 +12,9 @@ interface RegenerateAccountTokenModalProps {
 }
 
 const RegenerateAccountTokenModal = ({ close, isOpen, user }: RegenerateAccountTokenModalProps) => {
+    const updateUser = useApiConsoleStore((state) => state.updateUser);
     const [errorMessage, setErrorMessage] = useState<React.JSX.Element>(null);
+    const [successMessage, setSuccessMessage] = useState<React.JSX.Element>(null);
     const [checked, setChecked] = useState<boolean>(false);
     const checkedRef = useRef<boolean>(checked);
 
@@ -20,8 +24,43 @@ const RegenerateAccountTokenModal = ({ close, isOpen, user }: RegenerateAccountT
 
     useEffect(() => {
         setChecked(false);
+        setSuccessMessage(null);
     }, [isOpen]);
 
+    const regenerateToken = () => {
+        getAccountApi(user).regenerateToken({body: {emailAddress: user.email}})
+            .then(d => {
+                let newUser = {
+                    email: user.email!,
+                    token: d.token!,
+                }
+                console.log(user, newUser);
+                updateUser(newUser);
+                localStorage.setItem("user", JSON.stringify(newUser));
+                document.dispatchEvent(new Event("userUpdated"));
+                setSuccessMessage(<Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
+                    <Typography variant="h6" sx={{ mt: 2, p: 1 }}>Your new account token is: <code>{d.token}</code></Typography>
+                </Grid2>);
+            })
+            .catch(e => {
+                e.response.json().then(ex => {
+                    setErrorMessage(<Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
+                        <Typography color="red">{ex.message}</Typography>
+                    </Grid2>);
+                    console.log("releaseAccess", ex.message);
+                });
+            });
+    }
+
+    const controls = <>
+        <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+        <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm that I want to regenerate my account token</p>} sx={{ mt: 2 }} />
+        </Grid2>
+        <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
+            <Button color="error" variant="contained" disabled={!checked} onClick={regenerateToken}>Regenerate Account Token</Button>
+        </Grid2>
+    </>;
+
     return (
         <Modal open={isOpen} onClose={close}>
             <Box sx={{ ...modalStyle }}>
@@ -30,7 +69,7 @@ const RegenerateAccountTokenModal = ({ close, isOpen, user }: RegenerateAccountT
                 </Grid2>
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <Typography variant="h6" color="red">
-                        WARNING: Regenerating your account token will stop all environments and shares from operating properly!
+                        WARNING: Regenerating your account token can stop all environments and shares from operating properly!
                         Please read the following instructions to prevent interruptions!
                     </Typography>
                 </Grid2>
@@ -46,16 +85,13 @@ const RegenerateAccountTokenModal = ({ close, isOpen, user }: RegenerateAccountT
                         Alternatively, you can just <code>zrok disable</code> any enabled environments and re-enable
                         using the updated account token. Running <code>zrok disable</code> before you regenerate will
                         delete your environments and any shares they contain (including reserved shares). So if you have
-                        environments and reserved shares you need to preserve, your best option is to update the
-                        <code>zrok_token</code> in those environments as described above.
+                        environments and reserved shares you need to preserve, your best option is to update the <code>zrok_token</code> in
+                        those environments as described above.
                     </Typography>
                 </Grid2>
-                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                    <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm that I want to regenerate my account token</p>} sx={{ mt: 2 }} />
-                </Grid2>
-                <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
-                    <Button color="error" variant="contained" disabled={!checked}>Regenerate Account Token</Button>
-                </Grid2>
+                { successMessage ? null : controls }
+                {successMessage}
+                {errorMessage}
             </Box>
         </Modal>
     );

ui100/src/model/api.ts

@@ -1,7 +1,8 @@
-import {Configuration, EnvironmentApi, MetadataApi, ShareApi} from "../api";
+import {AccountApi, Configuration, EnvironmentApi, MetadataApi, ShareApi} from "../api";
 import {User} from "./user.ts";
 
 export const getApiConfig = (user: User): Configuration => { return new Configuration({headers: {"X-TOKEN": user.token}}); }
+export const getAccountApi = (user: User): AccountApi => { return new AccountApi(getApiConfig(user)); }
 export const getEnvironmentApi = (user: User): EnvironmentApi => { return new EnvironmentApi(getApiConfig(user)); }
 export const getMetadataApi = (user: User): MetadataApi => { return new MetadataApi(getApiConfig(user)); }
 export const getShareApi = (user: User): ShareApi => { return new ShareApi(getApiConfig(user)); }