You've already forked authentication-service
mirror of
https://github.com/matrix-org/matrix-authentication-service.git
synced 2025-11-20 12:02:22 +03:00
Standalone pages to view an OAuth client and a browser session
This commit is contained in:
Quentin Gliech
@@ -1,4 +1,5 @@
|
|||||||
import { useLayoutEffect } from "react";
|
import { useLayoutEffect } from "react";
|
||||||
|
import { createMemoryRouter, RouterProvider } from "react-router-dom";
|
||||||
import "../src/index.css";
|
import "../src/index.css";
|
||||||
|
|
||||||
export const parameters = {
|
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];
|
||||||
|
|||||||
@@ -19,6 +19,8 @@ import Layout from "./components/Layout";
|
|||||||
import LoadingSpinner from "./components/LoadingSpinner";
|
import LoadingSpinner from "./components/LoadingSpinner";
|
||||||
|
|
||||||
const Home = lazy(() => import("./pages/Home"));
|
const Home = lazy(() => import("./pages/Home"));
|
||||||
|
const OAuth2Client = lazy(() => import("./pages/OAuth2Client"));
|
||||||
|
const BrowserSession = lazy(() => import("./pages/BrowserSession"));
|
||||||
|
|
||||||
export const router = createHashRouter([
|
export const router = createHashRouter([
|
||||||
{
|
{
|
||||||
@@ -39,6 +41,14 @@ export const router = createHashRouter([
|
|||||||
path: "dumb",
|
path: "dumb",
|
||||||
element: <>Hello from another dumb page.</>,
|
element: <>Hello from another dumb page.</>,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "client/:id",
|
||||||
|
element: <OAuth2Client />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "session/:id",
|
||||||
|
element: <BrowserSession />,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ import { graphql, useFragment } from "react-relay";
|
|||||||
import Block from "./Block";
|
import Block from "./Block";
|
||||||
import { Body, Subtitle } from "./Typography";
|
import { Body, Subtitle } from "./Typography";
|
||||||
import DateTime from "./DateTime";
|
import DateTime from "./DateTime";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
session: BrowserSession_session$key;
|
session: BrowserSession_session$key;
|
||||||
@@ -46,7 +47,12 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
|
|||||||
<Block>
|
<Block>
|
||||||
{isCurrent && <Subtitle>Current session</Subtitle>}
|
{isCurrent && <Subtitle>Current session</Subtitle>}
|
||||||
<Body>
|
<Body>
|
||||||
Started: <DateTime datetime={createdAt} />
|
<Link
|
||||||
|
to={`/session/${data.id}`}
|
||||||
|
className="text-links hover:text-links/75"
|
||||||
|
>
|
||||||
|
Started: <DateTime datetime={createdAt} />
|
||||||
|
</Link>
|
||||||
</Body>
|
</Body>
|
||||||
<Body>
|
<Body>
|
||||||
Last authentication:{" "}
|
Last authentication:{" "}
|
||||||
|
|||||||
@@ -12,9 +12,9 @@
|
|||||||
// See the License for the specific language governing permissions and
|
// See the License for the specific language governing permissions and
|
||||||
// limitations under the License.
|
// 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,
|
to,
|
||||||
children,
|
children,
|
||||||
}) => (
|
}) => (
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import type { OAuth2Session_session$key } from "./__generated__/OAuth2Session_se
|
|||||||
import { graphql, useFragment } from "react-relay";
|
import { graphql, useFragment } from "react-relay";
|
||||||
import { Body, Bold, Code } from "./Typography";
|
import { Body, Bold, Code } from "./Typography";
|
||||||
import Block from "./Block";
|
import Block from "./Block";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
session: OAuth2Session_session$key;
|
session: OAuth2Session_session$key;
|
||||||
@@ -41,7 +42,12 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
|
|||||||
return (
|
return (
|
||||||
<Block>
|
<Block>
|
||||||
<Body>
|
<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>
|
</Body>
|
||||||
{data.client.clientName && (
|
{data.client.clientName && (
|
||||||
<Body>
|
<Body>
|
||||||
|
|||||||
53
frontend/src/pages/BrowserSession.tsx
Normal file
53
frontend/src/pages/BrowserSession.tsx
Normal 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
50
frontend/src/pages/OAuth2Client.tsx
Normal 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
139
frontend/src/pages/__generated__/BrowserSessionQuery.graphql.ts
generated
Normal 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
137
frontend/src/pages/__generated__/OAuth2ClientQuery.graphql.ts
generated
Normal 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;
|
||||||
Reference in New Issue
Block a user