diff --git a/changes/issue-14090-add-copied-message b/changes/issue-14090-add-copied-message new file mode 100644 index 0000000000..1db5a13294 --- /dev/null +++ b/changes/issue-14090-add-copied-message @@ -0,0 +1 @@ +- add "copied!" message to copy button on inputs diff --git a/frontend/components/forms/fields/InputField/InputField.jsx b/frontend/components/forms/fields/InputField/InputField.jsx index b6aa74a804..6d7236048f 100644 --- a/frontend/components/forms/fields/InputField/InputField.jsx +++ b/frontend/components/forms/fields/InputField/InputField.jsx @@ -60,6 +60,13 @@ class InputField extends Component { ignore1password: false, }; + constructor() { + super(); + this.state = { + copied: false, + }; + } + componentDidMount() { const { autofocus } = this.props; const { input } = this; @@ -121,8 +128,12 @@ class InputField extends Component { const copyValue = (e) => { e.preventDefault(); - - stringToClipboard(value); + stringToClipboard(value).then(() => { + this.setState({ copied: true }); + setTimeout(() => { + this.setState({ copied: false }); + }, 2000); + }); }; if (type === "textarea") { @@ -175,8 +186,8 @@ class InputField extends Component { autoComplete={blockAutoComplete ? "new-password" : ""} data-1p-ignore={ignore1password} /> -
- {this.props.enableCopy && ( + {this.props.enableCopy && ( +
- )} -
+ {this.state.copied && ( + + Copied! + + )} +
+ )} ); diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss index a5ee1ad514..76b7a8384f 100644 --- a/frontend/components/forms/fields/InputField/_styles.scss +++ b/frontend/components/forms/fields/InputField/_styles.scss @@ -81,10 +81,26 @@ } } + &__copy-wrapper { + position: relative + } + &__input-container.copy-enabled { display: flex; align-items: center; gap: $pad-medium; + + } + + &__copied-confirmation { + position: absolute; + background-color: $ui-light-grey; + border: solid 1px $ui-fleet-black-10; + border-radius: $border-radius-xlarge; + padding: $pad-xxsmall 6px; + top: 50%; + transform: translateY(-50%); + left: -90px; } }