From 6df9f28c0298dfd50a1e0d53a26a17decd15af73 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone@data.gouv.fr>
Date: Thu, 25 May 2023 07:40:20 +0200
Subject: [PATCH] #277 fix storybook

---
 src/login/kcContext/kcContextMocks.ts |  2 +-
 src/login/pages/SamlPostForm.tsx      | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/login/kcContext/kcContextMocks.ts b/src/login/kcContext/kcContextMocks.ts
index 359df1e9..915db2e4 100644
--- a/src/login/kcContext/kcContextMocks.ts
+++ b/src/login/kcContext/kcContextMocks.ts
@@ -527,7 +527,7 @@ export const kcContextMocks = [
         ...kcContextCommonMock,
         pageId: "saml-post-form.ftl",
         "samlPost": {
-            "url": "https://saml-post-url"
+            "url": ""
         }
     }),
     id<KcContext.LoginPageExpired>({
diff --git a/src/login/pages/SamlPostForm.tsx b/src/login/pages/SamlPostForm.tsx
index 14b88098..03522f95 100644
--- a/src/login/pages/SamlPostForm.tsx
+++ b/src/login/pages/SamlPostForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
@@ -9,13 +9,26 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
     const { msgStr, msg } = i18n;
 
     const { samlPost } = kcContext;
+
+    const [htmlFormElement, setHtmlFormElement] = useState<HTMLFormElement | null>(null);
+
     useEffect(() => {
-        document.forms[0].submit();
-    }, [samlPost]);
+        if (htmlFormElement === null) {
+            return;
+        }
+
+        // Storybook
+        if (samlPost.url === "") {
+            alert("In a real Keycloak the user would be redirected immediately");
+            return;
+        }
+
+        htmlFormElement.submit();
+    }, [htmlFormElement]);
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("saml.post-form.title")}>
             <p>{msg("saml.post-form.message")}</p>
-            <form name="saml-post-binding" method="post" action={samlPost.url}>
+            <form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement}>
                 {samlPost.SAMLRequest && <input type="hidden" name="SAMLRequest" value={samlPost.SAMLRequest} />}
                 {samlPost.SAMLResponse && <input type="hidden" name="SAMLResponse" value={samlPost.SAMLResponse} />}
                 {samlPost.relayState && <input type="hidden" name="RelayState" value={samlPost.relayState} />}