Merge branch 'main' of https://github.com/codegouvfr/keycloakify-starter

src/keycloak-theme/KcApp.tsx

@@ -34,10 +34,16 @@ export default function App(props: { kcContext: KcContext; }) {
 
     const i18n = useI18n({ kcContext });
 
-    //NOTE: Locales not yet downloaded
     if (i18n === null) {
+        //NOTE: Locales not yet downloaded, we could as well display a loading progress but it's usually a matter of milliseconds.
         return null;
     }
+    
+    /* 
+    * Examples assuming i18n.currentLanguageTag === "en":
+    * i18n.msg("access-denied") === <span>Access denied</span>
+    * i18n.msg("foo") === <span>foo in English</span>
+    */
 
     const pageProps: Omit<PageProps<any, typeof i18n>, "kcContext"> = {
         i18n,

src/keycloak-theme/i18n.ts

@@ -6,6 +6,10 @@ export function useI18n(props: Props) {
     const { kcContext } = props;
     return useI18nBase({
         kcContext,
+        // NOTE: Here you can override the default i18n messages
+        // or define new ones that, for example, you would have
+        // defined in the Keycloak admin UI for UserProfile
+        // https://user-images.githubusercontent.com/6702424/182050652-522b6fe6-8ee5-49df-aca3-dba2d33f24a5.png
         "extraMessages": {
             "en": {
                 "alphanumericalCharsOnly": "Only alphanumerical characters",