TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 07:24:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

apply label policy

Browse Source
This commit is contained in:
Max Peintner
2023-04-21 16:13:52 +02:00
parent 12b9042392
commit f2b3d5ef7e
6 changed files with 55 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/login/app/layout.tsx
View File

@@ -8,6 +8,7 @@ import Byline from "#/ui/Byline";
import { LayoutProviders } from "#/ui/LayoutProviders"; import { LayoutProviders } from "#/ui/LayoutProviders";
import { Analytics } from "@vercel/analytics/react"; import { Analytics } from "@vercel/analytics/react";
import { ZitadelUIProvider } from "#/../../packages/zitadel-react/dist"; import { ZitadelUIProvider } from "#/../../packages/zitadel-react/dist";
import ThemeWrapper from "#/ui/ThemeWrapper";
const lato = Lato({ const lato = Lato({
weight: "400", weight: "400",
@@ -23,33 +24,36 @@ export default function RootLayout({
<html lang="en" className={`${lato.className}`} suppressHydrationWarning> <html lang="en" className={`${lato.className}`} suppressHydrationWarning>
<head /> <head />
<body> <body>
<LayoutProviders> {/* @ts-expect-error Server Component */}
<div className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]"> <ThemeWrapper>
<GlobalNav /> <LayoutProviders>
<div className="overflow-y-scroll bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
<GlobalNav />
<div className="lg:pl-72"> <div className="lg:pl-72">
<div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8"> <div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20"> <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600"> <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<AddressBar /> <AddressBar />
</div>
</div> </div>
</div>
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20"> <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8"> <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
{children} {children}
</div>
</div> </div>
</div>
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20"> <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600"> <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<Byline /> <Byline />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </LayoutProviders>
</LayoutProviders> </ThemeWrapper>
<Analytics /> <Analytics />
</body> </body>
</html> </html>

1
apps/login/lib/zitadel.ts
View File

@@ -28,6 +28,7 @@ export function getBranding(
server: ZitadelServer server: ZitadelServer
): Promise<LabelPolicy | undefined> { ): Promise<LabelPolicy | undefined> {
const mgmt = getManagement(server); const mgmt = getManagement(server);
console.log(process.env.ZITADEL_ORG_ID);
return mgmt return mgmt
.getLabelPolicy( .getLabelPolicy(
{}, {},

25
apps/login/ui/LayoutProviders.tsx
View File

@@ -1,19 +1,24 @@
import ThemeWrapper from "./ThemeWrapper"; "use client";
import { ThemeProvider, useTheme } from "next-themes";
type Props = { type Props = {
children: React.ReactNode; children: React.ReactNode;
}; };
export function LayoutProviders({ children }: Props) { export function LayoutProviders({ children }: Props) {
const { resolvedTheme } = useTheme();
const isDark = resolvedTheme && resolvedTheme === "dark";
console.log(isDark);
return ( return (
// <ThemeProvider <ThemeProvider
// attribute="class" attribute="class"
// defaultTheme="system" defaultTheme="system"
// storageKey="cp-theme" storageKey="cp-theme"
// value={{ dark: "dark" }} value={{ dark: "dark" }}
// > >
/* @ts-expect-error Server Component */ <div className={`${isDark ? "ui-dark" : "ui-light"} `}>{children}</div>
<ThemeWrapper>{children}</ThemeWrapper> </ThemeProvider>
// </ThemeProvider>
); );
} }

23
apps/login/ui/ThemeWrapper.tsx
View File

@@ -1,32 +1,35 @@
import { getBranding } from "#/lib/zitadel"; import { getBranding } from "#/lib/zitadel";
import { server } from "../lib/zitadel"; import { server } from "../lib/zitadel";
import { use } from "react";
const ThemeWrapper = async ({ children }: any) => { const ThemeWrapper = async ({ children }: any) => {
console.log("hehe"); console.log("hehe");
// const { resolvedTheme } = useTheme();
const isDark = true; //resolvedTheme && resolvedTheme === "dark"; const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";
try { try {
const policy = await getBranding(server); const policy = await getBranding(server);
const backgroundStyle = { const darkStyles = {
backgroundColor: `${policy?.backgroundColorDark}.`, backgroundColor: `${policy?.backgroundColorDark}`,
color: `${policy?.fontColorDark}`,
};
const lightStyles = {
backgroundColor: `${policy?.backgroundColor}`,
color: `${policy?.fontColor}`,
}; };
console.log(policy); console.log(policy);
return ( return (
<div className={`${isDark ? "ui-dark" : "ui-light"} `}> <div className={defaultClasses} style={darkStyles}>
<div style={backgroundStyle}>{children}</div> {children}
</div> </div>
); );
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return ( return <div className={defaultClasses}>{children}</div>;
<div className={`${isDark ? "ui-dark" : "ui-light"} `}>{children}</div>
);
} }
}; };

10
apps/login/ui/ZitadelLogo.tsx
View File

@@ -17,22 +17,16 @@ export function ZitadelLogo({ height = 40, width = 147.5 }: Props) {
width={width} width={width}
src="/zitadel-logo-light.svg" src="/zitadel-logo-light.svg"
alt="zitadel logo" alt="zitadel logo"
style={{ priority={true}
maxWidth: "100%",
height: "auto",
}}
/> />
</div> </div>
<div className="flex dark:hidden"> <div className="flex dark:hidden">
<Image <Image
height={height} height={height}
width={width} width={width}
priority={true}
src="/zitadel-logo-dark.svg" src="/zitadel-logo-dark.svg"
alt="zitadel logo" alt="zitadel logo"
style={{
maxWidth: "100%",
height: "auto",
}}
/> />
</div> </div>
</> </>

3
turbo.json
View File

@@ -26,6 +26,7 @@
"ZITADEL_API_URL", "ZITADEL_API_URL",
"ZITADEL_PROJECT_ID", "ZITADEL_PROJECT_ID",
"ZITADEL_APP_ID", "ZITADEL_APP_ID",
"ZITADEL_SERVICE_USER_TOKEN" "ZITADEL_SERVICE_USER_TOKEN",
"ZITADEL_ORG_ID"
] ]
} }