David/xpeditis2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mdp see

Browse Source
This commit is contained in:
David 2026-06-13 12:01:19 +02:00
parent c6eaaf354a
commit 5aed7d81ce
9 changed files with 280 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/frontend/app/[locale]/admin/login/page.tsx
View File

@ -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

18
apps/frontend/app/[locale]/admin/users/page.tsx
View File

@ -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

62
apps/frontend/app/[locale]/dashboard/profile/page.tsx
View File

@ -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}

18
apps/frontend/app/[locale]/login/page.tsx
View File

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

40
apps/frontend/app/[locale]/register/page.tsx
View File

@ -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

40
apps/frontend/app/[locale]/reset-password/page.tsx
View File

@ -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

4
apps/frontend/messages/en.json
View File

@ -25,7 +25,9 @@
"discover": "Discover",
"tryNow": "Try now",
"continue": "Continue",
"submit": "Submit"
"submit": "Submit",
"showPassword": "Show password",
"hidePassword": "Hide password"
},
"admin": {
"title": "Administration",

4
apps/frontend/messages/fr.json
View File

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

17
apps/frontend/src/components/admin/CarrierForm.tsx
View File

@ -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 */}