From 2c624712cc4869958ced1aad86e305fd327dec1c Mon Sep 17 00:00:00 2001
From: Nikhil Nawgiri <the@realest.ninja>
Date: Sat, 27 Apr 2024 18:37:39 +0200
Subject: [PATCH] Add wrapper and apply ps-background

---
 src/keycloak-theme/login/Template.tsx | 259 +++++++++++++-------------
 1 file changed, 131 insertions(+), 128 deletions(-)

diff --git a/src/keycloak-theme/login/Template.tsx b/src/keycloak-theme/login/Template.tsx
index 034cb74..a2beb18 100644
--- a/src/keycloak-theme/login/Template.tsx
+++ b/src/keycloak-theme/login/Template.tsx
@@ -6,6 +6,7 @@ import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
 import { type TemplateProps } from "keycloakify/login/TemplateProps";
 import type { KcContext } from "./kcContext";
 import type { I18n } from "./i18n";
+import "../resources/styles/scss/background.scss";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
 	const {
@@ -46,133 +47,135 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 		return null;
 	}
 
-	return (<>
-		<header className="ps-header">
-			{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
-				<div id="kc-locale">
-					<div id="kc-locale-wrapper" className="ps-locale-dropdown">
-						<div className="ps-dropdown" id="kc-locale-dropdown">
-							<a href="#" id="kc-current-locale-link">
-								{labelBySupportedLanguageTag[currentLanguageTag]}
-							</a>
-							<ul>
-								{locale.supported.map(({ languageTag }) => (
-									<li key={languageTag} className="ps-dropdown-item">
-										<a href="#" onClick={() => changeLocale(languageTag)}>
-											{labelBySupportedLanguageTag[languageTag]}
-										</a>
-									</li>
-								))}
-							</ul>
-						</div>
-					</div>
-				</div>
-			)}
-			{!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
-				displayRequiredFields ? (
-					<div className="ps-required-fields">
-						<div className="ps-required-fields--field">
-							<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="ps-content">
-					<div className="ps-required">
-						<span className="subtitle">
-							<span className="required">*</span> {msg("requiredFields")}
-						</span>
-					</div>
-					<div className="col-md-10">
-						{showUsernameNode}
-						<div className="ps-form-group">
-							<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="ps-icon ps-icon_restart-flow"></i>
-										<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
-									</div>
-								</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			) : (
-				<>
-					{showUsernameNode}
-					<div className="ps-form-group">
-						<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="ps-icon ps-icon_restart-flow"></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={getClassName("kcFeedbackSuccessIcon")}></span>}
-						{message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
-						{message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
-						{message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
-						<span
-							className="kc-feedback-text"
-							dangerouslySetInnerHTML={{
-								"__html": message.summary
-							}}
-						/>
-					</div>
-				)}
-				{children}
-				{auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
-					<form
-						id="kc-select-try-another-way-form"
-						action={url.loginAction}
-						method="post"
-					>
-						<div>
-							<div className="ps-form-group">
-								<input type="hidden" name="tryAnotherWay" value="on" />
-								<a
-									href="#"
-									id="try-another-way"
-									onClick={() => {
-										document.forms["kc-select-try-another-way-form" as never].submit();
-										return false;
-									}}
-								>
-									{msg("doTryAnotherWay")}
-								</a>
-							</div>
-						</div>
-					</form>
-				)}
-				{displayInfo && (
-					<div id="kc-info">
-						<div id="kc-info-wrapper">
-							{infoNode}
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	</>
+  return (
+    <div className="ps-background">
+      <header className="ps-header">
+        lorem ipsum - 27.04.2024
+        {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
+          <div id="kc-locale">
+            <div id="kc-locale-wrapper" className="ps-locale-dropdown">
+              <div className="ps-dropdown" id="kc-locale-dropdown">
+                <a href="#" id="kc-current-locale-link">
+                  {labelBySupportedLanguageTag[currentLanguageTag]}
+                </a>
+                <ul>
+                  {locale.supported.map(({ languageTag }) => (
+                    <li key={languageTag} className="ps-dropdown-item">
+                      <a href="#" onClick={() => changeLocale(languageTag)}>
+                        {labelBySupportedLanguageTag[languageTag]}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        )}
+        {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
+          displayRequiredFields ? (
+            <div className="ps-required-fields">
+              <div className="ps-required-fields--field">
+                <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="ps-content">
+            <div className="ps-required">
+              <span className="subtitle">
+                <span className="required">*</span> {msg("requiredFields")}
+              </span>
+            </div>
+            <div className="col-md-10">
+              {showUsernameNode}
+              <div className="ps-form-group">
+                <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="ps-icon ps-icon_restart-flow"></i>
+                      <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <>
+            {showUsernameNode}
+            <div className="ps-form-group">
+              <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="ps-icon ps-icon_restart-flow"></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={getClassName("kcFeedbackSuccessIcon")}></span>}
+              {message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
+              {message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
+              {message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
+              <span
+                className="kc-feedback-text"
+                dangerouslySetInnerHTML={{
+                  "__html": message.summary
+                }}
+              />
+            </div>
+          )}
+          {children}
+          {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
+            <form
+              id="kc-select-try-another-way-form"
+              action={url.loginAction}
+              method="post"
+            >
+              <div>
+                <div className="ps-form-group">
+                  <input type="hidden" name="tryAnotherWay" value="on" />
+                  <a
+                    href="#"
+                    id="try-another-way"
+                    onClick={() => {
+                      document.forms["kc-select-try-another-way-form" as never].submit();
+                      return false;
+                    }}
+                  >
+                    {msg("doTryAnotherWay")}
+                  </a>
+                </div>
+              </div>
+            </form>
+          )}
+          {displayInfo && (
+            <div id="kc-info">
+              <div id="kc-info-wrapper">
+                {infoNode}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
 	);
 }