agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Joseph Garrone
2021-03-01 20:45:37 +01:00
parent 57a0d9f10f
commit f599df2bb7
11 changed files with 617 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/lib/Template.tsx.disabled vendored Normal file
View File

@ -0,0 +1,211 @@
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 >
);
}