sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: homelab deployment - NPM + IONOS DNS + monitoring + NAS backup

Browse Source 
- Restructured docker-compose for Nginx Proxy Manager (no custom nginx)
- Added domain wordly.art configuration
- Added Prometheus + Grafana monitoring stack with pre-configured dashboards
- Added PostgreSQL backup script to NAS (daily/weekly/monthly rotation)
- Added alert rules for backend, system, and Docker metrics
- Updated deployment guide for NPM + IONOS DNS homelab setup
- Added marketing plan document
- PDF translator and watermark support
- Enhanced middleware, routes, and translator modules

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
sepehr
2026-05-10 11:43:28 +02:00
parent 16ac7ca2b9
commit ce8e150a61
110 changed files with 6935 additions and 4301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/app/auth/forgot-password/page.tsx
View File

@@ -8,19 +8,21 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { apiClient } from '@/lib/apiClient';
import { useI18n } from '@/lib/i18n';
function ForgotPasswordForm() {
const [email, setEmail] = useState('');
const [loading, setLoading] = useState(false);
const [sent, setSent] = useState(false);
const [error, setError] = useState('');
const { t } = useI18n();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
if (!email) {
setError('Veuillez entrer votre adresse email');
setError(t('forgotPassword.enterEmail'));
return;
}
@@ -29,7 +31,7 @@ function ForgotPasswordForm() {
await apiClient.post('/api/v1/auth/forgot-password', { email });
setSent(true);
} catch (err: unknown) {
const message = err instanceof Error ? err.message : "Une erreur s'est produite";
const message = err instanceof Error ? err.message : t('forgotPassword.error');
setError(message);
} finally {
setLoading(false);
@@ -44,15 +46,15 @@ function ForgotPasswordForm() {
<Languages className="h-6 w-6" />
</div>
<span className="text-2xl font-semibold text-foreground group-hover:text-primary transition-colors duration-300">
Office Translator
{t('auth.brandName')}
</span>
</Link>
<CardTitle className="text-2xl font-bold">Mot de passe oublie</CardTitle>
<CardTitle className="text-2xl font-bold">{t('forgotPassword.title')}</CardTitle>
<CardDescription>
{sent
? 'Verifiez votre boite mail'
: 'Entrez votre email pour recevoir un lien de reinitialisation'}
? t('forgotPassword.checkEmail')
: t('forgotPassword.subtitle')}
</CardDescription>
</CardHeader>
@@ -62,7 +64,7 @@ function ForgotPasswordForm() {
<div className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" />
<p className="text-sm text-green-800 dark:text-green-200">
Si un compte existe avec cette adresse, un email de reinitialisation a ete envoye.
{t('forgotPassword.sentMessage')}
</p>
</div>
</div>
@@ -75,11 +77,11 @@ function ForgotPasswordForm() {
)}
<div className="space-y-2">
<Label htmlFor="email">Adresse email</Label>
<Label htmlFor="email">{t('forgotPassword.emailLabel')}</Label>
<Input
id="email"
type="email"
placeholder="vous@exemple.com"
placeholder={t('forgotPassword.emailPlaceholder')}
value={email}
onChange={(e) => setEmail(e.target.value)}
leftIcon={<Mail className="h-4 w-4" />}
@@ -98,11 +100,11 @@ function ForgotPasswordForm() {
>
{loading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Envoi en cours...
<Loader2 className="me-2 h-4 w-4 animate-spin" />
{t('forgotPassword.sending')}
</>
) : (
'Envoyer le lien de reinitialisation'
t('forgotPassword.sendLink')
)}
</Button>
</form>
@@ -111,7 +113,7 @@ function ForgotPasswordForm() {
<p className="text-center text-sm text-muted-foreground">
<Link href="/auth/login" className="text-primary hover:underline font-medium inline-flex items-center gap-1">
<ArrowLeft className="h-3 w-3" />
Retour a la connexion
{t('forgotPassword.backToLogin')}
</Link>
</p>
</CardContent>
@@ -120,6 +122,7 @@ function ForgotPasswordForm() {
}
function LoadingFallback() {
const { t } = useI18n();
return (
<div className="w-full max-w-md mx-auto">
<div className="rounded-xl bg-card border border-border shadow-lg p-8">
@@ -128,7 +131,7 @@ function LoadingFallback() {
<Languages className="h-6 w-6" />
</div>
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<p className="text-muted-foreground">Chargement...</p>
<p className="text-muted-foreground">{t('forgotPassword.loading')}</p>
</div>
</div>
</div>

32
frontend/src/app/auth/login/LoginForm.tsx
View File

@@ -8,6 +8,7 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useNotification } from '@/components/ui/notification';
import { useI18n } from '@/lib/i18n';
import { useLogin } from './useLogin';
export function LoginForm() {
@@ -17,11 +18,12 @@ export function LoginForm() {
const loginMutation = useLogin();
const { notify } = useNotification();
const { t } = useI18n();
useEffect(() => {
if (loginMutation.isError && loginMutation.error) {
notify({
title: 'Erreur de connexion',
title: t('login.errorTitle'),
description: loginMutation.error.message,
variant: 'destructive',
});
@@ -41,26 +43,26 @@ export function LoginForm() {
<Languages className="h-6 w-6" />
</div>
<span className="text-2xl font-semibold text-foreground">
Office Translator
{t('auth.brandName')}
</span>
</Link>
<CardTitle className="text-2xl font-bold">
Welcome back
{t('login.welcomeBack')}
</CardTitle>
<CardDescription>
Sign in to continue translating
{t('login.signInToContinue')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Label htmlFor="email">{t('login.email')}</Label>
<Input
id="email"
type="email"
placeholder="you@example.com"
placeholder={t('login.emailPlaceholder')}
value={email}
onChange={(e) => setEmail(e.target.value)}
leftIcon={<Mail className="h-4 w-4" />}
@@ -70,16 +72,16 @@ export function LoginForm() {
<div className="space-y-2">
<div className="flex justify-between items-center">
<Label htmlFor="password">Password</Label>
<Label htmlFor="password">{t('login.password')}</Label>
<Link href="/auth/forgot-password" className="text-sm text-primary hover:underline">
Forgot password?
{t('login.forgotPassword')}
</Link>
</div>
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : 'password'}
placeholder="••••••••"
placeholder={t('login.passwordPlaceholder')}
value={password}
onChange={(e) => setPassword(e.target.value)}
leftIcon={<Lock className="h-4 w-4" />}
@@ -102,22 +104,22 @@ export function LoginForm() {
>
{loginMutation.isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Signing in...
<Loader2 className="me-2 h-4 w-4 animate-spin" />
{t('login.signingIn')}
</>
) : (
<>
Sign In
<ArrowRight className="ml-2 h-4 w-4" />
{t('login.signIn')}
<ArrowRight className="ms-2 h-4 w-4" />
</>
)}
</Button>
</form>
<p className="text-center text-sm text-muted-foreground">
Don&apos;t have an account?{' '}
{t('login.noAccount')}{' '}
<Link href="/auth/register" className="text-primary hover:underline">
Sign up for free
{t('login.signUpFree')}
</Link>
</p>
</CardContent>

10
frontend/src/app/auth/login/page.tsx
View File

@@ -1,8 +1,12 @@
'use client';
import { Suspense } from 'react';
import { LoginForm } from './LoginForm';
import { Loader2, Languages } from 'lucide-react';
import { useI18n } from '@/lib/i18n';
function LoadingFallback() {
const { t } = useI18n();
return (
<div className="w-full max-w-md mx-auto">
<div className="rounded-xl bg-card border border-border shadow-lg p-8">
@@ -11,7 +15,7 @@ function LoadingFallback() {
<Languages className="h-6 w-6" />
</div>
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<p className="text-muted-foreground">Loading...</p>
<p className="text-muted-foreground">{t('common.loading')}</p>
</div>
</div>
</div>
@@ -26,13 +30,13 @@ export default function LoginPage() {
<div className="absolute inset-0 bg-[url('/grid.svg')] opacity-5" />
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/90 to-background/50" />
</div>
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-20 left-10 w-32 h-32 bg-primary/5 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-20 right-20 w-24 h-24 bg-accent/5 rounded-full blur-2xl animate-pulse" />
<div className="absolute top-1/2 right-1/4 w-16 h-16 bg-success/5 rounded-full blur-xl animate-pulse" />
</div>
<Suspense fallback={<LoadingFallback />}>
<LoginForm />
</Suspense>

2
frontend/src/app/auth/login/useLogin.ts
View File

@@ -12,7 +12,7 @@ export function useLogin() {
return useMutation<LoginResponse, ApiClientError, LoginRequest>({
mutationFn: async (credentials: LoginRequest) => {
const response = await apiClient.post<LoginResponse>(
const response = await apiClient.post<{ data: LoginResponse; meta: Record<string, unknown> }>(
'/api/v1/auth/login',
credentials
);

60
frontend/src/app/auth/register/RegisterForm.tsx
View File

@@ -2,6 +2,7 @@
import { useState } from 'react';
import Link from 'next/link';
import { useI18n } from '@/lib/i18n';
import {
Eye,
EyeOff,
@@ -34,7 +35,7 @@ function validatePassword(password: string) {
}
function getPasswordStrength(password: string) {
if (password.length === 0) return { score: 0, label: '', color: '' };
if (password.length === 0) return { score: 0, labelKey: '', color: '' };
let score = 0;
if (password.length >= 8) score++;
if (password.length >= 12) score++;
@@ -43,9 +44,9 @@ function getPasswordStrength(password: string) {
if (/[0-9]/.test(password)) score++;
if (/[^A-Za-z0-9]/.test(password)) score++;
if (score <= 2) return { score, label: 'Faible', color: 'bg-destructive' };
if (score <= 4) return { score, label: 'Moyen', color: 'bg-yellow-500' };
return { score, label: 'Fort', color: 'bg-green-500' };
if (score <= 2) return { score, labelKey: 'register.password.strength.weak', color: 'bg-destructive' };
if (score <= 4) return { score, labelKey: 'register.password.strength.medium', color: 'bg-yellow-500' };
return { score, labelKey: 'register.password.strength.strong', color: 'bg-green-500' };
}
function PasswordToggleIcon({ visible, onToggle, label }: { visible: boolean; onToggle: () => void; label: string }) {
@@ -72,21 +73,22 @@ export function RegisterForm() {
const [touched, setTouched] = useState({ name: false, email: false, password: false, confirmPassword: false });
const registerMutation = useRegister();
const { t } = useI18n();
const nameError = touched.name && name.length > 0 && name.length < 2
? 'Le nom doit contenir au moins 2 caractères'
? t('register.name.error')
: undefined;
const emailError = touched.email && email.length > 0 && !validateEmail(email)
? 'Adresse email invalide'
? t('register.email.error')
: undefined;
const passwordError = touched.password && password.length > 0 && !validatePassword(password)
? 'Le mot de passe doit contenir au moins 8 caractères, une majuscule, une minuscule et un chiffre'
? t('register.password.error')
: undefined;
const confirmError = touched.confirmPassword && confirmPassword.length > 0 && password !== confirmPassword
? 'Les mots de passe ne correspondent pas'
? t('register.confirmPassword.error')
: undefined;
const passwordStrength = getPasswordStrength(password);
@@ -112,7 +114,7 @@ export function RegisterForm() {
<PasswordToggleIcon
visible={showConfirm}
onToggle={() => setShowConfirm(!showConfirm)}
label={showConfirm ? 'Masquer' : 'Afficher'}
label={showConfirm ? t('register.confirmPassword.hide') : t('register.confirmPassword.show')}
/>
);
};
@@ -129,8 +131,8 @@ export function RegisterForm() {
</span>
</Link>
<CardTitle className="text-2xl font-bold">Créer un compte</CardTitle>
<CardDescription>Commencez à traduire gratuitement</CardDescription>
<CardTitle className="text-2xl font-bold">{t('register.title')}</CardTitle>
<CardDescription>{t('register.subtitle')}</CardDescription>
</CardHeader>
<CardContent className="space-y-5">
@@ -139,7 +141,7 @@ export function RegisterForm() {
<div className="flex items-start gap-3">
<AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
<p className="text-sm text-destructive">
{registerMutation.error?.message || "L'inscription a échoué"}
{registerMutation.error?.message || t('register.error.failed')}
</p>
</div>
</div>
@@ -147,11 +149,11 @@ export function RegisterForm() {
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="name">Nom</Label>
<Label htmlFor="name">{t('register.name.label')}</Label>
<Input
id="name"
type="text"
placeholder="Votre nom"
placeholder={t('register.name.placeholder')}
value={name}
onChange={(e) => setName(e.target.value)}
onBlur={() => setTouched((t) => ({ ...t, name: true }))}
@@ -170,11 +172,11 @@ export function RegisterForm() {
</div>
<div className="space-y-2">
<Label htmlFor="email">Adresse email</Label>
<Label htmlFor="email">{t('register.email.label')}</Label>
<Input
id="email"
type="email"
placeholder="vous@exemple.com"
placeholder={t('register.email.placeholder')}
value={email}
onChange={(e) => setEmail(e.target.value)}
onBlur={() => setTouched((t) => ({ ...t, email: true }))}
@@ -193,7 +195,7 @@ export function RegisterForm() {
</div>
<div className="space-y-2">
<Label htmlFor="password">Mot de passe</Label>
<Label htmlFor="password">{t('register.password.label')}</Label>
<Input
id="password"
type={showPassword ? 'text' : 'password'}
@@ -206,7 +208,7 @@ export function RegisterForm() {
<PasswordToggleIcon
visible={showPassword}
onToggle={() => setShowPassword(!showPassword)}
label={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
label={showPassword ? t('register.password.hide') : t('register.password.show')}
/>
}
error={passwordError}
@@ -230,14 +232,14 @@ export function RegisterForm() {
))}
</div>
<p className={cn('text-xs', passwordStrength.score <= 2 ? 'text-destructive' : passwordStrength.score <= 4 ? 'text-muted-foreground' : 'text-green-500')}>
Force : {passwordStrength.label}
{t('register.password.strengthLabel')} {passwordStrength.labelKey ? t(passwordStrength.labelKey) : ''}
</p>
</div>
)}
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirmer le mot de passe</Label>
<Label htmlFor="confirmPassword">{t('register.confirmPassword.label')}</Label>
<Input
id="confirmPassword"
type={showConfirm ? 'text' : 'password'}
@@ -263,30 +265,30 @@ export function RegisterForm() {
>
{registerMutation.isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Création du compte...
<Loader2 className="me-2 h-4 w-4 animate-spin" />
{t('register.submit.creating')}
</>
) : (
<>
<UserPlus className="mr-2 h-4 w-4" />
Créer mon compte
<ArrowRight className="ml-2 h-4 w-4" />
<UserPlus className="me-2 h-4 w-4" />
{t('register.submit.create')}
<ArrowRight className="ms-2 h-4 w-4" />
</>
)}
</Button>
</form>
<p className="text-center text-sm text-muted-foreground">
Vous avez déjà un compte ?{' '}
{t('register.hasAccount')}{' '}
<Link href="/auth/login" className="text-primary hover:underline font-medium">
Se connecter
{t('register.login')}
</Link>
</p>
<p className="text-center text-xs text-muted-foreground">
En créant un compte, vous acceptez notre{' '}
{t('register.terms.prefix')}{' '}
<span className="text-muted-foreground">
utilisation du service
{t('register.terms.link')}
</span>
.
</p>

17
frontend/src/app/auth/register/page.tsx
View File

@@ -1,8 +1,11 @@
import { Suspense } from 'react';
'use client';
import { Languages, Loader2 } from 'lucide-react';
import { RegisterForm } from './RegisterForm';
import { useI18n } from '@/lib/i18n';
function LoadingFallback() {
const { t } = useI18n();
return (
<div className="w-full max-w-md mx-auto">
<div className="rounded-xl bg-card border border-border shadow-lg p-8">
@@ -11,7 +14,7 @@ function LoadingFallback() {
<Languages className="h-6 w-6" />
</div>
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<p className="text-muted-foreground">Chargement...</p>
<p className="text-muted-foreground">{t('common.loading')}</p>
</div>
</div>
</div>
@@ -21,25 +24,23 @@ function LoadingFallback() {
export default function RegisterPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-surface via-surface-elevated to-background flex items-center justify-center p-4 relative overflow-hidden">
{/* Fond dégradé */}
{/* Background gradient */}
<div className="absolute inset-0">
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
<div className="absolute inset-0 bg-[url('/grid.svg')] opacity-5" />
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/90 to-background/50" />
</div>
{/* Éléments flottants décoratifs */}
{/* Decorative floating elements */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl animate-pulse" />
<div className="absolute top-40 right-20 w-32 h-32 bg-accent/10 rounded-full blur-2xl animate-pulse" />
<div className="absolute bottom-20 left-1/4 w-16 h-16 bg-success/10 rounded-full blur-lg animate-pulse" />
</div>
{/* Formulaire — Suspense requis par useSearchParams() dans useRegister */}
{/* Form — Suspense required by useSearchParams() in useRegister */}
<div className="relative z-10 w-full max-w-md">
<Suspense fallback={<LoadingFallback />}>
<RegisterForm />
</Suspense>
<RegisterForm />
</div>
</div>
);

2
frontend/src/app/auth/register/useRegister.ts
View File

@@ -20,7 +20,7 @@ export function useRegister() {
mutationFn: async (data: RegisterRequest) => {
await apiClient.post<RegisterResponse>('/api/v1/auth/register', data);
const loginResponse = await apiClient.post<LoginResponse>(
const loginResponse = await apiClient.post<{ data: LoginResponse; meta: Record<string, unknown> }>(
'/api/v1/auth/login',
{ email: data.email, password: data.password }
);

47
frontend/src/app/auth/reset-password/page.tsx
View File

@@ -9,6 +9,7 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { apiClient } from '@/lib/apiClient';
import { useI18n } from '@/lib/i18n';
function validatePassword(password: string) {
return password.length >= 8
@@ -21,6 +22,7 @@ function ResetPasswordForm() {
const router = useRouter();
const searchParams = useSearchParams();
const token = searchParams.get('token');
const { t } = useI18n();
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
@@ -31,11 +33,11 @@ function ResetPasswordForm() {
const [success, setSuccess] = useState(false);
const passwordError = password.length > 0 && !validatePassword(password)
? 'Le mot de passe doit contenir au moins 8 caracteres, une majuscule, une minuscule et un chiffre'
? t('resetPassword.passwordRequirements')
: '';
const confirmError = confirmPassword.length > 0 && password !== confirmPassword
? 'Les mots de passe ne correspondent pas'
? t('resetPassword.passwordMismatch')
: '';
const isFormValid = validatePassword(password) && password === confirmPassword;
@@ -45,7 +47,7 @@ function ResetPasswordForm() {
setError('');
if (!token) {
setError('Token manquant. Veuillez utiliser le lien recu par email.');
setError(t('resetPassword.tokenMissing'));
return;
}
@@ -59,7 +61,7 @@ function ResetPasswordForm() {
router.push('/auth/login');
}, 3000);
} catch (err: unknown) {
const message = err instanceof Error ? err.message : "Une erreur s'est produite";
const message = err instanceof Error ? err.message : t('resetPassword.error');
setError(message);
} finally {
setLoading(false);
@@ -75,20 +77,20 @@ function ResetPasswordForm() {
<Languages className="h-6 w-6" />
</div>
<span className="text-2xl font-semibold text-foreground">
Office Translator
{t('auth.brandName')}
</span>
</Link>
<CardTitle className="text-2xl font-bold">Lien invalide</CardTitle>
<CardTitle className="text-2xl font-bold">{t('resetPassword.invalidLink')}</CardTitle>
</CardHeader>
<CardContent className="space-y-5">
<div className="rounded-lg bg-destructive/10 border border-destructive/30 p-4">
<p className="text-sm text-destructive">
Ce lien de reinitialisation est invalide. Veuillez redemander un nouveau lien.
{t('resetPassword.invalidLinkMessage')}
</p>
</div>
<p className="text-center text-sm text-muted-foreground">
<Link href="/auth/forgot-password" className="text-primary hover:underline font-medium">
Redemander un lien
{t('resetPassword.requestNewLink')}
</Link>
</p>
</CardContent>
@@ -104,17 +106,17 @@ function ResetPasswordForm() {
<Languages className="h-6 w-6" />
</div>
<span className="text-2xl font-semibold text-foreground group-hover:text-primary transition-colors duration-300">
Office Translator
{t('auth.brandName')}
</span>
</Link>
<CardTitle className="text-2xl font-bold">
{success ? 'Mot de passe reinitialise' : 'Nouveau mot de passe'}
{success ? t('resetPassword.successTitle') : t('resetPassword.newPasswordTitle')}
</CardTitle>
<CardDescription>
{success
? 'Vous allez etre redirige vers la connexion'
: 'Definissez votre nouveau mot de passe'}
? t('resetPassword.successSubtitle')
: t('resetPassword.subtitle')}
</CardDescription>
</CardHeader>
@@ -124,7 +126,7 @@ function ResetPasswordForm() {
<div className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" />
<p className="text-sm text-green-800 dark:text-green-200">
Votre mot de passe a ete reinitialise avec succes. Vous allez etre redirige vers la page de connexion.
{t('resetPassword.successMessage')}
</p>
</div>
</div>
@@ -137,7 +139,7 @@ function ResetPasswordForm() {
)}
<div className="space-y-2">
<Label htmlFor="password">Nouveau mot de passe</Label>
<Label htmlFor="password">{t('resetPassword.newPassword')}</Label>
<div className="relative">
<Input
id="password"
@@ -156,12 +158,12 @@ function ResetPasswordForm() {
onClick={() => setShowPassword(!showPassword)}
className="text-xs text-muted-foreground hover:text-foreground"
>
{showPassword ? 'Masquer' : 'Afficher'} le mot de passe
{showPassword ? t('resetPassword.hidePassword') : t('resetPassword.showPassword')}
</button>
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirmer le mot de passe</Label>
<Label htmlFor="confirmPassword">{t('resetPassword.confirmPassword')}</Label>
<div className="relative">
<Input
id="confirmPassword"
@@ -180,7 +182,7 @@ function ResetPasswordForm() {
onClick={() => setShowConfirm(!showConfirm)}
className="text-xs text-muted-foreground hover:text-foreground"
>
{showConfirm ? 'Masquer' : 'Afficher'} le mot de passe
{showConfirm ? t('resetPassword.hidePassword') : t('resetPassword.showPassword')}
</button>
</div>
@@ -194,11 +196,11 @@ function ResetPasswordForm() {
>
{loading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Reinitialisation...
<Loader2 className="me-2 h-4 w-4 animate-spin" />
{t('resetPassword.resetting')}
</>
) : (
'Reinitialiser le mot de passe'
t('resetPassword.resetPassword')
)}
</Button>
</form>
@@ -207,7 +209,7 @@ function ResetPasswordForm() {
<p className="text-center text-sm text-muted-foreground">
<Link href="/auth/login" className="text-primary hover:underline font-medium inline-flex items-center gap-1">
<ArrowLeft className="h-3 w-3" />
Retour a la connexion
{t('resetPassword.backToLogin')}
</Link>
</p>
</CardContent>
@@ -216,6 +218,7 @@ function ResetPasswordForm() {
}
function LoadingFallback() {
const { t } = useI18n();
return (
<div className="w-full max-w-md mx-auto">
<div className="rounded-xl bg-card border border-border shadow-lg p-8">
@@ -224,7 +227,7 @@ function LoadingFallback() {
<Languages className="h-6 w-6" />
</div>
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<p className="text-muted-foreground">Chargement...</p>
<p className="text-muted-foreground">{t('resetPassword.loading')}</p>
</div>
</div>
</div>