Highlight dangerous scopes when consenting to them (#5180)

Author: sandhose

frontend/src/components/SessionDetail/SessionInfo.tsx

@@ -3,10 +3,11 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
+import IconAdmin from "@vector-im/compound-design-tokens/assets/web/icons/admin";
 import IconChat from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import IconComputer from "@vector-im/compound-design-tokens/assets/web/icons/computer";
-import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import IconInfo from "@vector-im/compound-design-tokens/assets/web/icons/info";
+import IconRoom from "@vector-im/compound-design-tokens/assets/web/icons/room";
 import IconSend from "@vector-im/compound-design-tokens/assets/web/icons/send";
 import IconUserProfile from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import {
@@ -68,7 +69,7 @@ export const ScopeSendMessages: React.FC = () => {
 const ScopeSynapseAdmin: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <VisualListItem Icon={IconErrorSolid}>
+    <VisualListItem Icon={IconRoom} destructive>
       {t("mas.scope.synapse_admin")}
     </VisualListItem>
   );
@@ -77,7 +78,7 @@ const ScopeSynapseAdmin: React.FC = () => {
 const ScopeMasAdmin: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <VisualListItem Icon={IconErrorSolid}>
+    <VisualListItem Icon={IconAdmin} destructive>
       {t("mas.scope.mas_admin")}
     </VisualListItem>
   );

frontend/src/templates.css

@@ -117,6 +117,17 @@
         width: var(--cpd-space-6x);
         color: var(--cpd-color-icon-quaternary);
       }
+
+      &.dangerous {
+        border: 1px solid var(--cpd-color-border-critical-subtle);
+        background-color: var(--cpd-color-bg-critical-subtle);
+        font: var(--cpd-font-body-md-medium);
+        color: var(--cpd-color-text-critical-primary);
+
+        & > svg {
+          color: var(--cpd-color-icon-critical-primary);
+        }
+      }
     }
   }
 }

templates/components/scope.html

@@ -18,9 +18,9 @@
         <li>{{ icon.chat() }}<p>{{ _("mas.scope.view_messages") }}</p></li>
         <li>{{ icon.send() }}<p>{{ _("mas.scope.send_messages") }}</p></li>
       {% elif scope == "urn:synapse:admin:*" %}
-        <li>{{ icon.error_solid() }}<p>{{ _("mas.scope.synapse_admin") }}</p></li>
+        <li class="dangerous">{{ icon.room() }}<p>{{ _("mas.scope.synapse_admin") }}</p></li>
       {% elif scope == "urn:mas:admin" %}
-        <li>{{ icon.error_solid() }}<p>{{ _("mas.scope.mas_admin") }}</p></li>
+        <li class="dangerous">{{ icon.admin() }}<p>{{ _("mas.scope.mas_admin") }}</p></li>
       {% elif scope is startingwith("urn:matrix:client:device:") or scope is startingwith("urn:matrix:org.matrix.msc2967.client:device:") %}
         {# We hide this scope #}
       {% else %}

translations/en.json

@@ -666,7 +666,7 @@
       },
       "mas_admin": "Administer any user on the matrix-authentication-service",
       "@mas_admin": {
-        "context": "components/scope.html:23:42-66",
+        "context": "components/scope.html:23:54-78",
         "description": "Displayed when the 'urn:mas:admin' scope is requested"
       },
       "send_messages": "Send new messages on your behalf",
@@ -675,7 +675,7 @@
       },
       "synapse_admin": "Administer the Synapse homeserver",
       "@synapse_admin": {
-        "context": "components/scope.html:21:42-70",
+        "context": "components/scope.html:21:53-81",
         "description": "Displayed when the 'urn:synapse:admin:*' scope is requested"
       },
       "view_messages": "View your existing messages and data",