Small Template refactor
This commit is contained in:
garronej
parent
36f32d28f2
commit
0f47a5b6ba
@ -1,6 +1,6 @@
|
|||||||
import React, { lazy, Suspense } from "react";
|
import React, { lazy, Suspense } from "react";
|
||||||
import { __unsafe_useI18n as useI18n } from "./i18n";
|
import { __unsafe_useI18n as useI18n } from "./i18n";
|
||||||
import DefaultTemplate from "./pages/Template";
|
import DefaultTemplate from "./Template";
|
||||||
import type { KcContextBase } from "./getKcContext/KcContextBase";
|
import type { KcContextBase } from "./getKcContext/KcContextBase";
|
||||||
import type { PageProps } from "./KcProps";
|
import type { PageProps } from "./KcProps";
|
||||||
import type { I18nBase } from "./i18n";
|
import type { I18nBase } from "./i18n";
|
||||||
|
|||||||
@ -1,6 +1,4 @@
|
|||||||
import React, { useReducer, useEffect } from "react";
|
import React, { useReducer, useEffect } from "react";
|
||||||
import { useCallbackFactory } from "./tools/useCallbackFactory";
|
|
||||||
import { useConstCallback } from "./tools/useConstCallback";
|
|
||||||
import { assert } from "./tools/assert";
|
import { assert } from "./tools/assert";
|
||||||
import { headInsert } from "./tools/headInsert";
|
import { headInsert } from "./tools/headInsert";
|
||||||
import { pathJoin } from "../bin/tools/pathJoin";
|
import { pathJoin } from "../bin/tools/pathJoin";
|
||||||
@ -27,10 +25,6 @@ export default function Template(props: TemplateProps<KcContextBase.Common, I18n
|
|||||||
|
|
||||||
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
|
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
|
||||||
|
|
||||||
const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [string]) => changeLocale(kcLanguageTag));
|
|
||||||
|
|
||||||
const onTryAnotherWayClick = useConstCallback(() => (document.forms["kc-select-try-another-way-form" as never].submit(), false));
|
|
||||||
|
|
||||||
const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
|
const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
|
||||||
|
|
||||||
const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
|
const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
|
||||||
@ -117,7 +111,7 @@ export default function Template(props: TemplateProps<KcContextBase.Common, I18n
|
|||||||
{locale.supported.map(({ languageTag }) => (
|
{locale.supported.map(({ languageTag }) => (
|
||||||
<li key={languageTag} className="kc-dropdown-item">
|
<li key={languageTag} className="kc-dropdown-item">
|
||||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||||
<a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
|
<a href="#" onClick={() => changeLocale(languageTag)}>
|
||||||
{labelBySupportedLanguageTag[languageTag]}
|
{labelBySupportedLanguageTag[languageTag]}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -211,7 +205,14 @@ export default function Template(props: TemplateProps<KcContextBase.Common, I18n
|
|||||||
<div className={clsx(props.kcFormGroupClass)}>
|
<div className={clsx(props.kcFormGroupClass)}>
|
||||||
<input type="hidden" name="tryAnotherWay" value="on" />
|
<input type="hidden" name="tryAnotherWay" value="on" />
|
||||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||||
<a href="#" id="try-another-way" onClick={onTryAnotherWayClick}>
|
<a
|
||||||
|
href="#"
|
||||||
|
id="try-another-way"
|
||||||
|
onClick={() => {
|
||||||
|
document.forms["kc-select-try-another-way-form" as never].submit();
|
||||||
|
return false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
{msg("doTryAnotherWay")}
|
{msg("doTryAnotherWay")}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,230 +0,0 @@
|
|||||||
import React, { useReducer, useEffect } from "react";
|
|
||||||
import type { KcContextBase } from "../getKcContext";
|
|
||||||
import { assert } from "../tools/assert";
|
|
||||||
import { useCallbackFactory } from "../tools/useCallbackFactory";
|
|
||||||
import { headInsert } from "../tools/headInsert";
|
|
||||||
import { pathJoin } from "../../bin/tools/pathJoin";
|
|
||||||
import { useConstCallback } from "../tools/useConstCallback";
|
|
||||||
import type { TemplateProps } from "../KcProps";
|
|
||||||
import { clsx } from "../tools/clsx";
|
|
||||||
import type { I18nBase } from "../i18n";
|
|
||||||
|
|
||||||
export default function Template(props: TemplateProps<KcContextBase.Common, I18nBase>) {
|
|
||||||
const {
|
|
||||||
displayInfo = false,
|
|
||||||
displayMessage = true,
|
|
||||||
displayRequiredFields = false,
|
|
||||||
displayWide = false,
|
|
||||||
showAnotherWayIfPresent = true,
|
|
||||||
headerNode,
|
|
||||||
showUsernameNode = null,
|
|
||||||
formNode,
|
|
||||||
infoNode = null,
|
|
||||||
kcContext,
|
|
||||||
i18n,
|
|
||||||
doFetchDefaultThemeResources
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
|
|
||||||
|
|
||||||
const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [string]) => changeLocale(kcLanguageTag));
|
|
||||||
|
|
||||||
const onTryAnotherWayClick = useConstCallback(() => (document.forms["kc-select-try-another-way-form" as never].submit(), false));
|
|
||||||
|
|
||||||
const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
|
|
||||||
|
|
||||||
const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!doFetchDefaultThemeResources) {
|
|
||||||
setExtraCssLoaded();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let isUnmounted = false;
|
|
||||||
const cleanups: (() => void)[] = [];
|
|
||||||
|
|
||||||
const toArr = (x: string | readonly string[] | undefined) => (typeof x === "string" ? x.split(" ") : x ?? []);
|
|
||||||
|
|
||||||
Promise.all(
|
|
||||||
[
|
|
||||||
...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
|
|
||||||
...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath))
|
|
||||||
]
|
|
||||||
.reverse()
|
|
||||||
.map(href =>
|
|
||||||
headInsert({
|
|
||||||
"type": "css",
|
|
||||||
href,
|
|
||||||
"position": "prepend"
|
|
||||||
})
|
|
||||||
)
|
|
||||||
).then(() => {
|
|
||||||
if (isUnmounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setExtraCssLoaded();
|
|
||||||
});
|
|
||||||
|
|
||||||
toArr(props.scripts).forEach(relativePath =>
|
|
||||||
headInsert({
|
|
||||||
"type": "javascript",
|
|
||||||
"src": pathJoin(url.resourcesPath, relativePath)
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
if (props.kcHtmlClass !== undefined) {
|
|
||||||
const htmlClassList = document.getElementsByTagName("html")[0].classList;
|
|
||||||
|
|
||||||
const tokens = clsx(props.kcHtmlClass).split(" ");
|
|
||||||
|
|
||||||
htmlClassList.add(...tokens);
|
|
||||||
|
|
||||||
cleanups.push(() => htmlClassList.remove(...tokens));
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isUnmounted = true;
|
|
||||||
|
|
||||||
cleanups.forEach(f => f());
|
|
||||||
};
|
|
||||||
}, [props.kcHtmlClass]);
|
|
||||||
|
|
||||||
if (!isExtraCssLoaded) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={clsx(props.kcLoginClass)}>
|
|
||||||
<div id="kc-header" className={clsx(props.kcHeaderClass)}>
|
|
||||||
<div id="kc-header-wrapper" className={clsx(props.kcHeaderWrapperClass)}>
|
|
||||||
{msg("loginTitleHtml", realm.displayNameHtml)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={clsx(props.kcFormCardClass, displayWide && props.kcFormCardAccountClass)}>
|
|
||||||
<header className={clsx(props.kcFormHeaderClass)}>
|
|
||||||
{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
|
|
||||||
<div id="kc-locale">
|
|
||||||
<div id="kc-locale-wrapper" className={clsx(props.kcLocaleWrapperClass)}>
|
|
||||||
<div className="kc-dropdown" id="kc-locale-dropdown">
|
|
||||||
<a href="#" id="kc-current-locale-link">
|
|
||||||
{labelBySupportedLanguageTag[currentLanguageTag]}
|
|
||||||
</a>
|
|
||||||
<ul>
|
|
||||||
{locale.supported.map(({ languageTag }) => (
|
|
||||||
<li key={languageTag} className="kc-dropdown-item">
|
|
||||||
<a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
|
|
||||||
{labelBySupportedLanguageTag[languageTag]}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
|
|
||||||
displayRequiredFields ? (
|
|
||||||
<div className={clsx(props.kcContentWrapperClass)}>
|
|
||||||
<div className={clsx(props.kcLabelWrapperClass, "subtitle")}>
|
|
||||||
<span className="subtitle">
|
|
||||||
<span className="required">*</span>
|
|
||||||
{msg("requiredFields")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-10">
|
|
||||||
<h1 id="kc-page-title">{headerNode}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<h1 id="kc-page-title">{headerNode}</h1>
|
|
||||||
)
|
|
||||||
) : displayRequiredFields ? (
|
|
||||||
<div className={clsx(props.kcContentWrapperClass)}>
|
|
||||||
<div className={clsx(props.kcLabelWrapperClass, "subtitle")}>
|
|
||||||
<span className="subtitle">
|
|
||||||
<span className="required">*</span> {msg("requiredFields")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-10">
|
|
||||||
{showUsernameNode}
|
|
||||||
<div className={clsx(props.kcFormGroupClass)}>
|
|
||||||
<div id="kc-username">
|
|
||||||
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
|
||||||
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
|
||||||
<div className="kc-login-tooltip">
|
|
||||||
<i className={clsx(props.kcResetFlowIcon)}></i>
|
|
||||||
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{showUsernameNode}
|
|
||||||
<div className={clsx(props.kcFormGroupClass)}>
|
|
||||||
<div id="kc-username">
|
|
||||||
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
|
||||||
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
|
||||||
<div className="kc-login-tooltip">
|
|
||||||
<i className={clsx(props.kcResetFlowIcon)}></i>
|
|
||||||
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</header>
|
|
||||||
<div id="kc-content">
|
|
||||||
<div id="kc-content-wrapper">
|
|
||||||
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
|
|
||||||
{displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
|
|
||||||
<div className={clsx("alert", `alert-${message.type}`)}>
|
|
||||||
{message.type === "success" && <span className={clsx(props.kcFeedbackSuccessIcon)}></span>}
|
|
||||||
{message.type === "warning" && <span className={clsx(props.kcFeedbackWarningIcon)}></span>}
|
|
||||||
{message.type === "error" && <span className={clsx(props.kcFeedbackErrorIcon)}></span>}
|
|
||||||
{message.type === "info" && <span className={clsx(props.kcFeedbackInfoIcon)}></span>}
|
|
||||||
<span
|
|
||||||
className="kc-feedback-text"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
"__html": message.summary
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{formNode}
|
|
||||||
{auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
|
|
||||||
<form
|
|
||||||
id="kc-select-try-another-way-form"
|
|
||||||
action={url.loginAction}
|
|
||||||
method="post"
|
|
||||||
className={clsx(displayWide && props.kcContentWrapperClass)}
|
|
||||||
>
|
|
||||||
<div className={clsx(displayWide && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass])}>
|
|
||||||
<div className={clsx(props.kcFormGroupClass)}>
|
|
||||||
<input type="hidden" name="tryAnotherWay" value="on" />
|
|
||||||
<a href="#" id="try-another-way" onClick={onTryAnotherWayClick}>
|
|
||||||
{msg("doTryAnotherWay")}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
{displayInfo && (
|
|
||||||
<div id="kc-info" className={clsx(props.kcSignUpClass)}>
|
|
||||||
<div id="kc-info-wrapper" className={clsx(props.kcInfoAreaWrapperClass)}>
|
|
||||||
{infoNode}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user