diff --git a/frontend/src/components/Session/Session.stories.tsx b/frontend/src/components/Session/Session.stories.tsx index be7b1e31..402d79c4 100644 --- a/frontend/src/components/Session/Session.stories.tsx +++ b/frontend/src/components/Session/Session.stories.tsx @@ -51,6 +51,7 @@ export const BasicSession: Story = { args: { ...defaultProps, name: "KlTqK9CRt3", + ipAddress: "2001:8003:c4614:f501:3091:888a:49c7", clientName: "Element", }, }; diff --git a/frontend/src/components/Session/Session.test.tsx b/frontend/src/components/Session/Session.test.tsx index 8652b55d..dbfba4db 100644 --- a/frontend/src/components/Session/Session.test.tsx +++ b/frontend/src/components/Session/Session.test.tsx @@ -56,6 +56,20 @@ describe("", () => { {...defaultProps} finishedAt={finishedAt} clientName={clientName} + clientLogoUri="https://client.org/logo.png" + />, + ); + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders ip address", () => { + const clientName = "Element"; + const component = create( + , ); expect(component.toJSON()).toMatchSnapshot(); diff --git a/frontend/src/components/Session/Session.tsx b/frontend/src/components/Session/Session.tsx index 71aaec21..3d7d04a1 100644 --- a/frontend/src/components/Session/Session.tsx +++ b/frontend/src/components/Session/Session.tsx @@ -33,6 +33,7 @@ export type SessionProps = { clientName?: string; clientLogoUri?: string; isCurrent?: boolean; + ipAddress?: string; }; const Session: React.FC> = ({ id, @@ -41,6 +42,7 @@ const Session: React.FC> = ({ finishedAt, clientName, clientLogoUri, + ipAddress, isCurrent, children, }) => { @@ -58,6 +60,7 @@ const Session: React.FC> = ({ Finished )} + {!!ipAddress && {ipAddress}} {!!clientName && ( > renders an active session 1`] = ` `; +exports[` > renders ip address 1`] = ` +
+
+ session-id +
+

+ Signed in + +

+

+ Finished + +

+

+ 127.0.0.1 +

+

+ + + Element + +

+
+`; + exports[` > uses client name when truthy 1`] = `
> uses client name when truthy 1`] = `

+ Element = ({ session }) => { ? [{ label: "Finished", value: }] : []; + const ipAddress = data.ipAddress + ? [{ label: "IP Address", value: {data.ipAddress} }] + : []; + const lastAuthentication = data.lastAuthentication ? [ { @@ -64,6 +68,7 @@ const BrowserSessionDetail: React.FC = ({ session }) => { { label: "User Name", value: {data.user.username} }, { label: "Signed in", value: }, ...finishedAt, + ...ipAddress, ...lastAuthentication, ]; diff --git a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx index d20fec7f..d8b1f59c 100644 --- a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx +++ b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx @@ -43,11 +43,17 @@ const CompatSessionDetail: React.FC = ({ session }) => { const finishedAt = data.finishedAt ? [{ label: "Finished", value: }] : []; + + const ipAddress = data.ipAddress + ? [{ label: "IP Address", value: {data.ipAddress} }] + : []; + const sessionDetails = [ { label: "ID", value: {data.id} }, { label: "Device ID", value: {data.deviceId} }, { label: "Signed in", value: }, ...finishedAt, + ...ipAddress, ]; const clientDetails: { label: string; value: string | JSX.Element }[] = []; diff --git a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx index 3bd98fa7..0c7a301c 100644 --- a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx +++ b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx @@ -45,19 +45,25 @@ const OAuth2SessionDetail: React.FC = ({ session }) => { const finishedAt = data.finishedAt ? [{ label: "Finished", value: }] : []; + + const ipAddress = data.ipAddress + ? [{ label: "IP Address", value: {data.ipAddress} }] + : []; + const sessionDetails = [ { label: "ID", value: {data.id} }, { label: "Device ID", value: {deviceId} }, { label: "Signed in", value: }, ...finishedAt, + ...ipAddress, { label: "Scopes", value: ( - <> +

{scopes.map((scope) => ( {scope} ))} - +
), }, ]; diff --git a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap index 9ac11204..b272b68d 100644 --- a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap +++ b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap @@ -105,15 +105,17 @@ exports[` > renders session details 1`] = `

- - openid - - - urn:matrix:org.matrix.msc2967.client:api:* - - - urn:matrix:org.matrix.msc2967.client:device:abcd1234 - +

+ + openid + + + urn:matrix:org.matrix.msc2967.client:api:* + + + urn:matrix:org.matrix.msc2967.client:device:abcd1234 + +

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index c4389c91..7e589758 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -122,7 +122,7 @@ export default defineConfig((env) => ({ proxy: { // Routes mostly extracted from crates/router/src/endpoints.rs "^/(|graphql.*|assets.*|\\.well-known.*|oauth2.*|login.*|logout.*|register.*|reauth.*|add-email.*|verify-email.*|change-password.*|consent.*|_matrix.*|complete-compat-sso.*)$": - "http://127.0.0.1:8080", + "https://auth-oidc.lab.element.dev", }, },