Feat idp-review-user-profile.ftl #164

src/lib/components/IdpReviewUserProfile.tsx

@@ -0,0 +1,46 @@
+import React, { useState, memo } from "react";
+import Template from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
+import { UserProfileFormFields } from "./shared/UserProfileCommons";
+
+const IdpReviewUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.IdpReviewUserProfile; i18n: I18n } & KcProps) => {
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    const { url } = kcContext;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("loginIdpReviewProfileTitle")}
+            formNode={
+                <form id="kc-idp-review-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
+
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)} />
+                        </div>
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            <input
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                type="submit"
+                                value={msgStr("doSubmit")}
+                                disabled={!isFomSubmittable}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+});
+
+export default IdpReviewUserProfile;

src/lib/components/KcApp.tsx

@@ -21,6 +21,7 @@ const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
 const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
 const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
 const UpdateUserProfile = lazy(() => import("./UpdateUserProfile"));
+const IdpReviewUserProfile = lazy(() => import("./IdpReviewUserProfile"));
 
 const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcContext: KcContextBase; i18n?: I18n } & KcProps) => {
     const i18n = (function useClosure() {
@@ -77,6 +78,8 @@ const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcConte
                         return <LogoutConfirm {...{ kcContext, ...props }} />;
                     case "update-user-profile.ftl":
                         return <UpdateUserProfile {...{ kcContext, ...props }} />;
+                    case "idp-review-user-profile.ftl":
+                        return <IdpReviewUserProfile {...{ kcContext, ...props }} />;
                 }
             })()}
         </Suspense>