fix mdp see

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>
+              <div className="relative">
                 <input
                   id="password"
-                type="password"
+                  type={showPassword ? 'text' : 'password'}
                   value={password}
                   onChange={e => setPassword(e.target.value)}
-                className="input w-full"
+                  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

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>
+                <div className="relative mt-1">
                   <input
-                  type="password"
+                    type={showPassword ? 'text' : '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"
+                    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

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>
+                <div className="relative">
                   <input
                     {...passwordForm.register('currentPassword')}
-                  type="password"
+                    type={showCurrentPassword ? 'text' : '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"
+                    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>
+                <div className="relative">
                   <input
                     {...passwordForm.register('newPassword')}
-                  type="password"
+                    type={showNewPassword ? 'text' : '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"
+                    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>
+                <div className="relative">
                   <input
                     {...passwordForm.register('confirmPassword')}
-                  type="password"
+                    type={showConfirmPassword ? 'text' : '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"
+                    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}

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,12 +265,13 @@ function LoginPageContent() {
               >
                 {tLogin('passwordLabel')}
               </label>
+              <div className="relative">
                 <input
                   id="password"
-                type="password"
+                  type={showPassword ? 'text' : 'password'}
                   value={password}
                   onChange={handlePasswordChange}
-                className={`input w-full ${
+                  className={`input w-full pr-12 ${
                     fieldErrors.password
                       ? 'border-red-500 focus:border-red-500 focus:ring-red-500 bg-red-50'
                       : ''
@@ -278,6 +282,16 @@ function LoginPageContent() {
                   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"

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>
+                <div className="relative">
                   <input
                     id="password"
-                  type="password"
+                    type={showPassword ? 'text' : 'password'}
                     required
                     value={password}
                     onChange={e => setPassword(e.target.value)}
-                  className="input w-full"
+                    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>
+                <div className="relative">
                   <input
                     id="confirmPassword"
-                  type="password"
+                    type={showConfirmPassword ? 'text' : 'password'}
                     required
                     value={confirmPassword}
                     onChange={e => setConfirmPassword(e.target.value)}
-                  className="input w-full"
+                    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

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>
+                  <div className="relative">
                     <input
                       id="password"
-                    type="password"
+                      type={showPassword ? 'text' : 'password'}
                       required
                       value={password}
                       onChange={e => setPassword(e.target.value)}
-                    className="input w-full"
+                      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>
+                  <div className="relative">
                     <input
                       id="confirmPassword"
-                    type="password"
+                      type={showConfirmPassword ? 'text' : 'password'}
                       required
                       value={confirmPassword}
                       onChange={e => setConfirmPassword(e.target.value)}
-                    className="input w-full"
+                      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

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",

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",

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>
+          <div className="relative">
             <input
-            type="password"
+              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 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              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 */}