Add copy secret button

ui/src/application/Applications.tsx

@@ -13,7 +13,7 @@ import React, {ChangeEvent, Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
 import Button from '@material-ui/core/Button';
-import ToggleVisibility from '../common/ToggleVisibility';
+import CopyableSecret from '../common/CopyableSecret';
 import AddApplicationDialog from './AddApplicationDialog';
 import {observer} from 'mobx-react';
 import {observable} from 'mobx';
@@ -166,7 +166,7 @@ const Row: SFC<IRowProps> = observer(
             </TableCell>
             <TableCell>{name}</TableCell>
             <TableCell>
-                <ToggleVisibility value={value} style={{display: 'flex', alignItems: 'center'}} />
+                <CopyableSecret value={value} style={{display: 'flex', alignItems: 'center'}} />
             </TableCell>
             <TableCell>{description}</TableCell>
             <TableCell align="right" padding="none">

ui/src/client/Clients.tsx

@@ -12,13 +12,13 @@ import React, {Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
 import Button from '@material-ui/core/Button';
-import ToggleVisibility from '../common/ToggleVisibility';
 import AddClientDialog from './AddClientDialog';
 import UpdateDialog from './UpdateClientDialog';
 import {observer} from 'mobx-react';
 import {observable} from 'mobx';
 import {inject, Stores} from '../inject';
 import {IClient} from '../types';
+import CopyableSecret from '../common/CopyableSecret';
 
 @observer
 class Clients extends Component<Stores<'clientStore'>> {
@@ -114,7 +114,7 @@ const Row: SFC<IRowProps> = ({name, value, fEdit, fDelete}) => (
     <TableRow>
         <TableCell>{name}</TableCell>
         <TableCell>
-            <ToggleVisibility
+            <CopyableSecret
                 value={value}
                 style={{display: 'flex', alignItems: 'center', width: 200}}
             />

ui/src/common/CopyableSecret.tsx

@@ -1,8 +1,10 @@
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import Visibility from '@material-ui/icons/Visibility';
+import Copy from '@material-ui/icons/FileCopyOutlined';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import React, {Component, CSSProperties} from 'react';
+import {Stores, inject} from '../inject';
 
 interface IProps {
     value: string;
@@ -13,7 +15,7 @@ interface IState {
     visible: boolean;
 }
 
-class ToggleVisibility extends Component<IProps, IState> {
+class CopyableSecret extends Component<IProps & Stores<'snackManager'>, IState> {
     public state = {visible: false};
 
     public render() {
@@ -21,6 +23,9 @@ class ToggleVisibility extends Component<IProps, IState> {
         const text = this.state.visible ? value : '•••••••••••••••';
         return (
             <div style={style}>
+                <IconButton onClick={this.copyToClipboard} title="Copy to clipboard">
+                    <Copy />
+                </IconButton>
                 <IconButton onClick={this.toggleVisibility} className="toggle-visibility">
                     {this.state.visible ? <VisibilityOff /> : <Visibility />}
                 </IconButton>
@@ -30,6 +35,16 @@ class ToggleVisibility extends Component<IProps, IState> {
     }
 
     private toggleVisibility = () => this.setState({visible: !this.state.visible});
+    private copyToClipboard = async () => {
+        const {snackManager, value} = this.props;
+        try {
+            await navigator.clipboard.writeText(value);
+            snackManager.snack('Copied to clipboard');
+        } catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+            snackManager.snack('Failed to copy to clipboard');
+        }
+    };
 }
 
-export default ToggleVisibility;
+export default inject('snackManager')(CopyableSecret);

ui/src/plugin/Plugins.tsx

@@ -10,7 +10,7 @@ import TableRow from '@material-ui/core/TableRow';
 import Settings from '@material-ui/icons/Settings';
 import {Switch, Button} from '@material-ui/core';
 import DefaultPage from '../common/DefaultPage';
-import ToggleVisibility from '../common/ToggleVisibility';
+import CopyableSecret from '../common/CopyableSecret';
 import {observer} from 'mobx-react';
 import {inject, Stores} from '../inject';
 import {IPlugin} from '../types';
@@ -84,7 +84,7 @@ const Row: SFC<IRowProps> = observer(({name, id, token, enabled, fToggleStatus})
         </TableCell>
         <TableCell>{name}</TableCell>
         <TableCell>
-            <ToggleVisibility value={token} style={{display: 'flex', alignItems: 'center'}} />
+            <CopyableSecret value={token} style={{display: 'flex', alignItems: 'center'}} />
         </TableCell>
         <TableCell align="right" padding="none">
             <Link to={'/plugins/' + id}>