theme.properties customizations for account v3 (#20450)

* theme.properties customizations for account v3
Fixes #20200

* theme.properties customizations for account v3
Fixes #20200

* Get rid of conditional hook

* Fix linting.

* Update js/apps/account-ui/src/root/Root.tsx

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* Update js/apps/account-ui/src/environment.ts

Co-authored-by: Jon Koops <jonkoops@gmail.com>

---------

Co-authored-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
Stan Silvert 2023-06-05 07:50:15 -04:00 committed by GitHub
parent 7ce96bb6d5
commit d89679e62d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 6 deletions

View file

@ -1,5 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
@ -71,6 +73,14 @@
<token>href="./</token>
<value>href="${resourceUrl}/</value>
</replacement>
<replacement>
<token><![CDATA[<link rel="icon" type="image/svg+xml" href="${resourceUrl}/favicon.svg" />]]></token>
<value xml:space="preserve"><![CDATA[<link rel="icon" type="${properties.favIconType!"image/svg+xml"}" href="${resourceUrl}${properties.favIcon!"/favicon.svg"}" />]]></value>
</replacement>
<replacement>
<token><![CDATA[<title>Keycloak account console</title>]]></token>
<value xml:space="preserve"><![CDATA[<title>${properties.title!"Keycloak account console"}</title>]]></value>
</replacement>
<replacement>
<token><![CDATA[</body>]]></token>
<value xml:space="preserve">
@ -80,7 +90,9 @@
"authUrl": "${authUrl}",
"isRunningAsTheme": true,
"realm": "${realm.name}",
"resourceUrl": "${resourceUrl}"
"resourceUrl": "${resourceUrl}",
"logo": "${properties.logo!""}",
"logoUrl": "${properties.logoUrl!""}"
}
</script>
</body>
@ -97,7 +109,7 @@
</#list>
</#if>
</head>
]]>
]]>
</value>
</replacement>
</replacements>
@ -105,4 +117,4 @@
</plugin>
</plugins>
</build>
</project>
</project>

View file

@ -7,6 +7,10 @@ export type Environment = {
realm: string;
/** The URL to resources such as the files in the `public` directory. */
resourceUrl: string;
/** Indicates the src for the Brand image */
logo: string;
/** Indicates the url to be followed when Brand image is clicked */
logoUrl: string;
};
// The default environment, used during development.
@ -15,6 +19,8 @@ const defaultEnvironment: Environment = {
isRunningAsTheme: false,
realm: "master",
resourceUrl: "http://localhost:8080",
logo: "/logo.svg",
logoUrl: "/",
};
// Merge the default and injected environment variables together.

View file

@ -37,7 +37,12 @@ const ReferrerLink = () => {
export const Root = () => {
const { t } = useTranslation();
const indexHref = useHref("/");
const brandImage = environment.logo || "logo.svg";
const logoUrl = environment.logoUrl ? environment.logoUrl : "/";
const internalLogoHref = useHref(logoUrl);
// User can indicate that he wants an internal URL by starting it with "/"
const indexHref = logoUrl.startsWith("/") ? internalLogoHref : logoUrl;
const translations = useMemo<Translations>(
() => ({
@ -59,7 +64,7 @@ export const Root = () => {
showNavToggle
brand={{
href: indexHref,
src: joinPath(environment.resourceUrl, "logo.svg"),
src: joinPath(environment.resourceUrl, brandImage),
alt: t("logo"),
className: style.brand,
}}