Switch to <details>

Signed-off-by: Aaron Raimist <aaron@raim.ist>

res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss

@@ -22,3 +22,34 @@ limitations under the License.
 .mx_HelpUserSettingsTab span.mx_AccessibleButton {
     word-break: break-word;
 }
+
+.mx_HelpUserSettingsTab code {
+    word-break: break-all;
+    user-select: all;
+}
+
+.mx_HelpUserSettingsTab_accessToken {
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    border: solid 1px $light-fg-color;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    padding: 10px;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy {
+    flex-shrink: 0;
+    cursor: pointer;
+    margin-left: 20px;
+    display: inherit;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy > div {
+    mask-image: url($copy-button-url);
+    background-color: $message-action-bar-fg-color;
+    margin-left: 5px;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+}

src/components/views/dialogs/AccessTokenDialog.tsx

@@ -1,38 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2020 Resynth <resynth1943.net>
-
-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 React from 'react';
-import { _t } from '../../../languageHandler';
-import QuestionDialog from './QuestionDialog';
-
-type IProps = Exclude<
-    React.ComponentProps<QuestionDialog>,
-    "title" | "danger" | "description"
->;
-
-export default function AccessTokenDialog(props: IProps) {
-    return (
-        <QuestionDialog
-            {...props}
-            title="Reveal Access Token"
-            danger={true}
-            description={_t(
-                "Your access token gives full access to your account. Do not share it with anyone.",
-            )}
-        ></QuestionDialog>
-    );
-}

src/components/views/settings/tabs/user/HelpUserSettingsTab.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import {_t, getCurrentLanguage} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
+import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
 import Modal from "../../../../../Modal";
@@ -27,8 +28,11 @@ import * as sdk from "../../../../../";
 import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import UpdateCheckButton from "../../UpdateCheckButton";
-import AccessTokenDialog from '../../../dialogs/AccessTokenDialog';
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import {copyPlaintext} from "../../../../../utils/strings";
+import * as ContextMenu from "../../../../structures/ContextMenu";
+import {toRightOf} from "../../../../structures/ContextMenu";
+
 
 @replaceableComponent("views.settings.tabs.user.HelpUserSettingsTab")
 export default class HelpUserSettingsTab extends React.Component {
@@ -151,15 +155,18 @@ export default class HelpUserSettingsTab extends React.Component {
         );
     }
 
-    onAccessTokenSpoilerClick = async (event) => {
+    onAccessTokenCopyClick = async (e) => {
-        // React throws away the event before we can use it (we are async, after all).
+        e.preventDefault();
-        event.persist();
+        const target = e.target; // copy target before we go async and React throws it away
 
-        // We make the user accept a scary popup to combat Social Engineering. No peeking!
+        const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
-        await Modal.createTrackedDialog('Reveal Access Token', '', AccessTokenDialog).finished;
+        const buttonRect = target.getBoundingClientRect();
-
+        const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
-        // Pass it onto the handler.
+        const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
-        this._showSpoiler(event);
+            ...toRightOf(buttonRect, 2),
+            message: successful ? _t('Copied!') : _t('Failed to copy'),
+        });
+        target.onmouseleave = close;
     }
 
     render() {
@@ -279,11 +286,20 @@ export default class HelpUserSettingsTab extends React.Component {
                     <div className='mx_SettingsTab_subsectionText'>
                         {_t("Homeserver is")} <code>{MatrixClientPeg.get().getHomeserverUrl()}</code><br />
                         {_t("Identity Server is")} <code>{MatrixClientPeg.get().getIdentityServerUrl()}</code><br />
-                        {_t("Access Token:") + ' '}
+                        <br />
-                        <AccessibleButton element="span" onClick={this.onAccessTokenSpoilerClick}
+                        <details>
-                                          data-spoiler={MatrixClientPeg.get().getAccessToken()}>
+                            <summary>{_t("Access Token")}</summary><br />
-                            &lt;{ _t("click to reveal") }&gt;
+                            { _t("Your access token gives full access to your account."
-                        </AccessibleButton>
+                               + " Do not share it with anyone." ) }
+                            <div className="mx_HelpUserSettingsTab_accessToken">
+                                <code>{MatrixClientPeg.get().getAccessToken()}</code>
+                                <AccessibleTooltipButton
+                                    title={_t("Copy")}
+                                    onClick={this.onAccessTokenCopyClick}
+                                    className="mx_HelpUserSettingsTab_accessToken_copy"
+                                />
+                            </div>
+                        </details><br />
                         <div className='mx_HelpUserSettingsTab_debugButton'>
                             <AccessibleButton onClick={this._onClearCacheAndReload} kind='danger'>
                                 {_t("Clear cache and reload")}

src/i18n/strings/en_EN.json

@@ -1251,8 +1251,9 @@
     "olm version:": "olm version:",
     "Homeserver is": "Homeserver is",
     "Identity Server is": "Identity Server is",
-    "Access Token:": "Access Token:",
+    "Access Token": "Access Token",
-    "click to reveal": "click to reveal",
+    "Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
+    "Copy": "Copy",
     "Clear cache and reload": "Clear cache and reload",
     "Labs": "Labs",
     "Customise your experience with experimental labs features. <a>Learn more</a>.": "Customise your experience with experimental labs features. <a>Learn more</a>.",
@@ -2016,7 +2017,6 @@
     "Add a new server...": "Add a new server...",
     "%(networkName)s rooms": "%(networkName)s rooms",
     "Matrix rooms": "Matrix rooms",
-    "Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
     "Space selection": "Space selection",
     "Add existing rooms": "Add existing rooms",
     "Filter your rooms and spaces": "Filter your rooms and spaces",
@@ -2336,7 +2336,6 @@
     "Share Community": "Share Community",
     "Share Room Message": "Share Room Message",
     "Link to selected message": "Link to selected message",
-    "Copy": "Copy",
     "Command Help": "Command Help",
     "Failed to save space settings.": "Failed to save space settings.",
     "Space settings": "Space settings",