Skip to content

improve(i18n): localize additional views #446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jplacht merged 3 commits into from
May 8, 2026
Merged

improve(i18n): localize additional views #446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15fd765
improve(i18n): localize additional views
jplacht May 8, 2026
6f889f6
fix(test): fix i18n on useCXManagement test
jplacht May 8, 2026
5a1568b
improve(exchange): useManageCX does not need async
jplacht May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 28 additions & 17 deletions src/features/account/components/LoginComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script setup lang="ts">
import { ref, Ref, computed } from "vue";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import { useUserStore } from "@/stores/userStore";

const userStore = useUserStore();
Expand Down Expand Up @@ -52,46 +55,54 @@

<template>
<div class="mx-auto max-w-100">
<div class="text-xl text-white font-bold font-mono pb-3">Login</div>
<div class="text-xl text-white font-bold font-mono pb-3">
{{ $t("account.components.login.title") }}
</div>
<div v-if="hasError" class="pb-3 text-red-600">
Error logging in. Please check your username and password.
{{ $t("account.components.login.error") }}
</div>
<PForm>
<PFormSeperator>
<div class="font-mono text-xs text-white/60 pb-3">
By using PRUNplanner you agree to the
<router-link
to="/imprint-tos"
class="hover:cursor-pointer underline">
Terms of Service.
</router-link>
<i18n-t keypath="account.components.login.tos" tag="p">
<template #tos_link>
<router-link
to="/imprint-tos"
class="hover:cursor-pointer underline">
{{ $t("account.components.login.tos_link") }}
</router-link>
</template>
</i18n-t>
</div>
</PFormSeperator>
<PFormItem label="Username">
<PFormItem :label="t('account.components.login.form.username')">
<PInput v-model:value="inputUsername" class="w-full" />
</PFormItem>
<PFormItem label="Password">
<PFormItem :label="t('account.components.login.form.password')">
<PInput
v-model:value="inputPassword"
type="password"
class="w-full" />
</PFormItem>
<PFormSeperator>
<div class="font-mono text-xs text-white/60 py-3">
Forgot your password? Request a
<router-link
to="/request-password-reset"
class="hover:cursor-pointer underline">
Password Reset.
</router-link>
<i18n-t keypath="account.components.login.forgot" tag="p">
<template #forgot_link>
<router-link
to="/request-password-reset"
class="hover:cursor-pointer underline">
{{ $t("account.components.login.forgot_link") }}
</router-link>
</template>
</i18n-t>
</div>
</PFormSeperator>
<PFormItem label="">
<PButton
:loading="isLoggingIn"
:disabled="!canLogin"
@click="handleLogin">
Login
{{ $t("account.components.login.buttons.login") }}
</PButton>
</PFormItem>
</PForm>
Expand Down
26 changes: 19 additions & 7 deletions src/features/account/components/PasswordReset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script setup lang="ts">
import { ref, Ref, computed } from "vue";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

// API
import { useQuery } from "@/lib/query_cache/useQuery";

Expand Down Expand Up @@ -59,35 +62,44 @@

<template>
<h2 class="text-white/80 font-bold text-lg font-mono">
Reset your Password
{{ $t("account.components.password_reset.title") }}
</h2>
<div class="py-3 text-xs font-mono text-white/60">
Please enter the code sent to your email, along with your new password.
{{ $t("account.components.password_reset.info") }}
</div>
<div v-if="requestResponse" class="pb-3 text-xs font-mono text-prunplanner">
{{ requestResponse.detail }}
</div>
<div>
<PForm>
<PFormItem label="Email">
<PFormItem
:label="t('account.components.password_reset.form.email')">
<PInput v-model:value="inputEmail" class="w-full" />
</PFormItem>
<PFormItem label="Code">
<PFormItem
:label="t('account.components.password_reset.form.code')">
<PInput v-model:value="inputCode" class="w-full" />
</PFormItem>
<PFormItem label="Password">
<PFormItem
:label="t('account.components.password_reset.form.password')">
<PInput
v-model:value="inputPassword"
type="password"
class="w-full" />
<template #info> Must be at least 8 characters long. </template>
<template #info>
{{
$t(
"account.components.password_reset.form.password_info"
)
}}
</template>
</PFormItem>
<PFormItem label="">
<PButton
:disabled="!canSend"
:loading="isLoading"
@click="requestReset">
Send Request
{{ $t("account.components.password_reset.buttons.send") }}
</PButton>
</PFormItem>
</PForm>
Expand Down
112 changes: 79 additions & 33 deletions src/features/account/components/RegistrationComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script setup lang="ts">
import { onMounted, ref, Ref, computed, ComputedRef } from "vue";

import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });

import { PForm, PFormItem, PFormSeperator, PButton, PInput } from "@/ui";
import { IUserRegistrationPayload } from "@/features/api/userData.types";
import { useQuery } from "@/lib/query_cache/useQuery";
Expand Down Expand Up @@ -102,76 +105,115 @@
<template v-if="registrationSuccess">
<div>
<div class="text-xl text-white font-bold font-mono pb-1">
Welcome, {{ registrationUsername }}!
{{
$t("account.components.registration.result.ok_header", {
username: registrationUsername,
})
}}
</div>
<div class="pt-3">
Registration successful. You can now login to PRUNplanner.
{{
$t("account.components.registration.result.ok_message")
}}
</div>
</div>
</template>
<template v-else>
<div class="text-xl text-white font-bold font-mono pb-1">
Account Information
{{ $t("account.components.registration.title") }}
</div>
<div class="pb-3 text-white/60 text-xs font-mono">
PRUNplanner is free to use. By creating an account, you
acknowledge and agree to the
<router-link
to="/imprint-tos"
class="underline hover:text-link-primary">
Terms of Service.
</router-link>
<i18n-t keypath="account.components.registration.tos" tag="p">
<template #tos_link>
<router-link
to="/imprint-tos"
class="hover:cursor-pointer underline">
{{ $t("account.components.registration.tos_link") }}
</router-link>
</template>
</i18n-t>
</div>
<div v-if="hasError" class="pb-3 text-red-600">
Error during registration.
{{ $t("account.components.registration.result.error") }}
<br />
{{ hasErrorMessage }}
</div>
<PForm>
<PFormItem label="Username">
<PFormItem
:label="t('account.components.registration.form.username')">
<PInput v-model:value="inputUsername" class="w-full" />
<template #info>
Must be at least 3 characters long. Can't contain
spaces.
{{
$t(
"account.components.registration.form.username_info"
)
}}
</template>
</PFormItem>
<PFormItem label="Password">
<PFormItem
:label="t('account.components.registration.form.password')">
<PInput
v-model:value="inputPassword"
type="password"
class="w-full" />
<template #info>
Must be at least 8 characters long.
{{
$t(
"account.components.registration.form.password_info"
)
}}
</template>
</PFormItem>
<PFormItem label="Email">
<PFormItem
:label="t('account.components.registration.form.email')">
<PInput
v-model:value="inputEmail"
placeholder="Not mandatory, but recommended."
:placeholder="
t(
'account.components.registration.form.email_placeholder'
)
"
class="w-full" />
<template #info>
Not mandatory. Increases your account security.
{{
$t(
"account.components.registration.form.email_info"
)
}}
</template>
</PFormItem>
<PFormSeperator>
<div
class="text-xl text-white font-bold font-mono pt-3 pb-1">
Security Question
{{
$t(
"account.components.registration.form.security_question"
)
}}
</div>
<div class="font-mono text-xs text-white/60 pb-3">
Enter the name of planet
<span
class="text-nowrap bg-prunplanner text-black px-1"
>{{ activeSecurityOption }}</span
>. To find it, open a new Prosperous Universe buffer
with the command
<span
class="text-nowrap bg-prunplanner text-black px-0.5"
>{{ `PLI ${activeSecurityOption}` }}</span
>. You'll see the planet's name listed under "Name" in
the planet information.
<i18n-t
keypath="account.components.registration.form.question"
tag="p">
<template #planet>
<span
class="text-nowrap bg-prunplanner text-black px-1"
>{{ activeSecurityOption }}</span
>
</template>
<template #command>
<span
class="text-nowrap bg-prunplanner text-black px-0.5"
>{{ `PLI ${activeSecurityOption}` }}</span
>
</template>
</i18n-t>
</div>
</PFormSeperator>
<PFormItem label="Name">
<PFormItem
:label="
t('account.components.registration.form.planet_name')
">
<PInput v-model:value="inputPlanetName" class="w-full" />
</PFormItem>
<PFormItem label="">
Expand All @@ -180,7 +222,11 @@
:loading="isLoading"
class="mt-3"
@click="registerUser">
Create Account
{{
$t(
"account.components.registration.buttons.register"
)
}}
</PButton>
</PFormItem>
</PForm>
Expand Down
16 changes: 11 additions & 5 deletions src/features/account/components/RequestPasswordReset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script setup lang="ts">
import { ref, Ref, computed } from "vue";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

// API
import { useQuery } from "@/lib/query_cache/useQuery";

Expand Down Expand Up @@ -45,27 +48,30 @@

<template>
<h2 class="text-white/80 font-bold text-lg font-mono">
Password Reset Request
{{ $t("account.components.request_password_reset.title") }}
</h2>
<div class="py-3 text-xs font-mono text-white/60">
Enter the verified email address linked to your PRUNplanner account. If
we recognize it, we'll send you a code to reset your password.
{{ $t("account.components.request_password_reset.info") }}
</div>
<div v-if="requestResponse" class="pb-3 text-xs font-mono text-prunplanner">
{{ requestResponse.detail }}.
</div>
<div>
<PInput
v-model:value="inputEmail"
placeholder="Email Address"
:placeholder="
t(
'account.components.request_password_reset.form.email_placeholder'
)
"
class="w-full" />
</div>
<div class="pt-3">
<PButton
:disabled="!canRequest"
:loading="isLoading"
@click="requestReset">
Send Request
{{ $t("account.components.request_password_reset.buttons.send") }}
</PButton>
</div>
</template>
Loading
Loading