New copy to clipboard component. Alignment fixes

src/components/CopyToClipboardButton/index.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CIcon from '@coreui/icons-react';
+import { cilClone } from '@coreui/icons';
+import PropTypes from 'prop-types';
+import { CButton, CPopover } from '@coreui/react';
+
+const CopyToClipboardButton = ({content, size}) => {
+  const { t } = useTranslation();
+  const [result, setResult] = useState('');
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(content);
+    setResult(t('common.copied'));
+  }
+
+  return (
+      <CPopover content={t('common.copy_to_clipboard')}>
+        <CButton onClick={copyToClipboard} size={size}>
+          <CIcon content={cilClone} />
+          {'   '}{result || ''}
+        </CButton>
+      </CPopover>
+  );
+}
+
+CopyToClipboardButton.propTypes = {
+  content: PropTypes.string.isRequired,
+  size: PropTypes.string
+};
+
+CopyToClipboardButton.defaultProps = {
+  size: 'sm',
+};
+
+export default CopyToClipboardButton;

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')}>
+                  <CopyToClipboardButton size="sm" content={device?.devicePassword === '' ? 'openwifi' : device.devicePassword}/>
-                    <CButton onClick={copyPasswordToClipboard} size="sm">
-                      <CIcon content={cilClone} />
-                    </CButton>
-                  </CPopover>
-                  {copyPasswordSuccess}
                 </CCol>
               </CFormGroup>
               <CCollapse show={collapse}>

src/components/DeviceConfiguration/index.module.scss

@@ -9,3 +9,7 @@
 .modalTitle {
   color: black;
 }
+
+.topPadding {
+  padding-top: 5px;
+}

src/components/RebootModal/index.module.scss

@@ -5,3 +5,7 @@
 .spacedColumn {
   margin-top: 7px;
 }
+
+.spacedDate {
+  margin-top: 7px;
+}