hide and show icons

public/locales/de/translation.json

@@ -25,7 +25,11 @@
       "edit": "Bearbeiten",
       "authorize": "Autorisieren",
       "deny": "Ablehnen",
-      "disconnect": "Verbindung trennen"
+      "disconnect": "Verbindung trennen",
+      "copiedToClipboard": "In die Zwischenablage kopiert",
+      "copyToClipboard": "In die Zwischenablage kopieren",
+      "show": "Anzeigen",
+      "hide": "Verbergen"
     }
   },
   "sideMenu": {
@@ -170,6 +174,7 @@
         "permitJoin": "Beitreten erlauben",
         "disableJoin": "Beitreten deaktivieren"
       },
+      "viewApiDoc": "Api-Dokumentation anschauen",
       "column": {
         "id": "ID",
         "type": "Typ",
@@ -381,9 +386,6 @@
           "title": "Name für den neuen API-Schlüssel",
           "okText": "Erstellen"
         }
-      },
-      "copyToClipboard": {
-        "notification": "API Token in die Zwischenablage kopiert"
       }
     },
     "icon": { "viewApiDoc": "Api-Dokumentation anschauen" }

public/locales/en/translation.json

@@ -25,7 +25,11 @@
       "edit": "Edit",
       "authorize": "Authorize",
       "deny": "Deny",
-      "disconnect": "Disconnect"
+      "disconnect": "Disconnect",
+      "copiedToClipboard": "Copied to clipboard",
+      "copyToClipboard": "Copy to clipboard",
+      "show": "Show",
+      "hide": "Hide"
     }
   },
   "sideMenu": {
@@ -170,6 +174,7 @@
         "permitJoin": "Permit Join",
         "disableJoin": "Disable Join"
       },
+      "viewApiDoc": "View API Documentation",
       "column": {
         "id": "ID",
         "type": "Type",
@@ -400,9 +405,6 @@
           "title": "Name for the new API key",
           "okText": "Create"
         }
-      },
-      "copyToClipboard": {
-        "notification": "API Token copied to clipboard"
       }
     },
     "icon": { "viewApiDoc": "View API Documentation" }

src/Components/MyIcon/index.js

@@ -0,0 +1,39 @@
+import {
+  CopyOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+} from "@ant-design/icons";
+import { Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
+
+export function MyCopyIcon({ text, notificationApi }) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={t("common.text.copyToClipboard")}>
+      <CopyOutlined
+        onClick={() => {
+          navigator.clipboard.writeText(text);
+
+          notificationApi["info"]({
+            message: t("common.text.copiedToClipboard"),
+          });
+        }}
+      />
+    </Tooltip>
+  );
+}
+
+export function MyShowHiddenIcon({ setIsHidden, isHidden }) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={isHidden ? t("common.text.hide") : t("common.text.show")}>
+      {isHidden ? (
+        <EyeInvisibleOutlined onClick={() => setIsHidden(false)} />
+      ) : (
+        <EyeOutlined onClick={() => setIsHidden(true)} />
+      )}
+    </Tooltip>
+  );
+}

src/Pages/Robotics/Robots/index.js

@@ -21,7 +21,14 @@ import {
 } from "../../../utils";
 import MyPagination from "../../../Components/MyPagination";
 import { Link } from "react-router-dom";
-import { FileTextOutlined, KeyOutlined } from "@ant-design/icons";
+import {
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  FileTextOutlined,
+  LoadingOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
+import { MyCopyIcon, MyShowHiddenIcon } from "../../../Components/MyIcon";
 
 const ReceivedSSECommands = {
   UpdateRobotStatus: 1,
@@ -32,6 +39,7 @@ const ReceivedSSECommands = {
   RobotUpdated: 6,
   UpdateRobotCurrentJob: 7,
   UpdateRobotJobsWaitingCount: 8,
+  PermitJoinUpdated: 9,
 };
 
 function getRobotTypeString(type) {
@@ -58,6 +66,7 @@ export default function Robots() {
   ] = useState(1);
   const [selectedRobotName, setSelectedRobotName] = useState("");
   const [permitJoinEnabled, setPermitJoinEnabled] = useState(false);
+  const [showAddress, setShowAddress] = useState(false);
 
   const sseEventSource = useRef(null);
 
@@ -152,6 +161,18 @@ export default function Robots() {
         title: t("robotics.robots.column.address"),
         dataIndex: "address",
         key: "address",
+        render: (text) => (
+          <Space>
+            {showAddress ? text : "XXXXXX"}
+
+            <MyShowHiddenIcon
+              isHidden={showAddress}
+              setIsHidden={setShowAddress}
+            />
+
+            <MyCopyIcon notificationApi={notificationApi} text={text} />
+          </Space>
+        ),
       },
       {
         title: t("robotics.robots.column.connectedAt"),
@@ -412,6 +433,15 @@ export default function Robots() {
 
     fetchRobots(1);
 
+    myFetch(
+      "/permitjoin",
+      "GET",
+      null,
+      {},
+      myFetchContentType.JSON,
+      Constants.ROBOTICS_API_ADDRESS
+    ).then((data) => setPermitJoinEnabled(data.Enabled));
+
     sseEventSource.current = new EventSource(
       `${Constants.ROBOTICS_API_ADDRESS}/sse`
     );
@@ -548,6 +578,9 @@ export default function Robots() {
             return newArr;
           });
           break;
+        case ReceivedSSECommands.PermitJoinUpdated:
+          setPermitJoinEnabled(body);
+          break;
         default:
           break;
       }
@@ -574,15 +607,30 @@ export default function Robots() {
       >
         <Typography.Title level={4}>
           {t("robotics.robots.header")} ({robotsContext.robots.length}){" "}
-          <Tooltip title={t("userProfile.icon.viewApiDoc")}>
+          <Tooltip title={t("robotics.robots.viewApiDoc")}>
             <Link target="_blank" to={Constants.ROBOTICS_SWAGGER_ADDRESS}>
               <FileTextOutlined style={{ fontSize: 16 }} />
             </Link>
           </Tooltip>
         </Typography.Title>
 
-        <Button icon={<KeyOutlined />}>
-          {t("userProfile.button.createApiKey.title")}
+        <Button
+          onClick={() => {
+            console.log("click");
+            myFetch(
+              `/permitjoin/${permitJoinEnabled ? 0 : 1}`,
+              "POST",
+              null,
+              {},
+              myFetchContentType.JSON,
+              Constants.ROBOTICS_API_ADDRESS
+            );
+          }}
+          icon={permitJoinEnabled ? <LoadingOutlined /> : <PlusOutlined />}
+        >
+          {!permitJoinEnabled
+            ? t("robotics.robots.button.permitJoin")
+            : t("robotics.robots.button.disableJoin")}
         </Button>
       </div>
 
@@ -599,23 +647,31 @@ export default function Robots() {
         totalPages={robotsContext.robotsTotalPages}
       />
 
-      <Typography.Title level={4}>
-        {t("robotics.unauthorizedRobots.header")} (
-        {robotsContext.unauthorizedRobots.length})
-      </Typography.Title>
+      {robotsContext.unauthorizedRobots.length > 0 && (
+        <>
+          <Typography.Title level={4}>
+            {t("robotics.unauthorizedRobots.header")} (
+            {robotsContext.unauthorizedRobots.length})
+          </Typography.Title>
 
-      <Table
-        scroll={{ x: "max-content" }}
-        columns={getUnauthorizedTableContent()}
-        dataSource={getUnauthorizedTableItems(robotsContext.unauthorizedRobots)}
-        pagination={false}
-      />
+          <Table
+            scroll={{ x: "max-content" }}
+            columns={getUnauthorizedTableContent()}
+            dataSource={getUnauthorizedTableItems(
+              robotsContext.unauthorizedRobots
+            )}
+            pagination={false}
+          />
 
-      <MyPagination
-        paginationPage={unauthorizedRobotsPaginationPage}
-        setPaginationPage={(page) => setUnauthorizedRobotsPaginationPage(page)}
-        totalPages={robotsContext.unauthorizedRobotsTotalPages}
-      />
+          <MyPagination
+            paginationPage={unauthorizedRobotsPaginationPage}
+            setPaginationPage={(page) =>
+              setUnauthorizedRobotsPaginationPage(page)
+            }
+            totalPages={robotsContext.unauthorizedRobotsTotalPages}
+          />
+        </>
+      )}
     </>
   );
 }

src/Pages/UserProfile/index.js

@@ -40,6 +40,7 @@ import { useWebSocketContext } from "../../Contexts/WebSocketContext";
 import { useAppContext } from "../../Contexts/AppContext";
 import { useSideBarContext } from "../../Contexts/SideBarContext";
 import { SentMessagesCommands } from "../../Handlers/WebSocketMessageHandler";
+import { MyCopyIcon, MyShowHiddenIcon } from "../../Components/MyIcon";
 
 export default function UserProfile() {
   const webSocketContext = useWebSocketContext();
@@ -114,27 +115,13 @@ export default function UserProfile() {
         render: (text) => (
           <Space>
             {showApiKeyPassword ? text : "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"}
-            {showApiKeyPassword ? (
-              <EyeInvisibleOutlined
-                onClick={() => setShowApiKeyPassword(false)}
-              />
-            ) : (
-              <EyeOutlined onClick={() => setShowApiKeyPassword(true)} />
-            )}
-            {showApiKeyPassword && (
-              <CopyOutlined
-                onClick={() => {
-                  navigator.clipboard.writeText(text);
-                  setShowApiKeyPassword(false);
 
-                  notificationApi["info"]({
-                    message: t(
-                      "userProfile.button.copyToClipboard.notification"
-                    ),
-                  });
-                }}
-              />
-            )}
+            <MyShowHiddenIcon
+              isHidden={showApiKeyPassword}
+              setIsHidden={setShowApiKeyPassword}
+            />
+
+            <MyCopyIcon text={text} notificationApi={notificationApi} />
           </Space>
         ),
       },