Display IP address on sessions

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",
   },
 };

frontend/src/components/Session/Session.test.tsx

@@ -56,6 +56,20 @@ describe("<Session />", () => {
         {...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(
+      <Session
+        {...defaultProps}
+        finishedAt={finishedAt}
+        clientName={clientName}
+        ipAddress="127.0.0.1"
       />,
     );
     expect(component.toJSON()).toMatchSnapshot();

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<React.PropsWithChildren<SessionProps>> = ({
   id,
@@ -41,6 +42,7 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
   finishedAt,
   clientName,
   clientLogoUri,
+  ipAddress,
   isCurrent,
   children,
 }) => {
@@ -58,6 +60,7 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
           Finished <DateTime datetime={finishedAt} />
         </SessionMetadata>
       )}
+      {!!ipAddress && <SessionMetadata>{ipAddress}</SessionMetadata>}
       {!!clientName && (
         <SessionMetadata>
           <ClientAvatar

frontend/src/components/Session/__snapshots__/Session.test.tsx.snap

@@ -57,6 +57,55 @@ exports[`<Session /> > renders an active session 1`] = `
 </div>
 `;
 
+exports[`<Session /> > renders ip address 1`] = `
+<div
+  className="_block_17898c"
+>
+  <h6
+    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+    title="session-id"
+  >
+    session-id
+  </h6>
+  <p
+    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+  >
+    Signed in 
+    <time
+      dateTime="2023-06-29T03:35:17Z"
+    >
+      Thu, 29 Jun 2023, 03:35
+    </time>
+  </p>
+  <p
+    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    data-finished={true}
+  >
+    Finished 
+    <time
+      dateTime="2023-06-29T03:35:19Z"
+    >
+      Thu, 29 Jun 2023, 03:35
+    </time>
+  </p>
+  <p
+    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+  >
+    127.0.0.1
+  </p>
+  <p
+    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+  >
+     
+    <span
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    >
+      Element
+    </span>
+  </p>
+</div>
+`;
+
 exports[`<Session /> > uses client name when truthy 1`] = `
 <div
   className="_block_17898c"
@@ -91,6 +140,17 @@ exports[`<Session /> > uses client name when truthy 1`] = `
   <p
     className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
   >
+    <img
+      alt="Element"
+      className="_avatar_39aee3"
+      referrerPolicy="no-referrer"
+      src="https://client.org/logo.png"
+      style={
+        {
+          "--mas-avatar-size": "var(--cpd-space-4x)",
+        }
+      }
+    />
      
     <span
       className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"

frontend/src/components/SessionDetail/BrowserSessionDetail.tsx

@@ -49,6 +49,10 @@ const BrowserSessionDetail: React.FC<Props> = ({ session }) => {
     ? [{ label: "Finished", value: <DateTime datetime={data.finishedAt} /> }]
     : [];
 
+  const ipAddress = data.ipAddress
+    ? [{ label: "IP Address", value: <code>{data.ipAddress}</code> }]
+    : [];
+
   const lastAuthentication = data.lastAuthentication
     ? [
         {
@@ -64,6 +68,7 @@ const BrowserSessionDetail: React.FC<Props> = ({ session }) => {
     { label: "User Name", value: <code>{data.user.username}</code> },
     { label: "Signed in", value: <DateTime datetime={data.createdAt} /> },
     ...finishedAt,
+    ...ipAddress,
     ...lastAuthentication,
   ];
 

frontend/src/components/SessionDetail/CompatSessionDetail.tsx

@@ -43,11 +43,17 @@ const CompatSessionDetail: React.FC<Props> = ({ session }) => {
   const finishedAt = data.finishedAt
     ? [{ label: "Finished", value: <DateTime datetime={data.finishedAt} /> }]
     : [];
+
+  const ipAddress = data.ipAddress
+    ? [{ label: "IP Address", value: <code>{data.ipAddress}</code> }]
+    : [];
+
   const sessionDetails = [
     { label: "ID", value: <code>{data.id}</code> },
     { label: "Device ID", value: <code>{data.deviceId}</code> },
     { label: "Signed in", value: <DateTime datetime={data.createdAt} /> },
     ...finishedAt,
+    ...ipAddress,
   ];
 
   const clientDetails: { label: string; value: string | JSX.Element }[] = [];

frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx

@@ -45,19 +45,25 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
   const finishedAt = data.finishedAt
     ? [{ label: "Finished", value: <DateTime datetime={data.createdAt} /> }]
     : [];
+
+  const ipAddress = data.ipAddress
+    ? [{ label: "IP Address", value: <code>{data.ipAddress}</code> }]
+    : [];
+
   const sessionDetails = [
     { label: "ID", value: <code>{data.id}</code> },
     { label: "Device ID", value: <code>{deviceId}</code> },
     { label: "Signed in", value: <DateTime datetime={data.createdAt} /> },
     ...finishedAt,
+    ...ipAddress,
     {
       label: "Scopes",
       value: (
-        <>
+        <div>
           {scopes.map((scope) => (
             <code key={scope}>{scope}</code>
           ))}
-        </>
+        </div>
       ),
     },
   ];

frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap

@@ -105,6 +105,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
           <p
             class="_font-body-sm-regular_1jx6b_40 _detailValue_040867"
           >
+            <div>
               <code>
                 openid
               </code>
@@ -114,6 +115,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
               <code>
                 urn:matrix:org.matrix.msc2967.client:device:abcd1234
               </code>
+            </div>
           </p>
         </li>
       </ul>

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",
     },
   },