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