add token to clipboard button

src/components/NavBar.js

@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
 import AuthControl from "./auth/authControl";
 import MyBasketButton from "./basket/MyBasketButton"
 import SaveBasketButton from "./basket/SaveBasketButton"
-import EmptyBasketButton from "./basket/EmptyBasketButton"
+import ShowTokenButton from "./ShowTokenButton"
 import { QueryContext } from "../contexts/QueryContext";
 import { GlobalContext } from "../contexts/GlobalContext";
 
@@ -39,7 +39,8 @@ export default function NavBar() {
         <SaveBasketButton/>{' '}
       <Nav>
 
-        <AuthControl />
+          <AuthControl />
+          <ShowTokenButton/>
       </Nav>
     </Navbar>
   );

src/components/ShowTokenButton.js

+import React, { useContext, useState, useRef } from "react";
+import { Button, Modal, Form, FormControl } from "react-bootstrap";
+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 [show, setShow] = useState(false);
+
+    const [copySuccess, setCopySuccess] = useState('');
+    const textAreaRef = useRef(null);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    function copyToClipboard(e) {
+        textAreaRef.current.select();
+        document.execCommand('copy');
+        // This is just personal preference.
+        // I prefer to not show the the whole text area selected.
+        e.target.focus();
+        setCopySuccess('Copied!');
+
+        setShow(false)
+    };
+
+    function close(){
+        setShow(false)
+    }
+
+    if (isAuthenticated)  {
+
+        return (
+            <>
+            <Button
+                type="button"
+                variant="outline-primary"
+                onClick={handleShow}
+                {...props}>
+                {getTokenIcon('white')}
+            </Button>
+
+            <Modal size="lg" show={show} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <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>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="primary" onClick={copyToClipboard}>
+                        {getCopyIcon()}{' '}Copy to Clipboard
+                    </Button>
+
+                </Modal.Footer>
+            </Modal>
+            </>
+        )
+
+    }
+    else{
+        return null
+    }
+}

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 } = useContext(GlobalContext);
+  const { api_host, isAuthenticated, loggedInUserName, token } = useContext(GlobalContext);
 
   console.log("loggedIn: ", isAuthenticated);
 

src/components/basket/APIButton.js

@@ -11,7 +11,7 @@ export default function APIButton(props) {
     if (isAuthenticated) {
 
         return <a href={profileUrl} target="_blank">
-                <Button variant="outline-primary">{getAPIIcon()}&nbsp;API
+                <Button variant="outline-primary">{getAPIIcon()}&nbsp;API (expert user)
                 </Button>
         </a>
 

src/contexts/GlobalContext.js

@@ -5,12 +5,14 @@ import getCookie from "../utils/getCookie";
 
 export const GlobalContext = createContext();
 
-function getUserName(api_host, setLoggedInUserName){
+function getUserName(api_host, setLoggedInUserName, setToken){
   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)
     })
 }
 
@@ -26,6 +28,7 @@ export function GlobalContextProvider({ children }) {
   const [archives, setArchives] = useState();
   const [navbar, setNavbar] = useState();
   const [loggedInUserName, setLoggedInUserName] = useState();
+  const [token, setToken] = useState([]);
 
   useEffect(() => {
     axios
@@ -42,7 +45,7 @@ export function GlobalContextProvider({ children }) {
       });
   }, [api_host]);
 
-  // !!!!! Still need to look at sessionid and stuff
+  // 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(
@@ -53,7 +56,7 @@ export function GlobalContextProvider({ children }) {
     setIsAuthenticated(true);
     setSessionid(getCookie("sessionid"));
     history.replace("/");
-    getUserName(api_host, setLoggedInUserName);
+    getUserName(api_host, setLoggedInUserName, setToken);
     return null;
   };
 
@@ -90,6 +93,7 @@ export function GlobalContextProvider({ children }) {
         handleLogout,
         handleError,
         loggedInUserName,
+        token,
       }}
     >
       {children}

src/routes/Routes.js

@@ -64,7 +64,7 @@ export default function Routes() {
 
         </Switch>
 
-      <footer><small>esap-gui version 28 jun 2021 - 15:00</small></footer>
+      <footer><small>esap-gui version 29 jun 2021 - 16:00</small></footer>
     </Router>
   );
 }

src/utils/styling.js

@@ -9,7 +9,9 @@ import {
     faTrashAlt,
     faCheck,
     faCog,
-    faSearchPlus }
+    faSearchPlus,
+    faKey,
+    faCopy}
     from '@fortawesome/free-solid-svg-icons'
 
 
@@ -88,5 +90,20 @@ export const getOKIcon = () => {
     let color = "white"
     let size = 'md'
 
+    return <FontAwesomeIcon size={size} icon={icon} color={color}/>
+}
+
+export const getTokenIcon = (color) => {
+    let icon = faKey
+    let size = 'md'
+
+    return <FontAwesomeIcon size={size} icon={icon} color={color}/>
+}
+
+export const getCopyIcon = () => {
+    let icon = faCopy
+    let color = "white"
+    let size = 'md'
+
     return <FontAwesomeIcon size={size} icon={icon} color={color}/>
 }
\ No newline at end of file