Skip to content

Commit 7adf249

Browse files
jplachtjplacht
authored
Merge pull request #435 from PRUNplanner/improve-profile-localization-locale-switch
improve(profile): language switch + localizations
2 parents 1ae7520 + 177d526 commit 7adf249

8 files changed

Lines changed: 244 additions & 141 deletions

File tree

‎src/features/profile/components/ChangePassword.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
import { ComputedRef, computed, Ref, ref } from "vue";
33
4+
import { useI18n } from "vue-i18n";
5+
const { t } = useI18n();
6+
47
// API
58
import { useQuery } from "@/lib/query_cache/useQuery";
69
@@ -53,36 +56,37 @@
5356
<div>
5457
<div class="flex flex-row flex-wrap gap-3">
5558
<h2 class="grow my-auto text-white/80 font-bold text-lg">
56-
Change Password
59+
{{ $t("profile.change_password.title") }}
5760
</h2>
5861
<PButton
5962
:disabled="!canChange"
6063
:loading="isChanging"
6164
@click="patchPassword">
62-
Change Password
65+
{{ $t("profile.change_password.button") }}
6366
</PButton>
6467
</div>
6568
<div class="py-3 text-white/60">
66-
Passwords must be at least 8 characters long.
69+
{{ $t("profile.change_password.form.password_info") }}
6770
</div>
6871
<template v-if="changeStatus !== null">
6972
<div
7073
v-if="changeStatus"
7174
class="mb-3 py-1 px-2 bg-prunplanner text-black">
72-
Password changed.
75+
{{ $t("profile.change_password.form.change_success") }}
7376
</div>
7477
<div v-else class="mb-3 py-1 px-2 bg-red-600 text-white">
75-
Password changed failed.
78+
{{ $t("profile.change_password.form.change_error") }}
7679
</div>
7780
</template>
7881
<PForm>
79-
<PFormItem label="Current Password">
82+
<PFormItem
83+
:label="t('profile.change_password.form.current_password')">
8084
<PInput
8185
v-model:value="refCurrentPassword"
8286
type="password"
8387
class="w-full min-w-50 max-w-[50%]" />
8488
</PFormItem>
85-
<PFormItem label="New Password">
89+
<PFormItem :label="t('profile.change_password.form.new_password')">
8690
<PInput
8791
v-model:value="refNewPassword"
8892
type="password"

‎src/features/profile/components/ChangeProfile.vue‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
import { reactive, watch, Ref, ref, onMounted } from "vue";
33
4+
import { useI18n } from "vue-i18n";
5+
const { t } = useI18n();
6+
47
// API
58
import { useQuery } from "@/lib/query_cache/useQuery";
69
@@ -90,45 +93,42 @@
9093
<div>
9194
<div class="flex flex-row flex-wrap gap-3">
9295
<h2 class="grow my-auto text-white/80 font-bold text-lg">
93-
Profile
96+
{{ $t("profile.change_profile.title") }}
9497
</h2>
9598
<PButton
9699
:loading="isUpdating"
97100
:type="wasSaved ? 'primary' : 'error'"
98101
@click="patchProfile">
99-
Update Profile
102+
{{ $t("profile.change_profile.buttons.update_profile") }}
100103
</PButton>
101104
</div>
102105
<PForm v-if="localProfile">
103106
<PFormSeperator>
104107
<div class="py-3 text-white/60">
105-
FIO Data Updates are handled by PRUNplanners backend
106-
automatically.
108+
{{ $t("profile.change_profile.fio_info") }}
107109
</div>
108110
</PFormSeperator>
109-
<PFormItem label="FIO API Key">
111+
<PFormItem :label="t('profile.change_profile.form.fio_apikey')">
110112
<PInput
111113
v-model:value="localProfile.fio_apikey"
112114
class="w-full min-w-50 max-w-[50%]" />
113115
</PFormItem>
114-
<PFormItem label="PrUn Username">
116+
<PFormItem :label="t('profile.change_profile.form.prun_username')">
115117
<PInput
116118
v-model:value="localProfile.prun_username"
117119
class="w-full min-w-50 max-w-[50%]" />
118120
</PFormItem>
119121
<PFormSeperator>
120122
<div class="py-3 text-white/60">
121-
It is not required to provide an email but highly
122-
recommended for increased account safety and password
123-
recovery.
123+
{{ $t("profile.change_profile.form.email_info") }}
124124
</div>
125125
</PFormSeperator>
126-
<PFormItem label="Email Address">
126+
<PFormItem :label="t('profile.change_profile.form.email_address')">
127127
<PInput
128128
v-model:value="localProfile.email"
129129
class="w-full min-w-50 max-w-[50%]" />
130130
</PFormItem>
131-
<PFormItem label="Email Verified">
131+
<PFormItem :label="t('profile.change_profile.form.email_verified')">
132132
<div class="w-full flex flex-row flex-wrap gap-3">
133133
<PCheckbox
134134
v-model:checked="localProfile.is_email_verified"
@@ -142,18 +142,30 @@
142142
<router-link
143143
to="/verify-email"
144144
class="text-link-primary hover:cursor-pointer hover:underline">
145-
Verify Email
145+
{{
146+
$t(
147+
"profile.change_profile.buttons.verify_email"
148+
)
149+
}}
146150
</router-link>
147151
</div>
148152
<div>
149153
<span
150154
v-if="!codeResendRequested"
151155
class="text-link-primary hover:cursor-pointer hover:underline"
152156
@click="requestVerification">
153-
Resend Code
157+
{{
158+
$t(
159+
"profile.change_profile.buttons.resend_code"
160+
)
161+
}}
154162
</span>
155163
<span v-else class="text-lime-600">
156-
Code requested.
164+
{{
165+
$t(
166+
"profile.change_profile.buttons.code_requested"
167+
)
168+
}}
157169
</span>
158170
</div>
159171
</div>

‎src/features/profile/components/FIOInformation.vue‎

Lines changed: 65 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -3,108 +3,81 @@
33
<template>
44
<div>
55
<h2 class="grow my-auto text-white/80 font-bold text-lg pb-3">
6-
What is FIO &amp; Why should you use it?
6+
{{ $t("profile.fio_information.title") }}
77
</h2>
88

99
<div class="flex flex-col gap-y-3">
10-
<p>
11-
FIO is a community developed
12-
<a
13-
href="https://fio.fnar.net/"
14-
target="_blank"
15-
class="text-link-primary underline">
16-
browser extension</a
17-
>
18-
that collects your game data, makes it available outside of
19-
Prosperous Universe and is completely free to use.
20-
</p>
21-
<p>
22-
Just go ahead and install the Chrome or Firefox extension,
23-
reload your browser with APEX (Prosperous Universe) open and
24-
click the extension button in the upper-right in your browser to
25-
create an account. FIO will automatically collect (only) your
26-
game data while you keep playing.
27-
</p>
28-
<p>
29-
You can now login to the
30-
<a
31-
href="https://fio.fnar.net/"
32-
target="_blank"
33-
class="text-link-primary underline">
34-
FIO website</a
35-
>
36-
to see your data and create an API key PRUNplanner will use to
37-
import your storage (materials you have somewhere) and sites
38-
(planets, ships, warehouses) data.
39-
</p>
40-
<p>
41-
Creating the key is easy, if you head to the
42-
<a
43-
href="https://fio.fnar.net/settings"
44-
target="_blank"
45-
class="text-link-primary underline">
46-
FIO Settings</a
47-
>
48-
page and click the "Create API Key" button. Enter a name for
49-
your key (e.g., "PRUNplanner") and your FIO password. You don't
50-
need to "Allow Writes" as PRUNplanner will not manipulate any of
51-
your data, the tool just reads and uses it.
52-
</p>
53-
<p>
54-
Give PRUNplanner a couple of minutes and your game data will
55-
appear, allowing you to see when to repair ships, what buildings
56-
you have already constructed when creating or modifying plans or
57-
when to resupply your bases.
58-
</p>
59-
<h3 class="font-bold text-lg">
60-
5 Easy Steps to Integrate FIO and PRUNplanner
61-
</h3>
62-
<ul class="pl-6 list-decimal">
63-
<li>
64-
Download and install the
10+
<i18n-t keypath="profile.fio_information.help.p1" tag="p">
11+
<template #link>
6512
<a
6613
href="https://fio.fnar.net/"
6714
target="_blank"
6815
class="text-link-primary underline">
69-
FIO browser extension</a
70-
>
71-
</li>
72-
<li>
73-
Open your game, click the extensions button and register
74-
your FIO account
75-
</li>
76-
<li>
77-
Head to the FIO website, open your
16+
{{
17+
$t(
18+
"profile.fio_information.links.browser_extension"
19+
)
20+
}}
21+
</a>
22+
</template>
23+
</i18n-t>
24+
25+
<p>{{ $t("profile.fio_information.help.p2") }}</p>
26+
<p>{{ $t("profile.fio_information.help.p3") }}</p>
27+
<p>{{ $t("profile.fio_information.help.p4") }}</p>
28+
<p>{{ $t("profile.fio_information.help.p5") }}</p>
29+
30+
<h2 class="text-white/80 font-bold text-lg">
31+
{{ $t("profile.fio_information.help.title") }}
32+
</h2>
33+
34+
<ul class="pl-6 list-decimal">
35+
<i18n-t keypath="profile.fio_information.help.steps.1" tag="li">
36+
<template #link>
37+
<a
38+
href="https://fio.fnar.net/"
39+
target="_blank"
40+
class="text-link-primary underline">
41+
{{
42+
$t(
43+
"profile.fio_information.links.fio_extension"
44+
)
45+
}}
46+
</a>
47+
</template>
48+
</i18n-t>
49+
50+
<li>{{ $t("profile.fio_information.help.steps.2") }}</li>
51+
52+
<i18n-t keypath="profile.fio_information.help.steps.3" tag="li">
53+
<template #link>
54+
<a
55+
href="https://fio.fnar.net/settings"
56+
target="_blank"
57+
class="text-link-primary underline">
58+
{{
59+
$t(
60+
"profile.fio_information.links.settings_short"
61+
)
62+
}}
63+
</a>
64+
</template>
65+
</i18n-t>
66+
67+
<li>{{ $t("profile.fio_information.help.steps.4") }}</li>
68+
<li>{{ $t("profile.fio_information.help.steps.5") }}</li>
69+
</ul>
70+
71+
<i18n-t keypath="profile.fio_information.help.refined_prun" tag="p">
72+
<template #link>
7873
<a
79-
href="https://fio.fnar.net/settings"
74+
href="https://github.com/refined-prun/refined-prun"
8075
target="_blank"
8176
class="text-link-primary underline">
82-
Settings</a
83-
>
84-
and create an API key for PRUNplanner
85-
</li>
86-
<li>
87-
Copy and enter your <strong>FIO API Key</strong> as well as
88-
your <strong>Prosperous Universe username</strong> to your
89-
profile above and press the "Update Profile" button
90-
</li>
91-
<li>
92-
Wait a few minutes for PRUNplanner to get your data and
93-
enjoy additional planning capabilities. Your data will be
94-
updated automatically in the background, no need to do
95-
anything.
96-
</li>
97-
</ul>
98-
<p>
99-
While you're enhancing your gameplay, also check out
100-
<a
101-
href="https://fio.fnar.net/settings"
102-
target="_blank"
103-
class="text-link-primary underline">
104-
Refined PrUn</a
105-
>: Another browser extension greatly simplifying the user
106-
interface and adding tons of features.
107-
</p>
77+
{{ $t("profile.fio_information.links.refined_prun") }}
78+
</a>
79+
</template>
80+
</i18n-t>
10881
</div>
10982
</div>
11083
</template>

‎src/features/profile/components/StorageData.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,18 +43,21 @@
4343
</script>
4444

4545
<template>
46-
<h2 class="text-white/80 font-bold text-lg my-auto">Browser Storage</h2>
46+
<h2 class="text-white/80 font-bold text-lg my-auto">
47+
{{ $t("profile.storage_data.title") }}
48+
</h2>
4749
<div class="py-3 text-white/60">
48-
PRUNplanner minimizes API calls by storing data locally in your browser.
49-
Data refreshes automatically at set intervals.
50+
{{ $t("profile.storage_data.description") }}
5051
</div>
5152
<div>
5253
<PTable striped>
5354
<thead>
5455
<tr>
55-
<th>Storage</th>
56-
<th>Records</th>
57-
<th class="!text-end">Approx. Size</th>
56+
<th>{{ $t("profile.storage_data.table.storage") }}</th>
57+
<th>{{ $t("profile.storage_data.table.records") }}</th>
58+
<th class="!text-end">
59+
{{ $t("profile.storage_data.table.size") }}
60+
</th>
5861
</tr>
5962
</thead>
6063
<tbody>

0 commit comments

Comments
 (0)