add copied message to copy button on input (#15366)

relates to #14090

adds copied message when user click on the copy button on inputs.


![image](https://github.com/fleetdm/fleet/assets/1153709/b5d89630-37a3-4b05-9678-ac62da2e6109)

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality

changes/issue-14090-add-copied-message

@@ -0,0 +1 @@
+- add "copied!" message to copy button on inputs

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}
           />
-          <div className={`${baseClass}__copy-wrapper`}>
-            {this.props.enableCopy && (
+          {this.props.enableCopy && (
+            <div className={`${baseClass}__copy-wrapper`}>
               <Button
                 variant="text-icon"
                 onClick={copyValue}
@@ -184,8 +195,13 @@ class InputField extends Component {
               >
                 <Icon name="copy" /> Copy
               </Button>
-            )}
-          </div>
+              {this.state.copied && (
+                <span className={`${baseClass}__copied-confirmation`}>
+                  Copied!
+                </span>
+              )}
+            </div>
+          )}
         </div>
       </FormField>
     );

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;
   }
 }