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 { .block {
color: var(--cpd-color-text-primary); 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); border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
&:last-child { &:last-child {

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

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

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

@@ -13,13 +13,6 @@
* limitations under the License. * 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 { .session-list-block {
display: flex; display: flex;
flex-direction: row; 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 { Link } from "../../Router";
import { FragmentType, graphql, useFragment } from "../../gql"; import { FragmentType, graphql, useFragment } from "../../gql";
import Block from "../Block/Block"; import Block from "../Block/Block";
import BlockList from "../BlockList/BlockList";
import styles from "./UserHome.module.css"; import styles from "./UserHome.module.css";
@@ -72,7 +73,7 @@ const UserHome: React.FC<{
// compatibility sessions -> Regular apps // compatibility sessions -> Regular apps
return ( return (
<> <BlockList>
{data.unverifiedEmails.totalCount > 0 && !dismiss && ( {data.unverifiedEmails.totalCount > 0 && !dismiss && (
<Alert type="critical" title="Unverified email" onClose={doDismiss}> <Alert type="critical" title="Unverified email" onClose={doDismiss}>
You have {data.unverifiedEmails.totalCount} unverified email You have {data.unverifiedEmails.totalCount} unverified email
@@ -80,40 +81,39 @@ const UserHome: React.FC<{
</Alert> </Alert>
)} )}
{/* This is a short term solution, so I won't bother extracting these blocks into components */} {/* 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> <H3>Where you're signed in</H3>
<Block className={styles.sessionListBlock}> <Block className={styles.sessionListBlock}>
<div className={styles.sessionListBlockInfo}> <div className={styles.sessionListBlockInfo}>
<H6>Browser</H6> <H6>Browser</H6>
<Body> <Body>
{data.browserSessions.totalCount} active{" "} {data.browserSessions.totalCount} active{" "}
{pluraliseSession(data.browserSessions.totalCount)} {pluraliseSession(data.browserSessions.totalCount)}
</Body> </Body>
</div> </div>
<Link route={{ type: "browser-session-list" }}>View all</Link> <Link route={{ type: "browser-session-list" }}>View all</Link>
</Block> </Block>
<Block className={styles.sessionListBlock}> <Block className={styles.sessionListBlock}>
<div className={styles.sessionListBlockInfo}> <div className={styles.sessionListBlockInfo}>
<H6>New apps</H6> <H6>New apps</H6>
<Body> <Body>
{data.oauth2Sessions.totalCount} active{" "} {data.oauth2Sessions.totalCount} active{" "}
{pluraliseSession(data.oauth2Sessions.totalCount)} {pluraliseSession(data.oauth2Sessions.totalCount)}
</Body> </Body>
</div> </div>
<Link route={{ type: "oauth2-session-list" }}>View all</Link> <Link route={{ type: "oauth2-session-list" }}>View all</Link>
</Block> </Block>
<Block className={styles.sessionListBlock}> <Block className={styles.sessionListBlock}>
<div className={styles.sessionListBlockInfo}> <div className={styles.sessionListBlockInfo}>
<H6>Regular apps</H6> <H6>Regular apps</H6>
<Body> <Body>
{data.compatSessions.totalCount} active{" "} {data.compatSessions.totalCount} active{" "}
{pluraliseSession(data.compatSessions.totalCount)} {pluraliseSession(data.compatSessions.totalCount)}
</Body> </Body>
</div> </div>
<Link route={{ type: "compat-session-list" }}>View all</Link> <Link route={{ type: "compat-session-list" }}>View all</Link>
</Block> </Block>
</section> </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 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`UserHome > render a <UserHome /> with sessions 1`] = ` exports[`UserHome > render a <UserHome /> with sessions 1`] = `
<section <div
className="_sessionList_5d2854" className="_blockList_f8cc7f"
> >
<h3 <h3
className="_font-heading-md-semibold_1g2sj_129" className="_font-heading-md-semibold_1g2sj_129"
@@ -90,12 +90,12 @@ exports[`UserHome > render a <UserHome /> with sessions 1`] = `
View all View all
</a> </a>
</div> </div>
</section> </div>
`; `;
exports[`UserHome > render an simple <UserHome /> 1`] = ` exports[`UserHome > render an simple <UserHome /> 1`] = `
<section <div
className="_sessionList_5d2854" className="_blockList_f8cc7f"
> >
<h3 <h3
className="_font-heading-md-semibold_1g2sj_129" className="_font-heading-md-semibold_1g2sj_129"
@@ -183,5 +183,5 @@ exports[`UserHome > render an simple <UserHome /> 1`] = `
View all View all
</a> </a>
</div> </div>
</section> </div>
`; `;