Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
/token endpoint rendering page, wip TokenPageLayout remove Storybook …
…context to AuthContext
- Loading branch information
1 parent
3ea3c27
commit 182c2a6
Showing
8 changed files
with
246 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import React, { useState, useEffect, useContext } from "react"; | ||
import { Token } from "./Token"; | ||
import { fetchMyTokens } from "./token-utils"; | ||
import { FormattedMessage } from "react-intl"; | ||
import styles from "./Token.scss"; | ||
import { RevokeTokenModal } from "./RevokeTokenModal"; | ||
import { RevealTokenModal } from "./RevealTokenModal"; | ||
import { TokenList } from "./TokenList"; | ||
import { NoAccess } from "./NoAccess"; | ||
import { CenteredModalWrapper } from "../layout/CenteredModalWrapper"; | ||
import { AuthContext } from "../auth/AuthContext"; | ||
|
||
export function TokensContainer() { | ||
const [tokens, setTokens] = useState([]); | ||
// const [showRevealTokenModal, setRevealTokenModal] = useState(false); | ||
// const [showRevokeTokenModal, setShowRevokeTokenModal] = useState(false); | ||
// const [selectedRevokeId, setSelectedRevokeId] = useState(); | ||
const auth = useContext(AuthContext); // Re-render when you log in/out. | ||
|
||
useEffect(() => { | ||
// async function updateTokens() { | ||
// setTokens(await fetchMyTokens()); | ||
// } | ||
// updateTokens(); | ||
}, []); | ||
|
||
const onRevealTokenModalClose = async ({ createdNewToken }) => { | ||
// setRevealTokenModal(false); | ||
// if (createdNewToken) { | ||
// setTokens(await fetchMyTokens()); | ||
// } | ||
}; | ||
|
||
const onRevokeTokenClose = ({ removedTokenId }) => { | ||
// if (removedTokenId) setTokens(tokens.filter(token => token.id !== removedTokenId)); | ||
// setShowRevokeTokenModal(false); | ||
// setSelectedRevokeId(""); | ||
}; | ||
|
||
return ( | ||
<div> | ||
{ | ||
// {showRevealTokenModal && ( | ||
// <CenteredModalWrapper> | ||
// <RevealTokenModal onClose={onRevealTokenModalClose} /> | ||
// </CenteredModalWrapper> | ||
// )} | ||
// {showRevokeTokenModal && ( | ||
// <CenteredModalWrapper> | ||
// <RevokeTokenModal selectedId={selectedRevokeId} onClose={onRevokeTokenClose} /> | ||
// </CenteredModalWrapper> | ||
// )} | ||
} | ||
|
||
<button | ||
as="a" | ||
preset="primary" | ||
onClick={() => { | ||
// if (!showRevealTokenModal) setRevealTokenModal(true); | ||
}} | ||
> | ||
<FormattedMessage id="tokens.create-token" defaultMessage="Create Token" /> | ||
</button> | ||
{auth?.isAdmin ? <TokenList /> : <NoAccess />} | ||
|
||
{tokens.map(t => { | ||
return ( | ||
<Token | ||
showRevokeToken={id => { | ||
// if (!showRevokeTokenModal) { | ||
// setSelectedRevokeId(id); | ||
// setShowRevokeTokenModal(true); | ||
// } | ||
}} | ||
key={t.id} | ||
{...t} | ||
/> | ||
); | ||
})} | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { fetchReticulumAuthenticated, getReticulumFetchUrl } from "../../utils/phoenix-utils.js"; | ||
|
||
const ENDPOINT = "/api/v2_alpha/credentials"; | ||
const CREDENTIALS_ENDPOINT_URL = getReticulumFetchUrl(ENDPOINT); | ||
|
||
export function fetchMyTokens() { | ||
return fetchReticulumAuthenticated(ENDPOINT).then(function(tokens) { | ||
console.log(tokens); | ||
return tokens.credentials; | ||
}); | ||
} | ||
|
||
function getHeaders() { | ||
return { | ||
"content-type": "application/json", | ||
authorization: `bearer ${window.APP.store.state.credentials.token}` | ||
}; | ||
} | ||
|
||
export async function createToken({ scopes }) { | ||
console.log(scopes); | ||
const res = await fetch(CREDENTIALS_ENDPOINT_URL, { | ||
headers: getHeaders(), | ||
method: "POST", | ||
body: JSON.stringify({ | ||
scopes, | ||
subjec_type: "account" | ||
}) | ||
}); | ||
if (res.ok) { | ||
return res.json(); | ||
} else { | ||
console.log(res.status); | ||
console.log(res.statusText); | ||
throw new Error(res.statusText); | ||
} | ||
// TODO handle error case | ||
} | ||
|
||
export async function revokeToken({ id }) { | ||
console.log("trying revoke..."); | ||
const res = await fetch(`${CREDENTIALS_ENDPOINT_URL}/${id}?revoke`, { | ||
headers: getHeaders(), | ||
method: "PUT", | ||
body: JSON.stringify({ | ||
id, | ||
revoke: true | ||
}) | ||
}); | ||
if (res.ok) { | ||
return res.json(); | ||
} else { | ||
console.log(res.status); | ||
console.log(res.statusText); | ||
throw new Error(res.statusText); | ||
} | ||
} | ||
|
||
export function fetchAvailableScopes() { | ||
// TODO turn into a fetch | ||
// fetch(`${CREDENTIALS_ENDPOINT}/scopes`, { | ||
// headers: getHeaders() | ||
// }) | ||
return ["read_rooms", "write_rooms"]; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<!-- DO NOT REMOVE/EDIT THIS COMMENT - META_TAGS --> | ||
|
||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
|
||
<link rel="shortcut icon" type="image/png" href="/favicon.ico"> | ||
<title>Tokens</title> | ||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> | ||
<script> | ||
if (navigator.doNotTrack !== "1") { | ||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBeforea,m) | ||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | ||
} | ||
</script> | ||
</head> | ||
|
||
<body> | ||
<div id="ui-root"></div> | ||
</body> | ||
|
||
</html> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from "react"; | ||
import ReactDOM from "react-dom"; | ||
import { WrappedIntlProvider } from "./react-components/wrapped-intl-provider"; | ||
import registerTelemetry from "./telemetry"; | ||
import Store from "./storage/store"; | ||
import "./utils/theme"; | ||
import { AuthContextProvider } from "./react-components/auth/AuthContext"; | ||
import { TokensContainer } from "./react-components/tokens/TokensContainer"; | ||
import "./assets/stylesheets/globals.scss"; | ||
import "./react-components/styles/global.scss"; | ||
import { TokenPageLayout } from "./react-components/tokens/TokenPageLayout"; | ||
import configs from "./utils/configs"; | ||
import { ThemeProvider } from "./react-components/styles/theme"; | ||
|
||
registerTelemetry("/tokens", "Backend API Tokens Page"); | ||
|
||
const store = new Store(); | ||
window.APP = { store }; | ||
|
||
function Root() { | ||
return ( | ||
<WrappedIntlProvider> | ||
<ThemeProvider store={store}> | ||
<AuthContextProvider store={store}> | ||
<TokenPageLayout>{(true || configs.feature("public_api_access")) && <TokensContainer />}</TokenPageLayout> | ||
</AuthContextProvider> | ||
</ThemeProvider> | ||
</WrappedIntlProvider> | ||
); | ||
} | ||
|
||
ReactDOM.render(<Root />, document.getElementById("ui-root")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters