🌐 Enable localization

Author: mckenziearts

src/app/modules/authentication/pages/forgot-password/forgot-password.component.html

@@ -1,7 +1,7 @@
 <div>
   <logo-svg class="h-auto w-36 text-slate-900 dark:text-white"></logo-svg>
-  <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white">Mot de passe oublié?</h2>
-  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+  <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white" i18n>Mot de passe oublié?</h2>
+  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
     Saisissez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe.
   </p>
 </div>
@@ -22,17 +22,17 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white">Mot de pa
   </div>
 
   <div class="flex items-center justify-end">
-    <button-primary type="submit" [loading$]="(loading$)">
+    <button-primary type="submit" [loading$]="(loading$)" i18n>
       Envoyer le lien de réinitialisation
     </button-primary>
   </div>
 </form>
 
 <p class="mt-2 text-right">
   <a routerLink="/auth/login" class="inline-flex items-center text-sm font-medium leading-5 text-secondary-500 hover:text-secondary-600 hover:underline">
-      <svg class="w-5 h-5 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6.75 15.75L3 12M3 12L6.75 8.25M3 12H21" />
-      </svg>
-      Retournez à la page de connexion
+    <svg class="w-5 h-5 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6.75 15.75L3 12M3 12L6.75 8.25M3 12H21" />
+    </svg>
+    <span i18n>Retournez à la page de connexion</span>
   </a>
 </p>

src/app/modules/authentication/pages/login/login.component.html

@@ -1,7 +1,7 @@
 <div>
   <logo-svg class="h-auto w-36 text-slate-900 dark:text-white"></logo-svg>
-  <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white">Connectez-vous</h2>
-  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+  <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white" i18n>Connectez-vous</h2>
+  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
     Admin Panel - Administration de la votre plateforme.
   </p>
 </div>
@@ -35,11 +35,11 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white">Connectez
   <div class="flex items-center justify-between">
     <label for="remember-me" class="flex items-center cursor-pointer">
       <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 rounded text-primary-600 border-slate-300 focus:ring-primary-500">
-      <span class="block ml-2 text-sm text-slate-700 dark:text-slate-300"> Se souvenir de moi </span>
+      <span class="block ml-2 text-sm text-slate-700 dark:text-slate-300" i18n>Se souvenir de moi</span>
     </label>
 
     <div class="text-sm">
-      <a routerLink="/auth/forgot-password" class="font-medium text-primary-600 hover:text-primary-500"> Mot de passe oublié? </a>
+      <a routerLink="/auth/forgot-password" class="font-medium text-primary-600 hover:text-primary-500" i18n>Mot de passe oublié?</a>
     </div>
   </div>
 
@@ -50,7 +50,7 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white">Connectez
           <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C7.51472 1 5.5 3.01472 5.5 5.5V9H5C3.89543 9 3 9.89543 3 11V17C3 18.1046 3.89543 19 5 19H15C16.1046 19 17 18.1046 17 17V11C17 9.89543 16.1046 9 15 9H14.5V5.5C14.5 3.01472 12.4853 1 10 1ZM13 9V5.5C13 3.84315 11.6569 2.5 10 2.5C8.34315 2.5 7 3.84315 7 5.5V9H13Z" />
         </svg>
       </span>
-      Se connecter
+      <span i18n>Se connecter</span>
     </button-primary>
   </div>
 </form>

src/app/modules/authentication/pages/reset-password/reset-password.component.html

@@ -1,7 +1,7 @@
 <div>
   <logo-svg class="h-auto w-36 text-slate-900 dark:text-white"></logo-svg>
-  <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white">Réinitialisation Mot de passe</h2>
-  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+  <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white" i18n>Réinitialisation Mot de passe</h2>
+  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
     Veuillez renseignez votre nouveau mot de passe pour vous connectez.
   </p>
 </div>
@@ -43,7 +43,7 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900 dark:text-white">Réinitia
   </div>
 
   <div class="flex items-center justify-end">
-    <button-primary type="submit" class="space-x-3" [loading$]="loading$">
+    <button-primary type="submit" class="space-x-3" [loading$]="loading$" i18n>
       Réinitialiser Mot de passe
     </button-primary>
   </div>

src/app/modules/dashboard/navigation/admin.menu.ts

@@ -3,18 +3,18 @@ import { Menu } from '@app/shared/interfaces/menu';
 
 export const adminMenu: Menu[] = [
   {
-    group: 'Aperçu',
+    group: $localize`Aperçu`,
     items: [
       {
-        title: 'Tableau de bord',
+        title: $localize`Tableau de bord`,
         svgPath: [
           'M12 16v5m6 0-3.951-3.293c-.73-.607-1.094-.91-1.5-1.027a2 2 0 0 0-1.098 0c-.406.116-.77.42-1.5 1.027L6 21m2-10v1m4-3v3m4-5v5m6-9H2m1 0h18v8.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 16 17.88 16 16.2 16H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 13.72 3 12.88 3 11.2V3Z',
         ],
         link: '/dashboard',
         roles: [ADMIN_ROLE],
       },
       {
-        title: 'Statistiques',
+        title: $localize`Statistiques`,
         svgPath: [
           'M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z',
           'M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z',
@@ -25,18 +25,18 @@ export const adminMenu: Menu[] = [
     ],
   },
   {
-    group: 'Management',
+    group: $localize`Management`,
     items: [
       {
-        title: 'Utilisateurs',
+        title: $localize`Utilisateurs`,
         svgPath: [
           'M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z',
         ],
         link: '/users',
         roles: [ADMIN_ROLE],
       },
       {
-        title: 'Roles & Permissions',
+        title: $localize`Roles & Permissions`,
         svgPath: [
           'M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z',
         ],
@@ -46,10 +46,10 @@ export const adminMenu: Menu[] = [
     ],
   },
   {
-    group: 'Opérations',
+    group: $localize`Opérations`,
     items: [
       {
-        title: 'Paramètres',
+        title: $localize`Paramètres`,
         svgPath: [
           'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z',
           'M18.727 14.727a1.5 1.5 0 0 0 .3 1.655l.055.054a1.816 1.816 0 0 1 0 2.573 1.818 1.818 0 0 1-2.573 0l-.055-.055a1.5 1.5 0 0 0-1.654-.3 1.5 1.5 0 0 0-.91 1.373v.155a1.818 1.818 0 1 1-3.636 0V20.1a1.5 1.5 0 0 0-.981-1.373 1.5 1.5 0 0 0-1.655.3l-.054.055a1.818 1.818 0 0 1-3.106-1.287 1.818 1.818 0 0 1 .533-1.286l.054-.055a1.5 1.5 0 0 0 .3-1.654 1.5 1.5 0 0 0-1.372-.91h-.155a1.818 1.818 0 1 1 0-3.636H3.9a1.5 1.5 0 0 0 1.373-.981 1.5 1.5 0 0 0-.3-1.655l-.055-.054A1.818 1.818 0 1 1 7.491 4.99l.054.054a1.5 1.5 0 0 0 1.655.3h.073a1.5 1.5 0 0 0 .909-1.372v-.155a1.818 1.818 0 0 1 3.636 0V3.9a1.499 1.499 0 0 0 .91 1.373 1.5 1.5 0 0 0 1.654-.3l.054-.055a1.817 1.817 0 0 1 2.573 0 1.819 1.819 0 0 1 0 2.573l-.055.054a1.5 1.5 0 0 0-.3 1.655v.073a1.5 1.5 0 0 0 1.373.909h.155a1.818 1.818 0 0 1 0 3.636H20.1a1.499 1.499 0 0 0-1.373.91Z',

src/app/modules/dashboard/pages/dashboard/dashboard.component.html

@@ -1,12 +1,8 @@
 <div class="pt-5 pb-16">
-  <!-- Welcome panel -->
-  <section aria-labelledby="profile-overview-title">
-  </section>
-
   <!-- Actions panel -->
   <section aria-labelledby="quick-links-title">
     <div class="overflow-hidden divide-y rounded-lg bg-slate-200 divide-slate-200 dark:bg-gray-700 dark:divide-slate-700 sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0 lg:grid-cols-3">
-      <h2 class="sr-only" id="quick-links-title">Lien rapides</h2>
+      <h2 class="sr-only" id="quick-links-title" i18n>Lien rapides</h2>
 
         <div class="relative p-6 bg-white dark:bg-gray-800 group focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500">
           <div>
@@ -21,10 +17,10 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
               <a href="https://angular.laravel.cm" class="focus:outline-none">
                 <!-- Extend touch target to entire panel -->
                 <span class="absolute inset-0" aria-hidden="true"></span>
-                Documentation
+                <span i18n>Documentation</span>
               </a>
             </h3>
-            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
               Une documentation simple pour rapidement utiliser le boilerplate pour votre administration.
             </p>
           </div>
@@ -48,11 +44,11 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
               <a href="https://angular.laravel.cm/benefics" class="focus:outline-none">
                 <!-- Extend touch target to entire panel -->
                 <span class="absolute inset-0" aria-hidden="true"></span>
-                Bénéfices
+                <span i18n>Bénéfices</span>
               </a>
             </h3>
-            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
-              Un boilerplate <span class="font-medium">Ready To Use</span> pour créer une administration avec Angular 13 et Laravel.
+            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
+              Un boilerplate <span class="font-medium text-slate-700 dark:text-white">Ready To Use</span> pour créer une administration avec Angular 13 et Laravel.
             </p>
           </div>
           <span class="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400" aria-hidden="true">
@@ -75,10 +71,10 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
               <a href="https://tailwindcss.com" class="focus:outline-none">
                 <!-- Extend touch target to entire panel -->
                 <span class="absolute inset-0" aria-hidden="true"></span>
-                Technologies
+                <span i18n>Technologies</span>
               </a>
             </h3>
-            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
               Ce projet tourne sur la version 13 d'Angular et pour le style, Tailwind v3.1 est utilisé.
             </p>
           </div>
@@ -102,10 +98,10 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
               <a href="https://github.com/laravelcm/laravelcm" class="focus:outline-none">
                 <!-- Extend touch target to entire panel -->
                 <span class="absolute inset-0" aria-hidden="true"></span>
-                Sponsoring
+                <span i18n>Sponsoring</span>
               </a>
             </h3>
-            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
               Pour soutenir le developpement de ce projet, vous pouvez faire un don pour encorager la Team.
             </p>
           </div>
@@ -132,7 +128,7 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
                 NgRx - RxJS
               </a>
             </h3>
-            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
               Toute l'architecture NgRx et RxJS est inspiré de la documentation officielle de NgRx.
             </p>
           </div>
@@ -156,16 +152,16 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
               <a href="https://dyma.fr/r/6304c19b44243265c770cbc8" class="focus:outline-none">
                 <!-- Extend touch target to entire panel -->
                 <span class="absolute inset-0" aria-hidden="true"></span>
-                Formation
+                <span i18n>Formation</span>
               </a>
             </h3>
-            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" i18n>
               Obtenez une réduction de 10€ sur la formation Angular en vous inscrivant sur Dyma.fr.
             </p>
           </div>
           <span class="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400" aria-hidden="true">
             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"></path>
+              <path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
             </svg>
           </span>
         </div>

src/app/shared/themes/components/header/header.component.html

@@ -16,7 +16,7 @@
 
         <!-- SearchBar Component -->
         <div class="hidden w-full max-w-xs ml-12 md:block">
-          <label for="search" class="sr-only">Recherche rapide</label>
+          <label for="search" class="sr-only" i18n>Recherche rapide</label>
           <div class="relative flex items-center">
             <input type="text" name="search" id="search" placeholder="Rechercher" class="block w-full pr-12 bg-white border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-900 dark:border-gray-700 dark:text-white">
             <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
@@ -44,7 +44,7 @@
             <path
               d="M2.5 12h3.382c.685 0 1.312.387 1.618 1 .306.613.933 1 1.618 1h5.764c.685 0 1.312-.387 1.618-1 .306-.613.933-1 1.618-1H21.5M8.967 4h6.066c1.077 0 1.616 0 2.091.164a3 3 0 0 1 1.121.693c.36.352.6.833 1.082 1.796l2.166 4.333c.19.378.284.567.35.765.06.177.102.357.128.541.029.207.029.418.029.841V15.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C19.72 20 18.88 20 17.2 20H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 17.72 2 16.88 2 15.2v-2.067c0-.422 0-.634.029-.84.026-.184.068-.365.128-.541.066-.199.16-.388.35-.766l2.166-4.333c.482-.963.723-1.444 1.082-1.796a3 3 0 0 1 1.12-.693C7.352 4 7.89 4 8.968 4Z" />
           </svg>
-          Vous rencontrez un problème ?
+          <span i18n>Vous rencontrez un problème ?</span>
         </a>
         <div class="flex items-center pl-4">
           <!-- SearchBar Button -->
@@ -83,7 +83,7 @@
           </button>
           <!-- Theme Switcher -->
           <div class="relative ml-3">
-            <label class="sr-only" id="label-system">Theme</label>
+            <label class="sr-only" id="label-system" i18n>Theme</label>
             <button (click)="showDialog =! showDialog" type="button" class="flex items-center justify-center w-8 h-8 rounded-full shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
               <span class="sr-only">{{ currentTheme }}</span>
               <svg class="hidden h-4 w-4 fill-green-400 [[data-theme=light]_&]:block" aria-hidden="true" viewBox="0 0 16 16">
@@ -160,7 +160,7 @@
               aria-expanded="false"
               aria-haspopup="true"
               (click)="toggleMobileMenu()">
-              <span class="sr-only">Ouvrir le menu utilisateur</span>
+              <span class="sr-only" i18n>Ouvrir le menu utilisateur</span>
               <ngx-skeleton-loader
                 *ngIf="(user$ | async) === null"
                 appearance="circle"
@@ -175,14 +175,14 @@
             </button>
             <div
               [@openClose]="openCloseTrigger"
-              class="absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y rounded-md shadow-lg divide-slate-100 ring-1 ring-black dark:bg-gray-800 dark:divide-slate-700 dark:ring-gray-800 ring-opacity-5 dark:ring-opacity-70 focus:outline-none"
+              class="absolute right-0 z-10 mt-2 origin-top-right bg-white divide-y rounded-md shadow-lg w-60 divide-slate-100 ring-1 ring-black dark:bg-gray-800 dark:divide-slate-700 dark:ring-gray-800 ring-opacity-5 focus:outline-none"
               role="menu"
               aria-orientation="vertical"
               aria-labelledby="menu-button"
               tabindex="-1"
               [ngClass]="mobileMenuOpen ? 'block' : 'hidden'">
               <div class="px-4 py-3" role="none">
-                <p class="text-sm text-black dark:text-slate-500" role="none">Connecté avec</p>
+                <p class="text-sm text-black dark:text-slate-500" role="none" i18n>Connecté avec</p>
                 <p
                   class="text-sm font-medium truncate text-slate-900 dark:text-white"
                   role="none"
@@ -191,18 +191,18 @@
                 </p>
               </div>
               <div class="py-1" role="none">
-                <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">
+                <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0" i18n>
                   Mon compte
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">
+                <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1" i18n>
                   Support
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">
+                <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2" i18n>
                   Guide d'utilisation
                 </a>
               </div>
               <div class="flex items-center justify-between py-1" role="none">
-                <button type="button" (click)="logout()" class="block w-full px-4 py-2 text-sm text-left text-slate-700 dark:text-slate-300" role="menuitem" tabindex="-1" id="menu-item-3">
+                <button type="button" (click)="logout()" class="block w-full px-4 py-2 text-sm text-left text-slate-700 dark:text-slate-300" role="menuitem" tabindex="-1" id="menu-item-3" i18n>
                   Se déconnecter
                 </button>
                 <span *ngIf="loading$ | async" class="flex items-center px-3">

src/app/shared/themes/components/header/header.component.ts

@@ -45,9 +45,9 @@ export class HeaderComponent implements OnInit {
   showDialog: boolean = false;
 
   themes = [
-    { name: 'Light', value: 'light' },
-    { name: 'Dark', value: 'dark' },
-    { name: 'System', value: 'system' },
+    { name: $localize`Clair`, value: 'light' },
+    { name: $localize`Sombre`, value: 'dark' },
+    { name: $localize`Système`, value: 'system' },
   ];
 
   @ViewChild('menuDropdown') menuDropdown!: ElementRef;