Skip to content

Commit 57ec777

Browse files
jplachtjplacht
authored
Merge pull request #446 from PRUNplanner/improve-i18n-localize-views
improve(i18n): localize additional views
2 parents 9dda5c8 + 5a1568b commit 57ec777

46 files changed

Lines changed: 1224 additions & 317 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/features/account/components/LoginComponent.vue‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
import { ref, Ref, computed } from "vue";
33
4+
import { useI18n } from "vue-i18n";
5+
const { t } = useI18n();
6+
47
import { useUserStore } from "@/stores/userStore";
58
69
const userStore = useUserStore();
@@ -52,46 +55,54 @@
5255

5356
<template>
5457
<div class="mx-auto max-w-100">
55-
<div class="text-xl text-white font-bold font-mono pb-3">Login</div>
58+
<div class="text-xl text-white font-bold font-mono pb-3">
59+
{{ $t("account.components.login.title") }}
60+
</div>
5661
<div v-if="hasError" class="pb-3 text-red-600">
57-
Error logging in. Please check your username and password.
62+
{{ $t("account.components.login.error") }}
5863
</div>
5964
<PForm>
6065
<PFormSeperator>
6166
<div class="font-mono text-xs text-white/60 pb-3">
62-
By using PRUNplanner you agree to the
63-
<router-link
64-
to="/imprint-tos"
65-
class="hover:cursor-pointer underline">
66-
Terms of Service.
67-
</router-link>
67+
<i18n-t keypath="account.components.login.tos" tag="p">
68+
<template #tos_link>
69+
<router-link
70+
to="/imprint-tos"
71+
class="hover:cursor-pointer underline">
72+
{{ $t("account.components.login.tos_link") }}
73+
</router-link>
74+
</template>
75+
</i18n-t>
6876
</div>
6977
</PFormSeperator>
70-
<PFormItem label="Username">
78+
<PFormItem :label="t('account.components.login.form.username')">
7179
<PInput v-model:value="inputUsername" class="w-full" />
7280
</PFormItem>
73-
<PFormItem label="Password">
81+
<PFormItem :label="t('account.components.login.form.password')">
7482
<PInput
7583
v-model:value="inputPassword"
7684
type="password"
7785
class="w-full" />
7886
</PFormItem>
7987
<PFormSeperator>
8088
<div class="font-mono text-xs text-white/60 py-3">
81-
Forgot your password? Request a
82-
<router-link
83-
to="/request-password-reset"
84-
class="hover:cursor-pointer underline">
85-
Password Reset.
86-
</router-link>
89+
<i18n-t keypath="account.components.login.forgot" tag="p">
90+
<template #forgot_link>
91+
<router-link
92+
to="/request-password-reset"
93+
class="hover:cursor-pointer underline">
94+
{{ $t("account.components.login.forgot_link") }}
95+
</router-link>
96+
</template>
97+
</i18n-t>
8798
</div>
8899
</PFormSeperator>
89100
<PFormItem label="">
90101
<PButton
91102
:loading="isLoggingIn"
92103
:disabled="!canLogin"
93104
@click="handleLogin">
94-
Login
105+
{{ $t("account.components.login.buttons.login") }}
95106
</PButton>
96107
</PFormItem>
97108
</PForm>

‎src/features/account/components/PasswordReset.vue‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
import { ref, Ref, computed } 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
@@ -59,35 +62,44 @@
5962

6063
<template>
6164
<h2 class="text-white/80 font-bold text-lg font-mono">
62-
Reset your Password
65+
{{ $t("account.components.password_reset.title") }}
6366
</h2>
6467
<div class="py-3 text-xs font-mono text-white/60">
65-
Please enter the code sent to your email, along with your new password.
68+
{{ $t("account.components.password_reset.info") }}
6669
</div>
6770
<div v-if="requestResponse" class="pb-3 text-xs font-mono text-prunplanner">
6871
{{ requestResponse.detail }}
6972
</div>
7073
<div>
7174
<PForm>
72-
<PFormItem label="Email">
75+
<PFormItem
76+
:label="t('account.components.password_reset.form.email')">
7377
<PInput v-model:value="inputEmail" class="w-full" />
7478
</PFormItem>
75-
<PFormItem label="Code">
79+
<PFormItem
80+
:label="t('account.components.password_reset.form.code')">
7681
<PInput v-model:value="inputCode" class="w-full" />
7782
</PFormItem>
78-
<PFormItem label="Password">
83+
<PFormItem
84+
:label="t('account.components.password_reset.form.password')">
7985
<PInput
8086
v-model:value="inputPassword"
8187
type="password"
8288
class="w-full" />
83-
<template #info> Must be at least 8 characters long. </template>
89+
<template #info>
90+
{{
91+
$t(
92+
"account.components.password_reset.form.password_info"
93+
)
94+
}}
95+
</template>
8496
</PFormItem>
8597
<PFormItem label="">
8698
<PButton
8799
:disabled="!canSend"
88100
:loading="isLoading"
89101
@click="requestReset">
90-
Send Request
102+
{{ $t("account.components.password_reset.buttons.send") }}
91103
</PButton>
92104
</PFormItem>
93105
</PForm>

‎src/features/account/components/RegistrationComponent.vue‎

Lines changed: 79 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
import { onMounted, ref, Ref, computed, ComputedRef } from "vue";
33
4+
import { useI18n } from "vue-i18n";
5+
const { t } = useI18n({ useScope: "global" });
6+
47
import { PForm, PFormItem, PFormSeperator, PButton, PInput } from "@/ui";
58
import { IUserRegistrationPayload } from "@/features/api/userData.types";
69
import { useQuery } from "@/lib/query_cache/useQuery";
@@ -102,76 +105,115 @@
102105
<template v-if="registrationSuccess">
103106
<div>
104107
<div class="text-xl text-white font-bold font-mono pb-1">
105-
Welcome, {{ registrationUsername }}!
108+
{{
109+
$t("account.components.registration.result.ok_header", {
110+
username: registrationUsername,
111+
})
112+
}}
106113
</div>
107114
<div class="pt-3">
108-
Registration successful. You can now login to PRUNplanner.
115+
{{
116+
$t("account.components.registration.result.ok_message")
117+
}}
109118
</div>
110119
</div>
111120
</template>
112121
<template v-else>
113122
<div class="text-xl text-white font-bold font-mono pb-1">
114-
Account Information
123+
{{ $t("account.components.registration.title") }}
115124
</div>
116125
<div class="pb-3 text-white/60 text-xs font-mono">
117-
PRUNplanner is free to use. By creating an account, you
118-
acknowledge and agree to the
119-
<router-link
120-
to="/imprint-tos"
121-
class="underline hover:text-link-primary">
122-
Terms of Service.
123-
</router-link>
126+
<i18n-t keypath="account.components.registration.tos" tag="p">
127+
<template #tos_link>
128+
<router-link
129+
to="/imprint-tos"
130+
class="hover:cursor-pointer underline">
131+
{{ $t("account.components.registration.tos_link") }}
132+
</router-link>
133+
</template>
134+
</i18n-t>
124135
</div>
125136
<div v-if="hasError" class="pb-3 text-red-600">
126-
Error during registration.
137+
{{ $t("account.components.registration.result.error") }}
138+
<br />
127139
{{ hasErrorMessage }}
128140
</div>
129141
<PForm>
130-
<PFormItem label="Username">
142+
<PFormItem
143+
:label="t('account.components.registration.form.username')">
131144
<PInput v-model:value="inputUsername" class="w-full" />
132145
<template #info>
133-
Must be at least 3 characters long. Can't contain
134-
spaces.
146+
{{
147+
$t(
148+
"account.components.registration.form.username_info"
149+
)
150+
}}
135151
</template>
136152
</PFormItem>
137-
<PFormItem label="Password">
153+
<PFormItem
154+
:label="t('account.components.registration.form.password')">
138155
<PInput
139156
v-model:value="inputPassword"
140157
type="password"
141158
class="w-full" />
142159
<template #info>
143-
Must be at least 8 characters long.
160+
{{
161+
$t(
162+
"account.components.registration.form.password_info"
163+
)
164+
}}
144165
</template>
145166
</PFormItem>
146-
<PFormItem label="Email">
167+
<PFormItem
168+
:label="t('account.components.registration.form.email')">
147169
<PInput
148170
v-model:value="inputEmail"
149-
placeholder="Not mandatory, but recommended."
171+
:placeholder="
172+
t(
173+
'account.components.registration.form.email_placeholder'
174+
)
175+
"
150176
class="w-full" />
151177
<template #info>
152-
Not mandatory. Increases your account security.
178+
{{
179+
$t(
180+
"account.components.registration.form.email_info"
181+
)
182+
}}
153183
</template>
154184
</PFormItem>
155185
<PFormSeperator>
156186
<div
157187
class="text-xl text-white font-bold font-mono pt-3 pb-1">
158-
Security Question
188+
{{
189+
$t(
190+
"account.components.registration.form.security_question"
191+
)
192+
}}
159193
</div>
160194
<div class="font-mono text-xs text-white/60 pb-3">
161-
Enter the name of planet
162-
<span
163-
class="text-nowrap bg-prunplanner text-black px-1"
164-
>{{ activeSecurityOption }}</span
165-
>. To find it, open a new Prosperous Universe buffer
166-
with the command
167-
<span
168-
class="text-nowrap bg-prunplanner text-black px-0.5"
169-
>{{ `PLI ${activeSecurityOption}` }}</span
170-
>. You'll see the planet's name listed under "Name" in
171-
the planet information.
195+
<i18n-t
196+
keypath="account.components.registration.form.question"
197+
tag="p">
198+
<template #planet>
199+
<span
200+
class="text-nowrap bg-prunplanner text-black px-1"
201+
>{{ activeSecurityOption }}</span
202+
>
203+
</template>
204+
<template #command>
205+
<span
206+
class="text-nowrap bg-prunplanner text-black px-0.5"
207+
>{{ `PLI ${activeSecurityOption}` }}</span
208+
>
209+
</template>
210+
</i18n-t>
172211
</div>
173212
</PFormSeperator>
174-
<PFormItem label="Name">
213+
<PFormItem
214+
:label="
215+
t('account.components.registration.form.planet_name')
216+
">
175217
<PInput v-model:value="inputPlanetName" class="w-full" />
176218
</PFormItem>
177219
<PFormItem label="">
@@ -180,7 +222,11 @@
180222
:loading="isLoading"
181223
class="mt-3"
182224
@click="registerUser">
183-
Create Account
225+
{{
226+
$t(
227+
"account.components.registration.buttons.register"
228+
)
229+
}}
184230
</PButton>
185231
</PFormItem>
186232
</PForm>

‎src/features/account/components/RequestPasswordReset.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
import { ref, Ref, computed } 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
@@ -45,27 +48,30 @@
4548

4649
<template>
4750
<h2 class="text-white/80 font-bold text-lg font-mono">
48-
Password Reset Request
51+
{{ $t("account.components.request_password_reset.title") }}
4952
</h2>
5053
<div class="py-3 text-xs font-mono text-white/60">
51-
Enter the verified email address linked to your PRUNplanner account. If
52-
we recognize it, we'll send you a code to reset your password.
54+
{{ $t("account.components.request_password_reset.info") }}
5355
</div>
5456
<div v-if="requestResponse" class="pb-3 text-xs font-mono text-prunplanner">
5557
{{ requestResponse.detail }}.
5658
</div>
5759
<div>
5860
<PInput
5961
v-model:value="inputEmail"
60-
placeholder="Email Address"
62+
:placeholder="
63+
t(
64+
'account.components.request_password_reset.form.email_placeholder'
65+
)
66+
"
6167
class="w-full" />
6268
</div>
6369
<div class="pt-3">
6470
<PButton
6571
:disabled="!canRequest"
6672
:loading="isLoading"
6773
@click="requestReset">
68-
Send Request
74+
{{ $t("account.components.request_password_reset.buttons.send") }}
6975
</PButton>
7076
</div>
7177
</template>

0 commit comments

Comments
 (0)