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

WIP my account page

Browse Source
This commit is contained in:
Quentin Gliech
2023-04-27 17:06:52 +02:00
parent 3c933a9d29
commit d7403ca0fd
6 changed files with 111 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/AddEmailForm.tsx
View File

@@ -26,9 +26,6 @@ const ADD_EMAIL_MUTATION = graphql(/* GraphQL */ `
mutation AddEmail($userId: ID!, $email: String!) {
addEmail(input: { userId: $userId, email: $email }) {
status
user {
id
}
email {
id
...UserEmail_email

7
frontend/src/components/BrowserSessionList.tsx
View File

@@ -33,6 +33,13 @@ const QUERY = graphql(/* GraphQL */ `
...BrowserSession_session
}
}
pageInfo {
hasNextPage
hasPreviousPage
startCursor
endCursor
}
}
}
}

54
frontend/src/components/Pagination.tsx Normal file
View File

@@ -0,0 +1,54 @@
// Copyright 2023 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 Button from "./Button";
type Props = {
onNext: (() => void) | null;
onPrev: (() => void) | null;
count?: number;
disabled?: boolean;
};
const Pagination: React.FC<Props> = ({ onNext, onPrev, count, disabled }) => {
return (
<div className="grid items-center grid-cols-3 gap-2">
{onPrev ? (
<Button compact disabled={disabled} ghost onClick={onPrev}>
Previous
</Button>
) : (
<Button compact disabled ghost>
Previous
</Button>
)}
{count !== undefined ? (
<div className="text-center">Total: {count}</div>
) : (
<div></div>
)}
{onNext ? (
<Button compact disabled={disabled} ghost onClick={onNext}>
Next
</Button>
) : (
<Button compact disabled ghost>
Next
</Button>
)}
</div>
);
};
export default Pagination;

53
frontend/src/components/UserEmailList.tsx
View File

@@ -18,9 +18,9 @@ import { atomFamily, atomWithDefault } from "jotai/utils";
import { graphql } from "../gql";
import { useTransition } from "react";
import Button from "./Button";
import UserEmail from "./UserEmail";
import BlockList from "./BlockList";
import Pagination from "./Pagination";
const QUERY = graphql(/* GraphQL */ `
query UserEmailListQuery(
@@ -151,46 +151,17 @@ const UserEmailList: React.FC<{ userId: string }> = ({ userId }) => {
};
return (
<div>
<div className="grid items-center grid-cols-3 gap-2 mb-2">
{prevPagePagination ? (
<Button
compact
disabled={pending}
ghost
onClick={() => paginate(prevPagePagination)}
>
Previous
</Button>
) : (
<Button compact disabled ghost>
Previous
</Button>
)}
<div className="text-center">
Total: {result.data?.user?.emails?.totalCount}
</div>
{nextPagePagination ? (
<Button
compact
disabled={pending}
ghost
onClick={() => paginate(nextPagePagination)}
>
Next
</Button>
) : (
<Button compact disabled ghost>
Next
</Button>
)}
</div>
<BlockList>
{result.data?.user?.emails?.edges?.map((edge) => (
<UserEmail email={edge.node} key={edge.cursor} />
))}
</BlockList>
</div>
<BlockList>
<Pagination
count={result.data?.user?.emails?.totalCount ?? 0}
onPrev={prevPagePagination ? () => paginate(prevPagePagination) : null}
onNext={nextPagePagination ? () => paginate(nextPagePagination) : null}
disabled={pending}
/>
{result.data?.user?.emails?.edges?.map((edge) => (
<UserEmail email={edge.node} key={edge.cursor} />
))}
</BlockList>
);
};

12
frontend/src/gql/gql.ts
View File

@@ -17,11 +17,11 @@ const documents = {
types.CurrentViewerQueryDocument,
"\n query CurrentViewerSessionQuery {\n viewerSession {\n __typename\n ... on BrowserSession {\n id\n }\n\n ... on Anonymous {\n id\n }\n }\n }\n":
types.CurrentViewerSessionQueryDocument,
"\n mutation AddEmail($userId: ID!, $email: String!) {\n addEmail(input: { userId: $userId, email: $email }) {\n status\n user {\n id\n }\n email {\n id\n ...UserEmail_email\n }\n }\n }\n":
"\n mutation AddEmail($userId: ID!, $email: String!) {\n addEmail(input: { userId: $userId, email: $email }) {\n status\n email {\n id\n ...UserEmail_email\n }\n }\n }\n":
types.AddEmailDocument,
"\n fragment BrowserSession_session on BrowserSession {\n id\n createdAt\n lastAuthentication {\n id\n createdAt\n }\n }\n":
types.BrowserSession_SessionFragmentDoc,
"\n query BrowserSessionList($userId: ID!) {\n user(id: $userId) {\n id\n browserSessions(first: 10) {\n edges {\n cursor\n node {\n id\n ...BrowserSession_session\n }\n }\n }\n }\n }\n":
"\n query BrowserSessionList($userId: ID!) {\n user(id: $userId) {\n id\n browserSessions(first: 10) {\n edges {\n cursor\n node {\n id\n ...BrowserSession_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n":
types.BrowserSessionListDocument,
"\n fragment CompatSsoLogin_login on CompatSsoLogin {\n id\n redirectUri\n createdAt\n session {\n id\n createdAt\n deviceId\n finishedAt\n }\n }\n":
types.CompatSsoLogin_LoginFragmentDoc,
@@ -73,8 +73,8 @@ export function graphql(
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(
source: "\n mutation AddEmail($userId: ID!, $email: String!) {\n addEmail(input: { userId: $userId, email: $email }) {\n status\n user {\n id\n }\n email {\n id\n ...UserEmail_email\n }\n }\n }\n"
): (typeof documents)["\n mutation AddEmail($userId: ID!, $email: String!) {\n addEmail(input: { userId: $userId, email: $email }) {\n status\n user {\n id\n }\n email {\n id\n ...UserEmail_email\n }\n }\n }\n"];
source: "\n mutation AddEmail($userId: ID!, $email: String!) {\n addEmail(input: { userId: $userId, email: $email }) {\n status\n email {\n id\n ...UserEmail_email\n }\n }\n }\n"
): (typeof documents)["\n mutation AddEmail($userId: ID!, $email: String!) {\n addEmail(input: { userId: $userId, email: $email }) {\n status\n email {\n id\n ...UserEmail_email\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@@ -85,8 +85,8 @@ export function graphql(
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(
source: "\n query BrowserSessionList($userId: ID!) {\n user(id: $userId) {\n id\n browserSessions(first: 10) {\n edges {\n cursor\n node {\n id\n ...BrowserSession_session\n }\n }\n }\n }\n }\n"
): (typeof documents)["\n query BrowserSessionList($userId: ID!) {\n user(id: $userId) {\n id\n browserSessions(first: 10) {\n edges {\n cursor\n node {\n id\n ...BrowserSession_session\n }\n }\n }\n }\n }\n"];
source: "\n query BrowserSessionList($userId: ID!) {\n user(id: $userId) {\n id\n browserSessions(first: 10) {\n edges {\n cursor\n node {\n id\n ...BrowserSession_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"
): (typeof documents)["\n query BrowserSessionList($userId: ID!) {\n user(id: $userId) {\n id\n browserSessions(first: 10) {\n edges {\n cursor\n node {\n id\n ...BrowserSession_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

43
frontend/src/gql/graphql.ts
View File

@@ -607,7 +607,6 @@ export type AddEmailMutation = {
addEmail: {
__typename?: "AddEmailPayload";
status: AddEmailStatus;
user: { __typename?: "User"; id: string };
email: { __typename?: "UserEmail"; id: string } & {
" $fragmentRefs"?: { UserEmail_EmailFragment: UserEmail_EmailFragment };
};
@@ -645,6 +644,13 @@ export type BrowserSessionListQuery = {
};
};
}>;
pageInfo: {
__typename?: "PageInfo";
hasNextPage: boolean;
hasPreviousPage: boolean;
startCursor?: string | null;
endCursor?: string | null;
};
};
} | null;
};
@@ -1112,16 +1118,6 @@ export const AddEmailDocument = {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "status" } },
{
kind: "Field",
name: { kind: "Name", value: "user" },
selectionSet: {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "id" } },
],
},
},
{
kind: "Field",
name: { kind: "Name", value: "email" },
@@ -1247,6 +1243,31 @@ export const BrowserSessionListDocument = {
],
},
},
{
kind: "Field",
name: { kind: "Name", value: "pageInfo" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "hasNextPage" },
},
{
kind: "Field",
name: { kind: "Name", value: "hasPreviousPage" },
},
{
kind: "Field",
name: { kind: "Name", value: "startCursor" },
},
{
kind: "Field",
name: { kind: "Name", value: "endCursor" },
},
],
},
},
],
},
},