feat: Improve logout keycloak design

keycloak/keycloakify/src/login/KcApp.tsx

@@ -13,6 +13,7 @@ const Terms = lazy(() => import("./pages/Terms"));
 const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1"));
 const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2"));
 const Info = lazy(() => import("keycloakify/login/pages/Info"));
+const LogoutConfirm = lazy(() => import("./pages/LogoutConfirm"));
 
 // This is like adding classes to theme.properties 
 // https://github.com/keycloak/keycloak/blob/11.0.3/themes/src/main/resources/theme/keycloak/login/theme.properties
@@ -48,6 +49,7 @@ export default function KcApp(props: { kcContext: KcContext; }) {
                     case "register.ftl": return <Register {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
                     case "register-user-profile.ftl": return <RegisterUserProfile {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />
                     case "terms.ftl": return <Terms {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
+                    case "logout-confirm.ftl": return <LogoutConfirm {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
                     // Removes those pages in you project. They are included to show you how to implement keycloak pages
                     // that are not yes implemented by Keycloakify. 
                     // See: https://docs.keycloakify.dev/limitations#some-pages-still-have-the-default-theme.-why

keycloak/keycloakify/src/login/pages/LogoutConfirm.tsx

@@ -0,0 +1,62 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("logoutConfirmTitle")}>
+            <div id="kc-logout-confirm" className="content-area">
+                <p className="instruction">{msg("logoutConfirmHeader")}</p>
+
+                <form className="form-actions" action={url.logoutConfirmAction} method="POST">
+                    <input type="hidden" name="session_code" value={logoutConfirm.code} />
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options">
+                            <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                        </div>
+                        <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                            <input
+                                tabIndex={4}
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="confirmLogout"
+                                id="kc-logout"
+                                type="submit"
+                                value={msgStr("doLogout")}
+                            />
+                        </div>
+                    </div>
+                </form>
+                <div id="kc-info-message">
+                    {!logoutConfirm.skipLink && client.baseUrl && (
+                        <p>
+                            <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
+                        </p>
+                    )}
+                </div>
+
+                <p style={{ height: "15px" }}>
+
+
+                </p>
+            </div>
+        </Template>
+    );
+}