3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-07-27 13:39:04 +02:00
Code Issues Projects Releases Packages Wiki Activity

core/ui: user info dashboard improvements

Browse source
This commit is contained in:
Caleb Doxsey 2024-06-05 20:14:56 +00:00
parent 4eda7479ce
commit 4d76624a9b
3 changed files with 47 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

25
ui/src/components/ClaimRow.tsx
View file

@ -1,5 +1,5 @@
import { TableCell, TableRow } from "@mui/material"; import { TableCell, TableRow } from "@mui/material";
import isArray from "lodash/isArray"; import isPlainObject from "lodash/isPlainObject";
import startCase from "lodash/startCase"; import startCase from "lodash/startCase";
import React, { FC } from "react"; import React, { FC } from "react";
@ -10,20 +10,25 @@ export type ClaimRowProps = {
claimValue: unknown; claimValue: unknown;
}; };
export const ClaimRow: FC<ClaimRowProps> = ({ claimKey, claimValue }) => { export const ClaimRow: FC<ClaimRowProps> = ({ claimKey, claimValue }) => {
if (isPlainObject(claimValue)) {
return (
<>
{Object.entries(claimValue).map(([k, v]) => (
<ClaimRow
key={`${claimKey}/${k}`}
claimKey={`${claimKey} ${k}`}
claimValue={v}
/>
))}
</>
);
}
return ( return (
<TableRow> <TableRow>
<TableCell variant="head">{startCase(claimKey)}</TableCell> <TableCell variant="head">{startCase(claimKey)}</TableCell>
<TableCell align="left"> <TableCell align="left">
{isArray(claimValue) ? (
claimValue?.map((v, i) => (
<React.Fragment key={`${v}`}>
{i > 0 ? <br /> : <></>}
<ClaimValue claimKey={claimKey} claimValue={v} />
</React.Fragment>
))
) : (
<ClaimValue claimKey={claimKey} claimValue={claimValue} /> <ClaimValue claimKey={claimKey} claimValue={claimValue} />
)}
</TableCell> </TableCell>
</TableRow> </TableRow>
); );

14
ui/src/components/ClaimValue.tsx
View file

@ -1,3 +1,4 @@
import isArray from "lodash/isArray";
import React, { FC } from "react"; import React, { FC } from "react";
import IDField from "./IDField"; import IDField from "./IDField";
@ -11,6 +12,19 @@ type ClaimValueProps = {
claimValue: unknown; claimValue: unknown;
}; };
const ClaimValue: FC<ClaimValueProps> = ({ claimKey, claimValue }) => { const ClaimValue: FC<ClaimValueProps> = ({ claimKey, claimValue }) => {
if (isArray(claimValue)) {
return (
<>
{claimValue?.map((v, i) => (
<React.Fragment key={`${v}`}>
{i > 0 ? <br /> : <></>}
<ClaimValue claimKey={claimKey} claimValue={v} />
</React.Fragment>
))}
</>
);
}
if (unixSecondTimestampFields.has(claimKey)) { if (unixSecondTimestampFields.has(claimKey)) {
return <>{new Date((claimValue as number) * 1000).toISOString()}</>; return <>{new Date((claimValue as number) * 1000).toISOString()}</>;
} }

10
ui/src/components/SessionDetails.tsx
View file

@ -25,12 +25,13 @@ export const SessionDetails: FC<SessionDetailsProps> = ({
}) => { }) => {
return ( return (
<> <>
{session?.id ? ( {session?.id || profile?.claims ? (
<Section title="User Details"> <Section title="User Details">
<Stack spacing={3}> <Stack spacing={3}>
<TableContainer> <TableContainer>
<Table size="small"> <Table size="small">
<TableBody> <TableBody>
{session?.id && (
<TableRow> <TableRow>
<TableCell width={"18%"} variant="head"> <TableCell width={"18%"} variant="head">
Session ID Session ID
@ -39,6 +40,7 @@ export const SessionDetails: FC<SessionDetailsProps> = ({
<IDField value={session?.id} /> <IDField value={session?.id} />
</TableCell> </TableCell>
</TableRow> </TableRow>
)}
<TableRow> <TableRow>
<TableCell variant="head">User ID</TableCell> <TableCell variant="head">User ID</TableCell>
<TableCell align="left"> <TableCell align="left">
@ -49,12 +51,12 @@ export const SessionDetails: FC<SessionDetailsProps> = ({
/> />
</TableCell> </TableCell>
</TableRow> </TableRow>
{session?.expiresAt && (
<TableRow> <TableRow>
<TableCell variant="head">Expires At</TableCell> <TableCell variant="head">Expires At</TableCell>
<TableCell align="left"> <TableCell align="left">{session?.expiresAt}</TableCell>
{session?.expiresAt || ""}
</TableCell>
</TableRow> </TableRow>
)}
{Object.entries(session?.claims || {}).map( {Object.entries(session?.claims || {}).map(
([key, values]) => ( ([key, values]) => (
<ClaimRow <ClaimRow