layout, components

apps/login/app/(login)/head.tsx

@@ -1,14 +0,0 @@
-import { DefaultTags } from '#/ui/DefaultTags';
-
-export default function Head() {
-  return (
-    <>
-      <DefaultTags />
-      <title>ZITADEL Login Playground</title>
-      <meta
-        name="description"
-        content="This is a ZITADEL Login Playground to get an understanding how the login API works."
-      />
-    </>
-  );
-}

apps/login/app/(login)/login/page.tsx

@@ -21,7 +21,9 @@ export default function Page() {
           <TextInput title="loginname" label="Loginname" />
         </div>
 
-        <div>{/* <IdentityProviders /> */}</div>
+        <div>
+          <IdentityProviders />
+        </div>
         <div className="mt-8 flex w-full flex-row items-center justify-between">
           <Button type="button" variant={ButtonVariants.Secondary}>
             back

apps/login/app/(login)/mfa/create/page.tsx

@@ -1,7 +1,8 @@
-'use client';
+"use client";
-import { Button, ButtonVariants } from '#/ui/Button';
+import { Button, ButtonVariants } from "#/ui/Button";
-import { TextInput } from '#/ui/Input';
+import { TextInput } from "#/ui/Input";
-import { useRouter } from 'next/navigation';
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/(login)/password/change/page.tsx

@@ -1,7 +1,8 @@
-'use client';
+"use client";
-import { Button, ButtonVariants } from '#/ui/Button';
+import { Button, ButtonVariants } from "#/ui/Button";
-import { TextInput } from '#/ui/Input';
+import { TextInput } from "#/ui/Input";
-import { useRouter } from 'next/navigation';
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/(login)/password/page.tsx

@@ -1,7 +1,8 @@
-'use client';
+"use client";
-import { Button, ButtonVariants } from '#/ui/Button';
+import { Button, ButtonVariants } from "#/ui/Button";
-import { TextInput } from '#/ui/Input';
+import { TextInput } from "#/ui/Input";
-import { useRouter } from 'next/navigation';
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/(login)/passwordless/create/page.tsx

@@ -1,7 +1,8 @@
-'use client';
+"use client";
-import { Button, ButtonVariants } from '#/ui/Button';
+import { Button, ButtonVariants } from "#/ui/Button";
-import { TextInput } from '#/ui/Input';
+import { TextInput } from "#/ui/Input";
-import { useRouter } from 'next/navigation';
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
+      <UserAvatar name="max@zitadel.cloud"></UserAvatar>
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/(login)/passwordless/page.tsx

@@ -1,7 +1,8 @@
-'use client';
+"use client";
-import { Button, ButtonVariants } from '#/ui/Button';
+import { Button, ButtonVariants } from "#/ui/Button";
-import { TextInput } from '#/ui/Input';
+import { TextInput } from "#/ui/Input";
-import { useRouter } from 'next/navigation';
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/head.tsx

@@ -1,14 +0,0 @@
-import { DefaultTags } from '#/ui/DefaultTags';
-
-export default function Head() {
-  return (
-    <>
-      <DefaultTags />
-      <title>ZITADEL Login Playground</title>
-      <meta
-        name="description"
-        content="This is a ZITADEL Login Playground to get an understanding how the login API works."
-      />
-    </>
-  );
-}

apps/login/app/layout.tsx

@@ -1,68 +1,73 @@
+"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 { ZitadelLogo } from "#/ui/ZitadelLogo";
+import { Lato } from "next/font/google";
-import { Lato } from "@next/font/google";
+import { ThemeProvider } from "next-themes";
+import Byline from "#/ui/Byline";
 
 const lato = Lato({
   weight: "400",
   subsets: ["latin"],
 });
 
-const darkModeClasses = (d: boolean) =>
-  d ? "dark [color-scheme:dark] ui-dark" : "";
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${darkModeClasses(false)} ${lato.className}`}>
+    <html lang="en" className={`${lato.className}`}>
       <head />
-      <body className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid.svg')]">
+      <ThemeProvider
-        <GlobalNav />
+        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 />
 
-        <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:dark-bg-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 className="rounded-lg bg-vc-border-gradient dark:dark-bg-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 className="rounded-lg bg-vc-border-gradient dark:dark-bg-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>
+        </body>
-      </body>
+      </ThemeProvider>
     </html>
   );
 }
 
-function Byline() {
+// export const metadata = () => {
-  return (
+//   return (
-    <div className="flex items-center p-3.5 lg:px-5 lg:py-3">
+//     <>
-      <div className="flex items-center space-x-1.5">
+//       <DefaultTags />
-        <div className="text-sm text-gray-600">By</div>
+//       <title>ZITADEL Login Playground</title>
-        {/* <a href="https://zitadel.com" title="ZITADEL">
+//       <meta
-          <div className=" text-gray-300 hover:text-gray-50">
+//         name="description"
-            <ZitadelLogo />
+//         content="This is a ZITADEL Login Playground to get an understanding how the login API works."
-          </div>
+//       />
-        </a> */}
+//     </>
-        <div className="text-sm font-semibold">ZITADEL</div>
+//   );
-      </div>
+// };
-    </div>
-  );
-}

apps/login/app/page.tsx

@@ -4,7 +4,9 @@ import Link from "next/link";
 export default function Page() {
   return (
     <div className="space-y-8">
-      <h1 className="text-xl font-medium text-gray-300">Pages</h1>
+      <h1 className="text-xl font-medium text-gray-800 dark:text-gray-300">
+        Pages
+      </h1>
 
       <div className="space-y-10 text-white">
         {demos.map((section) => {
@@ -19,14 +21,14 @@ export default function Page() {
                     <Link
                       href={`/${item.slug}`}
                       key={item.name}
-                      className="bg-background-light-400 group block space-y-1.5 rounded-lg px-5 py-3 hover:bg-background-dark-300 dark:bg-background-dark-400"
+                      className="bg-background-light-400 dark:bg-background-dark-400 group block space-y-1.5 rounded-lg px-5 py-3 hover:bg-background-light-500 hover:dark:bg-background-dark-300 hover:shadow-lg border border-gray-300 dark:border-gray-600 transition-all "
                     >
-                      <div className="font-medium text-gray-200 group-hover:text-gray-50">
+                      <div className="font-medium text-gray-600 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-300">
                         {item.name}
                       </div>
 
                       {item.description ? (
-                        <div className="line-clamp-3 text-sm text-gray-400 group-hover:text-gray-300">
+                        <div className="line-clamp-3 text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300">
                           {item.description}
                         </div>
                       ) : null}

apps/login/lib/demos.ts

@@ -6,47 +6,47 @@ export type Item = {
 
 export const demos: { name: string; items: Item[] }[] = [
   {
-    name: 'Pages',
+    name: "Routes",
     items: [
       {
-        name: 'Login',
+        name: "Login",
-        slug: 'login',
+        slug: "login",
-        description: 'The entrypoint of the application',
+        description: "The entrypoint of the application",
       },
       {
-        name: 'Password',
+        name: "Password",
-        slug: 'password',
+        slug: "password",
-        description: 'The page to request a users password',
+        description: "The page to request a users password",
       },
       {
-        name: 'Set Password',
+        name: "Set Password",
-        slug: 'password/set',
+        slug: "password/set",
-        description: 'The page to set a users password',
+        description: "The page to set a users password",
       },
       {
-        name: 'MFA',
+        name: "MFA",
-        slug: 'mfa',
+        slug: "mfa",
-        description: 'The page to request a users mfa method',
+        description: "The page to request a users mfa method",
       },
       {
-        name: 'MFA',
+        name: "MFA Set",
-        slug: 'mfa/set',
+        slug: "mfa/set",
-        description: 'The page to set a users mfa method',
+        description: "The page to set a users mfa method",
       },
       {
-        name: 'MFA Create',
+        name: "MFA Create",
-        slug: 'mfa/create',
+        slug: "mfa/create",
-        description: 'The page to create a users mfa method',
+        description: "The page to create a users mfa method",
       },
       {
-        name: 'Passwordless',
+        name: "Passwordless",
-        slug: 'passwordless',
+        slug: "passwordless",
-        description: 'The page to login a user with his passwordless device',
+        description: "The page to login a user with his passwordless device",
       },
       {
-        name: 'Passwordless Create',
+        name: "Passwordless Create",
-        slug: 'passwordless/create',
+        slug: "passwordless/create",
-        description: 'The page to add a users passwordless device',
+        description: "The page to add a users passwordless device",
       },
     ],
   },

apps/login/package.json

@@ -17,15 +17,16 @@
     "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@zitadel/server": "workspace:*",
+    "@headlessui/react": "^1.7.14",
-    "@zitadel/react": "workspace:*",
-    "@zitadel/next": "workspace:*",
     "@heroicons/react": "2.0.13",
-    "@next/font": "13.0.5",
     "@tailwindcss/forms": "0.5.3",
+    "@zitadel/next": "workspace:*",
+    "@zitadel/react": "workspace:*",
+    "@zitadel/server": "workspace:*",
     "clsx": "1.2.1",
     "date-fns": "2.29.3",
-    "next": "13.2.3",
+    "next": "13.3.1-canary.13",
+    "next-themes": "^0.2.1",
     "nice-grpc": "2.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -34,8 +35,6 @@
     "tinycolor2": "1.4.2"
   },
   "devDependencies": {
-    "@zitadel/tsconfig": "workspace:*",
-    "eslint-config-zitadel": "workspace:*",
     "@bufbuild/buf": "^1.14.0",
     "@types/ms": "0.7.31",
     "@types/node": "18.11.9",
@@ -43,8 +42,10 @@
     "@types/react-dom": "18.0.9",
     "@types/tinycolor2": "1.4.3",
     "@vercel/git-hooks": "1.0.0",
+    "@zitadel/tsconfig": "workspace:*",
     "autoprefixer": "10.4.13",
     "del-cli": "5.0.0",
+    "eslint-config-zitadel": "workspace:*",
     "grpc-tools": "1.11.3",
     "lint-staged": "13.0.3",
     "make-dir-cli": "3.0.0",

apps/login/public/grid-light.svg

@@ -0,0 +1,5 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <path d="M96,95h4v1H96v4H95V96H86v4H85V96H76v4H75V96H66v4H65V96H56v4H55V96H46v4H45V96H36v4H35V96H26v4H25V96H16v4H15V96H0V95H15V86H0V85H15V76H0V75H15V66H0V65H15V56H0V55H15V46H0V45H15V36H0V35H15V26H0V25H15V16H0V15H15V0h1V15h9V0h1V15h9V0h1V15h9V0h1V15h9V0h1V15h9V0h1V15h9V0h1V15h9V0h1V15h9V0h1V15h4v1H96v9h4v1H96v9h4v1H96v9h4v1H96v9h4v1H96v9h4v1H96v9h4v1H96v9h4v1H96Zm-1,0V86H86v9ZM85,95V86H76v9ZM75,95V86H66v9ZM65,95V86H56v9ZM55,95V86H46v9ZM45,95V86H36v9ZM35,95V86H26v9ZM25,95V86H16v9ZM16,85h9V76H16Zm10,0h9V76H26Zm10,0h9V76H36Zm10,0h9V76H46Zm10,0h9V76H56Zm10,0h9V76H66Zm10,0h9V76H76Zm10,0h9V76H86Zm9-10V66H86v9ZM85,75V66H76v9ZM75,75V66H66v9ZM65,75V66H56v9ZM55,75V66H46v9ZM45,75V66H36v9ZM35,75V66H26v9ZM25,75V66H16v9ZM16,65h9V56H16Zm10,0h9V56H26Zm10,0h9V56H36Zm10,0h9V56H46Zm10,0h9V56H56Zm10,0h9V56H66Zm10,0h9V56H76Zm10,0h9V56H86Zm9-10V46H86v9ZM85,55V46H76v9ZM75,55V46H66v9ZM65,55V46H56v9ZM55,55V46H46v9ZM45,55V46H36v9ZM35,55V46H26v9ZM25,55V46H16v9ZM16,45h9V36H16Zm10,0h9V36H26Zm10,0h9V36H36Zm10,0h9V36H46Zm10,0h9V36H56Zm10,0h9V36H66Zm10,0h9V36H76Zm10,0h9V36H86Zm9-10V26H86v9ZM85,35V26H76v9ZM75,35V26H66v9ZM65,35V26H56v9ZM55,35V26H46v9ZM45,35V26H36v9ZM35,35V26H26v9ZM25,35V26H16v9ZM16,25h9V16H16Zm10,0h9V16H26Zm10,0h9V16H36Zm10,0h9V16H46Zm10,0h9V16H56Zm10,0h9V16H66Zm10,0h9V16H76Zm10,0h9V16H86Z" fill="rgba(0,0,0,0.2)" fill-rule="evenodd" opacity="0.2"/>
+  <path d="M6,5V0H5V5H0V6H5v94H6V6h94V5Z" fill="rgba(0,0,0,0.075)" fill-rule="evenodd"/>
+</svg>

apps/login/styles/globals.css

@@ -2,11 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
-h1,
+@layer base {
-.ztdl-h1 {
+  h1,
-  @apply text-xl;
+  .ztdl-h1 {
-}
+    @apply text-2xl;
+  }
 
-.ztdl-p {
+  .ztdl-p {
-  @apply text-sm;
+    @apply text-sm;
+  }
 }

apps/login/tailwind.config.js

@@ -82,7 +82,7 @@ module.exports = {
       },
       backgroundImage: ({ theme }) => ({
         "dark-vc-border-gradient": `radial-gradient(at left top, ${theme(
-          "colors.gray.500"
+          "colors.gray.800"
         )}, 50px, ${theme("colors.gray.800")} 50%)`,
         "vc-border-gradient": `radial-gradient(at left top, ${theme(
           "colors.gray.200"

apps/login/ui/AddressBar.tsx

@@ -32,6 +32,7 @@ export function AddressBar() {
             {pathname
               .split("/")
               .slice(1)
+              .filter((s) => !!s)
               .map((segment) => {
                 return (
                   <React.Fragment key={segment}>

apps/login/ui/Byline.tsx

@@ -0,0 +1,18 @@
+import Theme from "./Theme";
+
+export default function Byline() {
+  return (
+    <div className="flex items-center justify-between w-full p-3.5 lg:px-5 lg:py-3">
+      <div className="flex items-center space-x-1.5">
+        <div className="text-sm text-gray-600">By</div>
+        {/* <a href="https://zitadel.com" title="ZITADEL">
+            <div className=" text-gray-300 hover:text-gray-50">
+              <ZitadelLogo />
+            </div>
+          </a> */}
+        <div className="text-sm font-semibold">ZITADEL</div>
+      </div>
+      <Theme />
+    </div>
+  );
+}

apps/login/ui/GlobalNav.tsx

@@ -25,7 +25,7 @@ export function GlobalNav() {
             <ZitadelLogo />
           </div>
 
-          <h2 className="text-blue-500 font-bold uppercase transform translate-y-2 text-sm tracking-wide">
+          <h2 className="text-blue-500 font-bold uppercase transform translate-y-2 text-sm">
             Login
           </h2>
         </Link>

apps/login/ui/Input.tsx

@@ -1,13 +1,13 @@
-'use client';
+"use client";
-import { CheckCircleIcon } from '@heroicons/react/24/solid';
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
-import clsx from 'clsx';
+import clsx from "clsx";
 import React, {
   ChangeEvent,
   DetailedHTMLProps,
   forwardRef,
   InputHTMLAttributes,
   ReactNode,
-} from 'react';
+} from "react";
 
 export type TextInputProps = DetailedHTMLProps<
   InputHTMLAttributes<HTMLInputElement>,
@@ -25,15 +25,15 @@ export type TextInputProps = DetailedHTMLProps<
 
 const styles = (error: boolean, disabled: boolean) =>
   clsx({
-    'h-40px mb-2px rounded p-2 bg-input-light-background dark:bg-input-dark-background transition-colors duration-300 grow':
+    "h-40px mb-2px rounded p-[7px] bg-input-light-background dark:bg-input-dark-background transition-colors duration-300 grow":
       true,
-    'border border-input-light-border dark:border-input-dark-border hover:border-black hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500':
+    "border border-input-light-border dark:border-input-dark-border hover:border-black hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500":
       true,
-    'focus:outline-none focus:ring-0 text-base text-black dark:text-white placeholder:italic placeholder-gray-700 dark:placeholder-gray-700':
+    "focus:outline-none focus:ring-0 text-base text-black dark:text-white placeholder:italic placeholder-gray-700 dark:placeholder-gray-700":
       true,
-    'border border-warn-light-500 dark:border-warn-dark-500 hover:border-warn-light-500 hover:dark:border-warn-dark-500 focus:border-warn-light-500 focus:dark:border-warn-dark-500':
+    "border border-warn-light-500 dark:border-warn-dark-500 hover:border-warn-light-500 hover:dark:border-warn-dark-500 focus:border-warn-light-500 focus:dark:border-warn-dark-500":
       error,
-    'pointer-events-none text-gray-500 dark:text-gray-800 border border-gray-700 dark:border-gray-900 border-opacity-30 dark:border-opacity-30 hover:border-gray-700 hover:dark:border-gray-900 hover:border-opacity-30 hover:dark:border-opacity-30 cursor-default':
+    "pointer-events-none text-gray-500 dark:text-gray-800 border border-gray-700 dark:border-gray-900 border-opacity-30 dark:border-opacity-30 hover:border-gray-700 hover:dark:border-gray-900 hover:border-opacity-30 hover:dark:border-opacity-30 cursor-default":
       disabled,
   });
 
@@ -52,16 +52,16 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       ...props
     },
-    ref,
+    ref
   ) => {
     return (
       <label className="flex flex-col text-12px text-input-light-label dark:text-input-dark-label">
         <span
           className={`leading-14.5px mb-1 ${
-            error ? 'text-warn-light-500 dark:text-warn-dark-500' : ''
+            error ? "text-warn-light-500 dark:text-warn-dark-500" : ""
           }`}
         >
-          {label} {required && '*'}
+          {label} {required && "*"}
         </span>
         <input
           ref={ref}
@@ -70,14 +70,14 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           required={required}
           disabled={disabled}
           placeholder={placeholder}
-          autoComplete={props.autoComplete ?? 'off'}
+          autoComplete={props.autoComplete ?? "off"}
           onChange={(e) => onChange && onChange(e)}
           onBlur={(e) => onBlur && onBlur(e)}
           {...props}
         />
 
         <div className="leading-14.5px h-14.5px text-warn-light-500 dark:text-warn-dark-500 flex flex-row items-center text-12px">
-          <span>{error ? error : ' '}</span>
+          <span>{error ? error : " "}</span>
         </div>
 
         {success && (
@@ -88,5 +88,5 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         )}
       </label>
     );
-  },
+  }
 );

apps/login/ui/Theme.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { Switch } from "@headlessui/react";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import { useTheme } from "next-themes";
+
+export default function Theme() {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const isDark = resolvedTheme === "dark";
+  return (
+    <Switch
+      checked={isDark}
+      onChange={(checked) => setTheme(checked ? "dark" : "light")}
+      className={`${
+        isDark
+          ? "!bg-gray-800 dark:bg-background-dark-400"
+          : "!bg-gray-100 dark:bg-background-dark-400"
+      }
+      relative inline-flex h-4 w-9 items-center rounded-full`}
+    >
+      <span className="sr-only">Dark mode enabled</span>
+      <div
+        aria-hidden="true"
+        className={`${
+          isDark ? "translate-x-5" : "translate-x-0"
+        } flex flex-row items-center justify-center h-4 w-4 transform rounded-full bg-white transition-all shadow dark:bg-background-dark-500 ring-1 ring-gray-200 dark:ring-gray-800 ring-offset-1 ring-offset-white dark:ring-offset-background-dark-500`}
+      >
+        {isDark ? (
+          <MoonIcon className="dark:text-amber-500 h-4 w-4" />
+        ) : (
+          <SunIcon className="text-amber-500 h-4 w-4" />
+        )}
+      </div>
+    </Switch>
+  );
+}

apps/login/ui/UserAvatar.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  name: string;
+};
+
+export default function UserAvatar({ name }: Props) {
+  return (
+    <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
+      {/* <Image
+          height={20}
+          width={20}
+          className="avatar-img"
+          src=""
+          alt="user-avatar"
+        /> */}
+      <div className="h-8 w-8 rounded-full bg-primary-light-700 dark:bg-primary-dark-800"></div>
+      <span className="ml-4 text-14px">{name}</span>
+    </div>
+  );
+}

packages/zitadel-react/src/components/SignInWithGitlab.tsx

@@ -6,8 +6,8 @@ export interface SignInWithGitlabProps {
 
 export function SignInWithGitlab(props: SignInWithGitlabProps) {
   return (
-    <div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-gray-200 dark:ui-border-gray-800 rounded-md px-4 py-2 text-sm">
+    <div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-gray-200 dark:ui-border-gray-800 rounded-md px-4 text-sm">
-      <div className="ui-h-12 ui-w-12">
+      <div className="ui-h-12 ui-w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width={25}

pnpm-lock.yaml

@@ -19,8 +19,8 @@ importers:
   apps/login:
     specifiers:
       '@bufbuild/buf': ^1.14.0
+      '@headlessui/react': ^1.7.14
       '@heroicons/react': 2.0.13
-      '@next/font': 13.0.5
       '@tailwindcss/forms': 0.5.3
       '@types/ms': 0.7.31
       '@types/node': 18.11.9
@@ -40,7 +40,8 @@ importers:
       grpc-tools: 1.11.3
       lint-staged: 13.0.3
       make-dir-cli: 3.0.0
-      next: 13.2.3
+      next: 13.3.1-canary.13
+      next-themes: ^0.2.1
       nice-grpc: 2.0.1
       postcss: 8.4.21
       prettier-plugin-tailwindcss: 0.1.13
@@ -53,15 +54,16 @@ importers:
       ts-proto: ^1.139.0
       typescript: 4.8.4
     dependencies:
+      '@headlessui/react': 1.7.14_biqbaboplfbrettd7655fr4n2y
       '@heroicons/react': 2.0.13_react@18.2.0
-      '@next/font': 13.0.5
       '@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
       '@zitadel/next': link:../../packages/zitadel-next
       '@zitadel/react': link:../../packages/zitadel-react
       '@zitadel/server': link:../../packages/zitadel-server
       clsx: 1.2.1
       date-fns: 2.29.3
-      next: 13.2.3_z72xxk7vwlamvgqemvc4ptm4du
+      next: 13.3.1-canary.13_z72xxk7vwlamvgqemvc4ptm4du
+      next-themes: 0.2.1_amhwfk4ri4rspyzmqtvcofnhfa
       nice-grpc: 2.0.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -1821,6 +1823,18 @@ packages:
       yargs: 16.2.0
     dev: false
 
+  /@headlessui/react/1.7.14_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@heroicons/react/2.0.13_react@18.2.0:
     resolution: {integrity: sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==}
     peerDependencies:
@@ -1939,16 +1953,16 @@ packages:
     resolution: {integrity: sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==}
     dev: false
 
+  /@next/env/13.3.1-canary.13:
+    resolution: {integrity: sha512-Zuwdo2KfGQPw0nTizy6yzj/LgtWl5FcDJJ80gJ/1WHJl9ANkuSsmru6EGUoBVkd481A/dfNP60355zfJjqq3Rg==}
+    dev: false
+
   /@next/eslint-plugin-next/13.3.0:
     resolution: {integrity: sha512-wuGN5qSEjSgcq9fVkH0Y/qIPFjnZtW3ZPwfjJOn7l/rrf6y8J24h/lo61kwqunTyzZJm/ETGfGVU9PUs8cnzEA==}
     dependencies:
       glob: 7.1.7
     dev: false
 
-  /@next/font/13.0.5:
-    resolution: {integrity: sha512-NrP4B8pxwerrkkuG/m7MQv0ks89Kk4Lc0kzbiRaYX+Xb0coDaw+I9T+g42aOHf8j8ta1vtKqb5XE1+troZ4CoQ==}
-    dev: false
-
   /@next/swc-android-arm-eabi/13.2.3:
     resolution: {integrity: sha512-mykdVaAXX/gm+eFO2kPeVjnOCKwanJ9mV2U0lsUGLrEdMUifPUjiXKc6qFAIs08PvmTMOLMNnUxqhGsJlWGKSw==}
     engines: {node: '>= 10'}
@@ -1976,6 +1990,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-arm64/13.3.1-canary.13:
+    resolution: {integrity: sha512-lwy+zhJnUevo2JxydLUywB3ZWDdQgGGOc5ZWJNxsoef8FVJ3PX8zvZYCWDsD5sGE1BViqjMsbIx/uf4TqaZOhg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-darwin-x64/13.2.3:
     resolution: {integrity: sha512-GZctkN6bJbpjlFiS5pylgB2pifHvgkqLAPumJzxnxkf7kqNm6rOGuNjsROvOWVWXmKhrzQkREO/WPS2aWsr/yw==}
     engines: {node: '>= 10'}
@@ -1985,6 +2008,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-x64/13.3.1-canary.13:
+    resolution: {integrity: sha512-JvwWrWF4Uqm4qEWLQV5Qt96kW1hmlV+8rjJTTOWll6ebCQz9c7/Exv4kCOz0mBkENYRmQlz3Pgd5ZWaooR4ptQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-freebsd-x64/13.2.3:
     resolution: {integrity: sha512-rK6GpmMt/mU6MPuav0/M7hJ/3t8HbKPCELw/Uqhi4732xoq2hJ2zbo2FkYs56y6w0KiXrIp4IOwNB9K8L/q62g==}
     engines: {node: '>= 10'}
@@ -2012,6 +2044,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-gnu/13.3.1-canary.13:
+    resolution: {integrity: sha512-OGHPDSjQw4Sqhzgl/fdgZMPPmCj0CJiqIMudyzrBqV9z59vyreIMBzi6sWsC2I5u8EP0Q2+qUFC5AJ4xqyFMZA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-arm64-musl/13.2.3:
     resolution: {integrity: sha512-sujxFDhMMDjqhruup8LLGV/y+nCPi6nm5DlFoThMJFvaaKr/imhkXuk8uCTq4YJDbtRxnjydFv2y8laBSJVC2g==}
     engines: {node: '>= 10'}
@@ -2021,6 +2062,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-musl/13.3.1-canary.13:
+    resolution: {integrity: sha512-mvPIWB1WLpyCzZOPgHEPkEtZEdyW6U9VHN8HTmyzybqZx/Lo4AWHobXlujWflBTyHQOu3ft9kfS4TAhdB9XFyg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-x64-gnu/13.2.3:
     resolution: {integrity: sha512-w5MyxPknVvC9LVnMenAYMXMx4KxPwXuJRMQFvY71uXg68n7cvcas85U5zkdrbmuZ+JvsO5SIG8k36/6X3nUhmQ==}
     engines: {node: '>= 10'}
@@ -2030,6 +2080,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-gnu/13.3.1-canary.13:
+    resolution: {integrity: sha512-hTHNN3n94qQcx0YK6bS2/nw99OSZZa/v7s56OOzCfQpYAz2546wiCOoEcOxQy/1Mum23i2Lt3u6km96GyHrD0Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-x64-musl/13.2.3:
     resolution: {integrity: sha512-CTeelh8OzSOVqpzMFMFnVRJIFAFQoTsI9RmVJWW/92S4xfECGcOzgsX37CZ8K982WHRzKU7exeh7vYdG/Eh4CA==}
     engines: {node: '>= 10'}
@@ -2039,6 +2098,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-musl/13.3.1-canary.13:
+    resolution: {integrity: sha512-SW3YdJfJzlin5hp9zMU4HHKKhARq9ojQ1tjUSsgfPtMTG3Gon7dswK/Ap5aguPvqJQK42YaPg7zPr91Ez4piGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-arm64-msvc/13.2.3:
     resolution: {integrity: sha512-7N1KBQP5mo4xf52cFCHgMjzbc9jizIlkTepe9tMa2WFvEIlKDfdt38QYcr9mbtny17yuaIw02FXOVEytGzqdOQ==}
     engines: {node: '>= 10'}
@@ -2048,6 +2116,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-arm64-msvc/13.3.1-canary.13:
+    resolution: {integrity: sha512-SHb96TxxtQXJ87DbZVC22mS2jcQfKeDVcrSB5G972JRK/QaUnRrIn/Fr4/OMVgz8wkMDYyJwhVMNPZ1d7FzlQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-ia32-msvc/13.2.3:
     resolution: {integrity: sha512-LzWD5pTSipUXTEMRjtxES/NBYktuZdo7xExJqGDMnZU8WOI+v9mQzsmQgZS/q02eIv78JOCSemqVVKZBGCgUvA==}
     engines: {node: '>= 10'}
@@ -2057,6 +2134,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-ia32-msvc/13.3.1-canary.13:
+    resolution: {integrity: sha512-+TM2In/8yh6Ze4ADs9HKSg2mIjzB7SLz9i/8VUCY3SdVMKpKCtMHYzlo5BkIOSmtW0QsGVEY38+6WLOpf8lXhQ==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-x64-msvc/13.2.3:
     resolution: {integrity: sha512-aLG2MaFs4y7IwaMTosz2r4mVbqRyCnMoFqOcmfTi7/mAS+G4IMH0vJp4oLdbshqiVoiVuKrAfqtXj55/m7Qu1Q==}
     engines: {node: '>= 10'}
@@ -2066,6 +2152,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-x64-msvc/13.3.1-canary.13:
+    resolution: {integrity: sha512-IFnEsOJIvaC/MytzEsTaWcILy2lzuwFi0aAq0NturKFRH/ykjOnLHd98jBz5D8eCPX9QN2oyB57D6i1wbIAJHA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@nicolo-ribaudo/chokidar-2/2.1.8-no-fsevents.3:
     resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
     requiresBuild: true
@@ -2145,6 +2240,12 @@ packages:
       tslib: 2.4.1
     dev: false
 
+  /@swc/helpers/0.5.0:
+    resolution: {integrity: sha512-SjY/p4MmECVVEWspzSRpQEM3sjR17sP8PbGxELWrT+YZMBfiUyt1MRUNjMV23zohwlG2HYtCQOsCwsTHguXkyg==}
+    dependencies:
+      tslib: 2.4.1
+    dev: false
+
   /@tailwindcss/forms/0.5.3_tailwindcss@3.2.4:
     resolution: {integrity: sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==}
     peerDependencies:
@@ -2642,6 +2743,13 @@ packages:
       load-tsconfig: 0.2.3
     dev: true
 
+  /busboy/1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+    dependencies:
+      streamsearch: 1.1.0
+    dev: false
+
   /cac/6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -4890,6 +4998,18 @@ packages:
   /natural-compare/1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  /next-themes/0.2.1_amhwfk4ri4rspyzmqtvcofnhfa:
+    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+    peerDependencies:
+      next: '*'
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      next: 13.3.1-canary.13_z72xxk7vwlamvgqemvc4ptm4du
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /next/13.2.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-nKFJC6upCPN7DWRx4+0S/1PIOT7vNlCT157w9AzbXEgKy6zkiPKEt5YyRUsRZkmpEqBVrGgOqNfwecTociyg+w==}
     engines: {node: '>=14.6.0'}
@@ -4937,12 +5057,12 @@ packages:
       - babel-plugin-macros
     dev: false
 
-  /next/13.2.3_z72xxk7vwlamvgqemvc4ptm4du:
+  /next/13.3.1-canary.13_z72xxk7vwlamvgqemvc4ptm4du:
-    resolution: {integrity: sha512-nKFJC6upCPN7DWRx4+0S/1PIOT7vNlCT157w9AzbXEgKy6zkiPKEt5YyRUsRZkmpEqBVrGgOqNfwecTociyg+w==}
+    resolution: {integrity: sha512-nqLvbeAbJiVFWHzfvUM6D5L/nwjUD7+fc0FWPdJc/jLbInKNqQQHc4+0NKNi8tj6Af9cn4MBPrrg/lyMbf0hVA==}
     engines: {node: '>=14.6.0'}
     hasBin: true
     peerDependencies:
-      '@opentelemetry/api': ^1.4.0
+      '@opentelemetry/api': ^1.1.0
       fibers: '>= 3.1.0'
       node-sass: ^6.0.0 || ^7.0.0
       react: ^18.2.0
@@ -4958,27 +5078,24 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.2.3
+      '@next/env': 13.3.1-canary.13
-      '@swc/helpers': 0.4.14
+      '@swc/helpers': 0.5.0
-      caniuse-lite: 1.0.30001434
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001473
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       styled-jsx: 5.1.1_duavcg6prxxl5begav3y2fyxcu
     optionalDependencies:
-      '@next/swc-android-arm-eabi': 13.2.3
+      '@next/swc-darwin-arm64': 13.3.1-canary.13
-      '@next/swc-android-arm64': 13.2.3
+      '@next/swc-darwin-x64': 13.3.1-canary.13
-      '@next/swc-darwin-arm64': 13.2.3
+      '@next/swc-linux-arm64-gnu': 13.3.1-canary.13
-      '@next/swc-darwin-x64': 13.2.3
+      '@next/swc-linux-arm64-musl': 13.3.1-canary.13
-      '@next/swc-freebsd-x64': 13.2.3
+      '@next/swc-linux-x64-gnu': 13.3.1-canary.13
-      '@next/swc-linux-arm-gnueabihf': 13.2.3
+      '@next/swc-linux-x64-musl': 13.3.1-canary.13
-      '@next/swc-linux-arm64-gnu': 13.2.3
+      '@next/swc-win32-arm64-msvc': 13.3.1-canary.13
-      '@next/swc-linux-arm64-musl': 13.2.3
+      '@next/swc-win32-ia32-msvc': 13.3.1-canary.13
-      '@next/swc-linux-x64-gnu': 13.2.3
+      '@next/swc-win32-x64-msvc': 13.3.1-canary.13
-      '@next/swc-linux-x64-musl': 13.2.3
-      '@next/swc-win32-arm64-msvc': 13.2.3
-      '@next/swc-win32-ia32-msvc': 13.2.3
-      '@next/swc-win32-x64-msvc': 13.2.3
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -5947,6 +6064,11 @@ packages:
       mixme: 0.5.4
     dev: true
 
+  /streamsearch/1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+    dev: false
+
   /string-argv/0.3.1:
     resolution: {integrity: sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==}
     engines: {node: '>=0.6.19'}