Implement extensive localization improvements across forms and components
- Refactored `it.json` translations with added keys for authentication, admin panel, and settings. - Updated authentication forms (`LoginForm`, `RegisterForm`, `PasswordResetConfirmForm`) to use localized strings via `next-intl`. - Enhanced password validation schemas with dynamic translations and refined error messages. - Adjusted `Header` and related components to include localized navigation and status elements. - Improved placeholder hints, button labels, and inline validation messages for seamless localization.
This commit is contained in:
Felipe Cardoso
@@ -11,6 +11,7 @@ import { Link } from '@/lib/i18n/routing';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -23,17 +24,18 @@ import config from '@/config/app.config';
|
||||
// Validation Schema
|
||||
// ============================================================================
|
||||
|
||||
const loginSchema = z.object({
|
||||
email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
|
||||
password: z
|
||||
.string()
|
||||
.min(1, 'Password is required')
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter'),
|
||||
});
|
||||
const createLoginSchema = (t: (key: string) => string) =>
|
||||
z.object({
|
||||
email: z.string().min(1, t('validation.required')).email(t('validation.email')),
|
||||
password: z
|
||||
.string()
|
||||
.min(1, t('validation.required'))
|
||||
.min(8, t('validation.minLength').replace('{count}', '8'))
|
||||
.regex(/[0-9]/, t('errors.validation.passwordWeak'))
|
||||
.regex(/[A-Z]/, t('errors.validation.passwordWeak')),
|
||||
});
|
||||
|
||||
type LoginFormData = z.infer<typeof loginSchema>;
|
||||
type LoginFormData = z.infer<ReturnType<typeof createLoginSchema>>;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
@@ -74,9 +76,22 @@ export function LoginForm({
|
||||
showPasswordResetLink = true,
|
||||
className,
|
||||
}: LoginFormProps) {
|
||||
const t = useTranslations('auth.login');
|
||||
const tValidation = useTranslations('validation');
|
||||
const tErrors = useTranslations('errors.validation');
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const loginMutation = useLogin();
|
||||
|
||||
const loginSchema = createLoginSchema((key: string) => {
|
||||
if (key.startsWith('validation.')) {
|
||||
return tValidation(key.replace('validation.', ''));
|
||||
}
|
||||
if (key.startsWith('errors.validation.')) {
|
||||
return tErrors(key.replace('errors.validation.', ''));
|
||||
}
|
||||
return key;
|
||||
});
|
||||
|
||||
const form = useForm<LoginFormData>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
mode: 'onBlur',
|
||||
@@ -116,7 +131,7 @@ export function LoginForm({
|
||||
});
|
||||
} else {
|
||||
// Unexpected error format
|
||||
setServerError('An unexpected error occurred. Please try again.');
|
||||
setServerError(t('unexpectedError'));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -135,11 +150,11 @@ export function LoginForm({
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Label htmlFor="email">{t('emailLabel')}</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
placeholder={t('emailPlaceholder')}
|
||||
autoComplete="email"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('email')}
|
||||
@@ -156,20 +171,20 @@ export function LoginForm({
|
||||
{/* Password Field */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Label htmlFor="password">{t('passwordLabel')}</Label>
|
||||
{showPasswordResetLink && (
|
||||
<Link
|
||||
href="/password-reset"
|
||||
className="text-sm text-muted-foreground hover:text-primary underline-offset-4 hover:underline"
|
||||
>
|
||||
Forgot password?
|
||||
{t('forgotPassword')}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
autoComplete="current-password"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('password')}
|
||||
@@ -185,18 +200,18 @@ export function LoginForm({
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Signing in...' : 'Sign in'}
|
||||
{isSubmitting ? t('loginButtonLoading') : t('loginButton')}
|
||||
</Button>
|
||||
|
||||
{/* Registration Link */}
|
||||
{showRegisterLink && config.features.enableRegistration && (
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Don't have an account?{' '}
|
||||
{t('noAccount')}{' '}
|
||||
<Link
|
||||
href={config.routes.register}
|
||||
className="text-primary underline-offset-4 hover:underline font-medium"
|
||||
>
|
||||
Sign up
|
||||
{t('registerLink')}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { Link } from '@/lib/i18n/routing';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -22,23 +23,24 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
|
||||
// Validation Schema
|
||||
// ============================================================================
|
||||
|
||||
const resetConfirmSchema = z
|
||||
.object({
|
||||
token: z.string().min(1, 'Reset token is required'),
|
||||
new_password: z
|
||||
.string()
|
||||
.min(1, 'New password is required')
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter'),
|
||||
confirm_password: z.string().min(1, 'Please confirm your password'),
|
||||
})
|
||||
.refine((data) => data.new_password === data.confirm_password, {
|
||||
message: 'Passwords do not match',
|
||||
path: ['confirm_password'],
|
||||
});
|
||||
const createResetConfirmSchema = (t: (key: string) => string) =>
|
||||
z
|
||||
.object({
|
||||
token: z.string().min(1, t('tokenRequired')),
|
||||
new_password: z
|
||||
.string()
|
||||
.min(1, t('passwordRequired'))
|
||||
.min(8, t('passwordMinLength'))
|
||||
.regex(/[0-9]/, t('passwordNumber'))
|
||||
.regex(/[A-Z]/, t('passwordUppercase')),
|
||||
confirm_password: z.string().min(1, t('confirmPasswordRequired')),
|
||||
})
|
||||
.refine((data) => data.new_password === data.confirm_password, {
|
||||
message: t('passwordMismatch'),
|
||||
path: ['confirm_password'],
|
||||
});
|
||||
|
||||
type ResetConfirmFormData = z.infer<typeof resetConfirmSchema>;
|
||||
type ResetConfirmFormData = z.infer<ReturnType<typeof createResetConfirmSchema>>;
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
@@ -104,10 +106,13 @@ export function PasswordResetConfirmForm({
|
||||
showLoginLink = true,
|
||||
className,
|
||||
}: PasswordResetConfirmFormProps) {
|
||||
const t = useTranslations('auth.passwordResetConfirm');
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const resetMutation = usePasswordResetConfirm();
|
||||
|
||||
const resetConfirmSchema = createResetConfirmSchema((key: string) => t(key));
|
||||
|
||||
const form = useForm<ResetConfirmFormData>({
|
||||
resolver: zodResolver(resetConfirmSchema),
|
||||
defaultValues: {
|
||||
@@ -134,9 +139,7 @@ export function PasswordResetConfirmForm({
|
||||
});
|
||||
|
||||
// Show success message
|
||||
setSuccessMessage(
|
||||
'Your password has been successfully reset. You can now log in with your new password.'
|
||||
);
|
||||
setSuccessMessage(t('success'));
|
||||
|
||||
// Reset form
|
||||
form.reset({ token, new_password: '', confirm_password: '' });
|
||||
@@ -161,7 +164,7 @@ export function PasswordResetConfirmForm({
|
||||
});
|
||||
} else {
|
||||
// Unexpected error format
|
||||
setServerError('An unexpected error occurred. Please try again.');
|
||||
setServerError(t('unexpectedError'));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -186,9 +189,7 @@ export function PasswordResetConfirmForm({
|
||||
)}
|
||||
|
||||
{/* Instructions */}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Enter your new password below. Make sure it meets all security requirements.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{t('instructions')}</p>
|
||||
|
||||
{/* Hidden Token Field (for form submission) */}
|
||||
<input type="hidden" {...form.register('token')} />
|
||||
@@ -196,12 +197,12 @@ export function PasswordResetConfirmForm({
|
||||
{/* New Password Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="new_password">
|
||||
New Password <span className="text-destructive">*</span>
|
||||
{t('newPasswordLabel')} <span className="text-destructive">{t('required')}</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="new_password"
|
||||
type="password"
|
||||
placeholder="Enter new password"
|
||||
placeholder={t('newPasswordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('new_password')}
|
||||
@@ -240,7 +241,7 @@ export function PasswordResetConfirmForm({
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{passwordStrength.hasMinLength ? '✓' : '○'} At least 8 characters
|
||||
{passwordStrength.hasMinLength ? '✓' : '○'} {t('passwordRequirements.minLength')}
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
@@ -249,7 +250,7 @@ export function PasswordResetConfirmForm({
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{passwordStrength.hasNumber ? '✓' : '○'} Contains a number
|
||||
{passwordStrength.hasNumber ? '✓' : '○'} {t('passwordRequirements.hasNumber')}
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
@@ -258,7 +259,8 @@ export function PasswordResetConfirmForm({
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{passwordStrength.hasUppercase ? '✓' : '○'} Contains an uppercase letter
|
||||
{passwordStrength.hasUppercase ? '✓' : '○'}{' '}
|
||||
{t('passwordRequirements.hasUppercase')}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -268,12 +270,12 @@ export function PasswordResetConfirmForm({
|
||||
{/* Confirm Password Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirm_password">
|
||||
Confirm Password <span className="text-destructive">*</span>
|
||||
{t('confirmPasswordLabel')} <span className="text-destructive">{t('required')}</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="confirm_password"
|
||||
type="password"
|
||||
placeholder="Re-enter new password"
|
||||
placeholder={t('confirmPasswordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('confirm_password')}
|
||||
@@ -292,18 +294,18 @@ export function PasswordResetConfirmForm({
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Resetting Password...' : 'Reset Password'}
|
||||
{isSubmitting ? t('resetButtonLoading') : t('resetButton')}
|
||||
</Button>
|
||||
|
||||
{/* Login Link */}
|
||||
{showLoginLink && (
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Remember your password?{' '}
|
||||
{t('rememberPassword')}{' '}
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-primary underline-offset-4 hover:underline font-medium"
|
||||
>
|
||||
Back to login
|
||||
{t('backToLogin')}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { Link } from '@/lib/i18n/routing';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -22,11 +23,12 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
|
||||
// Validation Schema
|
||||
// ============================================================================
|
||||
|
||||
const resetRequestSchema = z.object({
|
||||
email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
|
||||
});
|
||||
const createResetRequestSchema = (t: (key: string) => string) =>
|
||||
z.object({
|
||||
email: z.string().min(1, t('validation.required')).email(t('validation.email')),
|
||||
});
|
||||
|
||||
type ResetRequestFormData = z.infer<typeof resetRequestSchema>;
|
||||
type ResetRequestFormData = z.infer<ReturnType<typeof createResetRequestSchema>>;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
@@ -64,10 +66,19 @@ export function PasswordResetRequestForm({
|
||||
showLoginLink = true,
|
||||
className,
|
||||
}: PasswordResetRequestFormProps) {
|
||||
const t = useTranslations('auth.passwordReset');
|
||||
const tValidation = useTranslations('validation');
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const resetMutation = usePasswordResetRequest();
|
||||
|
||||
const resetRequestSchema = createResetRequestSchema((key: string) => {
|
||||
if (key.startsWith('validation.')) {
|
||||
return tValidation(key.replace('validation.', ''));
|
||||
}
|
||||
return t(key);
|
||||
});
|
||||
|
||||
const form = useForm<ResetRequestFormData>({
|
||||
resolver: zodResolver(resetRequestSchema),
|
||||
defaultValues: {
|
||||
@@ -86,9 +97,7 @@ export function PasswordResetRequestForm({
|
||||
await resetMutation.mutateAsync({ email: data.email });
|
||||
|
||||
// Show success message
|
||||
setSuccessMessage(
|
||||
'Password reset instructions have been sent to your email address. Please check your inbox.'
|
||||
);
|
||||
setSuccessMessage(t('success'));
|
||||
|
||||
// Reset form
|
||||
form.reset();
|
||||
@@ -113,7 +122,7 @@ export function PasswordResetRequestForm({
|
||||
});
|
||||
} else {
|
||||
// Unexpected error format
|
||||
setServerError('An unexpected error occurred. Please try again.');
|
||||
setServerError(t('unexpectedError'));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -138,19 +147,17 @@ export function PasswordResetRequestForm({
|
||||
)}
|
||||
|
||||
{/* Instructions */}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Enter your email address and we'll send you instructions to reset your password.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{t('instructions')}</p>
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">
|
||||
Email <span className="text-destructive">*</span>
|
||||
{t('emailLabel')} <span className="text-destructive">{t('required')}</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
placeholder={t('emailPlaceholder')}
|
||||
autoComplete="email"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('email')}
|
||||
@@ -167,18 +174,18 @@ export function PasswordResetRequestForm({
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Sending...' : 'Send Reset Instructions'}
|
||||
{isSubmitting ? t('sendButtonLoading') : t('sendButton')}
|
||||
</Button>
|
||||
|
||||
{/* Login Link */}
|
||||
{showLoginLink && (
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Remember your password?{' '}
|
||||
{t('rememberPassword')}{' '}
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-primary underline-offset-4 hover:underline font-medium"
|
||||
>
|
||||
Back to login
|
||||
{t('backToLogin')}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { Link } from '@/lib/i18n/routing';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -23,33 +24,34 @@ import config from '@/config/app.config';
|
||||
// Validation Schema
|
||||
// ============================================================================
|
||||
|
||||
const registerSchema = z
|
||||
.object({
|
||||
email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
|
||||
first_name: z
|
||||
.string()
|
||||
.min(1, 'First name is required')
|
||||
.min(2, 'First name must be at least 2 characters')
|
||||
.max(50, 'First name must not exceed 50 characters'),
|
||||
last_name: z
|
||||
.string()
|
||||
.max(50, 'Last name must not exceed 50 characters')
|
||||
.optional()
|
||||
.or(z.literal('')), // Allow empty string
|
||||
password: z
|
||||
.string()
|
||||
.min(1, 'Password is required')
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter'),
|
||||
confirmPassword: z.string().min(1, 'Please confirm your password'),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: 'Passwords do not match',
|
||||
path: ['confirmPassword'],
|
||||
});
|
||||
const createRegisterSchema = (t: (key: string) => string) =>
|
||||
z
|
||||
.object({
|
||||
email: z.string().min(1, t('validation.required')).email(t('validation.email')),
|
||||
first_name: z
|
||||
.string()
|
||||
.min(1, t('firstNameRequired'))
|
||||
.min(2, t('firstNameMinLength'))
|
||||
.max(50, t('firstNameMaxLength')),
|
||||
last_name: z
|
||||
.string()
|
||||
.max(50, t('lastNameMaxLength'))
|
||||
.optional()
|
||||
.or(z.literal('')), // Allow empty string
|
||||
password: z
|
||||
.string()
|
||||
.min(1, t('passwordRequired'))
|
||||
.min(8, t('passwordMinLength'))
|
||||
.regex(/[0-9]/, t('passwordNumber'))
|
||||
.regex(/[A-Z]/, t('passwordUppercase')),
|
||||
confirmPassword: z.string().min(1, t('confirmPasswordRequired')),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: t('passwordMismatch'),
|
||||
path: ['confirmPassword'],
|
||||
});
|
||||
|
||||
type RegisterFormData = z.infer<typeof registerSchema>;
|
||||
type RegisterFormData = z.infer<ReturnType<typeof createRegisterSchema>>;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
@@ -84,9 +86,18 @@ interface RegisterFormProps {
|
||||
* ```
|
||||
*/
|
||||
export function RegisterForm({ onSuccess, showLoginLink = true, className }: RegisterFormProps) {
|
||||
const t = useTranslations('auth.register');
|
||||
const tValidation = useTranslations('validation');
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const registerMutation = useRegister();
|
||||
|
||||
const registerSchema = createRegisterSchema((key: string) => {
|
||||
if (key.startsWith('validation.')) {
|
||||
return tValidation(key.replace('validation.', ''));
|
||||
}
|
||||
return t(key);
|
||||
});
|
||||
|
||||
const form = useForm<RegisterFormData>({
|
||||
resolver: zodResolver(registerSchema),
|
||||
mode: 'onBlur',
|
||||
@@ -133,7 +144,7 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
});
|
||||
} else {
|
||||
// Unexpected error format
|
||||
setServerError('An unexpected error occurred. Please try again.');
|
||||
setServerError(t('unexpectedError'));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -159,12 +170,12 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
{/* First Name Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="first_name">
|
||||
First Name <span className="text-destructive">*</span>
|
||||
{t('firstNameLabel')} <span className="text-destructive">{t('required')}</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="first_name"
|
||||
type="text"
|
||||
placeholder="John"
|
||||
placeholder={t('firstNamePlaceholder')}
|
||||
autoComplete="given-name"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('first_name')}
|
||||
@@ -180,11 +191,11 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
|
||||
{/* Last Name Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="last_name">Last Name</Label>
|
||||
<Label htmlFor="last_name">{t('lastNameLabel')}</Label>
|
||||
<Input
|
||||
id="last_name"
|
||||
type="text"
|
||||
placeholder="Doe (optional)"
|
||||
placeholder={t('lastNamePlaceholder')}
|
||||
autoComplete="family-name"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('last_name')}
|
||||
@@ -201,12 +212,12 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
{/* Email Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">
|
||||
Email <span className="text-destructive">*</span>
|
||||
{t('emailLabel')} <span className="text-destructive">{t('required')}</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
placeholder={t('emailPlaceholder')}
|
||||
autoComplete="email"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('email')}
|
||||
@@ -223,12 +234,12 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
{/* Password Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">
|
||||
Password <span className="text-destructive">*</span>
|
||||
{t('passwordLabel')} <span className="text-destructive">{t('required')}</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Create a strong password"
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('password')}
|
||||
@@ -253,21 +264,21 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
hasMinLength ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{hasMinLength ? '✓' : '○'} At least 8 characters
|
||||
{hasMinLength ? '✓' : '○'} {t('passwordRequirements.minLength')}
|
||||
</p>
|
||||
<p
|
||||
className={
|
||||
hasNumber ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{hasNumber ? '✓' : '○'} Contains a number
|
||||
{hasNumber ? '✓' : '○'} {t('passwordRequirements.hasNumber')}
|
||||
</p>
|
||||
<p
|
||||
className={
|
||||
hasUppercase ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{hasUppercase ? '✓' : '○'} Contains an uppercase letter
|
||||
{hasUppercase ? '✓' : '○'} {t('passwordRequirements.hasUppercase')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -276,12 +287,12 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
{/* Confirm Password Field */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">
|
||||
Confirm Password <span className="text-destructive">*</span>
|
||||
{t('confirmPasswordLabel')} <span className="text-destructive">{t('required')}</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="Confirm your password"
|
||||
placeholder={t('confirmPasswordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
{...form.register('confirmPassword')}
|
||||
@@ -299,18 +310,18 @@ export function RegisterForm({ onSuccess, showLoginLink = true, className }: Reg
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Creating account...' : 'Create account'}
|
||||
{isSubmitting ? t('registerButtonLoading') : t('registerButton')}
|
||||
</Button>
|
||||
|
||||
{/* Login Link */}
|
||||
{showLoginLink && (
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Already have an account?{' '}
|
||||
{t('hasAccount')}{' '}
|
||||
<Link
|
||||
href={config.routes.login}
|
||||
className="text-primary underline-offset-4 hover:underline font-medium"
|
||||
>
|
||||
Sign in
|
||||
{t('loginLink')}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Link } from '@/lib/i18n/routing';
|
||||
import { usePathname } from '@/lib/i18n/routing';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import { useLogout } from '@/lib/api/hooks/useAuth';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -68,6 +69,7 @@ function NavLink({
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
const t = useTranslations('navigation');
|
||||
const { user } = useAuth();
|
||||
const { mutate: logout, isPending: isLoggingOut } = useLogout();
|
||||
|
||||
@@ -87,9 +89,9 @@ export function Header() {
|
||||
{/* Navigation Links */}
|
||||
<nav className="hidden md:flex items-center space-x-1">
|
||||
<NavLink href="/" exact>
|
||||
Home
|
||||
{t('home')}
|
||||
</NavLink>
|
||||
{user?.is_superuser && <NavLink href="/admin">Admin</NavLink>}
|
||||
{user?.is_superuser && <NavLink href="/admin">{t('admin')}</NavLink>}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -120,20 +122,20 @@ export function Header() {
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/settings/profile" className="cursor-pointer">
|
||||
<User className="mr-2 h-4 w-4" />
|
||||
Profile
|
||||
{t('profile')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/settings/password" className="cursor-pointer">
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
Settings
|
||||
{t('settings')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{user?.is_superuser && (
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/admin" className="cursor-pointer">
|
||||
<Shield className="mr-2 h-4 w-4" />
|
||||
Admin Panel
|
||||
{t('adminPanel')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
@@ -144,7 +146,7 @@ export function Header() {
|
||||
disabled={isLoggingOut}
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
{isLoggingOut ? 'Logging out...' : 'Log out'}
|
||||
{isLoggingOut ? t('loggingOut') : t('logout')}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Alert } from '@/components/ui/alert';
|
||||
@@ -22,25 +23,26 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
|
||||
// Validation Schema
|
||||
// ============================================================================
|
||||
|
||||
const passwordChangeSchema = z
|
||||
.object({
|
||||
current_password: z.string().min(1, 'Current password is required'),
|
||||
new_password: z
|
||||
.string()
|
||||
.min(1, 'New password is required')
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
|
||||
.regex(/[a-z]/, 'Password must contain at least one lowercase letter')
|
||||
.regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character'),
|
||||
confirm_password: z.string().min(1, 'Please confirm your new password'),
|
||||
})
|
||||
.refine((data) => data.new_password === data.confirm_password, {
|
||||
message: 'Passwords do not match',
|
||||
path: ['confirm_password'],
|
||||
});
|
||||
const createPasswordChangeSchema = (t: (key: string) => string) =>
|
||||
z
|
||||
.object({
|
||||
current_password: z.string().min(1, t('currentPasswordRequired')),
|
||||
new_password: z
|
||||
.string()
|
||||
.min(1, t('newPasswordRequired'))
|
||||
.min(8, t('newPasswordMinLength'))
|
||||
.regex(/[0-9]/, t('newPasswordNumber'))
|
||||
.regex(/[A-Z]/, t('newPasswordUppercase'))
|
||||
.regex(/[a-z]/, t('newPasswordLowercase'))
|
||||
.regex(/[^A-Za-z0-9]/, t('newPasswordSpecial')),
|
||||
confirm_password: z.string().min(1, t('confirmPasswordRequired')),
|
||||
})
|
||||
.refine((data) => data.new_password === data.confirm_password, {
|
||||
message: t('passwordMismatch'),
|
||||
path: ['confirm_password'],
|
||||
});
|
||||
|
||||
type PasswordChangeFormData = z.infer<typeof passwordChangeSchema>;
|
||||
type PasswordChangeFormData = z.infer<ReturnType<typeof createPasswordChangeSchema>>;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
@@ -72,6 +74,7 @@ interface PasswordChangeFormProps {
|
||||
* ```
|
||||
*/
|
||||
export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormProps) {
|
||||
const t = useTranslations('settings.password');
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const passwordChangeMutation = usePasswordChange((message) => {
|
||||
toast.success(message);
|
||||
@@ -79,6 +82,8 @@ export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormP
|
||||
onSuccess?.();
|
||||
});
|
||||
|
||||
const passwordChangeSchema = createPasswordChangeSchema((key: string) => t(key));
|
||||
|
||||
const form = useForm<PasswordChangeFormData>({
|
||||
resolver: zodResolver(passwordChangeSchema),
|
||||
defaultValues: {
|
||||
@@ -122,7 +127,7 @@ export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormP
|
||||
});
|
||||
} else {
|
||||
// Unexpected error format
|
||||
setServerError('An unexpected error occurred. Please try again.');
|
||||
setServerError(t('unexpectedError'));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -133,10 +138,8 @@ export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormP
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<CardTitle>Change Password</CardTitle>
|
||||
<CardDescription>
|
||||
Update your password to keep your account secure. Make sure it's strong and unique.
|
||||
</CardDescription>
|
||||
<CardTitle>{t('title')}</CardTitle>
|
||||
<CardDescription>{t('subtitle')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
@@ -149,9 +152,9 @@ export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormP
|
||||
|
||||
{/* Current Password Field */}
|
||||
<FormField
|
||||
label="Current Password"
|
||||
label={t('currentPasswordLabel')}
|
||||
type="password"
|
||||
placeholder="Enter your current password"
|
||||
placeholder={t('currentPasswordPlaceholder')}
|
||||
autoComplete="current-password"
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
@@ -161,22 +164,22 @@ export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormP
|
||||
|
||||
{/* New Password Field */}
|
||||
<FormField
|
||||
label="New Password"
|
||||
label={t('newPasswordLabel')}
|
||||
type="password"
|
||||
placeholder="Enter your new password"
|
||||
placeholder={t('newPasswordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
description="At least 8 characters with uppercase, lowercase, number, and special character"
|
||||
description={t('newPasswordDescription')}
|
||||
error={form.formState.errors.new_password}
|
||||
{...form.register('new_password')}
|
||||
/>
|
||||
|
||||
{/* Confirm Password Field */}
|
||||
<FormField
|
||||
label="Confirm New Password"
|
||||
label={t('confirmPasswordLabel')}
|
||||
type="password"
|
||||
placeholder="Confirm your new password"
|
||||
placeholder={t('confirmPasswordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
@@ -187,12 +190,12 @@ export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormP
|
||||
{/* Submit Button */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Button type="submit" disabled={isSubmitting || !isDirty}>
|
||||
{isSubmitting ? 'Changing Password...' : 'Change Password'}
|
||||
{isSubmitting ? t('updateButtonLoading') : t('updateButton')}
|
||||
</Button>
|
||||
{/* istanbul ignore next - Cancel button requires isDirty state, tested in E2E */}
|
||||
{isDirty && !isSubmitting && (
|
||||
<Button type="button" variant="outline" onClick={() => form.reset()}>
|
||||
Cancel
|
||||
{t('cancelButton')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Alert } from '@/components/ui/alert';
|
||||
@@ -23,21 +24,18 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
|
||||
// Validation Schema
|
||||
// ============================================================================
|
||||
|
||||
const profileSchema = z.object({
|
||||
first_name: z
|
||||
.string()
|
||||
.min(1, 'First name is required')
|
||||
.min(2, 'First name must be at least 2 characters')
|
||||
.max(50, 'First name must not exceed 50 characters'),
|
||||
last_name: z
|
||||
.string()
|
||||
.max(50, 'Last name must not exceed 50 characters')
|
||||
.optional()
|
||||
.or(z.literal('')),
|
||||
email: z.string().email('Invalid email address'),
|
||||
});
|
||||
const createProfileSchema = (t: (key: string) => string) =>
|
||||
z.object({
|
||||
first_name: z
|
||||
.string()
|
||||
.min(1, t('firstNameRequired'))
|
||||
.min(2, t('firstNameMinLength'))
|
||||
.max(50, t('firstNameMaxLength')),
|
||||
last_name: z.string().max(50, t('lastNameMaxLength')).optional().or(z.literal('')),
|
||||
email: z.string().email(t('emailInvalid')),
|
||||
});
|
||||
|
||||
type ProfileFormData = z.infer<typeof profileSchema>;
|
||||
type ProfileFormData = z.infer<ReturnType<typeof createProfileSchema>>;
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
@@ -67,6 +65,7 @@ interface ProfileSettingsFormProps {
|
||||
* ```
|
||||
*/
|
||||
export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFormProps) {
|
||||
const t = useTranslations('settings.profile');
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const currentUser = useCurrentUser();
|
||||
const updateProfileMutation = useUpdateProfile((message) => {
|
||||
@@ -74,6 +73,8 @@ export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFor
|
||||
onSuccess?.();
|
||||
});
|
||||
|
||||
const profileSchema = createProfileSchema((key: string) => t(key));
|
||||
|
||||
const form = useForm<ProfileFormData>({
|
||||
resolver: zodResolver(profileSchema),
|
||||
defaultValues: {
|
||||
@@ -135,7 +136,7 @@ export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFor
|
||||
});
|
||||
} else {
|
||||
// Unexpected error format
|
||||
setServerError('An unexpected error occurred. Please try again.');
|
||||
setServerError(t('unexpectedError'));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -146,10 +147,8 @@ export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFor
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<CardTitle>Profile Information</CardTitle>
|
||||
<CardDescription>
|
||||
Update your personal information. Your email address is read-only.
|
||||
</CardDescription>
|
||||
<CardTitle>{t('title')}</CardTitle>
|
||||
<CardDescription>{t('subtitle')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
@@ -162,9 +161,9 @@ export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFor
|
||||
|
||||
{/* First Name Field */}
|
||||
<FormField
|
||||
label="First Name"
|
||||
label={t('firstNameLabel')}
|
||||
type="text"
|
||||
placeholder="John"
|
||||
placeholder={t('firstNamePlaceholder')}
|
||||
autoComplete="given-name"
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
@@ -174,9 +173,9 @@ export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFor
|
||||
|
||||
{/* Last Name Field */}
|
||||
<FormField
|
||||
label="Last Name"
|
||||
label={t('lastNameLabel')}
|
||||
type="text"
|
||||
placeholder="Doe"
|
||||
placeholder={t('lastNamePlaceholder')}
|
||||
autoComplete="family-name"
|
||||
disabled={isSubmitting}
|
||||
error={form.formState.errors.last_name}
|
||||
@@ -185,11 +184,11 @@ export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFor
|
||||
|
||||
{/* Email Field (Read-only) */}
|
||||
<FormField
|
||||
label="Email"
|
||||
label={t('emailLabel')}
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
disabled
|
||||
description="Your email address cannot be changed from this form"
|
||||
description={t('emailDescription')}
|
||||
error={form.formState.errors.email}
|
||||
{...form.register('email')}
|
||||
/>
|
||||
@@ -197,12 +196,12 @@ export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFor
|
||||
{/* Submit Button */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Button type="submit" disabled={isSubmitting || !isDirty}>
|
||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||
{isSubmitting ? t('updateButtonLoading') : t('updateButton')}
|
||||
</Button>
|
||||
{/* istanbul ignore next - Reset button requires isDirty state, tested in E2E */}
|
||||
{isDirty && !isSubmitting && (
|
||||
<Button type="button" variant="outline" onClick={() => form.reset()}>
|
||||
Reset
|
||||
{t('resetButton')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user