Support locale switch in admin panel (#96)

admin-panel/app/Setup.tsx

@@ -22,6 +22,8 @@ import {
   routeTool, typeTool,
 } from 'tools'
 
+const locale = localStorage.getItem('Locale')
+
 const AuthSetup = ({ children }: PropsWithChildren) => {
   const t = useTranslations()
 
@@ -71,7 +73,7 @@ const AuthSetup = ({ children }: PropsWithChildren) => {
   }
 
   if (!isAuthenticated) {
-    loginRedirect()
+    loginRedirect({ locale: locale ?? undefined })
     return
   }
 
@@ -99,6 +101,16 @@ const LayoutSetup = ({ children } : PropsWithChildren) => {
   const locale = useCurrentLocale()
   const { logoutRedirect } = useAuth()
 
+  useEffect(
+    () => {
+      localStorage.setItem(
+        'Locale',
+        locale,
+      )
+    },
+    [locale],
+  )
+
   const handleLogout = () => {
     logoutRedirect({ postLogoutRedirectUri: process.env.NEXT_PUBLIC_CLIENT_URI })
   }
@@ -155,6 +167,13 @@ const LayoutSetup = ({ children } : PropsWithChildren) => {
           >
             {t('layout.scopes')}
           </Navbar.Link>
+          <Navbar.Link
+            as={Link}
+            className='flex items-center h-6'
+            href={`/${locale === 'en' ? 'fr' : 'en'}${routeTool.Internal.Dashboard}`}
+          >
+            {locale === 'en' ? 'FR' : 'EN'}
+          </Navbar.Link>
           <Navbar.Link
             onClick={handleLogout}
             href='#'
@@ -174,7 +193,7 @@ const Setup = ({ children } : PropsWithChildren) => {
   return (
     <AuthProvider
       clientId={process.env.NEXT_PUBLIC_CLIENT_ID ?? ''}
-      redirectUri={`${process.env.NEXT_PUBLIC_CLIENT_URI}/en/dashboard`}
+      redirectUri={`${process.env.NEXT_PUBLIC_CLIENT_URI}/${locale || 'en'}/dashboard`}
       serverUri={process.env.NEXT_PUBLIC_SERVER_URI ?? ''}
     >
       <AuthSetup>

admin-panel/i18n.ts

@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation'
 import { getRequestConfig } from 'next-intl/server'
 
-const locales = ['en']
+const locales = ['en', 'fr']
 
 export default getRequestConfig(async ({ locale }: { locale:string}) => {
   if (!locales.includes(locale)) notFound()

admin-panel/middleware.ts

@@ -1,7 +1,7 @@
 import createMiddleware from 'next-intl/middleware'
 
 export default createMiddleware({
-  locales: ['en'],
+  locales: ['en', 'fr'],
   defaultLocale: 'en',
 })
 

admin-panel/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.4",
-    "@melody-auth/react": "*",
+    "@melody-auth/react": "^0.0.6",
     "@preact/signals-react": "^2.1.0",
     "classnames": "^2.5.1",
     "flowbite-react": "^0.10.1",

admin-panel/translations/fr.json

@@ -0,0 +1,96 @@
+{
+  "layout": {
+    "blocked": "Seul le super administrateur peut accéder à cette application.",
+    "brand": "Melody Auth",
+    "logout": "Déconnexion",
+    "users": "Gérer les utilisateurs",
+    "roles": "Gérer les rôles",
+    "apps": "Gérer les applications",
+    "scopes": "Gérer les portées",
+    "dashboard": "Tableau de bord"
+  },
+  "common": {
+    "enable": "Activer",
+    "disable": "Désactiver",
+    "disabled": "Désactivé",
+    "active": "Actif",
+    "property": "Propriété",
+    "value": "Valeur",
+    "createdAt": "Créé le",
+    "updatedAt": "Mis à jour le",
+    "create": "Créer",
+    "options": "Options :",
+    "save": "Enregistrer",
+    "delete": "Supprimer",
+    "system": "Système",
+    "note": "Remarque",
+    "previous": "Précédent",
+    "next": "Suivant",
+    "status": "Statut",
+    "fieldIsRequired": "Ce champ est requis.",
+    "deleteConfirm": "Êtes-vous sûr de vouloir supprimer {item} ?",
+    "deleteConfirmBtn": "Supprimer"
+  },
+  "dashboard": {
+    "configs": "Configurations système",
+    "configName": "Nom",
+    "configValue": "Valeur",
+    "configSeconds": "secondes",
+    "links": "Liens système",
+    "apiSwagger": "Swagger API S2S",
+    "systemInfo": "Informations système"
+  },
+  "apps": {
+    "title": "Applications",
+    "app": "Application",
+    "new": "Créer une application",
+    "clientId": "ID Client",
+    "clientSecret": "Secret Client",
+    "name": "Nom",
+    "status": "Statut",
+    "type": "Type",
+    "scopes": "Portées",
+    "redirectUris": "URIs de redirection"
+  },
+  "users": {
+    "title": "Utilisateurs",
+    "user": "Utilisateur",
+    "authId": "ID Auth",
+    "email": "Email",
+    "name": "Nom",
+    "locale": "Langue",
+    "status": "Statut",
+    "loginCount": "Nombre de connexions",
+    "emailVerified": "Email vérifié",
+    "firstName": "Prénom",
+    "lastName": "Nom",
+    "roles": "Rôles",
+    "resend": "Renvoyer l'email",
+    "sent": "Email envoyé",
+    "you": "Vous",
+    "consented": "Applications consenties",
+    "revokeConsent": "Révoquer",
+    "confirmRevoke": "Êtes-vous sûr de vouloir révoquer le consentement à {item} pour l'utilisateur actuel ?",
+    "noConsented": "Aucune application consentie pour l'instant.",
+    "noIP": "Pas d'IP",
+    "lockedIPs": "IPs verrouillées",
+    "unlock": "Déverrouiller tout"
+  },
+  "roles": {
+    "title": "Rôles",
+    "role": "Rôle",
+    "name": "Nom",
+    "status": "Statut",
+    "new": "Créer un rôle"
+  },
+  "scopes": {
+    "title": "Portées",
+    "scope": "Portée",
+    "name": "Nom",
+    "status": "Statut",
+    "type": "Type de client",
+    "new": "Créer une portée",
+    "locales": "Langues",
+    "localeNote": "Ceci sera affiché sur la page de consentement de l'application utilisateur."
+  }
+}

server/migrations/0001_creae_app_table.sql

@@ -110,5 +110,5 @@ CREATE TABLE [app] (
   "isActive" integer DEFAULT 1
 );
 CREATE UNIQUE INDEX idx_unique_app_clientId ON app (clientId) WHERE deletedAt IS NULL;
-INSERT INTO app ("name", "type", "redirectUris") values ("Admin Panel (SPA)", "spa", "http://localhost:3000/en/dashboard");
+INSERT INTO app ("name", "type", "redirectUris") values ("Admin Panel (SPA)", "spa", "http://localhost:3000/en/dashboard,http://localhost:3000/fr/dashboard");
 INSERT INTO app ("name", "type") values ("Admin Panel (S2S)", "s2s");

server/src/views/components/Field.tsx

@@ -33,7 +33,7 @@ const Field = ({
       />
       <p
         id={`error-${name}`}
-        class='text-red hidden text-sm'>
+        class='text-red hidden text-sm w-text'>
       </p>
     </section>
   )

server/src/views/components/Layout.tsx

@@ -62,7 +62,7 @@ const Layout = ({
           .rounded-lg { border-radius: 16px; }
           .rounded-md { border-radius: 8px; }
           .w-full { width: 100%; }
-          .w-text { width: 300px }
+          .w-text { width: 240px; }
           .main {
             background-color: lightgray;
             height: 100vh;