feat(storybook): progress on many more pages

2023-03-14 17:29:14 +01:00
parent dbe320b2fc
commit 1e1a638011
30 changed files with 1061 additions and 300 deletions
@@ -0,0 +1,114 @@
+import React, { useEffect } from "react";
+import { headInsert } from "keycloakify/lib/tools/headInsert";
+import { pathJoin } from "keycloakify/bin/tools/pathJoin";
+import { clsx } from "keycloakify/lib/tools/clsx";
+import type { PageProps } from "keycloakify";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "login-otp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
+
+    const { otpLogin, url } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    useEffect(() => {
+        let isCleanedUp = false;
+
+        headInsert({
+            "type": "javascript",
+            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
+        }).then(() => {
+            if (isCleanedUp) return;
+
+            evaluateInlineScript();
+        });
+
+        return () => {
+            isCleanedUp = true;
+        };
+    }, []);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            headerNode={msg("doLogIn")}
+            formNode={
+                <form id="kc-otp-login-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                    {otpLogin.userOtpCredentials.length > 1 && (
+                        <div className={clsx(kcProps.kcFormGroupClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
+                                {otpLogin.userOtpCredentials.map(otpCredential => (
+                                    <div key={otpCredential.id} className={clsx(kcProps.kcSelectOTPListClass)}>
+                                        <input type="hidden" value="${otpCredential.id}" />
+                                        <div className={clsx(kcProps.kcSelectOTPListItemClass)}>
+                                            <span className={clsx(kcProps.kcAuthenticatorOtpCircleClass)} />
+                                            <h2 className={clsx(kcProps.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="otp" className={clsx(kcProps.kcLabelClass)}>
+                                {msg("loginOtpOneTime")}
+                            </label>
+                        </div>
+
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
+                            <input id="otp" name="otp" autoComplete="off" type="text" className={clsx(kcProps.kcInputClass)} autoFocus />
+                        </div>
+                    </div>
+
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
+                        </div>
+
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
+                            <input
+                                className={clsx(
+                                    kcProps.kcButtonClass,
+                                    kcProps.kcButtonPrimaryClass,
+                                    kcProps.kcButtonBlockClass,
+                                    kcProps.kcButtonLargeClass
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doLogIn")}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+}
+
+declare const $: any;
+
+function evaluateInlineScript() {
+    $(document).ready(function () {
+        // Card Single Select
+        $(".card-pf-view-single-select").click(function (this: any) {
+            if ($(this).hasClass("active")) {
+                $(this).removeClass("active");
+                $(this).children().removeAttr("name");
+            } else {
+                $(".card-pf-view-single-select").removeClass("active");
+                $(".card-pf-view-single-select").children().removeAttr("name");
+                $(this).addClass("active");
+                $(this).children().attr("name", "selectedCredentialId");
+            }
+        });
+
+        var defaultCred = $(".card-pf-view-single-select")[0];
+        if (defaultCred) {
+            defaultCred.click();
+        }
+    });
+}