From 677140750b15d2b5957fc5eb0d150d205047819d Mon Sep 17 00:00:00 2001
From: Nico Vermaas <vermaas@astron.nl>
Date: Fri, 2 Jul 2021 09:19:32 +0200
Subject: [PATCH] also add 'access_token' to token button
---
src/components/ShowTokenButton.js | 30 ++++++++++++++++++++++++++----
src/components/auth/authControl.js | 2 +-
src/contexts/GlobalContext.js | 18 +++++++++++-------
src/routes/Routes.js | 2 +-
4 files changed, 39 insertions(+), 13 deletions(-)
diff --git a/src/components/ShowTokenButton.js b/src/components/ShowTokenButton.js
index a6cda00..4d33308 100644
--- a/src/components/ShowTokenButton.js
+++ b/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>
</>
diff --git a/src/components/auth/authControl.js b/src/components/auth/authControl.js
index 3cb663c..ebf8aae 100644
--- a/src/components/auth/authControl.js
+++ b/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);
diff --git a/src/contexts/GlobalContext.js b/src/contexts/GlobalContext.js
index ba39d3e..2e3bd90 100644
--- a/src/contexts/GlobalContext.js
+++ b/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}
diff --git a/src/routes/Routes.js b/src/routes/Routes.js
index 28a5043..096087e 100644
--- a/src/routes/Routes.js
+++ b/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>
);
}
--
GitLab