From 8cfd827814ce2f3e4e4a883a8cad1cd832c44693 Mon Sep 17 00:00:00 2001
From: Zlendy <argutierrezg11@gmail.com>
Date: Wed, 26 Apr 2023 23:01:35 +0200
Subject: [PATCH] Add copy secret button

---
 ui/src/application/Applications.tsx           |  4 ++--
 ui/src/client/Clients.tsx                     |  4 ++--
 ...oggleVisibility.tsx => CopyableSecret.tsx} | 19 +++++++++++++++++--
 ui/src/plugin/Plugins.tsx                     |  4 ++--
 4 files changed, 23 insertions(+), 8 deletions(-)
 rename ui/src/common/{ToggleVisibility.tsx => CopyableSecret.tsx} (58%)

diff --git a/ui/src/application/Applications.tsx b/ui/src/application/Applications.tsx
index 9065d181..0718b306 100644
--- a/ui/src/application/Applications.tsx
+++ b/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">
diff --git a/ui/src/client/Clients.tsx b/ui/src/client/Clients.tsx
index 67154eee..7f2b4f83 100644
--- a/ui/src/client/Clients.tsx
+++ b/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}}
             />
diff --git a/ui/src/common/ToggleVisibility.tsx b/ui/src/common/CopyableSecret.tsx
similarity index 58%
rename from ui/src/common/ToggleVisibility.tsx
rename to ui/src/common/CopyableSecret.tsx
index 105fb40a..6922614e 100644
--- a/ui/src/common/ToggleVisibility.tsx
+++ b/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);
diff --git a/ui/src/plugin/Plugins.tsx b/ui/src/plugin/Plugins.tsx
index 0c05cd19..ce726f71 100644
--- a/ui/src/plugin/Plugins.tsx
+++ b/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}>