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

session service, username, password form

Browse Source
This commit is contained in:
Max Peintner
2023-05-16 17:34:52 +02:00
parent f149f1aebc
commit 8a190e28c6
20 changed files with 395 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,5 @@
import { Button, ButtonVariants } from "#/ui/Button";
import { NextPage, NextPageContext } from "next";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
type Props = {
searchParams: { [key: string]: string | string[] | undefined };

30
apps/login/app/(login)/username/page.tsx
View File

@@ -2,41 +2,15 @@
import { Button, ButtonVariants } from "#/ui/Button";
import IdentityProviders from "#/ui/IdentityProviders";
import { TextInput } from "#/ui/Input";
import { useRouter } from "next/navigation";
import UsernameForm from "#/ui/UsernameForm";
export default function Page() {
const router = useRouter();
function submit() {
router.push("/password");
}
return (
<div className="flex flex-col items-center space-y-4">
<h1>Welcome back!</h1>
<p className="ztdl-p">Enter your login data.</p>
<form className="w-full" onSubmit={() => submit()}>
<div className="block">
<TextInput label="Loginname" />
</div>
<div>
<IdentityProviders />
</div>
<div className="mt-8 flex w-full flex-row items-center justify-between">
<Button type="button" variant={ButtonVariants.Secondary}>
back
</Button>
<Button
type="submit"
variant={ButtonVariants.Primary}
onClick={() => submit()}
>
continue
</Button>
</div>
</form>
<UsernameForm />
</div>
);
}

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

@@ -8,7 +8,7 @@ import { Analytics } from "@vercel/analytics/react";
import ThemeWrapper from "#/ui/ThemeWrapper";
import { getBrandingSettings } from "#/lib/zitadel";
import { server } from "../lib/zitadel";
import { LabelPolicyColors } from "#/utils/colors";
import { BrandingSettings } from "@zitadel/server";
const lato = Lato({
weight: ["400", "700", "900"],
@@ -25,26 +25,20 @@ export default async function RootLayout({
// later only shown with dev mode enabled
const showNav = true;
const branding = await getBrandingSettings(server);
let partialPolicy: LabelPolicyColors | undefined;
console.log(branding);
// const general = await getGeneralSettings(server);
const branding: BrandingSettings = await getBrandingSettings(server);
let partial: Partial<BrandingSettings> | undefined;
if (branding) {
partialPolicy = {
backgroundColor: branding?.backgroundColor,
backgroundColorDark: branding?.backgroundColorDark,
primaryColor: branding?.primaryColor,
primaryColorDark: branding?.primaryColorDark,
warnColor: branding?.warnColor,
warnColorDark: branding?.warnColorDark,
fontColor: branding?.fontColor,
fontColorDark: branding?.fontColorDark,
partial = {
lightTheme: branding?.lightTheme,
darkTheme: branding?.darkTheme,
};
}
return (
<html lang="en" className={`${lato.className}`} suppressHydrationWarning>
<head />
<body>
<ThemeWrapper branding={partialPolicy}>
<ThemeWrapper branding={partial}>
<LayoutProviders>
<div className="h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
{showNav && <GlobalNav />}

26
apps/login/app/session/route.ts Normal file
View File

@@ -0,0 +1,26 @@
import { createSession, server, setSession } from "#/lib/zitadel";
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
const body = await request.json();
if (body) {
const { loginName } = body;
const session = await createSession(server, loginName);
return NextResponse.json(session);
} else {
return NextResponse.error();
}
}
export async function PUT(request: NextRequest) {
const body = await request.json();
if (body) {
const { loginName } = body;
const session = await setSession(server, loginName);
return NextResponse.json(session);
} else {
return NextResponse.error();
}
}

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

@@ -1,14 +1,12 @@
import {
management,
ZitadelServer,
ZitadelServerOptions,
orgMetadata,
getServer,
management,
settings,
getServers,
initializeServer,
settings,
session,
} from "@zitadel/server";
// import { getAuth } from "@zitadel/server/auth";
export const zitadelConfig: ZitadelServerOptions = {
name: "zitadel login",
@@ -38,6 +36,21 @@ export function getBrandingSettings(
.then((resp) => resp.settings);
}
export function getGeneralSettings(
server: ZitadelServer
): Promise<any | undefined> {
// settings.branding_settings.BrandingSettings
const settingsService = settings.getSettings(server);
return settingsService
.getGeneralSettings(
{},
{
// metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "")
}
)
.then((resp) => resp.supportedLanguages);
}
export function getLegalAndSupportSettings(
server: ZitadelServer
): Promise<any | undefined> {
@@ -56,6 +69,7 @@ export function getPasswordComplexitySettings(
server: ZitadelServer
): Promise<any | undefined> {
const settingsService = settings.getSettings(server);
return settingsService
.getPasswordComplexitySettings(
{},
@@ -66,6 +80,22 @@ export function getPasswordComplexitySettings(
.then((resp) => resp.settings);
}
export function createSession(
server: ZitadelServer,
loginName: string
): Promise<any | undefined> {
const sessionService = session.getSession(server);
return sessionService.createSession({ checks: { user: { loginName } } }, {});
}
export function setSession(
server: ZitadelServer,
loginName: string
): Promise<any | undefined> {
const sessionService = session.getSession(server);
return sessionService.setSession({ checks: { user: { loginName } } }, {});
}
export type AddHumanUserData = {
firstName: string;
lastName: string;

84
apps/login/ui/PasswordForm.tsx Normal file
View File

@@ -0,0 +1,84 @@
"use client";
import { useState } from "react";
import { Button, ButtonVariants } from "./Button";
import { TextInput } from "./Input";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { Spinner } from "./Spinner";
type Inputs = {
password: string;
};
export default function UsernameForm() {
const { register, handleSubmit, formState } = useForm<Inputs>({
mode: "onBlur",
});
const [error, setError] = useState<string>("");
const [loading, setLoading] = useState<boolean>(false);
const router = useRouter();
async function submitUsername(values: Inputs) {
setLoading(true);
const res = await fetch("/session", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
password: values.password,
}),
});
if (!res.ok) {
setLoading(false);
throw new Error("Failed to register user");
}
setLoading(false);
return res.json();
}
function submitAndLink(value: Inputs): Promise<boolean | void> {
return submitUsername(value).then((resp: any) => {
return router.push(`/password`);
});
}
const { errors } = formState;
return (
<form className="w-full">
<div className="">
<TextInput
type="password"
autoComplete="password"
{...register("password", { required: "This field is required" })}
label="Loginname"
// error={errors.username?.message as string}
/>
</div>
<div className="mt-8 flex w-full flex-row items-center">
{/* <Button type="button" variant={ButtonVariants.Secondary}>
back
</Button> */}
<span className="flex-grow"></span>
<Button
type="submit"
className="self-end"
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(submitAndLink)}
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
continue
</Button>
</div>
</form>
);
}

17
apps/login/ui/RegisterForm.tsx
View File

@@ -1,6 +1,9 @@
"use client";
import { PasswordComplexityPolicy, PrivacyPolicy } from "@zitadel/server";
import {
LegalAndSupportSettings,
PasswordComplexitySettings,
} from "@zitadel/server";
import PasswordComplexity from "./PasswordComplexity";
import { useState } from "react";
import { Button, ButtonVariants } from "./Button";
@@ -27,8 +30,8 @@ type Inputs =
| FieldValues;
type Props = {
privacyPolicy: PrivacyPolicy;
passwordComplexityPolicy: PasswordComplexityPolicy;
privacyPolicy: LegalAndSupportSettings;
passwordComplexityPolicy: PasswordComplexitySettings;
};
export default function RegisterForm({
@@ -90,10 +93,10 @@ export default function RegisterForm({
const policyIsValid =
passwordComplexityPolicy &&
(passwordComplexityPolicy.hasLowercase ? hasLowercase : true) &&
(passwordComplexityPolicy.hasNumber ? hasNumber : true) &&
(passwordComplexityPolicy.hasUppercase ? hasUppercase : true) &&
(passwordComplexityPolicy.hasSymbol ? hasSymbol : true) &&
(passwordComplexityPolicy.requiresLowercase ? hasLowercase : true) &&
(passwordComplexityPolicy.requiresNumber ? hasNumber : true) &&
(passwordComplexityPolicy.requiresUppercase ? hasUppercase : true) &&
(passwordComplexityPolicy.requiresSymbol ? hasSymbol : true) &&
hasMinLength;
return (

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

@@ -1,10 +1,11 @@
"use client";
import { setTheme, LabelPolicyColors } from "#/utils/colors";
import { BrandingSettings } from "@zitadel/server";
import { setTheme } from "#/utils/colors";
import { useEffect } from "react";
type Props = {
branding: LabelPolicyColors | undefined;
branding: Partial<BrandingSettings> | undefined;
children: React.ReactNode;
};

82
apps/login/ui/UsernameForm.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client";
import { useState } from "react";
import { Button, ButtonVariants } from "./Button";
import { TextInput } from "./Input";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { Spinner } from "./Spinner";
type Inputs = {
loginName: string;
};
export default function UsernameForm() {
const { register, handleSubmit, formState } = useForm<Inputs>({
mode: "onBlur",
});
const [loading, setLoading] = useState<boolean>(false);
const router = useRouter();
async function submitUsername(values: Inputs) {
setLoading(true);
const res = await fetch("/session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
loginName: values.loginName,
}),
});
if (!res.ok) {
setLoading(false);
throw new Error("Failed to register user");
}
setLoading(false);
return res.json();
}
function submitAndLink(value: Inputs): Promise<boolean | void> {
return submitUsername(value).then((resp: any) => {
return router.push(`/password`);
});
}
const { errors } = formState;
return (
<form className="w-full">
<div className="">
<TextInput
type="text"
autoComplete="username"
{...register("loginName", { required: "This field is required" })}
label="Loginname"
// error={errors.username?.message as string}
/>
</div>
<div className="mt-8 flex w-full flex-row items-center">
{/* <Button type="button" variant={ButtonVariants.Secondary}>
back
</Button> */}
<span className="flex-grow"></span>
<Button
type="submit"
className="self-end"
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(submitAndLink)}
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
continue
</Button>
</div>
</form>
);
}

71
apps/login/utils/colors.ts
View File

@@ -1,5 +1,7 @@
import tinycolor from "tinycolor2";
import { BrandingSettings } from "@zitadel/server";
export interface Color {
name: string;
hex: string;
@@ -52,32 +54,36 @@ export type LabelPolicyColors = {
primaryColorDark: string;
};
export function setTheme(document: any, policy?: LabelPolicyColors) {
const lP = {
backgroundColor: BACKGROUND,
backgroundColorDark: DARK_BACKGROUND,
primaryColor: PRIMARY,
primaryColorDark: DARK_PRIMARY,
warnColor: WARN,
warnColorDark: DARK_WARN,
fontColor: TEXT,
fontColorDark: DARK_TEXT,
linkColor: TEXT,
linkColorDark: DARK_TEXT,
type BrandingColors = {
lightTheme: {
backgroundColor: string;
fontColor: string;
primaryColor: string;
warnColor: string;
};
darkTheme: {
backgroundColor: string;
fontColor: string;
primaryColor: string;
warnColor: string;
};
};
if (policy) {
lP.backgroundColor = policy.backgroundColor;
lP.backgroundColorDark = policy.backgroundColorDark;
lP.primaryColor = policy.primaryColor;
lP.primaryColorDark = policy.primaryColorDark;
lP.warnColor = policy.warnColor;
lP.warnColorDark = policy.warnColorDark;
lP.fontColor = policy.fontColor;
lP.fontColorDark = policy.fontColorDark;
lP.linkColor = policy.fontColor;
lP.linkColorDark = policy.fontColorDark;
}
export function setTheme(document: any, policy?: Partial<BrandingSettings>) {
const lP: BrandingColors = {
lightTheme: {
backgroundColor: policy?.lightTheme?.backgroundColor ?? BACKGROUND,
fontColor: policy?.lightTheme?.fontColor ?? TEXT,
primaryColor: policy?.lightTheme?.primaryColor ?? PRIMARY,
warnColor: policy?.lightTheme?.warnColor ?? WARN,
},
darkTheme: {
backgroundColor: policy?.darkTheme?.backgroundColor ?? DARK_BACKGROUND,
fontColor: policy?.darkTheme?.fontColor ?? DARK_TEXT,
primaryColor: policy?.darkTheme?.primaryColor ?? DARK_PRIMARY,
warnColor: policy?.darkTheme?.warnColor ?? DARK_WARN,
},
};
const dark = computeMap(lP, true);
const light = computeMap(lP, false);
@@ -177,25 +183,24 @@ function getContrast(color: string): string {
}
}
export function computeMap(
labelpolicy: LabelPolicyColors,
dark: boolean
): ColorMap {
export function computeMap(branding: BrandingColors, dark: boolean): ColorMap {
return {
background: computeColors(
dark ? labelpolicy.backgroundColorDark : labelpolicy.backgroundColor
dark
? branding.darkTheme.backgroundColor
: branding.lightTheme.backgroundColor
),
primary: computeColors(
dark ? labelpolicy.primaryColorDark : labelpolicy.primaryColor
dark ? branding.darkTheme.primaryColor : branding.lightTheme.primaryColor
),
warn: computeColors(
dark ? labelpolicy.warnColorDark : labelpolicy.warnColor
dark ? branding.darkTheme.warnColor : branding.lightTheme.warnColor
),
text: computeColors(
dark ? labelpolicy.fontColorDark : labelpolicy.fontColor
dark ? branding.darkTheme.fontColor : branding.lightTheme.fontColor
),
link: computeColors(
dark ? labelpolicy.fontColorDark : labelpolicy.fontColor
dark ? branding.darkTheme.fontColor : branding.lightTheme.fontColor
),
};
}

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

@@ -4,14 +4,15 @@
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"type": "commonjs",
"sideEffects": false,
"license": "MIT",
"files": [
"dist/**"
],
"scripts": {
"build": "tsup src/index.ts src/*/index.ts --format esm,cjs --dts",
"dev": "tsup src/index.ts src/*/index.ts --format esm,cjs --watch --dts",
"build": "tsup --dts",
"dev": "tsup --dts --watch",
"lint": "eslint \"src/**/*.ts*\"",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
"prebuild": "pnpm run generate",

45
packages/zitadel-server/src/index.ts
View File

@@ -1,13 +1,36 @@
export * from "./server";
import * as management from "./management";
import * as settings from "./v2/settings";
import * as session from "./v2/session";
import * as login from "./proto/server/zitadel/settings/v2alpha/login_settings";
import * as password from "./proto/server/zitadel/settings/v2alpha/password_settings";
import * as legal from "./proto/server/zitadel/settings/v2alpha/legal_settings";
export {
BrandingSettings,
Theme,
} from "./proto/server/zitadel/settings/v2alpha/branding_settings";
export { type LegalAndSupportSettings } from "./proto/server/zitadel/settings/v2alpha/legal_settings";
export { type PasswordComplexitySettings } from "./proto/server/zitadel/settings/v2alpha/password_settings";
import {
getServers,
initializeServer,
ZitadelServer,
ZitadelServerOptions,
} from "./server";
export * from "./middleware";
export * as management from "./management";
export * as settings from "./v2/settings";
// export * as auth from "./auth";
// export * as management from "./management";
// export * as admin from "./admin";
// export * as system from "./system";
// export * from "./proto/server/zitadel/management";
// export * from "./proto/server/zitadel/system";
// export * from "./proto/server/zitadel/admin";
export {
getServers,
ZitadelServer,
type ZitadelServerOptions,
initializeServer,
management,
session,
settings,
login,
password,
legal,
};

2
packages/zitadel-server/src/management/index.ts
View File

@@ -1,3 +1,3 @@
export * from "./management";
export * as management from "../proto/server/zitadel/management";
export * from "../proto/server/zitadel/policy";
export * as policy from "../proto/server/zitadel/policy";

23
packages/zitadel-server/src/server.ts
View File

@@ -1,3 +1,11 @@
import { createChannel, createClientFactory } from "nice-grpc";
import {
SettingsServiceClient,
SettingsServiceDefinition,
} from "./proto/server/zitadel/settings/v2alpha/settings_service";
import { authMiddleware } from "./middleware";
import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";
let apps: ZitadelServer[] = [];
export interface ZitadelServerProps {
@@ -49,3 +57,18 @@ export function getServer(name?: string): ZitadelServer {
}
}
}
export const createClient = <Client>(
definition: CompatServiceDefinition,
apiUrl: string,
token: string
) => {
if (!apiUrl) {
throw Error("ZITADEL_API_URL not set");
}
const channel = createChannel(process.env.ZITADEL_API_URL ?? "");
return createClientFactory()
.use(authMiddleware(token))
.create(definition, channel) as Client;
};

2
packages/zitadel-server/src/v2/session/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from "./session";
export * from "../../proto/server/zitadel/session/v2alpha/session";

29
packages/zitadel-server/src/v2/session/session.ts Normal file
View File

@@ -0,0 +1,29 @@
import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";
import {
SessionServiceClient,
SessionServiceDefinition,
} from "../../proto/server/zitadel/session/v2alpha/session_service";
import { ZitadelServer, createClient, getServers } from "../../server";
export const getSession = (server?: string | ZitadelServer) => {
console.log("init session");
let config;
if (server && typeof server === "string") {
const apps = getServers();
config = apps.find((a) => a.name === server)?.config;
} else if (server && typeof server === "object") {
config = server.config;
}
if (!config) {
throw Error("No ZITADEL server found");
}
return createClient<SessionServiceClient>(
SessionServiceDefinition as CompatServiceDefinition,
config.apiUrl,
config.token
);
};

4
packages/zitadel-server/src/v2/settings/index.ts
View File

@@ -1,6 +1,2 @@
export * from "./settings";
export * from "../../proto/server/zitadel/settings/v2alpha/settings";
export * as branding from "../../proto/server/zitadel/settings/v2alpha/branding_settings";
export * as login from "../../proto/server/zitadel/settings/v2alpha/login_settings";
export * as password from "../../proto/server/zitadel/settings/v2alpha/password_settings";
export * as legal from "../../proto/server/zitadel/settings/v2alpha/legal_settings";

19
packages/zitadel-server/src/v2/settings/settings.ts
View File

@@ -1,28 +1,11 @@
import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";
import { createChannel, createClientFactory } from "nice-grpc";
import {
SettingsServiceClient,
SettingsServiceDefinition,
} from "../../proto/server/zitadel/settings/v2alpha/settings_service";
import { authMiddleware } from "../../middleware";
import { ZitadelServer, getServers } from "../../server";
const createClient = <Client>(
definition: CompatServiceDefinition,
apiUrl: string,
token: string
) => {
if (!apiUrl) {
throw Error("ZITADEL_API_URL not set");
}
const channel = createChannel(process.env.ZITADEL_API_URL ?? "");
return createClientFactory()
.use(authMiddleware(token))
.create(definition, channel) as Client;
};
import { ZitadelServer, createClient, getServers } from "../../server";
export const getSettings = (server?: string | ZitadelServer) => {
console.log("init settings");

7
packages/zitadel-server/tsconfig.json
View File

@@ -3,12 +3,7 @@
"include": ["src/**/*.ts"],
"compilerOptions": {
"baseUrl": ".",
"rootDir": "src",
"paths": {
"#": ["."],
"*": ["./*"],
"#/*": ["./*"]
}
"rootDir": "src"
},
"exclude": ["dist", "build", "node_modules"]
}

13
packages/zitadel-server/tsup.config.ts Normal file
View File

@@ -0,0 +1,13 @@
import { defineConfig, Options } from "tsup";
export default defineConfig((options: Options) => ({
treeshake: true,
splitting: true,
publicDir: true,
entry: ["src/index.ts", "src/**/index.ts"],
format: ["esm", "cjs"],
dts: true,
minify: true,
clean: true,
...options,
}));