TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-11 19:42:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix next hydration, theme, server package, turbo deps

Browse Source
This commit is contained in:
Max Peintner
2023-04-19 14:56:01 +02:00
parent a321781355
commit c03fbd41e2
9 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/login/app/(login)/login/page.tsx
View File

@@ -18,7 +18,7 @@ export default function Page() {
<form className="w-full" onSubmit={() => submit()}>
<div className="block">
<TextInput title="loginname" label="Loginname" />
<TextInput label="Loginname" />
</div>
<div>

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

@@ -1,13 +1,11 @@
"use client";
import "#/styles/globals.css";
// include styles from the ui package
import "@zitadel/react/styles.css";
import { AddressBar } from "#/ui/AddressBar";
import { GlobalNav } from "#/ui/GlobalNav";
import { Lato } from "next/font/google";
import { ThemeProvider } from "next-themes";
import Byline from "#/ui/Byline";
import { LayoutProviders } from "#/ui/LayoutProviders";
const lato = Lato({
weight: "400",
@@ -20,41 +18,37 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en" className={`${lato.className}`}>
<html lang="en" className={`${lato.className}`} suppressHydrationWarning>
<head />
<ThemeProvider
attribute="class"
defaultTheme="system"
storageKey="cp-theme"
// value={{ dark: "dark ui-dark" }}
// [color-scheme:dark]
>
<body className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
<GlobalNav />
<body>
<LayoutProviders>
<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')]">
<GlobalNav />
<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="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">
<AddressBar />
<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="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">
<AddressBar />
</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-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
{children}
<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">
{children}
</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-background-light-500 dark:bg-background-dark-600">
<Byline />
<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">
<Byline />
</div>
</div>
</div>
</div>
</div>
</body>
</ThemeProvider>
</LayoutProviders>
</body>
</html>
);
}

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

@@ -1,4 +1,4 @@
import { ZitadelOptions, getApps, initializeApp } from "@zitadel/core";
import { ZitadelOptions, getApps, initializeApp } from "@zitadel/server";
export const zitadelConfig: ZitadelOptions = {
apiUrl: process.env.ZITADEL_API_URL ?? "",
@@ -11,5 +11,5 @@ if (!getApps().length) {
initializeApp(zitadelConfig);
}
const app = getApp();
const auth = getAuth();
// const app = getApp();
// const auth = getAuth();

20
apps/login/ui/LayoutProviders.tsx Normal file
View File

@@ -0,0 +1,20 @@
"use client";
import { ThemeProvider } from "next-themes";
type Props = {
children: React.ReactNode;
};
export function LayoutProviders({ children }: Props) {
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
storageKey="cp-theme"
value={{ dark: "dark" }}
>
{children}
</ThemeProvider>
);
}

14
apps/login/ui/Theme.tsx
View File

@@ -1,12 +1,25 @@
"use client";
import { Switch } from "@headlessui/react";
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
export default function Theme() {
const { resolvedTheme, setTheme } = useTheme();
const [mounted, setMounted] = useState<boolean>(false);
const isDark = resolvedTheme === "dark";
// useEffect only runs on the client, so now we can safely show the UI
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
return (
<Switch
checked={isDark}
@@ -18,7 +31,6 @@ export default function Theme() {
}
relative inline-flex h-4 w-9 items-center rounded-full`}
>
<span className="sr-only">Dark mode enabled</span>
<div
aria-hidden="true"
className={`${

1
packages/zitadel-server/package.json
View File

@@ -31,6 +31,7 @@
"jose": "^4.13.1",
"long": "^5.2.1",
"nice-grpc": "2.0.1",
"nice-grpc-common": "^2.0.2",
"protobufjs": "^7.2.3"
}
}

3
packages/zitadel-server/src/app.ts
View File

@@ -1,7 +1,8 @@
let apps: ZitadelApp[] = [];
export interface ZitadelClientProps {
clientId: string;
appId: string;
projectId: string;
apiUrl: string; // process.env.ZITADEL_API_URL
token: string;
adminToken?: string;

2
pnpm-lock.yaml generated
View File

@@ -178,6 +178,7 @@ importers:
jose: ^4.13.1
long: ^5.2.1
nice-grpc: 2.0.1
nice-grpc-common: ^2.0.2
protobufjs: ^7.2.3
ts-proto: ^1.139.0
tsup: ^5.10.1
@@ -186,6 +187,7 @@ importers:
jose: 4.13.1
long: 5.2.1
nice-grpc: 2.0.1
nice-grpc-common: 2.0.2
protobufjs: 7.2.3
devDependencies:
'@zitadel/tsconfig': link:../zitadel-tsconfig

5
turbo.json
View File

@@ -1,6 +1,5 @@
{
"$schema": "https://turbo.build/schema.json",
"globalDependencies": ["**/.env.*local"],
"pipeline": {
"build": {
"outputs": ["dist/**", ".next/**", "!.next/cache/**"],
@@ -21,5 +20,7 @@
"generate": {
"cache": true
}
}
},
"globalDependencies": ["**/.env.*local"],
"globalEnv": ["ZITADEL_API_URL", "ZITADEL_PROJECT_ID", "ZITADEL_APP_ID"]
}