Skip to content

Commit b03fca1

Browse files
jplachtjplacht
authored
Merge pull request #437 from PRUNplanner/improve-apikeys-localization
improve(i18n): apikeys localization
2 parents 7adf249 + 5bba627 commit b03fca1

2 files changed

Lines changed: 113 additions & 49 deletions

File tree

‎src/locales/en_US/api_keys.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"view_title": "API Keys",
3+
"title": "API Keys",
4+
"info": {
5+
"description": {
6+
"p1": "The {link} provides programmatic access to all your planning data, ingame metadata (buildings, recipes, materials) and calculated market metrics like VWAP. While public endpoints remain open for community use, access to private planning data - including your plan configurations - require secure authentication.",
7+
"p2": "By utilizing these endpoints, you can synchronize your planning operations with external spreadsheets, custom dashboards, or even optimization algorithms.",
8+
"link": "PRUNplanner REST API",
9+
"warning": "API keys grant full access to your account data and remain valid indefinitely. Treat these credentials as sensitive as your password. Never commit keys to public repositories or share them with unverified third-party services. If a key is compromised, revoke it immediately and generate a replacement."
10+
}
11+
},
12+
"manage": {
13+
"title": "PRUNplanner API Keys",
14+
"buttons": {
15+
"new_apikey": "Create New Key",
16+
"revoke_apikey": "Revoke"
17+
},
18+
"table": {
19+
"apikey_name": "Name",
20+
"apikey_prefix": "Prefix",
21+
"apikey_created": "Created",
22+
"apikey_lastused": "Last Used"
23+
}
24+
},
25+
"implementation": {
26+
"title": "Authorization Implementation",
27+
"link": "View REST API Reference →"
28+
},
29+
"create": {
30+
"title": "Create API Key",
31+
"form": {
32+
"key_name": "Key Name",
33+
"key_description": "Give your key a descriptive name to help you identify it later.",
34+
"success_title": "Key Generated Successfully",
35+
"success_key": "Your Secret Key (Save this Now!)",
36+
"success_note": "For security, we cannot show this key again. If you lose it, you must revoke and create a new one.",
37+
"error": "Error creating your API Key. Please try again later."
38+
},
39+
"buttons": {
40+
"create": "@:common.buttons.create",
41+
"cancel": "@:common.buttons.cancel",
42+
"saved": "I've saved my key"
43+
}
44+
}
45+
}

‎src/views/APIKeyView.vue‎

Lines changed: 68 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<script setup lang="ts">
22
import { computed, onMounted, ref } from "vue";
33
4-
import { useHead } from "@unhead/vue";
4+
import { useI18n } from "vue-i18n";
5+
const { t } = useI18n();
56
7+
// Unhead
8+
import { useHead } from "@unhead/vue";
69
useHead({
7-
title: "API Keys | PRUNplanner",
10+
title: `${t("api_keys.view_title")} | PRUNplanner`,
811
});
912
1013
// Composables
@@ -72,18 +75,17 @@
7275
<n-modal
7376
v-model:show="showCreateModal"
7477
preset="dialog"
75-
title="Create API Key"
78+
:title="t('api_keys.create.title')"
7679
:show-icon="false">
77-
<template #header>Create API Key</template>
80+
<template #header>{{ $t("api_keys.create.title") }}</template>
7881
<div v-if="creationStep === 'start'">
7982
<PForm>
80-
<PFormItem label="Key Name">
83+
<PFormItem :label="t('api_keys.create.form.key_name')">
8184
<PInput v-model:value="creationAPIKeyName" class="w-full" />
8285
</PFormItem>
8386
<PFormSeperator>
8487
<span class="py-1 text-white/50 text-xs">
85-
Give your key a descriptive name to help you identify it
86-
later.
88+
{{ $t("api_keys.create.form.key_description") }}
8789
</span>
8890
</PFormSeperator>
8991
</PForm>
@@ -96,26 +98,25 @@
9698
<CheckSharp class="w-6 h-6" />
9799
</div>
98100
<h3 class="text-center text-lg font-bold">
99-
Key Generated Successfully
101+
{{ $t("api_keys.create.form.success_title") }}
100102
</h3>
101103
<div
102104
class="flex flex-col gap-2 items-center bg-white/5 border border-dark-gray border-dashed rounded p-3">
103105
<span
104106
class="uppercase font-bold text-xs text-center text-white/80">
105-
Your Secret Key (Save this Now!)
107+
{{ $t("api_keys.create.form.success_key") }}
106108
</span>
107109
<span class="font-mono text-prunplanner text-nowrap">
108110
{{ lastCreatedKey }}
109111
</span>
110112
</div>
111113
<div class="text-red-500">
112-
For security, we cannot show this key again. If you lose it, you
113-
must revoke and create a new one.
114+
{{ $t("api_keys.create.form.success_note") }}
114115
</div>
115116
</div>
116117
<div v-else-if="creationStep === 'error'">
117118
<div class="text-center text-red-500">
118-
Error creating your API Key. Please try again later.
119+
{{ $t("api_keys.create.form.error") }}
119120
</div>
120121
</div>
121122
<template #action>
@@ -128,13 +129,13 @@
128129
showCreateModal = false;
129130
}
130131
">
131-
Cancel
132+
{{ $t("api_keys.create.buttons.cancel") }}
132133
</PButton>
133134
<PButton
134135
:loading="creationLoading"
135136
:disabled="!creationHasName"
136137
@click="createKey">
137-
Create Key
138+
{{ $t("api_keys.create.buttons.create") }}
138139
</PButton>
139140
</div>
140141
<div v-else-if="creationStep === 'key'" class="w-full">
@@ -147,7 +148,7 @@
147148
resetCreation();
148149
}
149150
">
150-
I've saved my key
151+
{{ $t("api_keys.create.buttons.saved") }}
151152
</PButton>
152153
</div>
153154
</template>
@@ -156,49 +157,37 @@
156157
<div class="min-h-screen flex flex-col">
157158
<div
158159
class="px-6 py-3 border-b border-white/10 flex flex-row justify-between">
159-
<h1 class="text-2xl font-bold">API Keys</h1>
160+
<h1 class="text-2xl font-bold">{{ $t("api_keys.title") }}</h1>
160161
</div>
161162
<div>
162163
<div
163164
class="grid grid-cols-1 lg:grid-cols-3 divide-x divide-white/10 min-h-screen">
164165
<div class="xl:col-span-2 flex flex-col gap-3 px-6 py-3">
165-
<div class="text-white/80">
166-
The
167-
<a
168-
href="https://api.prunplanner.org/docs"
169-
target="_blank"
170-
class="font-bold underline hover:text-prunplanner"
171-
>PRUNplanner REST API</a
172-
>
173-
provides programmatic access to all your planning data,
174-
ingame metadata (buildings, recipes, materials) and
175-
calculated market metrics like VWAP. While public
176-
endpoints remain open for community use, access to
177-
<strong>private planning data</strong> - including your
178-
plan configurations - require secure authentication.
179-
</div>
166+
<i18n-t keypath="api_keys.info.description.p1" tag="div">
167+
<template #link>
168+
<a
169+
href="https://api.prunplanner.org/docs"
170+
target="_blank"
171+
class="font-bold underline hover:text-prunplanner"
172+
>{{ $t("api_keys.info.description.link") }}</a
173+
>
174+
</template>
175+
</i18n-t>
180176
<div>
181-
By utilizing these endpoints, you can synchronize your
182-
planning operations with external spreadsheets, custom
183-
dashboards, or even optimization algorithms.
177+
{{ $t("api_keys.info.description.p2") }}
184178
</div>
185179
<div
186180
class="bg-prunplanner/10 border-l-4 border-prunplanner p-3">
187181
<p class="text-white font-mono text-xs">
188-
API keys grant full access to your account data and
189-
remain valid indefinitely. Treat these credentials
190-
as sensitive as your password. Never commit keys to
191-
public repositories or share them with unverified
192-
third-party services. If a key is compromised,
193-
revoke it immediately and generate a replacement.
182+
{{ $t("api_keys.info.description.warning") }}
194183
</p>
195184
</div>
196185

197186
<div>
198187
<div
199188
class="flex flex-row justify-between items-center pt-6 pb-3">
200189
<h2 class="text-lg font-bold">
201-
PRUNplanner API Keys
190+
{{ $t("api_keys.info.manage.title") }}
202191
</h2>
203192
<div class="flex flex-row gap-3">
204193
<PButton
@@ -207,7 +196,9 @@
207196
showCreateModal = !showCreateModal;
208197
}
209198
">
210-
Create New Key
199+
{{
200+
$t("api_keys.manage.buttons.new_apikey")
201+
}}
211202
</PButton>
212203
<PButton @click="fetchAPIKeys">
213204
<template #icon>
@@ -223,10 +214,34 @@
223214
striped>
224215
<thead>
225216
<tr>
226-
<th>Name</th>
227-
<th>Key Prefix</th>
228-
<th>Created</th>
229-
<th>Last Used</th>
217+
<th>
218+
{{
219+
$t(
220+
"api_keys.manage.table.apikey_name"
221+
)
222+
}}
223+
</th>
224+
<th>
225+
{{
226+
$t(
227+
"api_keys.manage.table.apikey_prefix"
228+
)
229+
}}
230+
</th>
231+
<th>
232+
{{
233+
$t(
234+
"api_keys.manage.table.apikey_created"
235+
)
236+
}}
237+
</th>
238+
<th>
239+
{{
240+
$t(
241+
"api_keys.manage.table.apikey_lastused"
242+
)
243+
}}
244+
</th>
230245
<th></th>
231246
</tr>
232247
</thead>
@@ -262,7 +277,11 @@
262277
@click="
263278
deleteAPIKey(apiKey.id)
264279
">
265-
Revoke
280+
{{
281+
$t(
282+
"api_keys.manage.buttons.revoke_apikey"
283+
)
284+
}}
266285
</PButton>
267286
</td>
268287
</tr>
@@ -285,7 +304,7 @@
285304
<div
286305
class="bg-white/5 border border-dark-gray border-dashed rounded flex flex-col gap-3 p-3">
287306
<h3 class="uppercase font-bold">
288-
Authorization Implementation
307+
{{ $t("api_keys.implementation.title") }}
289308
</h3>
290309
<div class="space-y-4">
291310
<div>
@@ -314,7 +333,7 @@
314333
href="https://api.prunplanner.org/docs"
315334
target="_blank"
316335
class="font-mono text-xs font-bold text-white hover:text-prunplanner underline mt-2">
317-
View REST API Reference &rarr;
336+
{{ $t("api_keys.implementation.link") }}
318337
</a>
319338
</div>
320339
</div>

0 commit comments

Comments
 (0)