feat(ui): add copy-to-clipboard for Client ID and Secret fields#147
feat(ui): add copy-to-clipboard for Client ID and Secret fields#147
Conversation
- Add reusable CopyableValue templ component with inline copy button - Apply to all Client ID displays across admin and user pages - Add copy button for Client Secret on user app creation page - Use event delegation with icon swap feedback on copy - Support default and compact sizes for detail and table contexts Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Pull request overview
Adds a reusable UI component to display OAuth client identifiers (and user client secrets at creation time) with an inline copy-to-clipboard button, standardizing the interaction across admin and user pages.
Changes:
- Introduces
CopyableValuetempl component with default and compact variants. - Adds component-specific styling (
copyable-value.css) and wires it into the main CSS bundle. - Implements delegated JS handling (
initCopyableValues) to copy values and provide “copied” visual feedback, and applies the component across admin/user templates.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| internal/templates/copyable_value_component.templ | New reusable templ component rendering value + copy button/icons. |
| internal/templates/static/css/components/copyable-value.css | New styles for copyable value wrapper, button states, compact variant, dark mode, reduced motion. |
| internal/templates/static/css/main.css | Imports the new component stylesheet into the main bundle. |
| internal/templates/static/js/utils.js | Adds delegated click handler initialization for copyable value buttons and exports/initializes it. |
| internal/templates/admin_clients.templ | Uses CopyableValue compact variant for Client ID table rows. |
| internal/templates/admin_client_detail.templ | Uses CopyableValue default variant for Client ID detail display. |
| internal/templates/admin_client_created.templ | Uses CopyableValue default variant for Client ID on created page. |
| internal/templates/my_apps.templ | Uses CopyableValue compact variant for Client ID in user apps table rows. |
| internal/templates/user_app_detail.templ | Uses CopyableValue default variant for Client ID in user app detail. |
| internal/templates/user_app_created.templ | Uses CopyableValue for Client ID and adds copy support for Client Secret after creation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add min-width: 0 to flex text element for reliable ellipsis truncation - Add aria-hidden and focusable=false to decorative SVG icons - Add wrap variant for full-length secrets to prevent truncation - Make copyToClipboard return a Promise so icon feedback only shows on success Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Switch to templ.Classes() for consistent class composition - Guard e.target.closest() against non-Element targets in delegated handler Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Remove data-copy-value attribute to avoid duplicating secrets in DOM - Read value from sibling .copyable-value-text textContent instead - Use execCommand return value to detect copy failure in fallback path Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Set align-items: flex-start on wrap variant for multi-line secrets - Remove compact max-width at 768px breakpoint to match existing responsive behavior Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
CopyableValuetempl component with inline copy button and icon swap feedbackChanges
copyable_value_component.templ— reusable component withdata-copy-valueattributecopyable-value.css— styles with dark mode, reduced motion, compact variantutils.js—initCopyableValues()using event delegation for click-to-copyTest plan
/admin/clients— verify copy button on each Client ID in table/admin/clients/:id— verify copy button on Client ID in detail view/apps— verify copy button on each Client ID in table/apps/:id— verify copy button on Client ID in detail view🤖 Generated with Claude Code