Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions lang/en/settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,60 @@
'profile' => [
'title' => 'Profile',
'desc' => 'Your personal information',
'page' => [
'breadcrumb' => 'Account settings',
'head' => 'My profile',
'heading' => 'My profile',
'default_name' => 'My profile',
'section_title' => 'Personal information',
'section_desc' => 'Manage your profile information',
'firstname' => 'First name',
'firstname_ph' => 'Your first name',
'lastname' => 'Last name',
'lastname_ph' => 'Your last name',
'matricule' => 'ID number',
'matricule_ph' => 'Not assigned',
'gender' => 'Gender',
'gender_ph' => 'Select',
'gender_male' => 'Male',
'gender_female' => 'Female',
'gender_other' => 'Other',
'birth_date' => 'Date of birth',
'email' => 'Email address',
'email_ph' => 'example@email.com',
'telephone' => 'Phone',
'telephone_ph' => '+243 XXX XXX XXX',
'address' => 'Address',
'address_ph' => 'Your full address',
'email_unverified' => 'Your email address is not verified.',
'email_resend' => 'Click here to resend the verification email.',
'email_link_sent' => 'A new verification link has been sent to your email address.',
'saving' => 'Saving...',
'save' => 'Save',
'saved' => '✓ Changes saved',
],
],
'password' => [
'title' => 'Password',
'desc' => 'Change your password',
'page' => [
'breadcrumb' => 'Password',
'head' => 'Password',
'heading' => 'Password',
'card_desc' => 'Make sure to use a long, secure password.',
'current' => 'Current password',
'current_ph' => 'Enter your current password',
'new_section' => 'New password',
'new' => 'New password',
'new_ph' => 'Enter a new password',
'confirm' => 'Confirm password',
'confirm_ph' => 'Confirm the new password',
'tip_label' => 'Tip:',
'tip' => 'At least 12 characters mixing uppercase, lowercase, numbers and symbols. Avoid passwords already used elsewhere.',
'saving' => 'Updating...',
'submit' => 'Update password',
'saved' => '✓ Password updated',
],
],
'appearance' => [
'title' => 'Appearance',
Expand All @@ -20,6 +70,19 @@
'two_factor' => [
'title' => 'Two-factor authentication',
'desc' => 'Secure your account with a second factor',
'page' => [
'breadcrumb' => 'Two-factor authentication',
'head' => 'Two-factor authentication',
'heading' => 'Two-factor authentication',
'card_desc' => 'Strengthen your account security with a second factor.',
'enabled_badge' => 'Enabled',
'enabled_desc' => 'With two-factor authentication enabled, you will be prompted for a secure code during sign-in, which you can retrieve from the TOTP app on your phone.',
'disable' => 'Disable 2FA',
'disabled_badge' => 'Disabled',
'disabled_desc' => 'When you enable two-factor authentication, you will be prompted for a secure code during sign-in. This code can be retrieved from a TOTP app on your phone.',
'continue_setup' => 'Continue setup',
'enable' => 'Enable 2FA',
],
],
'language' => [
'title' => 'Language',
Expand Down
63 changes: 63 additions & 0 deletions lang/fr/settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,60 @@
'profile' => [
'title' => 'Profil',
'desc' => 'Vos informations personnelles',
'page' => [
'breadcrumb' => 'Paramètres du compte',
'head' => 'Mon profil',
'heading' => 'Mon profil',
'default_name' => 'Mon profil',
'section_title' => 'Informations personnelles',
'section_desc' => 'Gérez vos informations de profil',
'firstname' => 'Prénom',
'firstname_ph' => 'Votre prénom',
'lastname' => 'Nom de famille',
'lastname_ph' => 'Votre nom',
'matricule' => 'Matricule',
'matricule_ph' => 'Non attribué',
'gender' => 'Genre',
'gender_ph' => 'Sélectionner',
'gender_male' => 'Masculin',
'gender_female' => 'Féminin',
'gender_other' => 'Autre',
'birth_date' => 'Date de naissance',
'email' => 'Adresse email',
'email_ph' => 'exemple@email.com',
'telephone' => 'Téléphone',
'telephone_ph' => '+243 XXX XXX XXX',
'address' => 'Adresse',
'address_ph' => 'Votre adresse complète',
'email_unverified' => "Votre adresse email n'est pas vérifiée.",
'email_resend' => "Cliquez ici pour renvoyer l'email de vérification.",
'email_link_sent' => 'Un nouveau lien de vérification a été envoyé à votre adresse email.',
'saving' => 'Enregistrement...',
'save' => 'Enregistrer',
'saved' => '✓ Modifications enregistrées',
],
],
'password' => [
'title' => 'Mot de passe',
'desc' => 'Modifier votre mot de passe',
'page' => [
'breadcrumb' => 'Mot de passe',
'head' => 'Mot de passe',
'heading' => 'Mot de passe',
'card_desc' => "Assurez-vous d'utiliser un mot de passe long et sécurisé.",
'current' => 'Mot de passe actuel',
'current_ph' => 'Entrez votre mot de passe actuel',
'new_section' => 'Nouveau mot de passe',
'new' => 'Nouveau mot de passe',
'new_ph' => 'Entrez un nouveau mot de passe',
'confirm' => 'Confirmer le mot de passe',
'confirm_ph' => 'Confirmez le nouveau mot de passe',
'tip_label' => 'Conseil :',
'tip' => 'Au moins 12 caractères mêlant majuscules, minuscules, chiffres et symboles. Évitez les mots de passe déjà utilisés ailleurs.',
'saving' => 'Modification...',
'submit' => 'Modifier le mot de passe',
'saved' => '✓ Mot de passe modifié',
],
],
'appearance' => [
'title' => 'Apparence',
Expand All @@ -20,6 +70,19 @@
'two_factor' => [
'title' => 'Double authentification',
'desc' => 'Sécurisez votre compte avec un second facteur',
'page' => [
'breadcrumb' => 'Authentification à deux facteurs',
'head' => 'Authentification à deux facteurs',
'heading' => 'Authentification à deux facteurs',
'card_desc' => 'Renforcez la sécurité de votre compte avec un second facteur.',
'enabled_badge' => 'Activée',
'enabled_desc' => "Avec l'authentification à deux facteurs activée, vous serez invité à saisir un code de sécurité lors de la connexion, que vous pouvez récupérer depuis l'application TOTP sur votre téléphone.",
'disable' => 'Désactiver 2FA',
'disabled_badge' => 'Désactivée',
'disabled_desc' => "Lorsque vous activez l'authentification à deux facteurs, vous serez invité à saisir un code de sécurité lors de la connexion. Ce code peut être récupéré depuis une application TOTP sur votre téléphone.",
'continue_setup' => 'Continuer la configuration',
'enable' => 'Activer 2FA',
],
],
'language' => [
'title' => 'Langue',
Expand Down
44 changes: 23 additions & 21 deletions resources/js/pages/settings/password.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,30 @@ import PasswordStrength from '@/components/password-strength';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useTranslation } from '@/helpers/i18n';
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { edit } from '@/routes/user-password';
import type { BreadcrumbItem } from '@/types';

const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Mot de passe',
href: edit().url,
},
];

export default function Password() {
const { t } = useTranslation();
const passwordInput = useRef<HTMLInputElement>(null);
const currentPasswordInput = useRef<HTMLInputElement>(null);
const [password, setPassword] = useState('');

const breadcrumbs: BreadcrumbItem[] = [
{
title: t('settings.password.page.breadcrumb'),
href: edit().url,
},
];

return (
<AppLayout breadcrumbs={breadcrumbs}>
<Head title="Mot de passe" />
<Head title={t('settings.password.page.head')} />

<h1 className="sr-only flex items-center gap-3"><KeyRound className="h-7 w-7 text-blue-600 shrink-0" />Mot de passe</h1>
<h1 className="sr-only flex items-center gap-3"><KeyRound className="h-7 w-7 text-blue-600 shrink-0" />{t('settings.password.page.heading')}</h1>

<SettingsLayout bare>
<div className="space-y-6">
Expand All @@ -40,8 +42,8 @@ export default function Password() {
<KeyRound className="h-7 w-7" />
</div>
<div>
<h2 className="text-xl font-bold text-gray-900">Mot de passe</h2>
<p className="text-sm text-gray-600">Assurez-vous d'utiliser un mot de passe long et sécurisé.</p>
<h2 className="text-xl font-bold text-gray-900">{t('settings.password.page.heading')}</h2>
<p className="text-sm text-gray-600">{t('settings.password.page.card_desc')}</p>
</div>
</div>
<Lock className="pointer-events-none absolute -right-4 -bottom-6 h-32 w-32 text-blue-600 opacity-[0.07]" />
Expand Down Expand Up @@ -78,7 +80,7 @@ export default function Password() {
<div className="flex items-center gap-2 mb-4">
<KeyRound className="w-4 h-4 text-gray-600" />
<Label htmlFor="current_password" className="text-sm font-semibold text-gray-900 mb-0">
Mot de passe actuel
{t('settings.password.page.current')}
</Label>
</div>
<Input
Expand All @@ -88,7 +90,7 @@ export default function Password() {
type="password"
className="bg-white border-gray-300"
autoComplete="current-password"
placeholder="Entrez votre mot de passe actuel"
placeholder={t('settings.password.page.current_ph')}
/>
<InputError message={errors.current_password} />
</div>
Expand All @@ -98,14 +100,14 @@ export default function Password() {
<div className="flex items-center gap-2 mb-4">
<ShieldCheck className="w-5 h-5 text-green-600" />
<span className="text-sm font-semibold text-green-900">
Nouveau mot de passe
{t('settings.password.page.new_section')}
</span>
</div>

<div className="space-y-4">
<div>
<Label htmlFor="password" className="text-sm font-medium text-gray-900">
Nouveau mot de passe
{t('settings.password.page.new')}
</Label>
<Input
id="password"
Expand All @@ -114,7 +116,7 @@ export default function Password() {
type="password"
className="mt-2 bg-white border-green-300 focus:ring-green-500"
autoComplete="new-password"
placeholder="Entrez un nouveau mot de passe"
placeholder={t('settings.password.page.new_ph')}
onChange={(e) => setPassword(e.target.value)}
/>
<InputError message={errors.password} />
Expand All @@ -123,23 +125,23 @@ export default function Password() {

<div>
<Label htmlFor="password_confirmation" className="text-sm font-medium text-gray-900">
Confirmer le mot de passe
{t('settings.password.page.confirm')}
</Label>
<Input
id="password_confirmation"
name="password_confirmation"
type="password"
className="mt-2 bg-white border-green-300 focus:ring-green-500"
autoComplete="new-password"
placeholder="Confirmez le nouveau mot de passe"
placeholder={t('settings.password.page.confirm_ph')}
/>
<InputError message={errors.password_confirmation} />
</div>
</div>

<div className="mt-4 p-3 bg-green-100 rounded-md">
<p className="text-xs text-green-800">
💡 <strong>Conseil :</strong> Au moins 12 caractères mêlant majuscules, minuscules, chiffres et symboles. Évitez les mots de passe déjà utilisés ailleurs.
💡 <strong>{t('settings.password.page.tip_label')}</strong> {t('settings.password.page.tip')}
</p>
</div>
</div>
Expand All @@ -150,7 +152,7 @@ export default function Password() {
className="bg-blue-600 hover:bg-blue-700"
data-test="update-password-button"
>
{processing ? 'Modification...' : 'Modifier le mot de passe'}
{processing ? t('settings.password.page.saving') : t('settings.password.page.submit')}
</Button>

<Transition
Expand All @@ -161,7 +163,7 @@ export default function Password() {
leaveTo="opacity-0"
>
<p className="text-sm text-green-600 font-medium">
✓ Mot de passe modifié
{t('settings.password.page.saved')}
</p>
</Transition>
</div>
Expand Down
Loading
Loading