Added copy to clipboard function for password

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@coreui/chartjs": "^2.0.0",

public/locales/de/translation.json

@@ -34,6 +34,8 @@
 		"config_id": "Konfig. Ich würde",
 		"confirm": "Bestätigen",
 		"connected": "In Verbindung gebracht",
+		"copied": "kopiert!",
+		"copy_to_clipboard": "In die Zwischenablage kopieren",
 		"date": "Datum",
 		"delete": "Löschen",
 		"details": "Einzelheiten",
@@ -80,6 +82,7 @@
 	"configuration": {
 		"created": "Erstellt",
 		"details": "Gerätedetails",
+		"device_password": "Passwort",
 		"last_configuration_change": "Letzte Konfigurationsänderung",
 		"last_configuration_download": "Letzter Konfigurations-Download",
 		"location": "Ort",

public/locales/en/translation.json

@@ -34,6 +34,8 @@
 		"config_id": "Config. Id",
 		"confirm": "Confirm",
 		"connected": "Connected",
+		"copied": "Copied!",
+		"copy_to_clipboard": "Copy to clipboard",
 		"date": "Date",
 		"delete": "Delete",
 		"details": "Details",
@@ -80,6 +82,7 @@
 	"configuration": {
 		"created": "Created",
 		"details": "Device Details",
+		"device_password": "Password",
 		"last_configuration_change": "Last Configuration Change",
 		"last_configuration_download": "Last Configuration Download",
 		"location": "Location",

public/locales/es/translation.json

@@ -34,6 +34,8 @@
 		"config_id": "Config. Identificación",
 		"confirm": "Confirmar",
 		"connected": "Conectado",
+		"copied": "Copiado!",
+		"copy_to_clipboard": "Copiar al portapapeles",
 		"date": "Fecha",
 		"delete": "Borrar",
 		"details": "Detalles",
@@ -80,6 +82,7 @@
 	"configuration": {
 		"created": "creado",
 		"details": "Detalles del dispositivo",
+		"device_password": "Contraseña",
 		"last_configuration_change": "Último cambio de configuración",
 		"last_configuration_download": "Descarga de la última configuración",
 		"location": "Ubicación",

public/locales/fr/translation.json

@@ -34,6 +34,8 @@
 		"config_id": "Config. Identifiant",
 		"confirm": "Confirmer",
 		"connected": "Connecté",
+		"copied": "Copié!",
+		"copy_to_clipboard": "Copier dans le presse-papier",
 		"date": "Rendez-vous amoureux",
 		"delete": "Effacer",
 		"details": "Détails",
@@ -80,6 +82,7 @@
 	"configuration": {
 		"created": "Créé",
 		"details": "Détails de l'appareil",
+		"device_password": "Mot de passe",
 		"last_configuration_change": "Dernière modification de configuration",
 		"last_configuration_download": "Téléchargement de la dernière configuration",
 		"location": "Emplacement",

public/locales/pt/translation.json

@@ -34,6 +34,8 @@
 		"config_id": "Config. Identidade",
 		"confirm": "confirme",
 		"connected": "Conectado",
+		"copied": "Copiado!",
+		"copy_to_clipboard": "Copiar para área de transferência",
 		"date": "Encontro",
 		"delete": "Excluir",
 		"details": "Detalhes",
@@ -80,6 +82,7 @@
 	"configuration": {
 		"created": "Criado",
 		"details": "Detalhes do dispositivo",
+		"device_password": "Senha",
 		"last_configuration_change": "Última Mudança de Configuração",
 		"last_configuration_download": "Último download da configuração",
 		"location": "Localização",

src/components/BlinkModal/index.js

@@ -121,7 +121,12 @@ const BlinkModal = ({ show, toggleModal }) => {
               <CCol>
                 <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
                   {waiting && doingNow ? t('common.loading_ellipsis') : t('common.do_now')}
-                  <CSpinner color="light" hidden={!waiting || !doingNow} component="span" size="sm" />
+                  <CSpinner
+                    color="light"
+                    hidden={!waiting || !doingNow}
+                    component="span"
+                    size="sm"
+                  />
                 </CButton>
               </CCol>
               <CCol>

src/components/DeviceConfiguration/index.js

@@ -17,7 +17,7 @@ import {
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import PropTypes from 'prop-types';
-import { cilWindowMaximize } from '@coreui/icons';
+import { cilWindowMaximize, cilClone } from '@coreui/icons';
 import { prettyDate } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
 import { getToken } from 'utils/authHelper';
@@ -29,6 +29,7 @@ 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);
@@ -39,6 +40,12 @@ 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: {
@@ -57,6 +64,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
 
   useEffect(() => {
     if (selectedDeviceId) getDevice();
+    setCopyPasswordSuccess(null);
   }, [selectedDeviceId]);
 
   if (device) {
@@ -140,6 +148,20 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
                   {prettyDate(device.lastConfigurationDownload)}
                 </CCol>
               </CFormGroup>
+              <CFormGroup row>
+                <CCol md="3">
+                  <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}
+                </CCol>
+              </CFormGroup>
               <CCollapse show={collapse}>
                 <CFormGroup row>
                   <CCol md="3">

src/components/DeviceListTable/index.js

@@ -213,13 +213,7 @@ const DeviceListDisplay = ({
     if (cert === 'NO_CERTIFICATE') {
       return (
         <div className={styles.certificateWrapper}>
-          <CIcon
-            className={styles.badge} 
-            name="cil-badge" 
-            content={cilBadge} 
-            size="2xl" 
-            alt="AP" 
-          />
+          <CIcon className={styles.badge} name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
           <CIcon
             className={styles.badCertificate}
             name="cil-ban"

src/components/LanguageSwitcher/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  CSelect
-} from '@coreui/react';
+import { CSelect } from '@coreui/react';
 
 const LanguageSwitcher = () => {
   const { i18n } = useTranslation();
 
   return (
-    <CSelect custom defaultValue={i18n.language.split("-")[0]} onChange={(e) => i18n.changeLanguage(e.target.value)}>
+    <CSelect
+      custom
+      defaultValue={i18n.language.split('-')[0]}
+      onChange={(e) => i18n.changeLanguage(e.target.value)}
+    >
       <option value="de">Deutsche</option>
       <option value="es">Español</option>
       <option value="en">English</option>

src/components/RebootModal/index.js

@@ -115,7 +115,12 @@ const ActionModal = ({ show, toggleModal }) => {
               <CCol>
                 <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
                   {waiting && doingNow ? t('common.loading_ellipsis') : t('common.do_now')}
-                  <CSpinner color="light" hidden={!waiting || !doingNow} component="span" size="sm" />
+                  <CSpinner
+                    color="light"
+                    hidden={!waiting || !doingNow}
+                    component="span"
+                    size="sm"
+                  />
                 </CButton>
               </CCol>
               <CCol>

src/layout/Footer/index.js

@@ -6,7 +6,7 @@ const TheFooter = () => (
   <Translation>
     {(t) => (
       <CFooter fixed={false}>
-        <div>{t('footer.version')} 0.1.5</div>
+        <div>{t('footer.version')} 1.0.0</div>
         <div className="mfs-auto">
           <span className="mr-1">{t('footer.powered_by')}</span>
           <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">

src/pages/LoginPage/index.js

@@ -187,7 +187,7 @@ const Login = () => {
                       </CCol>
                       <CCol xs="6">
                         <div className={styles.languageSwitcher}>
-                          <LanguageSwitcher/>
+                          <LanguageSwitcher />
                         </div>
                       </CCol>
                     </CRow>