pub-solar/keycloak-theme-react
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Compare commits

base: pub-solar:060fdfeda60eb3a9700c1a5292e671cacd4361fa
Branches Tags
pub-solar:main
pub-solar:update/account-styles
...
compare: pub-solar:4f1b8d053ac5d57efc8dd6bcbdea7a0965444a27
Branches Tags
pub-solar:update/account-styles
pub-solar:main

2 commits
060fdfeda6 ... 4f1b8d053a

Author SHA1 Message Date
Nikhil Nawgiri 4f1b8d053a Remove unsupported css property 'speak' 2024-04-27 18:37:52 +02:00
Nikhil Nawgiri 2c624712cc Add wrapper and apply ps-background 2024-04-27 18:37:39 +02:00
2 changed files with 131 additions and 129 deletions
Show stats Expand all files Collapse all files

259
src/keycloak-theme/login/Template.tsx
View file

@ -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>
); );
} }

1
src/keycloak-theme/resources/styles/scss/background.scss
View file

@ -3,7 +3,6 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
speak: none;
&--logo { &--logo {
width: 100px; width: 100px;