diff --git a/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx b/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx index 87da265055..059ee9ebc9 100644 --- a/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx +++ b/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx @@ -28,8 +28,8 @@ class EnrollSecretRow extends Component { const { secret } = this.props; stringToClipboard(secret) - .then(() => this.setState({ copyMessage: "(copied)" })) - .catch(() => this.setState({ copyMessage: "(copy failed)" })); + .then(() => this.setState({ copyMessage: "Copied!" })) + .catch(() => this.setState({ copyMessage: "Copy failed" })); // Clear message after 1 second setTimeout(() => this.setState({ copyMessage: "" }), 1000); diff --git a/frontend/components/config/EnrollSecretTable/_styles.scss b/frontend/components/config/EnrollSecretTable/_styles.scss index 3bee9fa15e..a4a864bce8 100644 --- a/frontend/components/config/EnrollSecretTable/_styles.scss +++ b/frontend/components/config/EnrollSecretTable/_styles.scss @@ -23,6 +23,7 @@ &__secret-copy-icon { color: $core-vibrant-blue; + margin-left: $pad-small; margin-right: $pad-medium; } @@ -31,7 +32,7 @@ align-items: center; position: absolute; right: 16px; - transform: translateY(100%); + transform: translateY(80%); height: 16px; span { diff --git a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx index f73402ecba..9306a70505 100644 --- a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx +++ b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx @@ -4,11 +4,7 @@ import { connect } from "react-redux"; import { goBack } from "react-router-redux"; import moment from "moment"; import { authToken } from "utilities/local"; -import { - copyText, - COPY_TEXT_SUCCESS, - COPY_TEXT_ERROR, -} from "utilities/copy_text"; +import { stringToClipboard } from "utilities/copy_text"; import { noop } from "lodash"; @@ -63,6 +59,7 @@ export class UserSettingsPage extends Component { showEmailModal: false, showPasswordModal: false, updatedUser: {}, + copyMessage: "", }; } @@ -150,18 +147,18 @@ export class UserSettingsPage extends Component { return false; }; - onCopySecret = (elementClass) => { + onCopySecret = () => { return (evt) => { evt.preventDefault(); - const { dispatch } = this.props; + stringToClipboard(authToken()) + .then(() => this.setState({ copyMessage: "Copied!" })) + .catch(() => this.setState({ copyMessage: "Copy failed" })); - if (copyText(elementClass)) { - dispatch(renderFlash("success", COPY_TEXT_SUCCESS)); - } else { - this.setState({ revealSecret: true }); - dispatch(renderFlash("error", COPY_TEXT_ERROR)); - } + // Clear message after 1 second + setTimeout(() => this.setState({ copyMessage: "" }), 1000); + + return false; }; }; @@ -249,9 +246,29 @@ export class UserSettingsPage extends Component { ); }; + renderLabel = () => { + const { copyMessage } = this.state; + const { onCopySecret } = this; + + return ( + + + {copyMessage && {`${copyMessage} `}} + + + + ); + }; + renderApiTokenModal = () => { const { showApiTokenModal, revealSecret } = this.state; - const { onToggleApiTokenModal, onCopySecret, onToggleSecret } = this; + const { onToggleApiTokenModal, onToggleSecret, renderLabel } = this; if (!showApiTokenModal) { return false; @@ -276,14 +293,8 @@ export class UserSettingsPage extends Component { name="osqueryd-secret" type={revealSecret ? "text" : "password"} value={authToken()} + label={renderLabel()} /> -