libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

Allow changing admin console logo and favicon from theme.properties (#20201)

Browse source 
* Allow changing admin console logo and favicon from theme.properties
Fixes #19968

* Make isRunningAsTheme the last env prop.
This commit is contained in:
Stan Silvert 2023-05-17 07:53:38 -04:00 committed by GitHub
parent e5b3c92b42
commit 74dd370906
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
js/apps/admin-ui/pom.xml
View file

@ -115,13 +115,13 @@
<token>href="./</token> <token>href="./</token>
<value>href="${resourceUrl}/</value> <value>href="${resourceUrl}/</value>
</replacement> </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> <replacement>
<token><![CDATA[<title>Keycloak Administration UI</title>]]></token> <token><![CDATA[<title>Keycloak Administration UI</title>]]></token>
<value xml:space="preserve"> <value xml:space="preserve"><![CDATA[<title>${properties.title!"Keycloak Administration UI"}</title>]]></value>
<![CDATA[
<title>${properties.title!"Keycloak Administration UI"}</title>
]]>
</value>
</replacement> </replacement>
<replacement> <replacement>
<token><![CDATA[</body>]]></token> <token><![CDATA[</body>]]></token>
@ -136,6 +136,8 @@
"resourceUrl": "${resourceUrl}", "resourceUrl": "${resourceUrl}",
"masterRealm": "${masterRealm}", "masterRealm": "${masterRealm}",
"resourceVersion": "${resourceVersion}", "resourceVersion": "${resourceVersion}",
"logo": "${properties.logo!""}",
"logoUrl": "${properties.logoUrl!""}",
"isRunningAsTheme": true "isRunningAsTheme": true
} }
</script> </script>

9
js/apps/admin-ui/src/PageHeader.tsx
View file

@ -172,13 +172,18 @@ export const Header = () => {
); );
}; };
const logo = environment.logo ? environment.logo : "/logo.svg";
const logoUrl = environment.logoUrl
? environment.logoUrl
: toDashboard({ realm });
return ( return (
<PageHeader <PageHeader
showNavToggle showNavToggle
logo={ logo={
<Link to={toDashboard({ realm })}> <Link to={logoUrl}>
<Brand <Brand
src={environment.resourceUrl + "/logo.svg"} src={environment.resourceUrl + logo}
id="masthead-logo" id="masthead-logo"
alt="Logo" alt="Logo"
className="keycloak__pageheader_brand" className="keycloak__pageheader_brand"

4
js/apps/admin-ui/src/dashboard/Dashboard.tsx
View file

@ -45,11 +45,13 @@ import "./dashboard.css";
const EmptyDashboard = () => { const EmptyDashboard = () => {
const { t } = useTranslation("dashboard"); const { t } = useTranslation("dashboard");
const { realm } = useRealm(); const { realm } = useRealm();
const brandImage = environment.logo ? environment.logo : "/icon.svg";
return ( return (
<PageSection variant="light"> <PageSection variant="light">
<EmptyState variant="large"> <EmptyState variant="large">
<Brand <Brand
src={environment.resourceUrl + "/icon.svg"} src={environment.resourceUrl + brandImage}
alt="Keycloak icon" alt="Keycloak icon"
className="keycloak__dashboard_icon" className="keycloak__dashboard_icon"
/> />

6
js/apps/admin-ui/src/environment.ts
View file

@ -15,6 +15,10 @@ export type Environment = {
resourceVersion: string; resourceVersion: string;
/** Indicates if the application is running as a Keycloak theme. */ /** Indicates if the application is running as a Keycloak theme. */
isRunningAsTheme: boolean; isRunningAsTheme: boolean;
/** Indicates the src for the Brand image */
logo: string;
/** Indicates the url to be followed when Brand image is clicked */
logoUrl: string;
}; };
// During development the realm can be passed as a query parameter when redirecting back from Keycloak. // During development the realm can be passed as a query parameter when redirecting back from Keycloak.
@ -30,6 +34,8 @@ const defaultEnvironment: Environment = {
masterRealm: "master", masterRealm: "master",
resourceVersion: "unknown", resourceVersion: "unknown",
isRunningAsTheme: false, isRunningAsTheme: false,
logo: "/logo.svg",
logoUrl: "",
}; };
// Merge the default and injected environment variables together. // Merge the default and injected environment variables together.