212 lines
9.3 KiB
Plaintext
212 lines
9.3 KiB
Plaintext
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useKeycloakThemeTranslation } from "./i18n/useKeycloakTranslation";
|
||
|
|
import { keycloakPagesContext } from "./keycloakFtlValues";
|
||
|
|
import { assert } from "evt/tools/typeSafety/assert";
|
||
|
|
import { cx } from "tss-react";
|
||
|
|
import { useKeycloakLanguage, AvailableLanguages } from "./i18n/useKeycloakLanguage";
|
||
|
|
import { getLanguageLabel } from "./i18n/getLanguageLabel";
|
||
|
|
import { useCallbackFactory } from "powerhooks";
|
||
|
|
|
||
|
|
export type Props = {
|
||
|
|
displayInfo?: boolean;
|
||
|
|
displayMessage: boolean;
|
||
|
|
displayRequiredFields: boolean;
|
||
|
|
displayWide: boolean;
|
||
|
|
showAnotherWayIfPresent: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Template(props: Props) {
|
||
|
|
|
||
|
|
const {
|
||
|
|
displayInfo = false,
|
||
|
|
displayMessage = true,
|
||
|
|
displayRequiredFields = false,
|
||
|
|
displayWide = false,
|
||
|
|
showAnotherWayIfPresent = true
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
const { t } = useKeycloakThemeTranslation();
|
||
|
|
|
||
|
|
const { keycloakLanguage, setKeycloakLanguage } = useKeycloakLanguage();
|
||
|
|
|
||
|
|
const onChangeLanguageClickFactory = useCallbackFactory(
|
||
|
|
([languageTag]: [AvailableLanguages]) =>
|
||
|
|
setKeycloakLanguage(languageTag)
|
||
|
|
);
|
||
|
|
|
||
|
|
const [{ realm, locale, auth }] = useState(() => {
|
||
|
|
|
||
|
|
assert(keycloakPagesContext !== undefined);
|
||
|
|
|
||
|
|
return keycloakPagesContext;
|
||
|
|
|
||
|
|
});
|
||
|
|
//<div className="kcBodyClass"></div>
|
||
|
|
|
||
|
|
return (
|
||
|
|
|
||
|
|
<div className="kcLoginClass">
|
||
|
|
<div id="kc-header" className="kcHeaderClass">
|
||
|
|
<div id="kc-header-wrapper" className="kcHeaderWrapperClass">
|
||
|
|
{t("loginTitleHtml", realm.displayNameHtml)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className={cx("kcFormCardClass", displayWide && "kcFormCardAccountClass")}>
|
||
|
|
<header className="kcFormHeaderClass">
|
||
|
|
|
||
|
|
{
|
||
|
|
(
|
||
|
|
realm.internationalizationEnabled &&
|
||
|
|
(assert(locale !== undefined), true) &&
|
||
|
|
locale.supported.length > 1
|
||
|
|
) && (
|
||
|
|
<div id="kc-locale">
|
||
|
|
<div id="kc-locale-wrapper" className="kcLocaleWrapperClass">
|
||
|
|
<div className="kc-dropdown" id="kc-locale-dropdown">
|
||
|
|
<a href="#" id="kc-current-locale-link">
|
||
|
|
{getLanguageLabel(keycloakLanguage)}
|
||
|
|
</a>
|
||
|
|
<ul>
|
||
|
|
{
|
||
|
|
locale.supported.map(
|
||
|
|
({ languageTag }) =>
|
||
|
|
<li className="kc-dropdown-item">
|
||
|
|
<a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
|
||
|
|
{getLanguageLabel(languageTag)}
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
{
|
||
|
|
(
|
||
|
|
auth !== undefined &&
|
||
|
|
auth.showUsername &&
|
||
|
|
!auth.showResetCredentials
|
||
|
|
) ?
|
||
|
|
(
|
||
|
|
displayRequiredFields ?
|
||
|
|
(
|
||
|
|
|
||
|
|
<div className="kcContentWrapperClass">
|
||
|
|
<div className="kcLabelWrapperClass subtitle">
|
||
|
|
<span className="subtitle">
|
||
|
|
<span className="required">*</span>
|
||
|
|
{t("requiredFields")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="col-md-10">
|
||
|
|
<h1 id="kc-page-title"><#nested "header"></h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
)
|
||
|
|
:
|
||
|
|
(
|
||
|
|
|
||
|
|
<h1 id="kc-page-title"><#nested "header"></h1>
|
||
|
|
|
||
|
|
)
|
||
|
|
)
|
||
|
|
:
|
||
|
|
(
|
||
|
|
displayRequiredFields ? (
|
||
|
|
<div className="kcContentWrapperClass">
|
||
|
|
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||
|
|
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-10">
|
||
|
|
<#nested "show-username">
|
||
|
|
<div class="${properties.kcFormGroupClass!}">
|
||
|
|
<div id="kc-username">
|
||
|
|
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||
|
|
<a id="reset-login" href="${url.loginRestartFlowUrl}">
|
||
|
|
<div class="kc-login-tooltip">
|
||
|
|
<i class="${properties.kcResetFlowIcon!}"></i>
|
||
|
|
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
|
||
|
|
<#nested "show-username">
|
||
|
|
<div class="${properties.kcFormGroupClass!}">
|
||
|
|
<div id="kc-username">
|
||
|
|
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||
|
|
<a id="reset-login" href="${url.loginRestartFlowUrl}">
|
||
|
|
<div class="kc-login-tooltip">
|
||
|
|
<i class="${properties.kcResetFlowIcon!}"></i>
|
||
|
|
<span class="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. -->
|
||
|
|
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
|
||
|
|
<div class="alert alert-${message.type}">
|
||
|
|
<#if message.<span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
|
||
|
|
<#if message.<span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
|
||
|
|
<#if message.<span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
|
||
|
|
<#if message.<span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
|
||
|
|
<span class="kc-feedback-text">${kcSanitize(message.summary) ? no_esc}</span>
|
||
|
|
</div >
|
||
|
|
</#if >
|
||
|
|
|
||
|
|
<#nested "form" >
|
||
|
|
|
||
|
|
<#if auth?has_content && auth.showTryAnotherWayLink() && showAnotherWayIfPresent >
|
||
|
|
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" <#if displayWide>class="${properties.kcContentWrapperClass!}"</#if> >
|
||
|
|
<div <#if displayWide>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if> >
|
||
|
|
<div class="${properties.kcFormGroupClass!}">
|
||
|
|
<input type="hidden" name="tryAnotherWay" value="on" />
|
||
|
|
<a href="#" id="try-another-way" onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
|
||
|
|
</div>
|
||
|
|
</div >
|
||
|
|
</form >
|
||
|
|
</#if >
|
||
|
|
|
||
|
|
<#if displayInfo>
|
||
|
|
<div id="kc-info" class="${properties.kcSignUpClass!}">
|
||
|
|
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
|
||
|
|
<#nested "info">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</#if>
|
||
|
|
</div >
|
||
|
|
</div >
|
||
|
|
|
||
|
|
</div >
|
||
|
|
</div >
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|