From 3b426471b34a793d8140313a4f2fd5eb94796c1a Mon Sep 17 00:00:00 2001
From: Orne Brocaar <info@brocaar.com>
Date: Tue, 7 Jun 2022 11:25:06 +0100
Subject: [PATCH] Re-implement copy to clipboard (DevAddr, EUI and AES keys).

---
 ui/src/components/AesKeyInput.tsx  | 60 ++++++++++++++++++++++++++++-
 ui/src/components/DevAddrInput.tsx | 62 +++++++++++++++++++++++++++++-
 ui/src/components/EuiInput.tsx     | 62 ++++++++++++++++++++++++++++--
 3 files changed, 177 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/AesKeyInput.tsx b/ui/src/components/AesKeyInput.tsx
index 2f164603..59cdf1e5 100644
--- a/ui/src/components/AesKeyInput.tsx
+++ b/ui/src/components/AesKeyInput.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
-import { Input, Select, Button, Space, Form } from "antd";
-import { ReloadOutlined } from "@ant-design/icons";
+import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
+import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
 import {Buffer} from "buffer";
 
 interface IProps {
@@ -104,7 +104,58 @@ class AesKeyInput extends Component<IProps, IState> {
     );
   };
 
+  copyToClipboard = () => {
+    const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
+
+    if (bytes !== null && navigator.clipboard !== undefined) {
+        navigator.clipboard.writeText(bytes.join("").toUpperCase())
+        .then(() => {
+          notification.success({
+            message: "Copied to clipboard",
+            duration: 3,
+          });
+        }).catch((e) => {
+          notification.error({
+            message: "Error",
+            description: e,
+            duration: 3,
+          });
+        });
+    }
+  }
+
+  copyToClipboardHexArray = () => {
+    const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
+
+    if (bytes !== null && navigator.clipboard !== undefined) {
+        navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
+        .then(() => {
+          notification.success({
+            message: "Copied to clipboard",
+            duration: 3,
+          });
+        }).catch((e) => {
+          notification.error({
+            message: "Error",
+            description: e,
+            duration: 3,
+          });
+        });
+    }
+  }
+
   render() {
+    const copyMenu = <Menu items={[
+      {
+        key: "1",
+        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+      },
+      {
+        key: "2",
+        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+      },
+    ]} />;
+
     const addon = (
       <Space size="large">
         <Select value={this.state.byteOrder} onChange={this.onByteOrderSelect}>
@@ -114,6 +165,11 @@ class AesKeyInput extends Component<IProps, IState> {
         <Button type="text" size="small" shape="circle" onClick={this.generateRandom}>
           <ReloadOutlined />
         </Button>
+        <Dropdown overlay={copyMenu}>
+          <Button type="text" size="small">
+            <CopyOutlined />
+          </Button>
+        </Dropdown>
       </Space>
     );
 
diff --git a/ui/src/components/DevAddrInput.tsx b/ui/src/components/DevAddrInput.tsx
index 9ccea74f..e8e75934 100644
--- a/ui/src/components/DevAddrInput.tsx
+++ b/ui/src/components/DevAddrInput.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
-import { Input, Select, Button, Space, Form } from "antd";
-import { ReloadOutlined } from "@ant-design/icons";
+import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
+import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
 
 import { GetRandomDevAddrRequest, GetRandomDevAddrResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
 
@@ -107,7 +107,60 @@ class DevAddrInput extends Component<IProps, IState> {
     });
   };
 
+
+  copyToClipboard = () => {
+    const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
+
+    if (bytes !== null && navigator.clipboard !== undefined) {
+        navigator.clipboard.writeText(bytes.join("").toUpperCase())
+        .then(() => {
+          notification.success({
+            message: "Copied to clipboard",
+            duration: 3,
+          });
+        }).catch((e) => {
+          notification.error({
+            message: "Error",
+            description: e,
+            duration: 3,
+          });
+        });
+    }
+  }
+
+  copyToClipboardHexArray = () => {
+    const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
+
+    if (bytes !== null && navigator.clipboard !== undefined) {
+        navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
+        .then(() => {
+          notification.success({
+            message: "Copied to clipboard",
+            duration: 3,
+          });
+        }).catch((e) => {
+          notification.error({
+            message: "Error",
+            description: e,
+            duration: 3,
+          });
+        });
+    }
+  }
+
+
   render() {
+    const copyMenu = <Menu items={[
+      {
+        key: "1",
+        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+      },
+      {
+        key: "2",
+        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+      },
+    ]} />;
+
     const addon = (
       <Space size="large">
         <Select value={this.state.byteOrder} onChange={this.onByteOrderSelect}>
@@ -117,6 +170,11 @@ class DevAddrInput extends Component<IProps, IState> {
         <Button type="text" size="small" shape="circle" onClick={this.generateRandom}>
           <ReloadOutlined />
         </Button>
+        <Dropdown overlay={copyMenu}>
+          <Button type="text" size="small">
+            <CopyOutlined />
+          </Button>
+        </Dropdown>
       </Space>
     );
 
diff --git a/ui/src/components/EuiInput.tsx b/ui/src/components/EuiInput.tsx
index 0bc4db0e..0990ecc7 100644
--- a/ui/src/components/EuiInput.tsx
+++ b/ui/src/components/EuiInput.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
-import { Input, Select, Button, Space, Form } from "antd";
-import { ReloadOutlined } from "@ant-design/icons";
+import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
+import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
 import {Buffer} from "buffer";
 
 interface IProps {
@@ -103,16 +103,72 @@ class EuiInput extends Component<IProps, IState> {
     );
   };
 
+  copyToClipboard = () => {
+    const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
+
+    if (bytes !== null && navigator.clipboard !== undefined) {
+        navigator.clipboard.writeText(bytes.join("").toUpperCase())
+        .then(() => {
+          notification.success({
+            message: "Copied to clipboard",
+            duration: 3,
+          });
+        }).catch((e) => {
+          notification.error({
+            message: "Error",
+            description: e,
+            duration: 3,
+          });
+        });
+    }
+  }
+
+  copyToClipboardHexArray = () => {
+    const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
+
+    if (bytes !== null && navigator.clipboard !== undefined) {
+        navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
+        .then(() => {
+          notification.success({
+            message: "Copied to clipboard",
+            duration: 3,
+          });
+        }).catch((e) => {
+          notification.error({
+            message: "Error",
+            description: e,
+            duration: 3,
+          });
+        });
+    }
+  }
+
   render() {
+    const copyMenu = <Menu items={[
+      {
+        key: "1",
+        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+      },
+      {
+        key: "2",
+        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+      },
+    ]} />;
+
     const addon = (
       <Space size="large">
         <Select value={this.state.byteOrder} onChange={this.onByteOrderSelect}>
           <Select.Option value="msb">MSB</Select.Option>
           <Select.Option value="lsb">LSB</Select.Option>
         </Select>
-        <Button type="text" size="small" shape="circle" onClick={this.generateRandom}>
+        <Button type="text" size="small" onClick={this.generateRandom}>
           <ReloadOutlined />
         </Button>
+        <Dropdown overlay={copyMenu}>
+          <Button type="text" size="small">
+            <CopyOutlined />
+          </Button>
+        </Dropdown>
       </Space>
     );