Skip to content

[FEAT] Enhancement: Implement a "Copy to Clipboard" utility button for Scan Results / Logs #423

@DeepeshKafalatiya

Description

@DeepeshKafalatiya

##Summary

This feature adds a "Copy to Clipboard" utility button next to the generated scan results and logs inside the SecuScan interface. It allows users to quickly copy vulnerability reports or configuration strings with a single click, accompanied by a temporary visual "Copied!" confirmation.

##Problem

Currently, users have to manually highlight and select long strings of scan data or logs to share them or paste them into local terminals. This introduces UX friction, especially on mobile screens or when dealing with multi-line JSON structures and complex logs, where manual text selection is prone to missing characters.

##Proposed solution

Introduce a reusable clipboard action button positioned in the corner of the scan output components.

The button will utilize the modern web browser navigator.clipboard.writeText() API.

Upon clicking, the button icon should transition temporarily (e.g., for 1.5 to 2 seconds) to a green checkmark or display a small fluid tooltip saying "Copied!" to provide instant visual feedback before reverting to its original state.

##Suggested scope

If you already know the likely implementation area, mention it here:

##Suggested files or directories:

Check directories under src/components/ handling the layout for the results display (e.g., look for components rendering log panels, dashboard widgets, or JSON output).

Related route, page, component, API, or plugin: Scan results dashboard / log viewer component view.

##Acceptance criteria

List the minimum requirements for this feature to be considered done:

[ ] A functional copy button is cleanly aligned in the top-right corner or relevant action bar of the scan results panel.

[ ] Clicking the button accurately copies the exact plain text content of the visible log/result to the user's system clipboard without trailing spaces.

[ ] A clear, temporary visual feedback state (icon change or tooltip text) triggers upon successful copy and auto-hides after a brief delay.

[ ] The feature degrades gracefully or handles exceptions safely if the browser does not support clipboard permissions.

##Test plan

Explain how a contributor or maintainer can verify the feature works.

Boot up the local development environment using npm run dev.

Generate a sample scan or navigate to a view that displays logs/results.

Click the new "Copy" button and verify that the UI updates instantly to show a success confirmation.

Open an external text editor and press Ctrl+V (or Cmd+V) to confirm that the copied text matches the source text exactly.

##Alternatives considered

Selecting text manually: Rejected because it degrades the user experience for developers who frequently transfer logs into terminal command-line tools.

Using a third-party copy-to-clipboard library: Rejected to keep the bundle footprint small and lightweight, as native browser APIs handle this cleanly.

##Additional context

I would love to work on this enhancement to make the dashboard analysis more developer-friendly! Please assign this issue to me under GSSoC 2026.

Metadata

Metadata

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions