Move the cross signing reset UI in its own page

crates/handlers/src/oauth2/discovery.rs

@@ -183,6 +183,7 @@ pub(crate) async fn get(
             "org.matrix.sessions_list".to_owned(),
             "org.matrix.session_view".to_owned(),
             "org.matrix.session_end".to_owned(),
+            "org.matrix.cross_signing_reset".to_owned(),
         ],
     })
 }

crates/router/src/endpoints.rs

@@ -475,6 +475,9 @@ pub enum AccountAction {
     OrgMatrixSessionEnd { device_id: String },
     #[serde(rename = "session_end")]
     SessionEnd { device_id: String },
+
+    #[serde(rename = "org.matrix.cross_signing_reset")]
+    OrgMatrixCrossSigningReset,
 }
 
 /// `GET /account/`

frontend/src/components/ButtonLink.tsx

@@ -0,0 +1,45 @@
+// Copyright 2024 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 { LinkComponent, useLinkProps } from "@tanstack/react-router";
+import { Button } from "@vector-im/compound-web";
+import { forwardRef } from "react";
+
+type Props = {
+  kind?: "primary" | "secondary" | "tertiary";
+  size?: "sm" | "lg";
+  Icon?: React.ComponentType<React.SVGAttributes<SVGElement>>;
+  destructive?: boolean;
+};
+
+export const ButtonLink: LinkComponent<Props> = forwardRef<
+  HTMLAnchorElement,
+  Parameters<typeof useLinkProps>[0] & Props
+>(({ children, kind, size, destructive, Icon, ...props }, ref) => {
+  const linkProps = useLinkProps(props);
+
+  return (
+    <Button
+      as="a"
+      kind={kind}
+      size={size}
+      destructive={destructive}
+      Icon={Icon}
+      ref={ref}
+      {...linkProps}
+    >
+      {children}
+    </Button>
+  );
+}) as LinkComponent<Props>;

frontend/src/components/Link/Link.tsx → frontend/src/components/Link.tsx

@@ -14,24 +14,21 @@
 
 import { LinkComponent, useLinkProps } from "@tanstack/react-router";
 import { Link as CompoundLink } from "@vector-im/compound-web";
-import cx from "classnames";
 import { forwardRef } from "react";
 
-import styles from "./Link.module.css";
+type Props = {
+  kind?: "primary" | "critical";
+};
 
-export const Link: LinkComponent = forwardRef<
+export const Link: LinkComponent<Props> = forwardRef<
   HTMLAnchorElement,
-  Parameters<typeof useLinkProps>[0]
->(({ children, ...props }, ref) => {
-  const { className, ...newProps } = useLinkProps(props);
+  Parameters<typeof useLinkProps>[0] & Props
+>(({ children, kind, ...props }, ref) => {
+  const linkProps = useLinkProps(props);
 
   return (
-    <CompoundLink
-      kind="primary"
-      ref={ref}
-      className={cx(className, styles.linkButton)}
-      children={children}
-      {...newProps}
-    />
+    <CompoundLink kind={kind} ref={ref} {...linkProps}>
+      {children}
+    </CompoundLink>
   );
-}) as LinkComponent;
+}) as LinkComponent<Props>;

frontend/src/components/UnverifiedEmailAlert/__snapshots__/UnverifiedEmailAlert.test.tsx.snap

@@ -36,7 +36,7 @@ exports[`<UnverifiedEmailAlert /> > renders a warning when there are unverified
           You have 2 unverified email addresses.
            
           <a
-            class="_link_1mzip_17 active _linkButton_379d57"
+            class="_link_1mzip_17 active"
             data-kind="primary"
             data-status="active"
             href="/#emails"

frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`BrowserSessionsOverview > renders with sessions 1`] = `
       </p>
     </div>
     <a
-      class="_link_1mzip_17 _linkButton_379d57"
+      class="_link_1mzip_17"
       data-kind="primary"
       href="/sessions/browsers"
       rel="noreferrer noopener"

frontend/src/gql/gql.ts

@@ -49,8 +49,6 @@ const documents = {
     types.UserGreeting_UserFragmentDoc,
   "\n  mutation AddEmail($userId: ID!, $email: String!) {\n    addEmail(input: { userId: $userId, email: $email }) {\n      status\n      violations\n      email {\n        id\n        ...UserEmail_email\n      }\n    }\n  }\n":
     types.AddEmailDocument,
-  "\n  mutation AllowCrossSigningReset($userId: ID!) {\n    allowUserCrossSigningReset(input: { userId: $userId }) {\n      user {\n        id\n      }\n    }\n  }\n":
-    types.AllowCrossSigningResetDocument,
   "\n  query UserEmailListQuery(\n    $userId: ID!\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    user(id: $userId) {\n      id\n\n      emails(first: $first, after: $after, last: $last, before: $before) {\n        edges {\n          cursor\n          node {\n            id\n            ...UserEmail_email\n          }\n        }\n        totalCount\n        pageInfo {\n          hasNextPage\n          hasPreviousPage\n          startCursor\n          endCursor\n        }\n      }\n    }\n  }\n":
     types.UserEmailListQueryDocument,
   "\n  fragment UserEmailList_user on User {\n    id\n    primaryEmail {\n      id\n    }\n  }\n":
@@ -79,12 +77,14 @@ const documents = {
     types.CurrentUserGreetingDocument,
   "\n  query OAuth2ClientQuery($id: ID!) {\n    oauth2Client(id: $id) {\n      ...OAuth2Client_detail\n    }\n  }\n":
     types.OAuth2ClientQueryDocument,
-  "\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n    }\n  }\n":
+  "\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n":
     types.CurrentViewerQueryDocument,
   "\n  query DeviceRedirectQuery($deviceId: String!, $userId: ID!) {\n    session(deviceId: $deviceId, userId: $userId) {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n":
     types.DeviceRedirectQueryDocument,
   "\n  query VerifyEmailQuery($id: ID!) {\n    userEmail(id: $id) {\n      ...UserEmail_verifyEmail\n    }\n  }\n":
     types.VerifyEmailQueryDocument,
+  "\n  mutation AllowCrossSigningReset($userId: ID!) {\n    allowUserCrossSigningReset(input: { userId: $userId }) {\n      user {\n        id\n      }\n    }\n  }\n":
+    types.AllowCrossSigningResetDocument,
   "\n  query CurrentViewerSessionQuery {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n      }\n    }\n  }\n":
     types.CurrentViewerSessionQueryDocument,
 };
@@ -211,12 +211,6 @@ export function graphql(
 export function graphql(
   source: "\n  mutation AddEmail($userId: ID!, $email: String!) {\n    addEmail(input: { userId: $userId, email: $email }) {\n      status\n      violations\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      violations\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.
- */
-export function graphql(
-  source: "\n  mutation AllowCrossSigningReset($userId: ID!) {\n    allowUserCrossSigningReset(input: { userId: $userId }) {\n      user {\n        id\n      }\n    }\n  }\n",
-): (typeof documents)["\n  mutation AllowCrossSigningReset($userId: ID!) {\n    allowUserCrossSigningReset(input: { userId: $userId }) {\n      user {\n        id\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -305,8 +299,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 CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n    }\n  }\n",
-): (typeof documents)["\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n    }\n  }\n"];
+  source: "\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -319,6 +313,12 @@ export function graphql(
 export function graphql(
   source: "\n  query VerifyEmailQuery($id: ID!) {\n    userEmail(id: $id) {\n      ...UserEmail_verifyEmail\n    }\n  }\n",
 ): (typeof documents)["\n  query VerifyEmailQuery($id: ID!) {\n    userEmail(id: $id) {\n      ...UserEmail_verifyEmail\n    }\n  }\n"];
+/**
+ * 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 AllowCrossSigningReset($userId: ID!) {\n    allowUserCrossSigningReset(input: { userId: $userId }) {\n      user {\n        id\n      }\n    }\n  }\n",
+): (typeof documents)["\n  mutation AllowCrossSigningReset($userId: ID!) {\n    allowUserCrossSigningReset(input: { userId: $userId }) {\n      user {\n        id\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */