added copy indicator for account management

net/web/src/dashboard/Dashboard.jsx

@@ -1,15 +1,16 @@
 import { AlertIcon, DashboardWrapper, SettingsButton, AddButton, SettingsLayout, CreateLayout } from './Dashboard.styled';
 import { Tooltip, Switch, Select, Button, Space, Modal, Input, InputNumber, List } from 'antd';
-import { ExclamationCircleOutlined, SettingOutlined, CopyOutlined, UserAddOutlined, LogoutOutlined, ReloadOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, SettingOutlined, UserAddOutlined, LogoutOutlined, ReloadOutlined } from '@ant-design/icons';
 import { useDashboard } from './useDashboard.hook';
 import { AccountItem } from './accountItem/AccountItem';
+import { CopyButton } from './copyButton/CopyButton';
 
 export function Dashboard() {
 
   const { state, actions } = useDashboard();
 
-  const onClipboard = (value) => {
-    navigator.clipboard.writeText(value);
+  const onClipboard = async (value) => {
+    await navigator.clipboard.writeText(value);
   };
 
   const createLink = () => {
@@ -193,14 +194,12 @@ export function Dashboard() {
           <div className="url">
             <div className="label">Browser Link:</div>
             <div className="link">{createLink()}</div>
-            <Button icon={<CopyOutlined />} size="small"
-              onClick={() => onClipboard(createLink())} />
+            <CopyButton onCopy={async () => await onClipboard(createLink())} />
           </div>
           <div className="url">
             <div className="label">App Token:</div>
             <div className="token">{state.createToken}</div>
-            <Button icon={<CopyOutlined />} size="small"
-              onClick={() => onClipboard(state.createToken)} />
+            <CopyButton onCopy={async () => await onClipboard(state.createToken)} />
           </div>
         </CreateLayout>
       </Modal>    

net/web/src/dashboard/accountItem/AccountItem.jsx

@@ -1,8 +1,9 @@
 import { Logo } from 'logo/Logo';
 import { AccountItemWrapper, AccessLayout, DeleteButton, EnableButton, DisableButton, ResetButton } from './AccountItem.styled';
 import { useAccountItem } from './useAccountItem.hook';
-import { ExclamationCircleOutlined, CopyOutlined, UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import { Modal, Tooltip, Button } from 'antd';
+import { CopyButton } from '../copyButton/CopyButton';
 
 export function AccountItem({ item, remove }) {
 
@@ -132,14 +133,12 @@ export function AccountItem({ item, remove }) {
           <div className="url">
             <div className="label">Browser Link:</div>
             <div className="link">{accessLink()}</div>
-            <Button icon={<CopyOutlined />} size="small"
-              onClick={() => onClipboard(accessLink())}/>
+            <CopyButton onCopy={async () => await onClipboard(accessLink())} />
           </div>
           <div className="url">
             <div className="label">App Token:</div>
             <div className="token">{state.accessToken}</div>
-            <Button icon={<CopyOutlined />} size="small"
-              onClick={() => onClipboard(state.accessToken)} />
+            <CopyButton onCopy={async () => await onClipboard(state.accessToken)} />
           </div>
         </AccessLayout>
       </Modal>  

net/web/src/dashboard/copyButton/CopyButton.jsx

@@ -0,0 +1,15 @@
+import { useCopyButton } from './useCopyButton.hook';
+import { Tooltip, Button } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+
+export function CopyButton({ onCopy }) {
+
+  const { state, actions } = useCopyButton();
+
+  return (
+    <Tooltip color={state.color} title={state.message} trigger={[]} open={state.show} placement="topRight">
+      <Button icon={<CopyOutlined />} size="small" onClick={() => actions.copy(onCopy)} />
+    </Tooltip>
+  );
+}
+

net/web/src/dashboard/copyButton/useCopyButton.hook.js

@@ -0,0 +1,38 @@
+import { useState, useRef } from 'react';
+import Colors from 'constants/Colors';
+
+export function useCopyButton() {
+
+  const [state, setState] = useState({
+    color: Colors.background,
+    message: 'copeid',
+    show: false,
+  });
+
+  const timeout = useRef();
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    copy: async (onCopy) => {
+      try {
+        await onCopy();
+        updateState({ show: true, message: 'copied', color: Colors.background });
+      }
+      catch {
+        updateState({ show: true, message: 'failed to copy', color: Colors.alert });
+      }
+
+      clearTimeout(timeout.current);
+      timeout.current = setTimeout(() => {
+        updateState({ show: false });
+      }, 1500);
+      updateState({ show: true });
+    }
+  }
+
+  return { state, actions };
+}
+