also add 'access_token' to token button

src/components/ShowTokenButton.js

@@ -4,11 +4,12 @@ import { GlobalContext } from "../contexts/GlobalContext";
 import { getTokenIcon, getOKIcon, getCopyIcon } from "../utils/styling";
 
 export default function ShowTokenButton(props) {
-    const { api_host, token, isAuthenticated } = useContext(GlobalContext);
+    const { api_host, idToken, accessToken, isAuthenticated } = useContext(GlobalContext);
     const [show, setShow] = useState(false);
 
     const [copySuccess, setCopySuccess] = useState('');
     const textAreaRef = useRef(null);
+    const textAreaRef2 = useRef(null);
 
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
@@ -19,11 +20,19 @@ export default function ShowTokenButton(props) {
         // This is just personal preference.
         // I prefer to not show the the whole text area selected.
         e.target.focus();
-        setCopySuccess('Copied!');
 
         setShow(false)
     };
 
+    function copyToClipboard2(e) {
+        textAreaRef2.current.select();
+        document.execCommand('copy');
+        // This is just personal preference.
+        // I prefer to not show the the whole text area selected.
+        e.target.focus();
+
+        setShow(false)
+    };
     function close(){
         setShow(false)
     }
@@ -45,15 +54,28 @@ export default function ShowTokenButton(props) {
                     <Modal.Title>{getTokenIcon('black')}{' '}oidc_id_token</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <Form.Control as="textarea" rows={12} ref={textAreaRef} value={token}>
-                    {token}
+                    <Form.Control as="textarea" rows={11} ref={textAreaRef} value={idToken}>
+                    {idToken}
                     </Form.Control>
                 </Modal.Body>
                 <Modal.Footer>
                     <Button variant="primary" onClick={copyToClipboard}>
                         {getCopyIcon()}{' '}Copy to Clipboard
                     </Button>
+                </Modal.Footer>
 
+                <Modal.Header closeButton>
+                    <Modal.Title>{getTokenIcon('black')}{' '}access_token</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Form.Control as="textarea" rows={9} ref={textAreaRef2} value={accessToken}>
+                        {accessToken}
+                    </Form.Control>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="primary" onClick={copyToClipboard2}>
+                        {getCopyIcon()}{' '}Copy to Clipboard
+                    </Button>
                 </Modal.Footer>
             </Modal>
             </>

src/components/auth/authControl.js

@@ -4,7 +4,7 @@ import { Nav } from "react-bootstrap";
 import { GlobalContext } from "../../contexts/GlobalContext";
 
 export default function AuthControl() {
-  const { api_host, isAuthenticated, loggedInUserName, token } = useContext(GlobalContext);
+  const { api_host, isAuthenticated, loggedInUserName } = useContext(GlobalContext);
 
   console.log("loggedIn: ", isAuthenticated);
 

src/contexts/GlobalContext.js

@@ -5,14 +5,15 @@ import getCookie from "../utils/getCookie";
 
 export const GlobalContext = createContext();
 
-function getUserName(api_host, setLoggedInUserName, setToken){
+// request the user profile (async) and on return set pieces of global state
+function setProfileState(api_host, setLoggedInUserName, setIdToken, setAccessToken){
   const profileUrl = api_host + "accounts/user-profiles/";
   axios
     .get(profileUrl, {withCredentials: true})
     .then((response) => {
-
-      setLoggedInUserName(response.data.results[0].full_name);
-      setToken(response.data.results[0].oidc_id_token)
+        setLoggedInUserName(response.data.results[0].full_name);
+        setIdToken(response.data.results[0].oidc_id_token)
+        setAccessToken(response.data.results[0].oidc_access_token)
     })
 }
 
@@ -28,7 +29,8 @@ export function GlobalContextProvider({ children }) {
   const [archives, setArchives] = useState();
   const [navbar, setNavbar] = useState();
   const [loggedInUserName, setLoggedInUserName] = useState();
-  const [token, setToken] = useState([]);
+  const [idToken, setIdToken] = useState([]);
+  const [accessToken, setAccessToken] = useState([]);
 
   useEffect(() => {
     axios
@@ -48,6 +50,7 @@ export function GlobalContextProvider({ children }) {
   // Zheng: "!!!!! Still need to look at sessionid and stuff"
   const [sessionid, setSessionid] = useState(getCookie("sessionid"));
   console.log("waah", sessionid, getCookie("sessionid"), document.cookie);
+
   const [isAuthenticated, setIsAuthenticated] = useState(
     sessionid ? true : false
   );
@@ -56,7 +59,7 @@ export function GlobalContextProvider({ children }) {
     setIsAuthenticated(true);
     setSessionid(getCookie("sessionid"));
     history.replace("/");
-    getUserName(api_host, setLoggedInUserName, setToken);
+    setProfileState(api_host, setLoggedInUserName, setIdToken, setAccessToken);
     return null;
   };
 
@@ -93,7 +96,8 @@ export function GlobalContextProvider({ children }) {
         handleLogout,
         handleError,
         loggedInUserName,
-        token,
+        idToken,
+        accessToken
       }}
     >
       {children}

src/routes/Routes.js

@@ -64,7 +64,7 @@ export default function Routes() {
 
         </Switch>
 
-      <footer><small>esap-gui version 1 jul 2021 - 13:00</small></footer>
+      <footer><small>esap-gui version 2 jul 2021 - 9:00</small></footer>
     </Router>
   );
 }