ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-03-22 03:55:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Re-implement copy to clipboard (DevAddr, EUI and AES keys).

Browse Source
This commit is contained in:
Orne Brocaar 2022-06-07 11:25:06 +01:00
parent 2e1c907df0
commit 3b426471b3
3 changed files with 177 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
ui/src/components/AesKeyInput.tsx
View File

@ -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>
);

62
ui/src/components/DevAddrInput.tsx
View File

@ -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>
);

62
ui/src/components/EuiInput.tsx
View File

@ -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>
);