matrix/authentication-service
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-authentication-service.git synced 2025-11-20 12:02:22 +03:00
Code Activity

Standalone pages to view an OAuth client and a browser session

Browse Source
This commit is contained in:
Quentin Gliech
2022-11-16 17:47:25 +01:00
parent 78778648ca
commit 6021aa691c
9 changed files with 418 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/.storybook/preview.tsx
View File

@@ -1,4 +1,5 @@
import { useLayoutEffect } from "react";
import { createMemoryRouter, RouterProvider } from "react-router-dom";
import "../src/index.css";
export const parameters = {
@@ -57,4 +58,15 @@ const withThemeProvider = (Story, context) => {
);
};
export const decorators = [withThemeProvider];
const withRouter = (Story, context) => {
const router = createMemoryRouter([
{
path: "/*",
element: <Story />,
},
]);
return <RouterProvider router={router} />;
};
export const decorators = [withThemeProvider, withRouter];

10
frontend/src/Router.tsx
View File

@@ -19,6 +19,8 @@ import Layout from "./components/Layout";
import LoadingSpinner from "./components/LoadingSpinner";
const Home = lazy(() => import("./pages/Home"));
const OAuth2Client = lazy(() => import("./pages/OAuth2Client"));
const BrowserSession = lazy(() => import("./pages/BrowserSession"));
export const router = createHashRouter([
{
@@ -39,6 +41,14 @@ export const router = createHashRouter([
path: "dumb",
element: <>Hello from another dumb page.</>,
},
{
path: "client/:id",
element: <OAuth2Client />,
},
{
path: "session/:id",
element: <BrowserSession />,
},
],
},
]);

8
frontend/src/components/BrowserSession.tsx
View File

@@ -18,6 +18,7 @@ import { graphql, useFragment } from "react-relay";
import Block from "./Block";
import { Body, Subtitle } from "./Typography";
import DateTime from "./DateTime";
import { Link } from "react-router-dom";
type Props = {
session: BrowserSession_session$key;
@@ -46,7 +47,12 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
<Block>
{isCurrent && <Subtitle>Current session</Subtitle>}
<Body>
Started: <DateTime datetime={createdAt} />
<Link
to={`/session/${data.id}`}
className="text-links hover:text-links/75"
>
Started: <DateTime datetime={createdAt} />
</Link>
</Body>
<Body>
Last authentication:{" "}

4
frontend/src/components/NavItem.tsx
View File

@@ -12,9 +12,9 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { NavLink } from "react-router-dom";
import { NavLink, To } from "react-router-dom";
const NavItem: React.FC<{ to: string; children: React.ReactNode }> = ({
const NavItem: React.FC<{ to: To; children: React.ReactNode }> = ({
to,
children,
}) => (

8
frontend/src/components/OAuth2Session.tsx
View File

@@ -16,6 +16,7 @@ import type { OAuth2Session_session$key } from "./__generated__/OAuth2Session_se
import { graphql, useFragment } from "react-relay";
import { Body, Bold, Code } from "./Typography";
import Block from "./Block";
import { Link } from "react-router-dom";
type Props = {
session: OAuth2Session_session$key;
@@ -41,7 +42,12 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
return (
<Block>
<Body>
Client ID: <Code>{data.client.clientId}</Code>
<Link
to={`/client/${data.client.id}`}
className="text-links hover:text-links/75"
>
Client ID: <Code>{data.client.clientId}</Code>
</Link>
</Body>
{data.client.clientName && (
<Body>

53
frontend/src/pages/BrowserSession.tsx Normal file
View File

@@ -0,0 +1,53 @@
// Copyright 2022 The Matrix.org Foundation C.I.C.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { graphql, useLazyLoadQuery } from "react-relay";
import { useParams } from "react-router-dom";
import type { BrowserSessionQuery } from "./__generated__/BrowserSessionQuery.graphql";
const BrowserSession: React.FC = () => {
const { id } = useParams();
if (!id) {
throw new Error("Missing parameter");
}
const data = useLazyLoadQuery<BrowserSessionQuery>(
graphql`
query BrowserSessionQuery($id: ID!) {
browserSession(id: $id) {
id
createdAt
lastAuthentication {
id
createdAt
}
user {
id
username
}
}
}
`,
{ id }
);
return (
<pre>
<code>{JSON.stringify(data.browserSession, null, 2)}</code>
</pre>
);
};
export default BrowserSession;

50
frontend/src/pages/OAuth2Client.tsx Normal file
View File

@@ -0,0 +1,50 @@
// Copyright 2022 The Matrix.org Foundation C.I.C.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { graphql, useLazyLoadQuery } from "react-relay";
import { useParams } from "react-router-dom";
import type { OAuth2ClientQuery } from "./__generated__/OAuth2ClientQuery.graphql";
const OAuth2Client: React.FC = () => {
const { id } = useParams();
if (!id) {
throw new Error("Missing parameter");
}
const data = useLazyLoadQuery<OAuth2ClientQuery>(
graphql`
query OAuth2ClientQuery($id: ID!) {
oauth2Client(id: $id) {
id
clientId
clientName
clientUri
tosUri
policyUri
redirectUris
}
}
`,
{ id }
);
return (
<pre>
<code>{JSON.stringify(data.oauth2Client, null, 2)}</code>
</pre>
);
};
export default OAuth2Client;

139
frontend/src/pages/__generated__/BrowserSessionQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,139 @@
/**
* @generated SignedSource<<f53c0d7dd710ddd990f1dc215274fc5f>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest, Query } from 'relay-runtime';
export type BrowserSessionQuery$variables = {
id: string;
};
export type BrowserSessionQuery$data = {
readonly browserSession: {
readonly createdAt: any;
readonly id: string;
readonly lastAuthentication: {
readonly createdAt: any;
readonly id: string;
} | null;
readonly user: {
readonly id: string;
readonly username: string;
};
} | null;
};
export type BrowserSessionQuery = {
response: BrowserSessionQuery$data;
variables: BrowserSessionQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "id"
}
],
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
v3 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "id",
"variableName": "id"
}
],
"concreteType": "BrowserSession",
"kind": "LinkedField",
"name": "browserSession",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Authentication",
"kind": "LinkedField",
"name": "lastAuthentication",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "User",
"kind": "LinkedField",
"name": "user",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "username",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "BrowserSessionQuery",
"selections": (v3/*: any*/),
"type": "RootQuery",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "BrowserSessionQuery",
"selections": (v3/*: any*/)
},
"params": {
"cacheID": "5374afccfa4da28a64cdce6585ac1907",
"id": null,
"metadata": {},
"name": "BrowserSessionQuery",
"operationKind": "query",
"text": "query BrowserSessionQuery(\n $id: ID!\n) {\n browserSession(id: $id) {\n id\n createdAt\n lastAuthentication {\n id\n createdAt\n }\n user {\n id\n username\n }\n }\n}\n"
}
};
})();
(node as any).hash = "c73293a99a0214448861bed340594304";
export default node;

137
frontend/src/pages/__generated__/OAuth2ClientQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,137 @@
/**
* @generated SignedSource<<fdd196c5ae97e597805f98077fefcd7d>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest, Query } from 'relay-runtime';
export type OAuth2ClientQuery$variables = {
id: string;
};
export type OAuth2ClientQuery$data = {
readonly oauth2Client: {
readonly clientId: string;
readonly clientName: string | null;
readonly clientUri: any | null;
readonly id: string;
readonly policyUri: any | null;
readonly redirectUris: ReadonlyArray<any>;
readonly tosUri: any | null;
} | null;
};
export type OAuth2ClientQuery = {
response: OAuth2ClientQuery$data;
variables: OAuth2ClientQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "id"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "id",
"variableName": "id"
}
],
"concreteType": "Oauth2Client",
"kind": "LinkedField",
"name": "oauth2Client",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "clientId",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "clientName",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "clientUri",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "tosUri",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "policyUri",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "redirectUris",
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "OAuth2ClientQuery",
"selections": (v1/*: any*/),
"type": "RootQuery",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "OAuth2ClientQuery",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "49e24d5c368a8c2c148643b971fe179c",
"id": null,
"metadata": {},
"name": "OAuth2ClientQuery",
"operationKind": "query",
"text": "query OAuth2ClientQuery(\n $id: ID!\n) {\n oauth2Client(id: $id) {\n id\n clientId\n clientName\n clientUri\n tosUri\n policyUri\n redirectUris\n }\n}\n"
}
};
})();
(node as any).hash = "31b4804eb435b5822480ff57775d13a4";
export default node;