diff --git a/src/components/CopyToClipboardButton/index.js b/src/components/CopyToClipboardButton/index.js
new file mode 100644
index 0000000..a584e81
--- /dev/null
+++ b/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 (
+
+
+
+ {' '}{result || ''}
+
+
+ );
+}
+
+CopyToClipboardButton.propTypes = {
+ content: PropTypes.string.isRequired,
+ size: PropTypes.string
+};
+
+CopyToClipboardButton.defaultProps = {
+ size: 'sm',
+};
+
+export default CopyToClipboardButton;
diff --git a/src/components/DeviceConfiguration/index.js b/src/components/DeviceConfiguration/index.js
index a41ab79..ee4c0f4 100644
--- a/src/components/DeviceConfiguration/index.js
+++ b/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 }) => {
{device.serialNumber}
+
@@ -149,17 +143,12 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
-
+
{t('configuration.device_password')} :
{device.devicePassword === '' ? 'openwifi' : device.devicePassword}
-
-
-
-
-
- {copyPasswordSuccess}
+
diff --git a/src/components/DeviceConfiguration/index.module.scss b/src/components/DeviceConfiguration/index.module.scss
index 78f6910..364d894 100644
--- a/src/components/DeviceConfiguration/index.module.scss
+++ b/src/components/DeviceConfiguration/index.module.scss
@@ -9,3 +9,7 @@
.modalTitle {
color: black;
}
+
+.topPadding {
+ padding-top: 5px;
+}
diff --git a/src/components/RebootModal/index.module.scss b/src/components/RebootModal/index.module.scss
index ac83ce9..8a30b4b 100644
--- a/src/components/RebootModal/index.module.scss
+++ b/src/components/RebootModal/index.module.scss
@@ -5,3 +5,7 @@
.spacedColumn {
margin-top: 7px;
}
+
+.spacedDate {
+ margin-top: 7px;
+}