keycloakify 2.2.0 → 2.5.1

package/src/lib/components/LoginUpdateProfile.tsx

@@ -5,129 +5,116 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 import { useCssAndCx } from "tss-react";
 
-export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; } & KcProps) => {
+export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile } & KcProps) => {
+    const { cx } = useCssAndCx();
 
-	const { cx } = useCssAndCx();
+    const { msg, msgStr } = useKcMessage();
 
-	const { msg, msgStr } = useKcMessage();
+    const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
 
-	const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("loginProfileTitle")}
+            formNode={
+                <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    {user.editUsernameAllowed && (
+                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
+                            <div className={cx(props.kcLabelWrapperClass)}>
+                                <label htmlFor="username" className={cx(props.kcLabelClass)}>
+                                    {msg("username")}
+                                </label>
+                            </div>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input
+                                    type="text"
+                                    id="username"
+                                    name="username"
+                                    defaultValue={user.username ?? ""}
+                                    className={cx(props.kcInputClass)}
+                                />
+                            </div>
+                        </div>
+                    )}
 
-	return (
-		<Template
-			{...{ kcContext, ...props }}
-			doFetchDefaultThemeResources={true}
-			headerNode={msg("loginProfileTitle")}
-			formNode={
-				<form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
-					{user.editUsernameAllowed &&
-						<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
-							<div className={cx(props.kcLabelWrapperClass)}>
-								<label htmlFor="username" className={cx(props.kcLabelClass)}>
-									{msg("username")}
-								</label>
-							</div>
-							<div className={cx(props.kcInputWrapperClass)}>
-								<input
-									type="text"
-									id="username"
-									name="username"
-									defaultValue={user.username ?? ""}
-									className={cx(props.kcInputClass)}
-								/>
-							</div>
-						</div>
-					}
+                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="email" className={cx(props.kcLabelClass)}>
+                                {msg("email")}
+                            </label>
+                        </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={cx(props.kcInputClass)} />
+                        </div>
+                    </div>
 
-					<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
-						<div className={cx(props.kcLabelWrapperClass)}>
-							<label htmlFor="email" className={cx(props.kcLabelClass)}>
-								{msg("email")}
-							</label>
-						</div>
-						<div className={cx(props.kcInputWrapperClass)}>
-							<input
-								type="text"
-								id="email"
-								name="email"
-								defaultValue={user.email ?? ""}
-								className={cx(props.kcInputClass)}
-							/>
-						</div>
-					</div>
+                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="firstName" className={cx(props.kcLabelClass)}>
+                                {msg("firstName")}
+                            </label>
+                        </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input
+                                type="text"
+                                id="firstName"
+                                name="firstName"
+                                defaultValue={user.firstName ?? ""}
+                                className={cx(props.kcInputClass)}
+                            />
+                        </div>
+                    </div>
 
-					<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
-						<div className={cx(props.kcLabelWrapperClass)}>
-							<label htmlFor="firstName" className={cx(props.kcLabelClass)}>
-								{msg("firstName")}
-							</label>
-						</div>
-						<div className={cx(props.kcInputWrapperClass)}>
-							<input
-								type="text"
-								id="firstName"
-								name="firstName"
-								defaultValue={user.firstName ?? ""}
-								className={cx(props.kcInputClass)}
-							/>
-						</div>
-					</div>
+                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="lastName" className={cx(props.kcLabelClass)}>
+                                {msg("lastName")}
+                            </label>
+                        </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input type="text" id="lastName" name="lastName" defaultValue={user.lastName ?? ""} className={cx(props.kcInputClass)} />
+                        </div>
+                    </div>
 
-					<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
-						<div className={cx(props.kcLabelWrapperClass)}>
-							<label htmlFor="lastName" className={cx(props.kcLabelClass)}>
-								{msg("lastName")}
-							</label>
-						</div>
-						<div className={cx(props.kcInputWrapperClass)}>
-							<input
-								type="text"
-								id="lastName"
-								name="lastName"
-								defaultValue={user.lastName ?? ""}
-								className={cx(props.kcInputClass)}
-							/>
-						</div>
-					</div>
-
-					<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)}>
-							{
-								isAppInitiatedAction ?
-									<>
-										<input
-											className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
-											type="submit"
-											defaultValue={msgStr("doSubmit")}
-										/>
-										<button
-											className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
-											type="submit"
-											name="cancel-aia"
-											value="true"
-										>
-											{msg("doCancel")}
-										</button>
-									</>
-									:
-									<input
-										className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
-										type="submit"
-										defaultValue={msgStr("doSubmit")}
-									/>
-							}
-						</div>
-					</div>
-
-				</form>
-			}
-		/>
-	);
+                    <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)}>
+                            {isAppInitiatedAction ? (
+                                <>
+                                    <input
+                                        className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                        type="submit"
+                                        defaultValue={msgStr("doSubmit")}
+                                    />
+                                    <button
+                                        className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
+                                        type="submit"
+                                        name="cancel-aia"
+                                        value="true"
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </>
+                            ) : (
+                                <input
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass,
+                                    )}
+                                    type="submit"
+                                    defaultValue={msgStr("doSubmit")}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
 });
-
-

package/src/lib/components/LoginVerifyEmail.tsx

@@ -1,17 +1,13 @@
-
 import { memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 
-export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; } & KcProps) => {
-
+export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail } & KcProps) => {
     const { msg } = useKcMessage();
 
-    const {
-        url
-    } = kcContext;
+    const { url } = kcContext;
 
     return (
         <Template
@@ -21,9 +17,7 @@ export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcCo
             headerNode={msg("emailVerifyTitle")}
             formNode={
                 <>
-                    <p className="instruction">
-                        {msg("emailVerifyInstruction1")}
-                    </p>
+                    <p className="instruction">{msg("emailVerifyInstruction1")}</p>
                     <p className="instruction">
                         {msg("emailVerifyInstruction2")}
                         <a href={url.loginAction}>{msg("doClickHere")}</a>
@@ -33,7 +27,4 @@ export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcCo
             }
         />
     );
-
 });
-
-

package/src/lib/components/Register.tsx

@@ -5,17 +5,8 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 import { useCssAndCx } from "tss-react";
 
-export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register; } & KcProps) => {
-
-    const {
-        url,
-        messagesPerField,
-        register,
-        realm,
-        passwordRequired,
-        recaptchaRequired,
-        recaptchaSiteKey
-    } = kcContext;
+export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register } & KcProps) => {
+    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
     const { msg, msgStr } = useKcMessage();
 
@@ -28,13 +19,18 @@ export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBas
             headerNode={msg("registerTitle")}
             formNode={
                 <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-
                     <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
                         <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="firstName" className={cx(props.kcLabelClass)}>{msg("firstName")}</label>
+                            <label htmlFor="firstName" className={cx(props.kcLabelClass)}>
+                                {msg("firstName")}
+                            </label>
                         </div>
                         <div className={cx(props.kcInputWrapperClass)}>
-                            <input type="text" id="firstName" className={cx(props.kcInputClass)} name="firstName"
+                            <input
+                                type="text"
+                                id="firstName"
+                                className={cx(props.kcInputClass)}
+                                name="firstName"
                                 defaultValue={register.formData.firstName ?? ""}
                             />
                         </div>
@@ -42,84 +38,118 @@ export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBas
 
                     <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
                         <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="lastName" className={cx(props.kcLabelClass)}>{msg("lastName")}</label>
+                            <label htmlFor="lastName" className={cx(props.kcLabelClass)}>
+                                {msg("lastName")}
+                            </label>
                         </div>
                         <div className={cx(props.kcInputWrapperClass)}>
-                            <input type="text" id="lastName" className={cx(props.kcInputClass)} name="lastName"
+                            <input
+                                type="text"
+                                id="lastName"
+                                className={cx(props.kcInputClass)}
+                                name="lastName"
                                 defaultValue={register.formData.lastName ?? ""}
                             />
                         </div>
                     </div>
 
-                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists('email', props.kcFormGroupErrorClass))}>
+                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
                         <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="email" className={cx(props.kcLabelClass)}>{msg("email")}</label>
+                            <label htmlFor="email" className={cx(props.kcLabelClass)}>
+                                {msg("email")}
+                            </label>
                         </div>
                         <div className={cx(props.kcInputWrapperClass)}>
-                            <input type="text" id="email" className={cx(props.kcInputClass)} name="email"
-                                defaultValue={register.formData.email ?? ""} autoComplete="email"
+                            <input
+                                type="text"
+                                id="email"
+                                className={cx(props.kcInputClass)}
+                                name="email"
+                                defaultValue={register.formData.email ?? ""}
+                                autoComplete="email"
                             />
                         </div>
                     </div>
-                    {
-                        !realm.registrationEmailAsUsername &&
-
-                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists('username', props.kcFormGroupErrorClass))}>
+                    {!realm.registrationEmailAsUsername && (
+                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
                             <div className={cx(props.kcLabelWrapperClass)}>
-                                <label htmlFor="username" className={cx(props.kcLabelClass)}>{msg("username")}</label>
+                                <label htmlFor="username" className={cx(props.kcLabelClass)}>
+                                    {msg("username")}
+                                </label>
                             </div>
                             <div className={cx(props.kcInputWrapperClass)}>
-                                <input type="text" id="username" className={cx(props.kcInputClass)} name="username"
-                                    defaultValue={register.formData.username ?? ""} autoComplete="username" />
+                                <input
+                                    type="text"
+                                    id="username"
+                                    className={cx(props.kcInputClass)}
+                                    name="username"
+                                    defaultValue={register.formData.username ?? ""}
+                                    autoComplete="username"
+                                />
                             </div>
-                        </div >
-
-                    }
-                    {
-                        passwordRequired &&
+                        </div>
+                    )}
+                    {passwordRequired && (
                         <>
-
                             <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
                                 <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor="password" className={cx(props.kcLabelClass)}>{msg("password")}</label>
+                                    <label htmlFor="password" className={cx(props.kcLabelClass)}>
+                                        {msg("password")}
+                                    </label>
                                 </div>
                                 <div className={cx(props.kcInputWrapperClass)}>
-                                    <input type="password" id="password" className={cx(props.kcInputClass)} name="password" autoComplete="new-password" />
+                                    <input
+                                        type="password"
+                                        id="password"
+                                        className={cx(props.kcInputClass)}
+                                        name="password"
+                                        autoComplete="new-password"
+                                    />
                                 </div>
                             </div>
 
-                            <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass))}>
+                            <div
+                                className={cx(
+                                    props.kcFormGroupClass,
+                                    messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass),
+                                )}
+                            >
                                 <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>{msg("passwordConfirm")}</label>
+                                    <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
+                                        {msg("passwordConfirm")}
+                                    </label>
                                 </div>
                                 <div className={cx(props.kcInputWrapperClass)}>
                                     <input type="password" id="password-confirm" className={cx(props.kcInputClass)} name="password-confirm" />
                                 </div>
                             </div>
                         </>
-
-                    }
-                    {
-                        recaptchaRequired &&
+                    )}
+                    {recaptchaRequired && (
                         <div className="form-group">
                             <div className={cx(props.kcInputWrapperClass)}>
                                 <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
                             </div>
                         </div>
-                    }
+                    )}
                     <div className={cx(props.kcFormGroupClass)}>
                         <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
                             <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                <span><a href={url.loginUrl}>{msg("backToLogin")}</a></span>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
                             </div>
                         </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("doRegister")} />
+                            <input
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                            />
                         </div>
                     </div>
-                </form >
+                </form>
             }
         />
     );