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

layout, components

Browse Source
This commit is contained in:
Max Peintner
2023-04-19 10:37:35 +02:00
parent 770f186abb
commit a321781355
24 changed files with 370 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/login/app/(login)/head.tsx
View File

@@ -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."
/>
</>
);
}

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

@@ -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

21
apps/login/app/(login)/mfa/create/page.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { Button, ButtonVariants } from '#/ui/Button';
import { TextInput } from '#/ui/Input';
import { useRouter } from 'next/navigation';
"use client";
import { Button, ButtonVariants } from "#/ui/Button";
import { TextInput } from "#/ui/Input";
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">
{/* <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>
<UserAvatar name="max@zitadel.com"></UserAvatar>
<div className="w-full">
<TextInput type="password" label="Password" />

21
apps/login/app/(login)/password/change/page.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { Button, ButtonVariants } from '#/ui/Button';
import { TextInput } from '#/ui/Input';
import { useRouter } from 'next/navigation';
"use client";
import { Button, ButtonVariants } from "#/ui/Button";
import { TextInput } from "#/ui/Input";
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">
{/* <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>
<UserAvatar name="max@zitadel.com"></UserAvatar>
<div className="w-full">
<TextInput type="password" label="Password" />

21
apps/login/app/(login)/password/page.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { Button, ButtonVariants } from '#/ui/Button';
import { TextInput } from '#/ui/Input';
import { useRouter } from 'next/navigation';
"use client";
import { Button, ButtonVariants } from "#/ui/Button";
import { TextInput } from "#/ui/Input";
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">
{/* <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>
<UserAvatar name="max@zitadel.com"></UserAvatar>
<div className="w-full">
<TextInput type="password" label="Password" />

21
apps/login/app/(login)/passwordless/create/page.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { Button, ButtonVariants } from '#/ui/Button';
import { TextInput } from '#/ui/Input';
import { useRouter } from 'next/navigation';
"use client";
import { Button, ButtonVariants } from "#/ui/Button";
import { TextInput } from "#/ui/Input";
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">
{/* <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>
<UserAvatar name="max@zitadel.cloud"></UserAvatar>
<div className="w-full">
<TextInput type="password" label="Password" />

21
apps/login/app/(login)/passwordless/page.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { Button, ButtonVariants } from '#/ui/Button';
import { TextInput } from '#/ui/Input';
import { useRouter } from 'next/navigation';
"use client";
import { Button, ButtonVariants } from "#/ui/Button";
import { TextInput } from "#/ui/Input";
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">
{/* <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>
<UserAvatar name="max@zitadel.com"></UserAvatar>
<div className="w-full">
<TextInput type="password" label="Password" />

14
apps/login/app/head.tsx
View File

@@ -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."
/>
</>
);
}

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

@@ -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')]">
<GlobalNav />
<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 />
<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:dark-bg-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:dark-bg-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:dark-bg-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>
</body>
</ThemeProvider>
</html>
);
}
function Byline() {
return (
<div className="flex items-center 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>
</div>
);
}
// export const metadata = () => {
// 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."
// />
// </>
// );
// };

10
apps/login/app/page.tsx
View File

@@ -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}

50
apps/login/lib/demos.ts
View File

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

15
apps/login/package.json
View File

@@ -17,15 +17,16 @@
"*": "prettier --write --ignore-unknown"
},
"dependencies": {
"@zitadel/server": "workspace:*",
"@zitadel/react": "workspace:*",
"@zitadel/next": "workspace:*",
"@headlessui/react": "^1.7.14",
"@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",

0
apps/login/public/grid.svg → apps/login/public/grid-dark.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

5
apps/login/public/grid-light.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

14
apps/login/styles/globals.css
View File

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

2
apps/login/tailwind.config.js
View File

@@ -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"

1
apps/login/ui/AddressBar.tsx
View File

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

18
apps/login/ui/Byline.tsx Normal file
View File

@@ -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>
);
}

2
apps/login/ui/GlobalNav.tsx
View File

@@ -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>

30
apps/login/ui/Input.tsx
View File

@@ -1,13 +1,13 @@
'use client';
import { CheckCircleIcon } from '@heroicons/react/24/solid';
import clsx from 'clsx';
"use client";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
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>
);
},
}
);

36
apps/login/ui/Theme.tsx Normal file
View File

@@ -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>
);
}

19
apps/login/ui/UserAvatar.tsx Normal file
View File

@@ -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>
);
}

4
packages/zitadel-react/src/components/SignInWithGitlab.tsx
View File

@@ -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-h-12 ui-w-12">
<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 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width={25}

176
pnpm-lock.yaml generated
View File

@@ -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:
resolution: {integrity: sha512-nKFJC6upCPN7DWRx4+0S/1PIOT7vNlCT157w9AzbXEgKy6zkiPKEt5YyRUsRZkmpEqBVrGgOqNfwecTociyg+w==}
/next/13.3.1-canary.13_z72xxk7vwlamvgqemvc4ptm4du:
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
'@swc/helpers': 0.4.14
caniuse-lite: 1.0.30001434
'@next/env': 13.3.1-canary.13
'@swc/helpers': 0.5.0
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-android-arm64': 13.2.3
'@next/swc-darwin-arm64': 13.2.3
'@next/swc-darwin-x64': 13.2.3
'@next/swc-freebsd-x64': 13.2.3
'@next/swc-linux-arm-gnueabihf': 13.2.3
'@next/swc-linux-arm64-gnu': 13.2.3
'@next/swc-linux-arm64-musl': 13.2.3
'@next/swc-linux-x64-gnu': 13.2.3
'@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
'@next/swc-darwin-arm64': 13.3.1-canary.13
'@next/swc-darwin-x64': 13.3.1-canary.13
'@next/swc-linux-arm64-gnu': 13.3.1-canary.13
'@next/swc-linux-arm64-musl': 13.3.1-canary.13
'@next/swc-linux-x64-gnu': 13.3.1-canary.13
'@next/swc-linux-x64-musl': 13.3.1-canary.13
'@next/swc-win32-arm64-msvc': 13.3.1-canary.13
'@next/swc-win32-ia32-msvc': 13.3.1-canary.13
'@next/swc-win32-x64-msvc': 13.3.1-canary.13
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'}