Skip to content

Generate, reveal and copy endpoint API keys in the endpoint dialog #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adospace merged 1 commit into from
Oct 21, 2026
Merged

Generate, reveal and copy endpoint API keys in the endpoint dialog #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Server/wwwroot/app.css
View file
Open in desktop

Large diffs are not rendered by default.

54 changes: 51 additions & 3 deletions src/WebClient/Pages/DataStores/EditDataStore.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@layout DashboardLayout
@rendermode InteractiveWebAssembly
@using Microsoft.AspNetCore.Authorization
@using System.Security.Cryptography
@using System.Text.Json

<PageTitle>Edit Data Store</PageTitle>
Expand Down Expand Up @@ -664,9 +665,28 @@ else
else if (_endpointAuthType == 1)
{
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
<input type="password" @bind="_endpointAuthApiKey" placeholder="API Key"
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-dusk-blue-500 focus:border-dusk-blue-500 outline-none transition-colors" />
<div class="flex items-center justify-between mb-1">
<label class="block text-sm font-medium text-gray-700">API Key</label>
<button type="button" @onclick="GenerateEndpointApiKey"
class="text-xs font-medium text-dusk-blue-600 hover:text-dusk-blue-700 flex items-center gap-1">
<span class="i-lucide-refresh-cw size-3"></span>
Generate new key
</button>
</div>
<div class="flex items-center gap-2">
<input type="@(_showEndpointApiKey ? "text" : "password")" @bind="_endpointAuthApiKey" placeholder="API Key"
class="flex-1 min-w-0 px-4 py-2.5 border border-gray-300 rounded-lg font-mono text-sm focus:ring-2 focus:ring-dusk-blue-500 focus:border-dusk-blue-500 outline-none transition-colors" />
<button type="button" @onclick="() => _showEndpointApiKey = !_showEndpointApiKey"
class="p-2 rounded-lg text-gray-500 hover:text-dusk-blue-500 hover:bg-gray-100 transition-colors"
title="@(_showEndpointApiKey ? "Hide" : "Show")">
<span class="@(_showEndpointApiKey ? "i-lucide-eye-off size-4" : "i-lucide-eye size-4")"></span>
</button>
<button type="button" @onclick="CopyEndpointApiKey" disabled="@string.IsNullOrEmpty(_endpointAuthApiKey)"
class="p-2 rounded-lg text-gray-500 hover:text-dusk-blue-500 hover:bg-gray-100 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
title="Copy to clipboard">
<span class="@(_endpointApiKeyCopied ? "i-lucide-check size-4 text-green-500" : "i-lucide-copy size-4")"></span>
</button>
</div>
</div>
}
else if (_endpointAuthType == 2)
Expand Down Expand Up @@ -976,6 +996,8 @@ else
private string _endpointAuthUsername = "";
private string _endpointAuthPassword = "";
private string _endpointAuthApiKey = "";
private bool _showEndpointApiKey;
private bool _endpointApiKeyCopied;
private string _endpointAuthJwksEndpoint = "";
private string _endpointAuthIssuer = "";
private string _endpointAuthUserIdClaim = "sub";
Expand Down Expand Up @@ -1352,6 +1374,30 @@ else
StateHasChanged();
}

private void GenerateEndpointApiKey()
{
var bytes = RandomNumberGenerator.GetBytes(32);
_endpointAuthApiKey = Convert.ToBase64String(bytes)
.Replace('+', '-')
.Replace('/', '_')
.TrimEnd('=');
_showEndpointApiKey = true;
}

private async Task CopyEndpointApiKey()
{
if (string.IsNullOrEmpty(_endpointAuthApiKey))
return;

_clipboardModule ??= await JS.InvokeAsync<IJSObjectReference>("import", "./js/clipboard.js");
await _clipboardModule.InvokeVoidAsync("copyText", _endpointAuthApiKey);
_endpointApiKeyCopied = true;
StateHasChanged();
await Task.Delay(1500);
_endpointApiKeyCopied = false;
StateHasChanged();
}

private async Task ToggleEndpointPublished(EndpointListDto endpoint)
{
_endpointErrorMessages = [];
Expand Down Expand Up @@ -1426,6 +1472,8 @@ else
_endpointAuthUsername = "";
_endpointAuthPassword = "";
_endpointAuthApiKey = "";
_showEndpointApiKey = false;
_endpointApiKeyCopied = false;
_endpointAuthJwksEndpoint = "";
_endpointAuthIssuer = "";
_endpointAuthUserIdClaim = "sub";
Expand Down
Loading