chore: Translation Fixes, Lint Error Corrections, and Additional Translations (#788)

* fix translation and small lint error

* changed from localize to useLocalize hook

* changed to useLocalize
This commit is contained in:
Marco Beretta 2023-08-14 17:51:03 +02:00 committed by GitHub
parent b64cc71d88
commit 74802dd720
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 421 additions and 421 deletions

View file

@ -1,9 +1,7 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
import {
useRegisterUserMutation,
TRegisterUser,
@ -15,7 +13,7 @@ function Registration() {
const navigate = useNavigate();
const { data: startupConfig } = useGetStartupConfig();
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const {
register,
@ -56,7 +54,7 @@ function Registration() {
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">
{localize(lang, 'com_auth_create_account')}
{localize('com_auth_create_account')}
</h1>
{error && (
<div
@ -64,7 +62,7 @@ function Registration() {
role="alert"
data-testid="registration-error"
>
{localize(lang, 'com_auth_error_create')} {errorMessage}
{localize('com_auth_error_create')} {errorMessage}
</div>
)}
<form
@ -79,16 +77,16 @@ function Registration() {
id="name"
type="text"
autoComplete="name"
aria-label={localize(lang, 'com_auth_full_name')}
aria-label={localize('com_auth_full_name')}
{...register('name', {
required: localize(lang, 'com_auth_name_required'),
required: localize('com_auth_name_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_name_min_length'),
message: localize('com_auth_name_min_length'),
},
maxLength: {
value: 80,
message: localize(lang, 'com_auth_name_max_length'),
message: localize('com_auth_name_max_length'),
},
})}
aria-invalid={!!errors.name}
@ -99,7 +97,7 @@ function Registration() {
htmlFor="name"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_full_name')}
{localize('com_auth_full_name')}
</label>
</div>
@ -115,16 +113,16 @@ function Registration() {
<input
type="text"
id="username"
aria-label={localize(lang, 'com_auth_username')}
aria-label={localize('com_auth_username')}
{...register('username', {
required: localize(lang, 'com_auth_username_required'),
required: localize('com_auth_username_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_username_min_length'),
message: localize('com_auth_username_min_length'),
},
maxLength: {
value: 20,
message: localize(lang, 'com_auth_username_max_length'),
message: localize('com_auth_username_max_length'),
},
})}
aria-invalid={!!errors.username}
@ -136,7 +134,7 @@ function Registration() {
htmlFor="username"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_username')}
{localize('com_auth_username')}
</label>
</div>
@ -153,20 +151,20 @@ function Registration() {
type="email"
id="email"
autoComplete="email"
aria-label={localize(lang, 'com_auth_email')}
aria-label={localize('com_auth_email')}
{...register('email', {
required: localize(lang, 'com_auth_email_required'),
required: localize('com_auth_email_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_email_min_length'),
message: localize('com_auth_email_min_length'),
},
maxLength: {
value: 120,
message: localize(lang, 'com_auth_email_max_length'),
message: localize('com_auth_email_max_length'),
},
pattern: {
value: /\S+@\S+\.\S+/,
message: localize(lang, 'com_auth_email_pattern'),
message: localize('com_auth_email_pattern'),
},
})}
aria-invalid={!!errors.email}
@ -177,7 +175,7 @@ function Registration() {
htmlFor="email"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_email')}
{localize('com_auth_email')}
</label>
</div>
{errors.email && (
@ -194,16 +192,16 @@ function Registration() {
id="password"
data-testid="password"
autoComplete="current-password"
aria-label={localize(lang, 'com_auth_password')}
aria-label={localize('com_auth_password')}
{...register('password', {
required: localize(lang, 'com_auth_password_required'),
required: localize('com_auth_password_required'),
minLength: {
value: 8,
message: localize(lang, 'com_auth_password_min_length'),
message: localize('com_auth_password_min_length'),
},
maxLength: {
value: 128,
message: localize(lang, 'com_auth_password_max_length'),
message: localize('com_auth_password_max_length'),
},
})}
aria-invalid={!!errors.password}
@ -214,7 +212,7 @@ function Registration() {
htmlFor="password"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_password')}
{localize('com_auth_password')}
</label>
</div>
@ -231,7 +229,7 @@ function Registration() {
type="password"
id="confirm_password"
data-testid="confirm_password"
aria-label={localize(lang, 'com_auth_password_confirm')}
aria-label={localize('com_auth_password_confirm')}
// uncomment to block pasting in confirm field
// onPaste={(e) => {
// e.preventDefault();
@ -239,7 +237,7 @@ function Registration() {
// }}
{...register('confirm_password', {
validate: (value) =>
value === password || localize(lang, 'com_auth_password_not_match'),
value === password || localize('com_auth_password_not_match'),
})}
aria-invalid={!!errors.confirm_password}
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
@ -249,7 +247,7 @@ function Registration() {
htmlFor="confirm_password"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_password_confirm')}
{localize('com_auth_password_confirm')}
</label>
</div>
@ -273,19 +271,19 @@ function Registration() {
aria-label="Submit registration"
className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-green-500"
>
{localize(lang, 'com_auth_continue')}
{localize('com_auth_continue')}
</button>
</div>
</form>
<p className="my-4 text-center text-sm font-light text-gray-700">
{' '}
{localize(lang, 'com_auth_already_have_account')}{' '}
{localize('com_auth_already_have_account')}{' '}
<a
href="/login"
aria-label="Login"
className="p-1 font-medium text-green-500 hover:underline"
>
{localize(lang, 'com_auth_login')}
{localize('com_auth_login')}
</a>
</p>
{startupConfig?.socialLoginEnabled && (
@ -305,7 +303,7 @@ function Registration() {
href={`${startupConfig.serverDomain}/oauth/google`}
>
<GoogleIcon />
<p>{localize(lang, 'com_auth_google_login')}</p>
<p>{localize('com_auth_google_login')}</p>
</a>
</div>
</>
@ -337,7 +335,7 @@ function Registration() {
href={`${startupConfig.serverDomain}/oauth/github`}
>
<GithubIcon />
<p>{localize(lang, 'com_auth_github_login')}</p>
<p>{localize('com_auth_github_login')}</p>
</a>
</div>
</>
@ -351,7 +349,7 @@ function Registration() {
href={`${startupConfig.serverDomain}/oauth/discord`}
>
<DiscordIcon />
<p>{localize(lang, 'com_auth_discord_login')}</p>
<p>{localize('com_auth_discord_login')}</p>
</a>
</div>
</>