Add wrapper and apply ps-background
This commit is contained in:
Nikhil Nawgiri
parent
060fdfeda6
commit
2c624712cc
|
|
@ -6,6 +6,7 @@ import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
|
||||||
import { type TemplateProps } from "keycloakify/login/TemplateProps";
|
import { type TemplateProps } from "keycloakify/login/TemplateProps";
|
||||||
import type { KcContext } from "./kcContext";
|
import type { KcContext } from "./kcContext";
|
||||||
import type { I18n } from "./i18n";
|
import type { I18n } from "./i18n";
|
||||||
|
import "../resources/styles/scss/background.scss";
|
||||||
|
|
||||||
export default function Template(props: TemplateProps<KcContext, I18n>) {
|
export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||||
const {
|
const {
|
||||||
|
|
@ -46,133 +47,135 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (<>
|
return (
|
||||||
<header className="ps-header">
|
<div className="ps-background">
|
||||||
{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
|
<header className="ps-header">
|
||||||
<div id="kc-locale">
|
lorem ipsum - 27.04.2024
|
||||||
<div id="kc-locale-wrapper" className="ps-locale-dropdown">
|
{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
|
||||||
<div className="ps-dropdown" id="kc-locale-dropdown">
|
<div id="kc-locale">
|
||||||
<a href="#" id="kc-current-locale-link">
|
<div id="kc-locale-wrapper" className="ps-locale-dropdown">
|
||||||
{labelBySupportedLanguageTag[currentLanguageTag]}
|
<div className="ps-dropdown" id="kc-locale-dropdown">
|
||||||
</a>
|
<a href="#" id="kc-current-locale-link">
|
||||||
<ul>
|
{labelBySupportedLanguageTag[currentLanguageTag]}
|
||||||
{locale.supported.map(({ languageTag }) => (
|
</a>
|
||||||
<li key={languageTag} className="ps-dropdown-item">
|
<ul>
|
||||||
<a href="#" onClick={() => changeLocale(languageTag)}>
|
{locale.supported.map(({ languageTag }) => (
|
||||||
{labelBySupportedLanguageTag[languageTag]}
|
<li key={languageTag} className="ps-dropdown-item">
|
||||||
</a>
|
<a href="#" onClick={() => changeLocale(languageTag)}>
|
||||||
</li>
|
{labelBySupportedLanguageTag[languageTag]}
|
||||||
))}
|
</a>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
|
</div>
|
||||||
displayRequiredFields ? (
|
)}
|
||||||
<div className="ps-required-fields">
|
{!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
|
||||||
<div className="ps-required-fields--field">
|
displayRequiredFields ? (
|
||||||
<span className="subtitle">
|
<div className="ps-required-fields">
|
||||||
<span className="required">*</span>
|
<div className="ps-required-fields--field">
|
||||||
{msg("requiredFields")}
|
<span className="subtitle">
|
||||||
</span>
|
<span className="required">*</span>
|
||||||
</div>
|
{msg("requiredFields")}
|
||||||
<div className="col-md-10">
|
</span>
|
||||||
<h1 id="kc-page-title">{headerNode}</h1>
|
</div>
|
||||||
</div>
|
<div className="col-md-10">
|
||||||
</div>
|
<h1 id="kc-page-title">{headerNode}</h1>
|
||||||
) : (
|
</div>
|
||||||
<h1 id="kc-page-title">{headerNode}</h1>
|
</div>
|
||||||
)
|
) : (
|
||||||
) : displayRequiredFields ? (
|
<h1 id="kc-page-title">{headerNode}</h1>
|
||||||
<div className="ps-content">
|
)
|
||||||
<div className="ps-required">
|
) : displayRequiredFields ? (
|
||||||
<span className="subtitle">
|
<div className="ps-content">
|
||||||
<span className="required">*</span> {msg("requiredFields")}
|
<div className="ps-required">
|
||||||
</span>
|
<span className="subtitle">
|
||||||
</div>
|
<span className="required">*</span> {msg("requiredFields")}
|
||||||
<div className="col-md-10">
|
</span>
|
||||||
{showUsernameNode}
|
</div>
|
||||||
<div className="ps-form-group">
|
<div className="col-md-10">
|
||||||
<div id="kc-username">
|
{showUsernameNode}
|
||||||
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
<div className="ps-form-group">
|
||||||
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
<div id="kc-username">
|
||||||
<div className="kc-login-tooltip">
|
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
||||||
<i className="ps-icon ps-icon_restart-flow"></i>
|
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
||||||
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
|
<div className="kc-login-tooltip">
|
||||||
</div>
|
<i className="ps-icon ps-icon_restart-flow"></i>
|
||||||
</a>
|
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
</div>
|
||||||
<>
|
</div>
|
||||||
{showUsernameNode}
|
) : (
|
||||||
<div className="ps-form-group">
|
<>
|
||||||
<div id="kc-username">
|
{showUsernameNode}
|
||||||
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
<div className="ps-form-group">
|
||||||
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
<div id="kc-username">
|
||||||
<div className="kc-login-tooltip">
|
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
||||||
<i className="ps-icon ps-icon_restart-flow"></i>
|
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
||||||
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
|
<div className="kc-login-tooltip">
|
||||||
</div>
|
<i className="ps-icon ps-icon_restart-flow"></i>
|
||||||
</a>
|
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</header>
|
</>
|
||||||
<div id="kc-content">
|
)}
|
||||||
<div id="kc-content-wrapper">
|
</header>
|
||||||
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
|
<div id="kc-content">
|
||||||
{displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
|
<div id="kc-content-wrapper">
|
||||||
<div className={clsx("alert", `alert-${message.type}`)}>
|
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
|
||||||
{message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>}
|
{displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
|
||||||
{message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
|
<div className={clsx("alert", `alert-${message.type}`)}>
|
||||||
{message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
|
{message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>}
|
||||||
{message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
|
{message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
|
||||||
<span
|
{message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
|
||||||
className="kc-feedback-text"
|
{message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
|
||||||
dangerouslySetInnerHTML={{
|
<span
|
||||||
"__html": message.summary
|
className="kc-feedback-text"
|
||||||
}}
|
dangerouslySetInnerHTML={{
|
||||||
/>
|
"__html": message.summary
|
||||||
</div>
|
}}
|
||||||
)}
|
/>
|
||||||
{children}
|
</div>
|
||||||
{auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
|
)}
|
||||||
<form
|
{children}
|
||||||
id="kc-select-try-another-way-form"
|
{auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
|
||||||
action={url.loginAction}
|
<form
|
||||||
method="post"
|
id="kc-select-try-another-way-form"
|
||||||
>
|
action={url.loginAction}
|
||||||
<div>
|
method="post"
|
||||||
<div className="ps-form-group">
|
>
|
||||||
<input type="hidden" name="tryAnotherWay" value="on" />
|
<div>
|
||||||
<a
|
<div className="ps-form-group">
|
||||||
href="#"
|
<input type="hidden" name="tryAnotherWay" value="on" />
|
||||||
id="try-another-way"
|
<a
|
||||||
onClick={() => {
|
href="#"
|
||||||
document.forms["kc-select-try-another-way-form" as never].submit();
|
id="try-another-way"
|
||||||
return false;
|
onClick={() => {
|
||||||
}}
|
document.forms["kc-select-try-another-way-form" as never].submit();
|
||||||
>
|
return false;
|
||||||
{msg("doTryAnotherWay")}
|
}}
|
||||||
</a>
|
>
|
||||||
</div>
|
{msg("doTryAnotherWay")}
|
||||||
</div>
|
</a>
|
||||||
</form>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{displayInfo && (
|
</form>
|
||||||
<div id="kc-info">
|
)}
|
||||||
<div id="kc-info-wrapper">
|
{displayInfo && (
|
||||||
{infoNode}
|
<div id="kc-info">
|
||||||
</div>
|
<div id="kc-info-wrapper">
|
||||||
</div>
|
{infoNode}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue