Add missing mock

README.md

@@ -40,6 +40,12 @@
 
 # Changelog highlights
 
+## 7.0 🍾
+
+-   Account theme support 🚀
+-   It's much easier to customize pages at the CSS level, you can now see in the browser dev tool the customizable classes.
+-   New interactive CLI tool `npx eject-keycloak-page`, that enables to select the page you want to customize at the component level.
+
 ## 6.13
 
 -   Build work behind corporate proxies, [see issue](https://github.com/InseeFrLab/keycloakify/issues/257).

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "7.0.0-rc.14",
+    "version": "7.0.1",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

src/account/Template.tsx

@@ -43,6 +43,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                 {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
                                     <li>
                                         <div className="kc-dropdown" id="kc-locale-dropdown">
+                                            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                             <a href="#" id="kc-current-locale-link">
                                                 {labelBySupportedLanguageTag[currentLanguageTag]}
                                             </a>

src/account/kcContext/KcContext.ts

@@ -64,6 +64,7 @@ export declare namespace KcContext {
         password: {
             passwordSet: boolean;
         };
+        stateChecker: string;
     };
 
     export type Account = Common & {

src/account/kcContext/kcContextMocks.ts

@@ -154,7 +154,8 @@ export const kcContextMocks: KcContext[] = [
         "pageId": "password.ftl",
         "password": {
             "passwordSet": true
-        }
+        },
+        "stateChecker": "state checker"
     }),
     id<KcContext.Account>({
         ...kcContextCommonMock,

src/account/pages/Password.tsx

@@ -15,7 +15,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
         }
     });
 
-    const { url, password, account } = kcContext;
+    const { url, password, account, stateChecker } = kcContext;
 
     const { msg } = i18n;
 
@@ -55,7 +55,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                     </div>
                 )}
 
-                <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}" />
+                <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
 
                 <div className="form-group">
                     <div className="col-sm-2 col-md-2">

src/bin/keycloakify/keycloakify.ts

@@ -130,17 +130,21 @@ export async function main() {
             ``,
             `Once your container is up and running: `,
             "- Log into the admin console 👉 http://localhost:8080/admin username: admin, password: admin 👈",
-            `- Create a realm named     "myrealm"`,
-            `- Create a client with ID: "myclient"`,
+            `- Create a realm:                  myrealm`,
+            `- Enable registration:             Realm settings -> Login tab  -> User registration: on`,
+            `- Enable the Account theme:        Realm settings -> Themes tab -> Account theme, select ${buildOptions.themeName} `,
+            `- Create a client id               myclient`,
             `  Root URL:                        https://www.keycloak.org/app/`,
-            `  Valid redirect URIs:             https://www.keycloak.org/app* http://localhost* (localhost isn't necessary here but it will be once you'll want to test the integration with your app)`,
+            `  Valid redirect URIs:             https://www.keycloak.org/app* http://localhost* (localhost is optional)`,
             `  Valid post logout redirect URIs: https://www.keycloak.org/app* http://localhost*`,
             `  Web origins:                     *`,
-            `  Login Theme: ${buildOptions.themeName}`,
-            `  Click save at the bottom of the page.`,
-            `- Go to 👉 https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
+            `  Login Theme:                     ${buildOptions.themeName}`,
+            `  Save (button at the bottom of the page)`,
             ``,
-            `Video demoing this process: https://youtu.be/N3wlBoH4hKg`,
+            `- Go to  👉  https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
+            `- Got to 👉  http://localhost:8080/realms/myrealm/account 👈 to see your account theme`,
+            ``,
+            `Video tutorial: https://youtu.be/WMyGZNHQkjU`,
             ``
         ].join("\n")
     );