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:
parent
7ce96bb6d5
commit
d89679e62d
3 changed files with 29 additions and 6 deletions
|
@ -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>
|
|
@ -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.
|
||||
|
|
|
@ -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,
|
||||
}}
|
||||
|
|
Loading…
Reference in a new issue