form submit, addhumanuser implementation

apps/login/ui/RegisterForm.tsx

@@ -2,47 +2,141 @@
 
 import { PasswordComplexityPolicy, PrivacyPolicy } from "@zitadel/server";
 import PasswordComplexity from "./PasswordComplexity";
-import { useState } from "react";
+import { use, useState } from "react";
 import { Button, ButtonVariants } from "./Button";
 import { TextInput } from "./Input";
 import { PrivacyPolicyCheckboxes } from "./PrivacyPolicyCheckboxes";
+import { FieldValues, useForm } from "react-hook-form";
+import {
+  lowerCaseValidator,
+  numberValidator,
+  symbolValidator,
+  upperCaseValidator,
+} from "#/utils/validators";
+import { addHumanUser, server } from "#/lib/zitadel";
+
+type Inputs =
+  | {
+      firstname: string;
+      lastname: string;
+      email: string;
+      password: string;
+      confirmPassword: string;
+    }
+  | FieldValues;
 
 type Props = {
   privacyPolicy: PrivacyPolicy;
   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,
 }: Props) {
+  const { register, handleSubmit, watch, formState } = useForm<Inputs>({
+    mode: "onBlur",
+  });
+
+  const { errors } = formState;
+
+  const watchPassword = watch("password", "");
+  const watchConfirmPassword = watch("confirmPassword", "");
+
   const [tosAndPolicyAccepted, setTosAndPolicyAccepted] = useState(false);
 
+  const hasMinLength =
+    passwordComplexityPolicy &&
+    watchPassword?.length >= passwordComplexityPolicy.minLength;
+  const hasSymbol = symbolValidator(watchPassword);
+  const hasNumber = numberValidator(watchPassword);
+  const hasUppercase = upperCaseValidator(watchPassword);
+  const hasLowercase = lowerCaseValidator(watchPassword);
+
+  const policyIsValid =
+    passwordComplexityPolicy &&
+    (passwordComplexityPolicy.hasLowercase ? hasLowercase : true) &&
+    (passwordComplexityPolicy.hasNumber ? hasNumber : true) &&
+    (passwordComplexityPolicy.hasUppercase ? hasUppercase : true) &&
+    (passwordComplexityPolicy.hasSymbol ? hasSymbol : true) &&
+    hasMinLength;
+
   return (
     <form className="w-full">
       <div className="grid grid-cols-2 gap-4 mb-4">
         <div className="">
-          <TextInput label="Firstname" />
+          <TextInput
+            type="firstname"
+            autoComplete="firstname"
+            required
+            {...register("firstname", { required: "This field is required" })}
+            label="First name"
+            error={errors.firstname?.message as string}
+          />
         </div>
         <div className="">
-          <TextInput label="Lastname" />
+          <TextInput
+            type="lastname"
+            autoComplete="lastname"
+            required
+            {...register("lastname", { required: "This field is required" })}
+            label="Last name"
+            error={errors.lastname?.message as string}
+          />
         </div>
         <div className="col-span-2">
-          <TextInput label="Email" />
+          <TextInput
+            type="email"
+            autoComplete="email"
+            required
+            {...register("email", { required: "This field is required" })}
+            label="email"
+            error={errors.email?.message as string}
+          />
         </div>
         <div className="">
-          <TextInput label="Password" />
+          <TextInput
+            type="password"
+            autoComplete="new-password"
+            required
+            {...register("password", {
+              required: "You have to provide a password!",
+            })}
+            label="Password"
+            error={errors.password?.message as string}
+          />
         </div>
         <div className="">
-          <TextInput label="Password Confirmation" />
+          <TextInput
+            type="password"
+            required
+            autoComplete="new-password"
+            {...register("confirmPassword", {
+              required: "This field is required",
+            })}
+            label="Confirm Password"
+            error={errors.confirmPassword?.message as string}
+          />
         </div>
       </div>
 
       {passwordComplexityPolicy && (
         <PasswordComplexity
           passwordComplexityPolicy={passwordComplexityPolicy}
-          password={""}
-          equals={false}
+          password={watchPassword}
+          equals={!!watchPassword && watchPassword === watchConfirmPassword}
         />
       )}
 
@@ -57,7 +151,17 @@ export default function RegisterForm({
         <Button type="button" variant={ButtonVariants.Secondary}>
           back
         </Button>
-        <Button type="submit" variant={ButtonVariants.Primary}>
+        <Button
+          type="submit"
+          variant={ButtonVariants.Primary}
+          disabled={
+            !policyIsValid ||
+            !formState.isValid ||
+            !tosAndPolicyAccepted ||
+            watchPassword !== watchConfirmPassword
+          }
+          onClick={handleSubmit(submitRegister)}
+        >
           continue
         </Button>
       </div>