andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-13 09:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(typescript): add i18n for input labels in Login V2 (#10233)

Browse Source 
# Which Problems Are Solved

- Most inputs have hardcoded label

# How the Problems Are Solved

- add usage of i18n library for every label
- add labels to i18n translation files

# Additional Changes

- fixed key used in `device-code-form.tsx` by submit button
- `v2-default.json` was update and contains all values from login app
not only newly added key for labels.

# Additional Context

N.A

---------

Co-authored-by: David Skewis <[email protected]>
Co-authored-by: Max Peintner <[email protected]>
This commit is contained in:
Adam Kida
2025-08-29 05:12:12 +00:00
committed by GitHub
co-authored by David Skewis Max Peintner
parent 6d0b7ed2aa
commit 832e78f9bc
20 changed files with 1786 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/login/src/components/change-password-form.tsx
+2 -2
View File
@@ -161,7 +161,7 @@ export function ChangePasswordForm({
{...register("password", {
required: t("change.required.newPassword"),
})}
label="New Password"
label={t("change.labels.newPassword")}
error={errors.password?.message as string}
data-testid="password-change-text-input"
/>
@@ -174,7 +174,7 @@ export function ChangePasswordForm({
{...register("confirmPassword", {
required: t("change.required.confirmPassword"),
})}
label="Confirm Password"
label={t("change.labels.confirmPassword")}
error={errors.confirmPassword?.message as string}
data-testid="password-change-confirm-text-input"
/>
apps/login/src/components/device-code-form.tsx
+2 -2
View File
@@ -66,7 +66,7 @@ export function DeviceCodeForm({ userCode }: { userCode?: string }) {
type="text"
autoComplete="one-time-code"
{...register("userCode", { required: t("usercode.required.code") })}
label="Code"
label={t("usercode.labels.code")}
data-testid="code-text-input"
/>
</div>
@@ -89,7 +89,7 @@ export function DeviceCodeForm({ userCode }: { userCode?: string }) {
data-testid="submit-button"
>
{loading && <Spinner className="mr-2 h-5 w-5" />}{" "}
<Translated i18nKey="verify.submit" namespace="verify" />
<Translated i18nKey="usercode.submit" namespace="device" />
</Button>
</div>
</form>
apps/login/src/components/ldap-username-password-form.tsx
+2 -2
View File
@@ -69,7 +69,7 @@ export function LDAPUsernamePasswordForm({ idpId, link }: Props) {
type="text"
autoComplete="username"
{...register("loginName", { required: t("required.username") })}
label={t("username")}
label={t("labels.username")}
data-testid="username-text-input"
/>
@@ -78,7 +78,7 @@ export function LDAPUsernamePasswordForm({ idpId, link }: Props) {
type="password"
autoComplete="password"
{...register("password", { required: t("required.password") })}
label={t("password")}
label={t("labels.password")}
data-testid="password-text-input"
/>
</div>
apps/login/src/components/login-otp.tsx
+1 -1
View File
@@ -253,7 +253,7 @@ export function LoginOTP({
<TextInput
type="text"
{...register("code", { required: t("verify.required.code") })}
label="Code"
label={t("verify.labels.code")}
autoComplete="one-time-code"
data-testid="code-text-input"
/>
apps/login/src/components/password-form.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ export function PasswordForm({
type="password"
autoComplete="password"
{...register("password", { required: t("verify.required.password") })}
label="Password"
label={t("verify.labels.password")}
data-testid="password-text-input"
/>
{!loginSettings?.hidePasswordReset && (
apps/login/src/components/register-form-idp-incomplete.tsx
+3 -3
View File
@@ -106,7 +106,7 @@ export function RegisterFormIDPIncomplete({
autoComplete="firstname"
required
{...register("firstname", { required: t("required.firstname") })}
label="First name"
label={t("labels.firstname")}
error={errors.firstname?.message as string}
data-testid="firstname-text-input"
/>
@@ -117,7 +117,7 @@ export function RegisterFormIDPIncomplete({
autoComplete="lastname"
required
{...register("lastname", { required: t("required.lastname") })}
label="Last name"
label={t("labels.lastname")}
error={errors.lastname?.message as string}
data-testid="lastname-text-input"
/>
@@ -128,7 +128,7 @@ export function RegisterFormIDPIncomplete({
autoComplete="email"
required
{...register("email", { required: t("required.email") })}
label="E-mail"
label={t("labels.email")}
error={errors.email?.message as string}
data-testid="email-text-input"
/>
apps/login/src/components/register-form.tsx
+3 -3
View File
@@ -134,7 +134,7 @@ export function RegisterForm({
autoComplete="firstname"
required
{...register("firstname", { required: t("required.firstname") })}
label="First name"
label={t("labels.firstname")}
error={errors.firstname?.message as string}
data-testid="firstname-text-input"
/>
@@ -145,7 +145,7 @@ export function RegisterForm({
autoComplete="lastname"
required
{...register("lastname", { required: t("required.lastname") })}
label="Last name"
label={t("labels.lastname")}
error={errors.lastname?.message as string}
data-testid="lastname-text-input"
/>
@@ -156,7 +156,7 @@ export function RegisterForm({
autoComplete="email"
required
{...register("email", { required: t("required.email") })}
label="E-mail"
label={t("labels.email")}
error={errors.email?.message as string}
data-testid="email-text-input"
/>
apps/login/src/components/set-password-form.tsx
+3 -3
View File
@@ -221,7 +221,7 @@ export function SetPasswordForm({
{...register("code", {
required: t("set.required.code"),
})}
label="Code"
label={t("set.labels.code")}
autoComplete="one-time-code"
error={errors.code?.message as string}
data-testid="code-text-input"
@@ -236,7 +236,7 @@ export function SetPasswordForm({
{...register("password", {
required: t("set.required.newPassword"),
})}
label="New Password"
label={t("set.labels.newPassword")}
error={errors.password?.message as string}
data-testid="password-set-text-input"
/>
@@ -249,7 +249,7 @@ export function SetPasswordForm({
{...register("confirmPassword", {
required: t("set.required.confirmPassword"),
})}
label="Confirm Password"
label={t("set.labels.confirmPassword")}
error={errors.confirmPassword?.message as string}
data-testid="password-set-confirm-text-input"
/>
apps/login/src/components/set-register-password-form.tsx
+2 -2
View File
@@ -120,7 +120,7 @@ export function SetRegisterPasswordForm({
{...register("password", {
required: t("password.required.password"),
})}
label="Password"
label={t("password.labels.password")}
error={errors.password?.message as string}
data-testid="password-text-input"
/>
@@ -133,7 +133,7 @@ export function SetRegisterPasswordForm({
{...register("confirmPassword", {
required: t("password.required.confirmPassword"),
})}
label="Confirm Password"
label={t("password.labels.confirmPassword")}
error={errors.confirmPassword?.message as string}
data-testid="password-confirm-text-input"
/>
apps/login/src/components/totp-register.tsx
+1 -1
View File
@@ -126,7 +126,7 @@ export function TotpRegister({
<TextInput
type="text"
{...register("code", { required: t("set.required.code") })}
label="Code"
label={t("set.labels.code")}
data-testid="code-text-input"
/>
</div>
apps/login/src/components/username-form.tsx
+4 -4
View File
@@ -86,16 +86,16 @@ export function UsernameForm({
}
}, []);
let inputLabel = "Loginname";
let inputLabel = t("labels.loginname");
if (
loginSettings?.disableLoginWithEmail &&
loginSettings?.disableLoginWithPhone
) {
inputLabel = "Username";
inputLabel = t("labels.username");
} else if (loginSettings?.disableLoginWithEmail) {
inputLabel = "Username or phone number";
inputLabel = t("labels.usernameOrPhoneNumber");
} else if (loginSettings?.disableLoginWithPhone) {
inputLabel = "Username or email";
inputLabel = t("labels.usernameOrEmail");
}
return (
apps/login/src/components/verify-form.tsx
+1 -1
View File
@@ -139,7 +139,7 @@ export function VerifyForm({
type="text"
autoComplete="one-time-code"
{...register("code", { required: t("verify.required.code") })}
label="Code"
label={t("verify.labels.code")}
data-testid="code-text-input"
/>
</div>