Skip to content

Commit ee2974a

Browse files
mms-giannimms-gianni
authored
Merge pull request #670 from kubero-dev/feature/add-internationalization
Feature/add internationalization (i18n)
2 parents db9bd9f + 2ec56b5 commit ee2974a

38 files changed

+3367
-1483
lines changed

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"sweetalert2": "^11.10.2",
2626
"vue": "^3.4.0",
2727
"vue-chartjs": "^5.3.1",
28+
"vue-i18n": "11",
2829
"vue-router": "^4.2.0",
2930
"vue-socket.io-extended": "^4.2.0",
3031
"vue3-apexcharts": "^1.5.2",

‎client/src/components/accounts/index.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<v-container>
33
<v-tabs v-model="tab" background-color="primary" dark>
4-
<v-tab>Users</v-tab>
5-
<v-tab>Teams</v-tab>
6-
<v-tab>Roles</v-tab>
7-
<v-tab>Tokens</v-tab>
4+
<v-tab>{{ $t('accounts.users') }}</v-tab>
5+
<v-tab>{{ $t('accounts.teams') }}</v-tab>
6+
<v-tab>{{ $t('accounts.roles') }}</v-tab>
7+
<v-tab>{{ $t('accounts.tokens') }}</v-tab>
88
</v-tabs>
99
<v-tabs-window v-model="tab">
1010
<v-tabs-window-item :value="0">

‎client/src/components/accounts/roles.vue

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<template #top>
1212
<v-text-field
1313
v-model="search"
14-
label="Search Roles"
14+
:label="$t('roles.search')"
1515
prepend-inner-icon="mdi-magnify"
1616
single-line
1717
hide-details
@@ -168,21 +168,21 @@
168168
:disabled="!writeUserPermission"
169169
>
170170
<v-icon>mdi-plus</v-icon>
171-
<span class="sr-only">Create Role</span>
171+
<span class="sr-only">{{ $t('roles.actions.edit') }}</span>
172172
</v-btn>
173173
</div>
174174

175175
<!-- Dialog to edit a role -->
176176
<v-dialog v-model="editDialog" max-width="500px">
177177
<v-card>
178-
<v-card-title>Edit Role</v-card-title>
178+
<v-card-title>{{ $t('roles.actions.edit') }}</v-card-title>
179179
<v-card-text>
180180
<v-text-field v-model="editedRole.name" label="Role Name"></v-text-field>
181181
<v-text-field v-model="editedRole.description" label="Descrioption"></v-text-field>
182182
<v-table density="compact" class="mb-4">
183183
<tbody>
184184
<tr>
185-
<td>App Permissions</td>
185+
<td>{{ $t('roles.form.permissions.apps') }} {{ $t('roles.permission') }}</td>
186186
<td>
187187
<v-radio-group v-model="editedRole.permissions[0].action" inline>
188188
<v-radio label="none" value="none"></v-radio>
@@ -192,7 +192,7 @@
192192
</td>
193193
</tr>
194194
<tr>
195-
<td>Pipeline Permissions</td>
195+
<td>{{ $t('roles.form.permissions.pipelines') }} {{ $t('roles.permission') }}</td>
196196
<td>
197197
<v-radio-group v-model="editedRole.permissions[1].action" inline>
198198
<v-radio label="none" value="none"></v-radio>
@@ -202,7 +202,7 @@
202202
</td>
203203
</tr>
204204
<tr>
205-
<td>User Permissions</td>
205+
<td>{{ $t('roles.form.permissions.accounts') }} {{ $t('roles.permission') }}</td>
206206
<td>
207207
<v-radio-group v-model="editedRole.permissions[2].action" inline>
208208
<v-radio label="none" value="none"></v-radio>
@@ -212,7 +212,7 @@
212212
</td>
213213
</tr>
214214
<tr>
215-
<td>Config Permissions</td>
215+
<td>{{ $t('roles.form.permissions.settings') }} {{ $t('roles.permission') }}</td>
216216
<td>
217217
<v-radio-group v-model="editedRole.permissions[3].action" inline>
218218
<v-radio label="none" value="none"></v-radio>
@@ -222,7 +222,7 @@
222222
</td>
223223
</tr>
224224
<tr>
225-
<td>Security Permissions</td>
225+
<td>{{ $t('roles.form.permissions.security') }} {{ $t('roles.permission') }}</td>
226226
<td>
227227
<v-radio-group v-model="editedRole.permissions[4].action" inline>
228228
<v-radio label="none" value="none"></v-radio>
@@ -232,7 +232,7 @@
232232
</td>
233233
</tr>
234234
<tr>
235-
<td>Token Permissions</td>
235+
<td>{{ $t('roles.form.permissions.tokens') }} {{ $t('roles.permission') }}</td>
236236
<td>
237237
<v-radio-group v-model="editedRole.permissions[5].action" inline>
238238
<v-radio label="none" value="none"></v-radio>
@@ -242,25 +242,25 @@
242242
</td>
243243
</tr>
244244
<tr>
245-
<td>Audit</td>
245+
<td>{{ $t('roles.form.permissions.audit') }}</td>
246246
<td>
247247
<v-switch color="primary" value="ok" false-value="none" v-model="editedRole.permissions[6].action" label=""></v-switch>
248248
</td>
249249
</tr>
250250
<tr>
251-
<td>Console</td>
251+
<td>{{ $t('roles.form.permissions.console') }}</td>
252252
<td>
253253
<v-switch color="primary" value="ok" false-value="none" v-model="editedRole.permissions[7].action" label=""></v-switch>
254254
</td>
255255
</tr>
256256
<tr>
257-
<td>Logs</td>
257+
<td>{{ $t('roles.form.permissions.logs') }}</td>
258258
<td>
259259
<v-switch color="primary" value="ok" false-value="none" v-model="editedRole.permissions[8].action" label=""></v-switch>
260260
</td>
261261
</tr>
262262
<tr>
263-
<td>Reboot</td>
263+
<td>{{ $t('roles.form.permissions.reboot') }}</td>
264264
<td>
265265
<v-switch color="primary" value="ok" false-value="none" v-model="editedRole.permissions[9].action" label=""></v-switch>
266266
</td>
@@ -286,7 +286,7 @@
286286
<v-table density="compact" class="mb-4">
287287
<tbody>
288288
<tr>
289-
<td>App Permissions</td>
289+
<td>{{ $t('roles.form.permissions.apps') }} {{ $t('roles.permission') }}</td>
290290
<td>
291291
<v-radio-group v-model="newRole.permissions[0].action" inline>
292292
<v-radio label="none" value="none"></v-radio>
@@ -296,7 +296,7 @@
296296
</td>
297297
</tr>
298298
<tr>
299-
<td>Pipeline Permissions</td>
299+
<td>{{ $t('roles.form.permissions.pipelines') }} {{ $t('roles.permission') }}</td>
300300
<td>
301301
<v-radio-group v-model="newRole.permissions[1].action" inline>
302302
<v-radio label="none" value="none"></v-radio>
@@ -306,7 +306,7 @@
306306
</td>
307307
</tr>
308308
<tr>
309-
<td>User Permissions</td>
309+
<td>{{ $t('roles.form.permissions.accounts') }} {{ $t('roles.permission') }}</td>
310310
<td>
311311
<v-radio-group v-model="newRole.permissions[2].action" inline>
312312
<v-radio label="none" value="none"></v-radio>
@@ -316,7 +316,7 @@
316316
</td>
317317
</tr>
318318
<tr>
319-
<td>Config Permissions</td>
319+
<td>{{ $t('roles.form.permissions.settings') }} {{ $t('roles.permission') }}</td>
320320
<td>
321321
<v-radio-group v-model="newRole.permissions[3].action" inline>
322322
<v-radio label="none" value="none"></v-radio>
@@ -326,7 +326,7 @@
326326
</td>
327327
</tr>
328328
<tr>
329-
<td>Security Permissions</td>
329+
<td>{{ $t('roles.form.permissions.security') }} {{ $t('roles.permission') }}</td>
330330
<td>
331331
<v-radio-group v-model="newRole.permissions[4].action" inline>
332332
<v-radio label="none" value="none"></v-radio>
@@ -336,7 +336,7 @@
336336
</td>
337337
</tr>
338338
<tr>
339-
<td>Token Permissions</td>
339+
<td>{{ $t('roles.form.permissions.tokens') }} {{ $t('roles.permission') }}</td>
340340
<td>
341341
<v-radio-group v-model="newRole.permissions[5].action" inline>
342342
<v-radio label="none" value="none"></v-radio>
@@ -346,25 +346,25 @@
346346
</td>
347347
</tr>
348348
<tr>
349-
<td>Audit</td>
349+
<td>{{ $t('roles.form.permissions.audit') }}</td>
350350
<td>
351351
<v-switch color="primary" value="ok" false-value="none" v-model="newRole.permissions[6].action" label=""></v-switch>
352352
</td>
353353
</tr>
354354
<tr>
355-
<td>Console</td>
355+
<td>{{ $t('roles.form.permissions.console') }}</td>
356356
<td>
357357
<v-switch color="primary" value="ok" false-value="none" v-model="newRole.permissions[7].action" label=""></v-switch>
358358
</td>
359359
</tr>
360360
<tr>
361-
<td>Logs</td>
361+
<td>{{ $t('roles.form.permissions.logs') }}</td>
362362
<td>
363363
<v-switch color="primary" value="ok" false-value="none" v-model="newRole.permissions[8].action" label=""></v-switch>
364364
</td>
365365
</tr>
366366
<tr>
367-
<td>Reboot</td>
367+
<td>{{ $t('roles.form.permissions.reboot') }}</td>
368368
<td>
369369
<v-switch color="primary" value="ok" false-value="none" v-model="newRole.permissions[9].action" label=""></v-switch>
370370
</td>
@@ -386,10 +386,12 @@
386386
import { defineComponent, ref, onMounted } from 'vue'
387387
import axios from 'axios'
388388
import { useAuthStore } from '../../stores/auth'
389+
import { useI18n } from 'vue-i18n'
389390
390391
export default defineComponent({
391392
name: 'RolesTable',
392393
setup() {
394+
const { t } = useI18n()
393395
interface Role {
394396
id: string | number;
395397
name: string;
@@ -426,20 +428,20 @@ export default defineComponent({
426428
const writeUserPermission = authStore.hasPermission('user:write')
427429
428430
const headers = [
429-
{ title: 'Role', value: 'name' },
431+
{ title: t('roles.name'), value: 'name' },
430432
//{ title: 'Permissions', value: 'permissions' },
431-
{ title: 'App', value: 'permissionsApp', align: 'center' as const },
432-
{ title: 'Pipeline', value: 'permissionsPipeline', align: 'center' as const },
433-
{ title: 'Accounts', value: 'permissionsAccount', align: 'center' as const},
434-
{ title: 'Settings', value: 'permissionsConfig', align: 'center' as const},
435-
{ title: 'Security', value: 'permissionsSecurity', align: 'center' as const},
436-
{ title: 'Token', value: 'permissionsToken', align: 'center' as const},
437-
{ title: 'Audit', value: 'permissionsAudit', align: 'center' as const},
438-
{ title: 'Console', value: 'permissionsConsole', align: 'center' as const},
439-
{ title: 'Logs', value: 'permissionsLogs', align: 'center' as const},
440-
{ title: 'Reboot', value: 'permissionsReboot', align: 'center' as const},
433+
{ title: t('roles.form.permissions.apps'), value: 'permissionsApp', align: 'center' as const },
434+
{ title: t('roles.form.permissions.pipelines'), value: 'permissionsPipeline', align: 'center' as const },
435+
{ title: t('roles.form.permissions.accounts'), value: 'permissionsAccount', align: 'center' as const},
436+
{ title: t('roles.form.permissions.settings'), value: 'permissionsConfig', align: 'center' as const},
437+
{ title: t('roles.form.permissions.security'), value: 'permissionsSecurity', align: 'center' as const},
438+
{ title: t('roles.form.permissions.tokens'), value: 'permissionsToken', align: 'center' as const},
439+
{ title: t('roles.form.permissions.audit'), value: 'permissionsAudit', align: 'center' as const},
440+
{ title: t('roles.form.permissions.console'), value: 'permissionsConsole', align: 'center' as const},
441+
{ title: t('roles.form.permissions.logs'), value: 'permissionsLogs', align: 'center' as const},
442+
{ title: t('roles.form.permissions.reboot'), value: 'permissionsReboot', align: 'center' as const},
441443
442-
{ title: 'Actions', value: 'actions', sortable: false, align: 'end' as const },
444+
{ title: '', value: 'actions', sortable: false, align: 'end' as const },
443445
]
444446
445447
const loadRoles = async () => {

‎client/src/components/accounts/teams.vue

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<template #top>
1212
<v-text-field
1313
v-model="search"
14-
label="Search Teams"
14+
:label="$t('teams.search')"
1515
prepend-inner-icon="mdi-magnify"
1616
single-line
1717
hide-details
@@ -75,50 +75,50 @@
7575
:disabled="!writeUserPermission"
7676
>
7777
<v-icon>mdi-plus</v-icon>
78-
<span class="sr-only">Create Team</span>
78+
<span class="sr-only">{{ $t('teams.actions.create') }}</span>
7979
</v-btn>
8080
</div>
8181

8282
<!-- Dialog to edit a group -->
8383
<v-dialog v-model="editDialog" max-width="500px">
8484
<v-card>
85-
<v-card-title>Edit Team</v-card-title>
85+
<v-card-title>{{ $t('teams.actions.edit') }}</v-card-title>
8686
<v-card-text>
87-
<v-text-field v-model="editedTeam.name" label="Team Name"></v-text-field>
87+
<v-text-field v-model="editedTeam.name" :label="$t('teams.form.name')"></v-text-field>
8888
<v-text-field
8989
v-model="editedTeam.description"
90-
label="Description"
90+
:label="$t('teams.form.description')"
9191
type="text"
9292
multiline
9393
rows="2"
9494
></v-text-field>
9595
</v-card-text>
9696
<v-card-actions>
9797
<v-spacer />
98-
<v-btn text @click="editDialog = false">Abort</v-btn>
99-
<v-btn color="primary" @click="saveEdit">Save</v-btn>
98+
<v-btn text @click="editDialog = false">{{ $t('global.abort') }}</v-btn>
99+
<v-btn color="primary" @click="saveEdit">{{ $t('global.save') }}</v-btn>
100100
</v-card-actions>
101101
</v-card>
102102
</v-dialog>
103103

104104
<!-- Dialog for a new Team -->
105105
<v-dialog v-model="createDialog" max-width="500px">
106106
<v-card>
107-
<v-card-title>Create Team</v-card-title>
107+
<v-card-title>{{ $t('teams.actions.create') }}</v-card-title>
108108
<v-card-text>
109-
<v-text-field v-model="newTeam.name" label="Team Name"></v-text-field>
109+
<v-text-field v-model="newTeam.name" :label="$t('teams.form.name')"></v-text-field>
110110
<v-text-field
111111
v-model="newTeam.description"
112-
label="Description"
112+
:label="$t('teams.form.description')"
113113
type="text"
114114
multiline
115115
rows="2"
116116
></v-text-field>
117117
</v-card-text>
118118
<v-card-actions>
119119
<v-spacer />
120-
<v-btn text @click="createDialog = false">Abort</v-btn>
121-
<v-btn color="primary" @click="saveCreate">Create</v-btn>
120+
<v-btn text @click="createDialog = false">{{ $t('global.abort') }}</v-btn>
121+
<v-btn color="primary" @click="saveCreate">{{ $t('global.create') }}</v-btn>
122122
</v-card-actions>
123123
</v-card>
124124
</v-dialog>
@@ -129,10 +129,12 @@
129129
import { defineComponent, ref, onMounted } from 'vue'
130130
import axios from 'axios'
131131
import { useAuthStore } from '../../stores/auth'
132+
import { useI18n } from 'vue-i18n'
132133
133134
export default defineComponent({
134135
name: 'TeamsTable',
135136
setup() {
137+
const { t } = useI18n()
136138
interface Team {
137139
id?: string;
138140
name: string;
@@ -150,9 +152,9 @@ export default defineComponent({
150152
const writeUserPermission = authStore.hasPermission('user:write')
151153
152154
const headers = [
153-
{ title: 'Team', value: 'name' },
154-
{ title: 'Description', value: 'description' },
155-
{ title: 'Actions', value: 'actions', sortable: false, align: 'end' as const },
155+
{ title: t('teams.name'), value: 'name' },
156+
{ title: t('teams.form.description'), value: 'description' },
157+
{ title: '', value: 'actions', sortable: false, align: 'end' as const },
156158
]
157159
158160
const loadTeams = async () => {

‎client/src/components/accounts/tokens.vue

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<template #top>
1212
<v-text-field
1313
v-model="search"
14-
label="Search Tokens"
14+
:label="$t('tokens.search')"
1515
prepend-inner-icon="mdi-magnify"
1616
single-line
1717
hide-details
@@ -88,10 +88,12 @@
8888
import { defineComponent, ref, onMounted } from 'vue'
8989
import axios from 'axios'
9090
import { useAuthStore } from '../../stores/auth'
91+
import { useI18n } from 'vue-i18n'
9192
9293
export default defineComponent({
9394
name: 'TokensTable',
9495
setup() {
96+
const { t } = useI18n()
9597
interface Token {
9698
id?: string;
9799
token?: string;
@@ -113,11 +115,11 @@ export default defineComponent({
113115
const writeUserPermission = ref(authStore.hasPermission('user:write'))
114116
115117
const headers = [
116-
{ title: 'Token ID', value: 'token' },
117-
{ title: 'Name', value: 'name' },
118-
{ title: 'Owner', value: 'user.username' },
119-
{ title: 'Expires At', value: 'expiresAt' },
120-
{ title: 'Actions', value: 'actions', sortable: false, align: 'end' as const },
118+
{ title: t('tokens.form.id'), value: 'token' },
119+
{ title: t('tokens.form.name'), value: 'name' },
120+
{ title: t('tokens.form.owner'), value: 'user.username' },
121+
{ title: t('tokens.form.expiresAt'), value: 'expiresAt' },
122+
{ title: '', value: 'actions', sortable: false, align: 'end' as const },
121123
]
122124
123125
const loadTokens = async () => {

0 commit comments

Comments
 (0)