many improvements

keycloak/keycloakify/src/login/KcApp.css

@@ -1,6 +1,6 @@
 
 .my-color {
-	color: red;
+	color: darkblue;
 }
 
 .my-font {
@@ -12,5 +12,5 @@
 }
 
 .my-root-class body {
-	background: url(./assets/background.svg) no-repeat center center fixed;
+	background: '#efefef';
 }

keycloak/keycloakify/src/login/Template.tsx

@@ -60,14 +60,14 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     className={getClassName("kcHeaderWrapperClass")}
                     style={{ "fontFamily": '"Work Sans"' }}
                 >
-                    {/* 
-                        This is just to show you how it can be done but this is not the best option for importing assets.
-                        See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets
-                    */}
-                    <img src={`${PUBLIC_URL}/keycloakify-logo.png`} alt="Keycloakify logo" width={50} />
-                    {msg("loginTitleHtml", realm.displayNameHtml)}!!!
-                    {/* This is the preferred way to use assets */}
+
+                    <div
+                    style={{
+                        display: "none",
+                    }
+                    }>
                     <img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} />
+                    </div>
                 </div>
             </div>
 

keycloak/keycloakify/src/login/pages/Register.stories.tsx

@@ -0,0 +1,72 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { createPageStory } from "../createPageStory";
+
+const { PageStory } = createPageStory({
+    pageId: "register.ftl"
+});
+
+export default {
+    title: "register/Register",
+    component: PageStory,
+} as ComponentMeta<typeof PageStory>;
+
+export const Default: ComponentStory<typeof PageStory> = () => <PageStory />;
+
+export const WithoutEmailField: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            register: { email: false }
+        }}
+    />
+);
+
+export const WithoutPasswordField: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            passwordRequired: false
+        }}
+    />
+);
+
+export const WithRecaptcha: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            recaptchaRequired: true,
+            recaptchaSiteKey: "your-recaptcha-site-key"
+        }}
+    />
+);
+
+export const WithPresetFirstName: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            register: { formData: { firstName: "John" } }
+        }}
+    />
+);
+
+export const WithPresetLastName: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            register: { formData: { lastName: "Doe" } }
+        }}
+    />
+);
+
+export const WithPresetEmail: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            register: { formData: { email: "[email protected]" } }
+        }}
+    />
+);
+
+export const WithPresetUsername: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            register: { formData: { username: "johndoe" } }
+        }}
+    />
+);
+
+// Add more variations as needed...

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

@@ -4,8 +4,10 @@ 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";
+import { useState } from "react";
 
 export default function Register(props: PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n>) {
+    const [didAgree, setDidAgree] = useState(false);
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
@@ -64,6 +66,32 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                     </div>
                 </div>
 
+                {
+                    /* University field */
+                }
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("university", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="university" className={getClassName("kcLabelClass")}>
+                            University
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="university"
+                            className={getClassName("kcInputClass")}
+                            name="university"
+                            defaultValue={""}
+                        />
+                    </div>
+                </div>
+
+
                 <div
                     className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
                 >
@@ -148,22 +176,45 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                         </div>
                     </>
                 )}
+
+                <div>
+                    This database is subject to particular terms of use. Some data is available under the restricted use terms, which state that
+                    you may not publish focal analyses of this data without express permission of the authors.
+                    Do you agree to these terms?
+                    <div>
+                    <input
+                        type="checkbox"
+                        id="terms"
+                        name="terms"
+                        onChange={(e) => {
+                            setDidAgree(e.target.checked);
+                        }}
+                    /> I agree
+</div>
+
+                </div>
+
+
                 {recaptchaRequired && (
                     <div className="form-group">
                         <div className={getClassName("kcInputWrapperClass")}>
                             <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
                         </div>
                     </div>
                 )}
-                <div className={getClassName("kcFormGroupClass")}>
+
+                {/*
+               
                     <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
                         <div className={getClassName("kcFormOptionsWrapperClass")}>
                             <span>
                                 <a href={url.loginUrl}>{msg("backToLogin")}</a>
                             </span>
                         </div>
                     </div>
+                */}
 
+<div className={getClassName("kcFormGroupClass")}>
                     <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
                         <input
                             className={clsx(
@@ -172,6 +223,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                                 getClassName("kcButtonBlockClass"),
                                 getClassName("kcButtonLargeClass")
                             )}
+                            disabled={!didAgree}
                             type="submit"
                             value={msgStr("doRegister")}
                         />