Show device info in device tab

src/components/device/deviceData.jsx

@@ -29,9 +29,10 @@ import { Scrollbars } from 'react-custom-scrollbars';
 import { makeStyles } from '@mui/styles';
 import GoogleMapReact from 'google-map-react';
 import axios from "axios"
-
 import {context as SnackbarContext} from "./../../context/toast"
 
+
+
 const useStyles = makeStyles({
   controlsButton: {
     margin: "0 3px"
@@ -48,6 +49,7 @@ function DeviceControls() {
 
 
 
+
   async function refreshDongleStatus() {
   }
 

src/components/device/tabPane/console.jsx

@@ -10,9 +10,10 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-import { JsonFormatter } from 'react-json-formatter'
+//import { JsonFormatter } from 'react-json-formatter'
 import { context as DeviceContext } from "./../../../context/devices"
 
+
 const JsonStyle = {
   propertyStyle: { color: 'red' },
   stringStyle: { color: 'green' },
@@ -59,7 +60,7 @@ function RichContent(props) {
           <Typography>{`${content} - ${key}`} </Typography>
         </AccordionSummary>
         <AccordionDetails>
-          <JsonFormatter json={JSON.stringify(localStorage.getItem(`ATH-${key}`))} tabWith='4' JsonStyle={JsonStyle} />
+          {/*<JsonFormatter json={JSON.stringify(localStorage.getItem(`ATH-${key}`))} tabWith='4' JsonStyle={JsonStyle} />*/}
         </AccordionDetails>
       </Accordion>
     )

src/components/device/tabPane/device.jsx

@@ -27,6 +27,8 @@ import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import {context as SnackbarContext} from "./../../../context/toast"
+
 
 const theme = createTheme();
 function formatDate(timestampMs) {
@@ -35,11 +37,34 @@ function formatDate(timestampMs) {
 
 
 
+
+
+
 export default function SignIn(props) {
 
   const [value, setValue] = React.useState(0);
   const [state, dispatch] = useContext(DeviceContext)
 
+  const [ notifState, notifdispatch ] = useContext(SnackbarContext)
+
+
+  function pubKeyClipboard(newClip) {
+    navigator.clipboard.writeText(newClip).then(function() {
+      notifdispatch({
+        type: "NEW_TOAST",
+        open: true,
+        msg: "Successfully copied to clipboard!"
+      })
+    }, function() {
+      notifdispatch({
+        type: "NEW_TOAST",
+        open: true,
+        msg: "Failed to write to clipboard!"
+      })
+    });
+  }
+  
+
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
@@ -55,24 +80,23 @@ export default function SignIn(props) {
       <Grid container>
         <Grid item xs={3}>
 
-          <div style={{ padding: '5px' }}>
+          <div >
 
-            <h3>Device {dongle.dongle_id} </h3>
-            <b>Type:</b> {dongle.device_type}<br></br>
+          <b>Nickname:</b> {dongle.nick_name ? dongle.nick_name : `My ${dongle.device_type}`}<br></br>
+          <b>Type:</b> {dongle.device_type}<br></br>
             <b>Serial:</b> {dongle.serial}<br></br>
             <b>IMEI:</b> {dongle.imei}<br></br>
             <b>Registered:</b> {formatDate(dongle.created)}<br></br>
             <b>Last Ping:</b> {formatDate(dongle.last_ping)}<br></br>
             <b>Public Key:</b> -----BEGIN PUBLIC KEY-----
             <Tooltip title="Copy public key">
-              <IconButton  onClick={() => console.log("click")}>
+              <IconButton  onClick={() => pubKeyClipboard(dongle.public_key)}>
                 <ContentCopyIcon  />
               </IconButton>
             </Tooltip>
             <br></br>
 
 
-            <b>Stored Drives: </b> ` + drives.length + `<br></br>
             <b>Quota Storage: </b>{dongle.storage_used} MB / 200000 MB
 
  

src/components/widgets/globalSnack.jsx

@@ -26,6 +26,7 @@ export default function Toast(props) {
       autoHideDuration={6000}
       onClose={handleClose}
       message={state.msg}
+      severity="success" 
     />
   );
 }