matrix/authentication-service
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-authentication-service.git synced 2025-11-19 00:26:27 +03:00
Code Activity

Browser session UI (#1616)

Browse Source 
* tweak blocklist spacing

* use same session design for browser sessions

* remove change to session

* remove unused class
This commit is contained in:
Kerry
2023-08-29 12:07:48 +12:00
committed by GitHub
parent ab8ae09b7b
commit fd22d6e26e
6 changed files with 49 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Block/Block.module.css
View File

@@ -15,7 +15,7 @@
.block {
color: var(--cpd-color-text-primary);
padding: var(--cpd-space-5x) 0;
padding-bottom: var(--cpd-space-5x);
border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
&:last-child {

1
frontend/src/components/BlockList/BlockList.module.css
View File

@@ -17,4 +17,5 @@
display: flex;
flex-direction: column;
align-content: flex-start;
gap: var(--cpd-space-5x);
}

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

@@ -12,8 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import IconWebBrowser from "@vector-im/compound-design-tokens/icons/web-browser.svg";
import { Body, Button } from "@vector-im/compound-web";
import { Button } from "@vector-im/compound-web";
import { atom, useSetAtom } from "jotai";
import { atomFamily } from "jotai/utils";
import { atomWithMutation } from "jotai-urql";
@@ -22,8 +21,7 @@ import { useTransition } from "react";
import { currentBrowserSessionIdAtom, currentUserIdAtom } from "../atoms";
import { FragmentType, graphql, useFragment } from "../gql";
import styles from "./BrowserSession.module.css";
import DateTime from "./DateTime";
import Session from "./Session/Session";
const FRAGMENT = graphql(/* GraphQL */ `
fragment BrowserSession_session on BrowserSession {
@@ -91,34 +89,19 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
});
};
return (
<div className="flex items-center">
<IconWebBrowser className={styles.sessionIcon} />
<div className="flex-1">
<Body size="md" weight="medium">
{isCurrent ? (
<>
<strong>Current</strong> browser session
</>
) : (
<>Browser Session</>
)}
</Body>
<Body size="sm" className="text-secondary">
Signed in <DateTime datetime={createdAt} />
</Body>
</div>
const sessionName = isCurrent ? "Current browser session" : "Browser session";
return (
<Session id={data.id} name={sessionName} createdAt={createdAt}>
<Button
kind="destructive"
size="sm"
className="mt-2"
onClick={onSessionEnd}
disabled={pending}
>
Sign out
</Button>
</div>
</Session>
);
};

7
frontend/src/components/UserHome/UserHome.module.css
View File

@@ -13,13 +13,6 @@
* limitations under the License.
*/
.session-list {
margin-top: var(--cpd-space-4x);
display: flex;
flex-direction: column;
gap: var(--cpd-space-2x);
}
.session-list-block {
display: flex;
flex-direction: row;

70
frontend/src/components/UserHome/UserHome.tsx
View File

@@ -18,6 +18,7 @@ import { useState } from "react";
import { Link } from "../../Router";
import { FragmentType, graphql, useFragment } from "../../gql";
import Block from "../Block/Block";
import BlockList from "../BlockList/BlockList";
import styles from "./UserHome.module.css";
@@ -72,7 +73,7 @@ const UserHome: React.FC<{
// compatibility sessions -> Regular apps
return (
<>
<BlockList>
{data.unverifiedEmails.totalCount > 0 && !dismiss && (
<Alert type="critical" title="Unverified email" onClose={doDismiss}>
You have {data.unverifiedEmails.totalCount} unverified email
@@ -80,40 +81,39 @@ const UserHome: React.FC<{
</Alert>
)}
{/* This is a short term solution, so I won't bother extracting these blocks into components */}
<section className={styles.sessionList}>
<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 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 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 route={{ type: "compat-session-list" }}>View all</Link>
</Block>
</section>
</>
<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 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 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 route={{ type: "compat-session-list" }}>View all</Link>
</Block>
</BlockList>
);
};

12
frontend/src/components/UserHome/__snapshots__/UserHome.test.tsx.snap
View File

@@ -1,8 +1,8 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`UserHome > render a <UserHome /> with sessions 1`] = `
<section
className="_sessionList_5d2854"
<div
className="_blockList_f8cc7f"
>
<h3
className="_font-heading-md-semibold_1g2sj_129"
@@ -90,12 +90,12 @@ exports[`UserHome > render a <UserHome /> with sessions 1`] = `
View all
</a>
</div>
</section>
</div>
`;
exports[`UserHome > render an simple <UserHome /> 1`] = `
<section
className="_sessionList_5d2854"
<div
className="_blockList_f8cc7f"
>
<h3
className="_font-heading-md-semibold_1g2sj_129"
@@ -183,5 +183,5 @@ exports[`UserHome > render an simple <UserHome /> 1`] = `
View all
</a>
</div>
</section>
</div>
`;