add basic functionality for 'update-token' feature

infra/staff/src/App.tsx

@@ -4,6 +4,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import TextField from "@mui/material/TextField";
+import { Link } from "@mui/material";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import "./App.css";
@@ -72,6 +73,7 @@ const App: React.FC = () => {
 
     useEffect(() => {
         const storedToken = localStorage.getItem("token");
+        console.log(storedToken)
         if (storedToken) {
             setToken(storedToken);
             setLocalToken(storedToken);
@@ -240,9 +242,19 @@ const App: React.FC = () => {
         if (userToken) {
             setLocalToken(userToken);
             setToken(userToken);
+            
+            document.getElementById(":r1:").readOnly = true 
         }
     }, []);
 
+    const updateToken = () => {
+      const editToken = document.getElementById(":r1:");
+      editToken.readOnly = false;
+      
+      // Change focus to Token input form 
+      editToken.focus()
+    };
+
     return (
         <div className="container">
             <div>
@@ -256,7 +268,11 @@ const App: React.FC = () => {
                         >
                             staff.ente.io
                         </a>
-                        <div className="text-fields">
+                    <div className="text-fields"> 
+                        <div style={{
+                          display: "flex",
+                          flexDirection: "column",
+                        }}>
                             <TextField
                                 label="Token"
                                 value={localToken}
@@ -268,6 +284,10 @@ const App: React.FC = () => {
                                 className="text-field-token"
                                 style={{ maxWidth: "parent" }}
                             />
+                            <Link to="/" style={{ textAlign: "left" }} onClick={updateToken}>
+                                Update Token?
+                            </Link>
+                            </div>
                             <TextField
                                 label="Email"
                                 value={localEmail}