sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-30 03:06:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add support for translations (#349)

Browse Source 
Co-authored-by: Kyle Mendell <kmendell@outlook.com>
Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
Jonas Claes
2025-03-20 19:57:41 +01:00
committed by GitHub
parent 041c565dc1
commit 269b5a3c92
83 changed files with 1567 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/routes/settings/admin/api-keys/+page.svelte
View File

@@ -9,6 +9,7 @@
import ApiKeyDialog from './api-key-dialog.svelte';
import ApiKeyForm from './api-key-form.svelte';
import ApiKeyList from './api-key-list.svelte';
import { m } from '$lib/paraglide/messages';
let { data } = $props();
let apiKeys = $state(data.apiKeys);
@@ -35,18 +36,18 @@
</script>
<svelte:head>
<title>API Keys</title>
<title>{m.api_keys()}</title>
</svelte:head>
<Card.Root>
<Card.Header>
<div class="flex items-center justify-between">
<div>
<Card.Title>Create API Key</Card.Title>
<Card.Description>Add a new API key for programmatic access.</Card.Description>
<Card.Title>{m.create_api_key()}</Card.Title>
<Card.Description>{m.add_a_new_api_key_for_programmatic_access()}</Card.Description>
</div>
{#if !expandAddApiKey}
<Button on:click={() => (expandAddApiKey = true)}>Add API Key</Button>
<Button on:click={() => (expandAddApiKey = true)}>{m.add_api_key()}</Button>
{:else}
<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddApiKey = false)}>
<LucideMinus class="h-5 w-5" />
@@ -65,7 +66,7 @@
<Card.Root class="mt-6">
<Card.Header>
<Card.Title>Manage API Keys</Card.Title>
<Card.Title>{m.manage_api_keys()}</Card.Title>
</Card.Header>
<Card.Content>
<ApiKeyList {apiKeys} requestOptions={apiKeysRequestOptions} />

13
frontend/src/routes/settings/admin/api-keys/api-key-dialog.svelte
View File

@@ -2,6 +2,7 @@
import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
import { Button } from '$lib/components/ui/button';
import * as Dialog from '$lib/components/ui/dialog';
import { m } from '$lib/paraglide/messages';
import type { ApiKeyResponse } from '$lib/types/api-key.type';
let {
@@ -20,22 +21,22 @@
<Dialog.Root open={!!apiKeyResponse} {onOpenChange}>
<Dialog.Content class="max-w-md" closeButton={false}>
<Dialog.Header>
<Dialog.Title>API Key Created</Dialog.Title>
<Dialog.Title>{m.api_key_created()}</Dialog.Title>
<Dialog.Description>
For security reasons, this key will only be shown once. Please store it securely.
{m.for_security_reasons_this_key_will_only_be_shown_once()}
</Dialog.Description>
</Dialog.Header>
{#if apiKeyResponse}
<div>
<div class="mb-2 font-medium">Name</div>
<div class="mb-2 font-medium">{m.name()}</div>
<p class="text-muted-foreground">{apiKeyResponse.apiKey.name}</p>
{#if apiKeyResponse.apiKey.description}
<div class="mb-2 mt-4 font-medium">Description</div>
<div class="mb-2 mt-4 font-medium">{m.description()}</div>
<p class="text-muted-foreground">{apiKeyResponse.apiKey.description}</p>
{/if}
<div class="mb-2 mt-4 font-medium">API Key</div>
<div class="mb-2 mt-4 font-medium">{m.api_key()}</div>
<div class="bg-muted rounded-md p-2">
<CopyToClipboard value={apiKeyResponse.token}>
<span class="break-all font-mono text-sm">{apiKeyResponse.token}</span>
@@ -44,7 +45,7 @@
</div>
{/if}
<Dialog.Footer class="mt-3">
<Button variant="default" on:click={() => onOpenChange(false)}>Close</Button>
<Button variant="default" on:click={() => onOpenChange(false)}>{m.close()}</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>

21
frontend/src/routes/settings/admin/api-keys/api-key-form.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import FormInput from '$lib/components/form/form-input.svelte';
import { Button } from '$lib/components/ui/button';
import { m } from '$lib/paraglide/messages';
import type { ApiKeyCreate } from '$lib/types/api-key.type';
import { createForm } from '$lib/utils/form-util';
import { z } from 'zod';
@@ -26,10 +27,10 @@
const formSchema = z.object({
name: z
.string()
.min(3, 'Name must be at least 3 characters')
.max(50, 'Name cannot exceed 50 characters'),
.min(3, m.name_must_be_at_least_3_characters())
.max(50, m.name_cannot_exceed_50_characters()),
description: z.string().default(''),
expiresAt: z.date().min(new Date(), 'Expiration date must be in the future')
expiresAt: z.date().min(new Date(), m.expiration_date_must_be_in_the_future())
});
const { inputs, ...form } = createForm<typeof formSchema>(formSchema, apiKey);
@@ -54,25 +55,25 @@
<form onsubmit={onSubmit}>
<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
<FormInput
label="Name"
label={m.name()}
bind:input={$inputs.name}
description="Name to identify this API key."
description={m.name_to_identify_this_api_key()}
/>
<FormInput
label="Expires At"
label={m.expires_at()}
type="date"
description="When this API key will expire."
description={m.when_this_api_key_will_expire()}
bind:input={$inputs.expiresAt}
/>
<div class="col-span-1 md:col-span-2">
<FormInput
label="Description"
description="Optional description to help identify this key's purpose."
label={m.description()}
description={m.optional_description_to_help_identify_this_keys_purpose()}
bind:input={$inputs.description}
/>
</div>
</div>
<div class="mt-5 flex justify-end">
<Button {isLoading} type="submit">Save</Button>
<Button {isLoading} type="submit">{m.save()}</Button>
</div>
</form>

23
frontend/src/routes/settings/admin/api-keys/api-key-list.svelte
View File

@@ -3,6 +3,7 @@
import { openConfirmDialog } from '$lib/components/confirm-dialog';
import { Button } from '$lib/components/ui/button';
import * as Table from '$lib/components/ui/table';
import { m } from '$lib/paraglide/messages';
import ApiKeyService from '$lib/services/api-key-service';
import type { ApiKey } from '$lib/types/api-key.type';
import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
@@ -21,22 +22,22 @@
const apiKeyService = new ApiKeyService();
function formatDate(dateStr: string | undefined) {
if (!dateStr) return 'Never';
if (!dateStr) return m.never();
return new Date(dateStr).toLocaleString();
}
function revokeApiKey(apiKey: ApiKey) {
openConfirmDialog({
title: 'Revoke API Key',
message: `Are you sure you want to revoke the API key "${apiKey.name}"? This will break any integrations using this key.`,
title: m.revoke_api_key(),
message: m.are_you_sure_you_want_to_revoke_the_api_key_apikeyname({ apiKeyName: apiKey.name }),
confirm: {
label: 'Revoke',
label: m.revoke(),
destructive: true,
action: async () => {
try {
await apiKeyService.revoke(apiKey.id);
apiKeys = await apiKeyService.list(requestOptions);
toast.success('API key revoked successfully');
toast.success(m.api_key_revoked_successfully());
} catch (e) {
axiosErrorToast(e);
}
@@ -52,11 +53,11 @@
onRefresh={async (o) => (apiKeys = await apiKeyService.list(o))}
withoutSearch
columns={[
{ label: 'Name', sortColumn: 'name' },
{ label: 'Description' },
{ label: 'Expires At', sortColumn: 'expiresAt' },
{ label: 'Last Used', sortColumn: 'lastUsedAt' },
{ label: 'Actions', hidden: true }
{ label: m.name(), sortColumn: 'name' },
{ label: m.description() },
{ label: m.expires_at(), sortColumn: 'expiresAt' },
{ label: m.last_used(), sortColumn: 'lastUsedAt' },
{ label: m.actions(), hidden: true }
]}
>
{#snippet rows({ item })}
@@ -65,7 +66,7 @@
<Table.Cell>{formatDate(item.expiresAt)}</Table.Cell>
<Table.Cell>{formatDate(item.lastUsedAt)}</Table.Cell>
<Table.Cell class="flex justify-end">
<Button on:click={() => revokeApiKey(item)} size="sm" variant="outline" aria-label="Revoke"
<Button on:click={() => revokeApiKey(item)} size="sm" variant="outline" aria-label={m.revoke()}
><LucideBan class="h-3 w-3 text-red-500" /></Button
>
</Table.Cell>