mirror of
https://github.com/element-hq/matrix-authentication-service.git
synced 2026-06-04 06:01:44 +00:00
Kerry
da8a489748
* make profile the default route * src/pages/Home.tsx -> src/pages/SessionsOverview.tsx * UserHome -> UserSessionsOverview * update snapshots, fix session overview button alignment
110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
// 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 { Body, H3, H6 } from "@vector-im/compound-web";
|
|
|
|
import { Link } from "../../Router";
|
|
import { FragmentType, graphql, useFragment } from "../../gql";
|
|
import Block from "../Block/Block";
|
|
import BlockList from "../BlockList/BlockList";
|
|
|
|
import styles from "./UserSessionsOverview.module.css";
|
|
|
|
export const FRAGMENT = graphql(/* GraphQL */ `
|
|
fragment UserSessionsOverview_user on User {
|
|
id
|
|
|
|
primaryEmail {
|
|
id
|
|
...UserEmail_email
|
|
}
|
|
|
|
confirmedEmails: emails(first: 0, state: CONFIRMED) {
|
|
totalCount
|
|
}
|
|
|
|
browserSessions(first: 0, state: ACTIVE) {
|
|
totalCount
|
|
}
|
|
|
|
oauth2Sessions(first: 0, state: ACTIVE) {
|
|
totalCount
|
|
}
|
|
|
|
compatSessions(first: 0, state: ACTIVE) {
|
|
totalCount
|
|
}
|
|
}
|
|
`);
|
|
|
|
const UserSessionsOverview: React.FC<{
|
|
user: FragmentType<typeof FRAGMENT>;
|
|
}> = ({ user }) => {
|
|
const data = useFragment(FRAGMENT, user);
|
|
|
|
// allow this until we get i18n
|
|
const pluraliseSession = (count: number): string =>
|
|
count === 1 ? "session" : "sessions";
|
|
|
|
// user friendly description of sessions is:
|
|
// browser -> browser
|
|
// oauth2 sessions -> New apps
|
|
// compatibility sessions -> Regular apps
|
|
|
|
return (
|
|
<BlockList>
|
|
{/* This is a short term solution, so I won't bother extracting these blocks into components */}
|
|
<H3>Where you're signed in</H3>
|
|
<Block className={styles.sessionListBlock}>
|
|
<div className={styles.sessionListBlockInfo}>
|
|
<H6>Browser</H6>
|
|
<Body>
|
|
{data.browserSessions.totalCount} active{" "}
|
|
{pluraliseSession(data.browserSessions.totalCount)}
|
|
</Body>
|
|
</div>
|
|
<Link kind="button" route={{ type: "browser-session-list" }}>
|
|
View all
|
|
</Link>
|
|
</Block>
|
|
<Block className={styles.sessionListBlock}>
|
|
<div className={styles.sessionListBlockInfo}>
|
|
<H6>New apps</H6>
|
|
<Body>
|
|
{data.oauth2Sessions.totalCount} active{" "}
|
|
{pluraliseSession(data.oauth2Sessions.totalCount)}
|
|
</Body>
|
|
</div>
|
|
<Link kind="button" route={{ type: "oauth2-session-list" }}>
|
|
View all
|
|
</Link>
|
|
</Block>
|
|
<Block className={styles.sessionListBlock}>
|
|
<div className={styles.sessionListBlockInfo}>
|
|
<H6>Regular apps</H6>
|
|
<Body>
|
|
{data.compatSessions.totalCount} active{" "}
|
|
{pluraliseSession(data.compatSessions.totalCount)}
|
|
</Body>
|
|
</div>
|
|
<Link kind="button" route={{ type: "compat-session-list" }}>
|
|
View all
|
|
</Link>
|
|
</Block>
|
|
</BlockList>
|
|
);
|
|
};
|
|
|
|
export default UserSessionsOverview;
|