From 5aed7d81cedd25e559aba686a7759fb159649a04 Mon Sep 17 00:00:00 2001
From: David <darnaud2@myges.fr>
Date: Sat, 13 Jun 2026 12:01:19 +0200
Subject: [PATCH] fix mdp see

---
 .../app/[locale]/admin/login/page.tsx         | 37 +++++---
 .../app/[locale]/admin/users/page.tsx         | 26 ++++--
 .../app/[locale]/dashboard/profile/page.tsx   | 92 ++++++++++++++-----
 apps/frontend/app/[locale]/login/page.tsx     | 46 ++++++----
 apps/frontend/app/[locale]/register/page.tsx  | 76 ++++++++++-----
 .../app/[locale]/reset-password/page.tsx      | 76 ++++++++++-----
 apps/frontend/messages/en.json                |  4 +-
 apps/frontend/messages/fr.json                |  4 +-
 .../src/components/admin/CarrierForm.tsx      | 27 ++++--
 9 files changed, 280 insertions(+), 108 deletions(-)

diff --git a/apps/frontend/app/[locale]/admin/login/page.tsx b/apps/frontend/app/[locale]/admin/login/page.tsx
index befdf59..9392a3e 100644
--- a/apps/frontend/app/[locale]/admin/login/page.tsx
+++ b/apps/frontend/app/[locale]/admin/login/page.tsx
@@ -4,17 +4,19 @@ import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Link, useRouter } from '@/i18n/navigation';
 import Image from 'next/image';
-import { ShieldCheck } from 'lucide-react';
+import { ShieldCheck, Eye, EyeOff } from 'lucide-react';
 import { login as apiLogin, getCurrentUser, logout as apiLogout } from '@/lib/api/auth';
 import { useAuth } from '@/lib/context/auth-context';
 
 export default function AdminLoginPage() {
   const t = useTranslations('admin.login');
+  const tCommon = useTranslations('common');
   const router = useRouter();
   const { refreshUser } = useAuth();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
 
@@ -94,17 +96,28 @@ export default function AdminLoginPage() {
               <label htmlFor="password" className="label">
                 {t('passwordLabel')}
               </label>
-              <input
-                id="password"
-                type="password"
-                value={password}
-                onChange={e => setPassword(e.target.value)}
-                className="input w-full"
-                placeholder={t('passwordPlaceholder')}
-                autoComplete="current-password"
-                disabled={isLoading}
-                required
-              />
+              <div className="relative">
+                <input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  className="input w-full pr-12"
+                  placeholder={t('passwordPlaceholder')}
+                  autoComplete="current-password"
+                  disabled={isLoading}
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-700"
+                  tabIndex={-1}
+                  aria-label={showPassword ? tCommon('hidePassword') : tCommon('showPassword')}
+                >
+                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
             </div>
 
             <button
diff --git a/apps/frontend/app/[locale]/admin/users/page.tsx b/apps/frontend/app/[locale]/admin/users/page.tsx
index 7a0dc25..74c4ffd 100644
--- a/apps/frontend/app/[locale]/admin/users/page.tsx
+++ b/apps/frontend/app/[locale]/admin/users/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
+import { Eye, EyeOff } from 'lucide-react';
 import { getAllUsers, updateAdminUser, deleteAdminUser } from '@/lib/api/admin';
 import { createUser } from '@/lib/api/users';
 import { getAllOrganizations } from '@/lib/api/admin';
@@ -27,8 +28,10 @@ interface Organization {
 
 export default function AdminUsersPage() {
   const t = useTranslations('dashboard.admin.users');
+  const tCommon = useTranslations('common');
 
   const [users, setUsers] = useState<User[]>([]);
+  const [showPassword, setShowPassword] = useState(false);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -349,12 +352,23 @@ export default function AdminUsersPage() {
                 <label className="block text-sm font-medium text-gray-700">
                   {t('modal.password')}
                 </label>
-                <input
-                  type="password"
-                  value={formData.password}
-                  onChange={e => setFormData({ ...formData, password: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                />
+                <div className="relative mt-1">
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    value={formData.password}
+                    onChange={e => setFormData({ ...formData, password: e.target.value })}
+                    className="block w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                    tabIndex={-1}
+                    aria-label={showPassword ? tCommon('hidePassword') : tCommon('showPassword')}
+                  >
+                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
+                </div>
               </div>
               <div className="flex justify-end space-x-2 pt-4">
                 <button
diff --git a/apps/frontend/app/[locale]/dashboard/profile/page.tsx b/apps/frontend/app/[locale]/dashboard/profile/page.tsx
index 7c315f3..6e8fb32 100644
--- a/apps/frontend/app/[locale]/dashboard/profile/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/profile/page.tsx
@@ -7,15 +7,20 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useTranslations } from 'next-intl';
+import { Eye, EyeOff } from 'lucide-react';
 import { updateUser, changePassword } from '@/lib/api';
 
 export default function ProfilePage() {
   const t = useTranslations('dashboard.profile');
+  const tCommon = useTranslations('common');
   const { user, refreshUser, loading } = useAuth();
   const queryClient = useQueryClient();
   const [activeTab, setActiveTab] = useState<'profile' | 'password'>('profile');
   const [successMessage, setSuccessMessage] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const passwordSchema = z
     .object({
@@ -326,13 +331,30 @@ export default function ProfilePage() {
                 >
                   {t('passwordForm.current')}
                 </label>
-                <input
-                  {...passwordForm.register('currentPassword')}
-                  type="password"
-                  id="currentPassword"
-                  autoComplete="current-password"
-                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                />
+                <div className="relative">
+                  <input
+                    {...passwordForm.register('currentPassword')}
+                    type={showCurrentPassword ? 'text' : 'password'}
+                    id="currentPassword"
+                    autoComplete="current-password"
+                    className="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                    tabIndex={-1}
+                    aria-label={
+                      showCurrentPassword ? tCommon('hidePassword') : tCommon('showPassword')
+                    }
+                  >
+                    {showCurrentPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
                 {passwordForm.formState.errors.currentPassword && (
                   <p className="mt-1 text-sm text-red-600">
                     {passwordForm.formState.errors.currentPassword.message}
@@ -347,13 +369,24 @@ export default function ProfilePage() {
                 >
                   {t('passwordForm.new')}
                 </label>
-                <input
-                  {...passwordForm.register('newPassword')}
-                  type="password"
-                  id="newPassword"
-                  autoComplete="new-password"
-                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                />
+                <div className="relative">
+                  <input
+                    {...passwordForm.register('newPassword')}
+                    type={showNewPassword ? 'text' : 'password'}
+                    id="newPassword"
+                    autoComplete="new-password"
+                    className="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowNewPassword(!showNewPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                    tabIndex={-1}
+                    aria-label={showNewPassword ? tCommon('hidePassword') : tCommon('showPassword')}
+                  >
+                    {showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  </button>
+                </div>
                 {passwordForm.formState.errors.newPassword && (
                   <p className="mt-1 text-sm text-red-600">
                     {passwordForm.formState.errors.newPassword.message}
@@ -369,13 +402,30 @@ export default function ProfilePage() {
                 >
                   {t('passwordForm.confirm')}
                 </label>
-                <input
-                  {...passwordForm.register('confirmPassword')}
-                  type="password"
-                  id="confirmPassword"
-                  autoComplete="new-password"
-                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                />
+                <div className="relative">
+                  <input
+                    {...passwordForm.register('confirmPassword')}
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    id="confirmPassword"
+                    autoComplete="new-password"
+                    className="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                    tabIndex={-1}
+                    aria-label={
+                      showConfirmPassword ? tCommon('hidePassword') : tCommon('showPassword')
+                    }
+                  >
+                    {showConfirmPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
                 {passwordForm.formState.errors.confirmPassword && (
                   <p className="mt-1 text-sm text-red-600">
                     {passwordForm.formState.errors.confirmPassword.message}
diff --git a/apps/frontend/app/[locale]/login/page.tsx b/apps/frontend/app/[locale]/login/page.tsx
index 17e4fe3..106ed1c 100644
--- a/apps/frontend/app/[locale]/login/page.tsx
+++ b/apps/frontend/app/[locale]/login/page.tsx
@@ -5,6 +5,7 @@ import { Link } from '@/i18n/navigation';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { Eye, EyeOff } from 'lucide-react';
 import { useAuth } from '@/lib/context/auth-context';
 
 function AnimatedCounter({
@@ -97,9 +98,11 @@ function LoginPageContent() {
   const tLogin = useTranslations('auth.login');
   const tPanel = useTranslations('auth.sidePanel');
   const tFooter = useTranslations('auth.footerLinks');
+  const tCommon = useTranslations('common');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [rememberMe, setRememberMe] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
@@ -262,22 +265,33 @@ function LoginPageContent() {
               >
                 {tLogin('passwordLabel')}
               </label>
-              <input
-                id="password"
-                type="password"
-                value={password}
-                onChange={handlePasswordChange}
-                className={`input w-full ${
-                  fieldErrors.password
-                    ? 'border-red-500 focus:border-red-500 focus:ring-red-500 bg-red-50'
-                    : ''
-                }`}
-                placeholder={tLogin('passwordPlaceholder')}
-                autoComplete="current-password"
-                disabled={isLoading}
-                aria-invalid={!!fieldErrors.password}
-                aria-describedby={fieldErrors.password ? 'password-error' : undefined}
-              />
+              <div className="relative">
+                <input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={handlePasswordChange}
+                  className={`input w-full pr-12 ${
+                    fieldErrors.password
+                      ? 'border-red-500 focus:border-red-500 focus:ring-red-500 bg-red-50'
+                      : ''
+                  }`}
+                  placeholder={tLogin('passwordPlaceholder')}
+                  autoComplete="current-password"
+                  disabled={isLoading}
+                  aria-invalid={!!fieldErrors.password}
+                  aria-describedby={fieldErrors.password ? 'password-error' : undefined}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-700"
+                  tabIndex={-1}
+                  aria-label={showPassword ? tCommon('hidePassword') : tCommon('showPassword')}
+                >
+                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
               {fieldErrors.password && (
                 <p
                   id="password-error"
diff --git a/apps/frontend/app/[locale]/register/page.tsx b/apps/frontend/app/[locale]/register/page.tsx
index 925938c..7338d14 100644
--- a/apps/frontend/app/[locale]/register/page.tsx
+++ b/apps/frontend/app/[locale]/register/page.tsx
@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import { Link, useRouter } from '@/i18n/navigation';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
+import { Eye, EyeOff } from 'lucide-react';
 import { register } from '@/lib/api';
 import { verifyInvitation, type InvitationResponse } from '@/lib/api/invitations';
 import type { OrganizationType } from '@/types/api';
@@ -57,6 +58,7 @@ function RegisterPageContent() {
   const searchParams = useSearchParams();
   const t = useTranslations('auth.register');
   const tFooter = useTranslations('auth.footerLinks');
+  const tCommon = useTranslations('common');
 
   const [step, setStep] = useState<1 | 2>(1);
   const [statsActive, setStatsActive] = useState(false);
@@ -81,6 +83,8 @@ function RegisterPageContent() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const [organizationName, setOrganizationName] = useState('');
   const [organizationType, setOrganizationType] = useState<OrganizationType>('FREIGHT_FORWARDER');
@@ -513,17 +517,28 @@ function RegisterPageContent() {
                 <label htmlFor="password" className="label">
                   {t('passwordLabel')}
                 </label>
-                <input
-                  id="password"
-                  type="password"
-                  required
-                  value={password}
-                  onChange={e => setPassword(e.target.value)}
-                  className="input w-full"
-                  placeholder={t('passwordPlaceholder')}
-                  autoComplete="new-password"
-                  disabled={isLoading}
-                />
+                <div className="relative">
+                  <input
+                    id="password"
+                    type={showPassword ? 'text' : 'password'}
+                    required
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    className="input w-full pr-12"
+                    placeholder={t('passwordPlaceholder')}
+                    autoComplete="new-password"
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-700"
+                    tabIndex={-1}
+                    aria-label={showPassword ? tCommon('hidePassword') : tCommon('showPassword')}
+                  >
+                    {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  </button>
+                </div>
                 <p className="mt-1.5 text-body-xs text-neutral-500">{t('passwordHint')}</p>
               </div>
 
@@ -531,17 +546,34 @@ function RegisterPageContent() {
                 <label htmlFor="confirmPassword" className="label">
                   {t('confirmPasswordLabel')}
                 </label>
-                <input
-                  id="confirmPassword"
-                  type="password"
-                  required
-                  value={confirmPassword}
-                  onChange={e => setConfirmPassword(e.target.value)}
-                  className="input w-full"
-                  placeholder={t('passwordPlaceholder')}
-                  autoComplete="new-password"
-                  disabled={isLoading}
-                />
+                <div className="relative">
+                  <input
+                    id="confirmPassword"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    required
+                    value={confirmPassword}
+                    onChange={e => setConfirmPassword(e.target.value)}
+                    className="input w-full pr-12"
+                    placeholder={t('passwordPlaceholder')}
+                    autoComplete="new-password"
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-700"
+                    tabIndex={-1}
+                    aria-label={
+                      showConfirmPassword ? tCommon('hidePassword') : tCommon('showPassword')
+                    }
+                  >
+                    {showConfirmPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
               </div>
 
               <button
diff --git a/apps/frontend/app/[locale]/reset-password/page.tsx b/apps/frontend/app/[locale]/reset-password/page.tsx
index bb037d4..aef1817 100644
--- a/apps/frontend/app/[locale]/reset-password/page.tsx
+++ b/apps/frontend/app/[locale]/reset-password/page.tsx
@@ -5,16 +5,20 @@ import { useSearchParams } from 'next/navigation';
 import { Link, useRouter } from '@/i18n/navigation';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
+import { Eye, EyeOff } from 'lucide-react';
 import { resetPassword } from '@/lib/api/auth';
 
 function ResetPasswordContent() {
   const t = useTranslations('auth.resetPassword');
   const tFooter = useTranslations('auth.footerLinks');
+  const tCommon = useTranslations('common');
   const searchParams = useSearchParams();
   const router = useRouter();
   const [token, setToken] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
@@ -159,17 +163,28 @@ function ResetPasswordContent() {
                   <label htmlFor="password" className="label">
                     {t('passwordLabel')}
                   </label>
-                  <input
-                    id="password"
-                    type="password"
-                    required
-                    value={password}
-                    onChange={e => setPassword(e.target.value)}
-                    className="input w-full"
-                    placeholder="••••••••••••"
-                    autoComplete="new-password"
-                    disabled={loading}
-                  />
+                  <div className="relative">
+                    <input
+                      id="password"
+                      type={showPassword ? 'text' : 'password'}
+                      required
+                      value={password}
+                      onChange={e => setPassword(e.target.value)}
+                      className="input w-full pr-12"
+                      placeholder="••••••••••••"
+                      autoComplete="new-password"
+                      disabled={loading}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-700"
+                      tabIndex={-1}
+                      aria-label={showPassword ? tCommon('hidePassword') : tCommon('showPassword')}
+                    >
+                      {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                    </button>
+                  </div>
                   <p className="mt-1.5 text-body-xs text-neutral-500">{t('passwordHint')}</p>
                 </div>
 
@@ -177,17 +192,34 @@ function ResetPasswordContent() {
                   <label htmlFor="confirmPassword" className="label">
                     {t('confirmPasswordLabel')}
                   </label>
-                  <input
-                    id="confirmPassword"
-                    type="password"
-                    required
-                    value={confirmPassword}
-                    onChange={e => setConfirmPassword(e.target.value)}
-                    className="input w-full"
-                    placeholder="••••••••••••"
-                    autoComplete="new-password"
-                    disabled={loading}
-                  />
+                  <div className="relative">
+                    <input
+                      id="confirmPassword"
+                      type={showConfirmPassword ? 'text' : 'password'}
+                      required
+                      value={confirmPassword}
+                      onChange={e => setConfirmPassword(e.target.value)}
+                      className="input w-full pr-12"
+                      placeholder="••••••••••••"
+                      autoComplete="new-password"
+                      disabled={loading}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-700"
+                      tabIndex={-1}
+                      aria-label={
+                        showConfirmPassword ? tCommon('hidePassword') : tCommon('showPassword')
+                      }
+                    >
+                      {showConfirmPassword ? (
+                        <EyeOff className="w-5 h-5" />
+                      ) : (
+                        <Eye className="w-5 h-5" />
+                      )}
+                    </button>
+                  </div>
                 </div>
 
                 <button
diff --git a/apps/frontend/messages/en.json b/apps/frontend/messages/en.json
index 6249a1d..141efd3 100644
--- a/apps/frontend/messages/en.json
+++ b/apps/frontend/messages/en.json
@@ -25,7 +25,9 @@
     "discover": "Discover",
     "tryNow": "Try now",
     "continue": "Continue",
-    "submit": "Submit"
+    "submit": "Submit",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password"
   },
   "admin": {
     "title": "Administration",
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
index 7bdb629..68b8e9a 100644
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@@ -25,7 +25,9 @@
     "discover": "Découvrir",
     "tryNow": "Essayer maintenant",
     "continue": "Continuer",
-    "submit": "Envoyer"
+    "submit": "Envoyer",
+    "showPassword": "Afficher le mot de passe",
+    "hidePassword": "Masquer le mot de passe"
   },
   "admin": {
     "title": "Espace administration",
diff --git a/apps/frontend/src/components/admin/CarrierForm.tsx b/apps/frontend/src/components/admin/CarrierForm.tsx
index 090e511..810f5d3 100644
--- a/apps/frontend/src/components/admin/CarrierForm.tsx
+++ b/apps/frontend/src/components/admin/CarrierForm.tsx
@@ -3,6 +3,7 @@
  */
 
 import React, { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 import { Carrier, CarrierStatus, CreateCarrierInput, UpdateCarrierInput } from '@/types/carrier';
 
 interface CarrierFormProps {
@@ -25,6 +26,7 @@ export const CarrierForm: React.FC<CarrierFormProps> = ({ carrier, onSubmit, onC
 
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showApiKey, setShowApiKey] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -129,13 +131,24 @@ export const CarrierForm: React.FC<CarrierFormProps> = ({ carrier, onSubmit, onC
         {/* API Key */}
         <div className="md:col-span-2">
           <label className="block text-sm font-medium text-gray-700 mb-1">API Key</label>
-          <input
-            type="password"
-            value={formData.apiKey}
-            onChange={e => setFormData({ ...formData, apiKey: e.target.value })}
-            placeholder="Enter API key"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
+          <div className="relative">
+            <input
+              type={showApiKey ? 'text' : 'password'}
+              value={formData.apiKey}
+              onChange={e => setFormData({ ...formData, apiKey: e.target.value })}
+              placeholder="Enter API key"
+              className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <button
+              type="button"
+              onClick={() => setShowApiKey(!showApiKey)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+              tabIndex={-1}
+              aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
+            >
+              {showApiKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+            </button>
+          </div>
         </div>
 
         {/* Rate Limit */}