diff --git a/src/components/admin-lte/tokens/token-modal.js b/src/components/admin-lte/tokens/token-modal.js index c3498a0..7a77f22 100644 --- a/src/components/admin-lte/tokens/token-modal.js +++ b/src/components/admin-lte/tokens/token-modal.js @@ -9,7 +9,9 @@ class TokenModal extends React.Component { constructor (props) { super(props) _this = this - this.state = {} + this.state = { + copySuccess: '' + } this.modalFooter = ( <> @@ -44,16 +46,31 @@ class TokenModal extends React.Component { TokenId: - + {token.tokenId} - - _this.copyToClipBoard('tokenId')} - icon='copy' - /> + + {_this.state.copySuccess === 'tokenId' + ? ( +
+ Copied! +
+ ) + : ( + _this.copyToClipBoard('tokenId')} + icon='copy' + /> + )} @@ -155,6 +172,19 @@ class TokenModal extends React.Component { textArea.select() document.execCommand('Copy') textArea.remove() + + _this.handleCopySuccess(key) + } + + handleCopySuccess (key) { + _this.setState({ + copySuccess: key + }) + setTimeout(() => { + _this.setState({ + copySuccess: '' + }) + }, 1000) } } TokenModal.propTypes = { diff --git a/src/components/admin-lte/tokens/token.css b/src/components/admin-lte/tokens/token.css index cd6b642..d8499cf 100644 --- a/src/components/admin-lte/tokens/token.css +++ b/src/components/admin-lte/tokens/token.css @@ -95,4 +95,13 @@ .txIdContainer button:focus { border: none; outline: none; -} \ No newline at end of file +} + +.copied-text{ + width: 100%; + text-align: center; + color: var(--main-color); + } +.nopadding{ + padding: 0!important; + } \ No newline at end of file