server route

apps/login/app/registeruser/route.ts

@@ -0,0 +1,20 @@
+import { addHumanUser, server } from "#/lib/zitadel";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  console.log(body);
+  if (body) {
+    const { email, password, firstName, lastName } = body;
+
+    const userId = await addHumanUser(server, {
+      email: email,
+      firstName,
+      lastName,
+      password: password,
+    });
+    return NextResponse.json({ userId });
+  } else {
+    return NextResponse.error();
+  }
+}

apps/login/lib/zitadel.ts

@@ -63,20 +63,22 @@ export function getPasswordComplexityPolicy(
 }
 
 export type AddHumanUserData = {
-  displayName: string;
+  firstName: string;
+  lastName: string;
   email: string;
   password: string;
 };
 export function addHumanUser(
   server: ZitadelServer,
-  { email, displayName, password }: AddHumanUserData
+  { email, firstName, lastName, password }: AddHumanUserData
 ): Promise<string> {
   const mgmt = getManagement(server);
   return mgmt
     .addHumanUser(
       {
         email: { email, isEmailVerified: false },
-        profile: { displayName },
+        userName: email,
+        profile: { firstName, lastName },
         initialPassword: password,
       },
       { metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "") }

apps/login/ui/PasswordComplexity.tsx

@@ -19,7 +19,7 @@ const check = (
     viewBox="0 0 24 24"
     strokeWidth={1.5}
     stroke="currentColor"
-    className="w-6 h-6 las la-check text-state-success-light-color dark:text-state-success-dark-color mr-2 text-lg"
+    className="w-6 h-6 las la-check text-green-500 dark:text-green-500 mr-2 text-lg"
   >
     <path
       strokeLinecap="round"
@@ -58,13 +58,6 @@ export default function PasswordComplexity({
   const hasUppercase = upperCaseValidator(password);
   const hasLowercase = lowerCaseValidator(password);
 
-  const policyIsValid =
-    (passwordComplexityPolicy.hasLowercase ? hasLowercase : true) &&
-    (passwordComplexityPolicy.hasNumber ? hasNumber : true) &&
-    (passwordComplexityPolicy.hasUppercase ? hasUppercase : true) &&
-    (passwordComplexityPolicy.hasSymbol ? hasSymbol : true) &&
-    hasMinLength;
-
   return (
     <div className="mb-4 grid grid-cols-2 gap-x-8 gap-y-2">
       <div className="flex flex-row items-center">

apps/login/ui/RegisterForm.tsx

@@ -2,7 +2,7 @@
 
 import { PasswordComplexityPolicy, PrivacyPolicy } from "@zitadel/server";
 import PasswordComplexity from "./PasswordComplexity";
-import { use, useState } from "react";
+import { useState } from "react";
 import { Button, ButtonVariants } from "./Button";
 import { TextInput } from "./Input";
 import { PrivacyPolicyCheckboxes } from "./PrivacyPolicyCheckboxes";
@@ -13,7 +13,6 @@ import {
   symbolValidator,
   upperCaseValidator,
 } from "#/utils/validators";
-import { addHumanUser, server } from "#/lib/zitadel";
 
 type Inputs =
   | {
@@ -30,18 +29,6 @@ type Props = {
   passwordComplexityPolicy: PasswordComplexityPolicy;
 };
 
-async function submitRegister(values: Inputs) {
-  console.log(values);
-  // use fetch for local api
-  //   return use(
-  //     addHumanUser(server, {
-  //       email: values.email,
-  //       displayName: "huhu",
-  //       password: values.password,
-  //     })
-  //   );
-}
-
 export default function RegisterForm({
   privacyPolicy,
   passwordComplexityPolicy,
@@ -50,6 +37,27 @@ export default function RegisterForm({
     mode: "onBlur",
   });
 
+  async function submitRegister(values: Inputs) {
+    const res = await fetch("/registeruser", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: values.email,
+        password: values.password,
+        firstName: values.firstname,
+        lastName: values.lastname,
+      }),
+    });
+
+    if (!res.ok) {
+      throw new Error("Failed to register user");
+    }
+
+    return res.json();
+  }
+
   const { errors } = formState;
 
   const watchPassword = watch("password", "");
@@ -102,7 +110,7 @@ export default function RegisterForm({
             autoComplete="email"
             required
             {...register("email", { required: "This field is required" })}
-            label="email"
+            label="E-mail"
             error={errors.email?.message as string}
           />
         </div>