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

Basic navigation

Browse Source
This commit is contained in:
Quentin Gliech
2022-11-10 16:03:29 +01:00
parent 47c9b54c06
commit 21db375b94
12 changed files with 288 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -24,7 +24,7 @@ limitations under the License.
<title>matrix-authentication-service</title>
</head>
<body class="bg-white text-black-900 dark:bg-black-800 dark:text-white flex flex-col min-h-screen">
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

61
frontend/package-lock.json generated
View File

@@ -11,6 +11,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-relay": "^14.1.0",
"react-router-dom": "^6.4.3",
"relay-runtime": "^14.1.0"
},
"devDependencies": {
@@ -2648,6 +2649,14 @@
"node": ">=10.12.0"
}
},
"node_modules/@remix-run/router": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
"integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
"engines": {
"node": ">=14"
}
},
"node_modules/@repeaterjs/repeater": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz",
@@ -6983,6 +6992,36 @@
"react": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-router": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
"integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
"dependencies": {
"@remix-run/router": "1.0.3"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
"integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
"dependencies": {
"@remix-run/router": "1.0.3",
"react-router": "6.4.3"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -9927,6 +9966,11 @@
"webcrypto-core": "^1.7.4"
}
},
"@remix-run/router": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
"integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
},
"@repeaterjs/repeater": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz",
@@ -12972,6 +13016,23 @@
"relay-runtime": "14.1.0"
}
},
"react-router": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
"integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
"requires": {
"@remix-run/router": "1.0.3"
}
},
"react-router-dom": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
"integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
"requires": {
"@remix-run/router": "1.0.3",
"react-router": "6.4.3"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

1
frontend/package.json
View File

@@ -15,6 +15,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-relay": "^14.1.0",
"react-router-dom": "^6.4.3",
"relay-runtime": "^14.1.0"
},
"devDependencies": {

48
frontend/src/Router.tsx Normal file
View File

@@ -0,0 +1,48 @@
// 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 { lazy, Suspense } from "react";
import { createHashRouter, Outlet, RouterProvider } from "react-router-dom";
import Layout from "./components/Layout";
import LoadingSpinner from "./components/LoadingSpinner";
const Home = lazy(() => import("./pages/Home"));
export const router = createHashRouter([
{
path: "/",
element: (
<Layout>
<Suspense fallback={<LoadingSpinner />}>
<Outlet />
</Suspense>
</Layout>
),
children: [
{
index: true,
element: <Home />,
},
{
path: "dumb",
element: <>Hello from another dumb page.</>,
},
],
},
]);
const Router = () => <RouterProvider router={router} />;
export default Router;

31
frontend/src/components/Layout.tsx Normal file
View File

@@ -0,0 +1,31 @@
// 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 NavBar from "./NavBar";
import NavItem from "./NavItem";
const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
return (
<div className="bg-grey-25 text-black-900 dark:bg-black-800 dark:text-white flex flex-col min-h-screen">
<NavBar className="mx-auto px-3 py-4 container">
<NavItem to="/">Home</NavItem>
<NavItem to="/dumb">Dumb</NavItem>
</NavBar>
<main className="mx-auto p-4 container">{children}</main>
</div>
);
};
export default Layout;

23
frontend/src/components/LoadingScreen.tsx Normal file
View File

@@ -0,0 +1,23 @@
// 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 LoadingSpinner from "./LoadingSpinner";
const LoadingScreen: React.FC = () => (
<main className="bg-white dark:bg-black-800 min-h-screen flex justify-center items-center">
<LoadingSpinner />
</main>
);
export default LoadingScreen;

34
frontend/src/components/LoadingSpinner.tsx Normal file
View File

@@ -0,0 +1,34 @@
// 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 React from "react";
const LoadingSpinner: React.FC = () => (
<div role="status">
<svg
className="inline mr-2 w-16 h-16 animate-spin fill-accent"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span className="sr-only">Loading...</span>
</div>
);
export default LoadingSpinner;

24
frontend/src/components/NavBar.tsx Normal file
View File

@@ -0,0 +1,24 @@
// 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.
const NavBar: React.FC<{
className: string;
children: React.ReactNode;
}> = ({ className, children }) => (
<nav className={className}>
<ul className="flex bg-grey-50 dark:bg-black-950 rounded-lg">{children}</ul>
</nav>
);
export default NavBar;

36
frontend/src/components/NavItem.tsx Normal file
View File

@@ -0,0 +1,36 @@
// 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 { NavLink } from "react-router-dom";
const NavItem: React.FC<{ to: string; children: React.ReactNode }> = ({
to,
children,
}) => (
<li className="m-1 mr-0">
<NavLink
to={to}
className={({ isActive }) =>
(isActive
? "bg-accent text-white"
: "hover:bg-grey-100 dark:hover:bg-grey-450 opacity-80 hover:opacity-100") +
" p-2 rounded block uppercase font-medium"
}
>
{children}
</NavLink>
</li>
);
export default NavItem;

10
frontend/src/main.tsx
View File

@@ -12,18 +12,20 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import React from "react";
import React, { lazy } from "react";
import ReactDOM from "react-dom/client";
import { RelayEnvironmentProvider } from "react-relay";
import { App } from "./App";
import LoadingScreen from "./components/LoadingScreen";
import RelayEnvironment from "./RelayEnvironment";
const Router = lazy(() => import("./Router"));
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<RelayEnvironmentProvider environment={RelayEnvironment}>
<React.Suspense fallback={"Loading..."}>
<App />
<React.Suspense fallback={<LoadingScreen />}>
<Router />
</React.Suspense>
</RelayEnvironmentProvider>
</React.StrictMode>

17
frontend/src/App.tsx → frontend/src/pages/Home.tsx
View File

@@ -12,15 +12,14 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import React from "react";
import { graphql, useLazyLoadQuery } from "react-relay";
import type { AppQuery } from "./__generated__/AppQuery.graphql";
import type { HomeQuery } from "./__generated__/HomeQuery.graphql";
export const App: React.FC = () => {
const data = useLazyLoadQuery<AppQuery>(
const Home: React.FC = () => {
const data = useLazyLoadQuery<HomeQuery>(
graphql`
query AppQuery {
query HomeQuery {
currentUser {
id
username
@@ -32,9 +31,15 @@ export const App: React.FC = () => {
if (data.currentUser) {
return (
<h1 className="font-bold text-2xl">Hello {data.currentUser.username}!</h1>
<>
<h1 className="font-bold text-2xl">
Hello {data.currentUser.username}!
</h1>
</>
);
} else {
return <div className="font-bold text-alert">You're not logged in.</div>;
}
};
export default Home;

24
frontend/src/__generated__/AppQuery.graphql.ts → frontend/src/pages/__generated__/HomeQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<1d2a0ace12c4e6d2a684909c137cbc73>>
* @generated SignedSource<<c45ed89e7a5d2dbfd7df09b342251f17>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,16 +9,16 @@
// @ts-nocheck
import { ConcreteRequest, Query } from 'relay-runtime';
export type AppQuery$variables = {};
export type AppQuery$data = {
export type HomeQuery$variables = {};
export type HomeQuery$data = {
readonly currentUser: {
readonly id: string;
readonly username: string;
} | null;
};
export type AppQuery = {
response: AppQuery$data;
variables: AppQuery$variables;
export type HomeQuery = {
response: HomeQuery$data;
variables: HomeQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -54,7 +54,7 @@ return {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "AppQuery",
"name": "HomeQuery",
"selections": (v0/*: any*/),
"type": "RootQuery",
"abstractKey": null
@@ -63,20 +63,20 @@ return {
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "AppQuery",
"name": "HomeQuery",
"selections": (v0/*: any*/)
},
"params": {
"cacheID": "34c6b7534570705caab3d20018e06721",
"cacheID": "ed11a3960d77e44416be48bbade86350",
"id": null,
"metadata": {},
"name": "AppQuery",
"name": "HomeQuery",
"operationKind": "query",
"text": "query AppQuery {\n currentUser {\n id\n username\n }\n}\n"
"text": "query HomeQuery {\n currentUser {\n id\n username\n }\n}\n"
}
};
})();
(node as any).hash = "25e4287bcbdf0f3f35028d4be484dda9";
(node as any).hash = "9746f86ec5c6368af275e5eb2789bff7";
export default node;