New copy to clipboard component. Alignment fixes

src/components/DeviceConfiguration/index.js

@@ -17,10 +17,11 @@ import {
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import PropTypes from 'prop-types';
-import { cilWindowMaximize, cilClone } from '@coreui/icons';
+import { cilWindowMaximize } from '@coreui/icons';
 import { prettyDate } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
 import { getToken } from 'utils/authHelper';
+import CopyToClipboardButton from 'components/CopyToClipboardButton';
 import DeviceConfigurationModal from './DeviceConfigurationModal';
 import styles from './index.module.scss';
 
@@ -29,7 +30,6 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
   const [collapse, setCollapse] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [device, setDevice] = useState(null);
-  const [copyPasswordSuccess, setCopyPasswordSuccess] = useState('');
 
   const toggle = (e) => {
     setCollapse(!collapse);
@@ -40,12 +40,6 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
     setShowModal(!showModal);
   };
 
-  const copyPasswordToClipboard = () => {
-    const password = device.devicePassword === '' ? 'openwifi' : device.devicePassword;
-    navigator.clipboard.writeText(password);
-    setCopyPasswordSuccess(t('common.copied'));
-  };
-
   const getDevice = () => {
     const options = {
       headers: {
@@ -64,7 +58,6 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
 
   useEffect(() => {
     if (selectedDeviceId) getDevice();
-    setCopyPasswordSuccess(null);
   }, [selectedDeviceId]);
 
   if (device) {
@@ -106,6 +99,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
                 </CCol>
                 <CCol xs="12" md="9">
                   {device.serialNumber}
+                  <CopyToClipboardButton size="sm" content={device.serialNumber}/>
                 </CCol>
               </CFormGroup>
               <CFormGroup row>
@@ -149,17 +143,12 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
                 </CCol>
               </CFormGroup>
               <CFormGroup row>
-                <CCol md="3">
+                <CCol md="3" className={styles.topPadding}>
                   <CLabel>{t('configuration.device_password')} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {device.devicePassword === '' ? 'openwifi' : device.devicePassword}
-                  <CPopover content={t('common.copy_to_clipboard')}>
-                    <CButton onClick={copyPasswordToClipboard} size="sm">
-                      <CIcon content={cilClone} />
-                    </CButton>
-                  </CPopover>
-                  {copyPasswordSuccess}
+                  <CopyToClipboardButton size="sm" content={device?.devicePassword === '' ? 'openwifi' : device.devicePassword}/>
                 </CCol>
               </CFormGroup>
               <CCollapse show={collapse}>