verify email

apps/login/ui/PrivacyPolicyCheckboxes.tsx

@@ -2,10 +2,10 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import { Checkbox } from "./Checkbox";
-import { PrivacyPolicy } from "@zitadel/server";
+import { LegalAndSupportSettings } from "@zitadel/server";
 
 type Props = {
-  privacyPolicy: PrivacyPolicy;
+  legal: LegalAndSupportSettings;
   onChange: (allAccepted: boolean) => void;
 };
 
@@ -14,7 +14,7 @@ type AcceptanceState = {
   privacyPolicyAccepted: boolean;
 };
 
-export function PrivacyPolicyCheckboxes({ privacyPolicy, onChange }: Props) {
+export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
   const [acceptanceState, setAcceptanceState] = useState<AcceptanceState>({
     tosAccepted: false,
     privacyPolicyAccepted: false,
@@ -24,9 +24,9 @@ export function PrivacyPolicyCheckboxes({ privacyPolicy, onChange }: Props) {
     <>
       <p className="flex flex-row items-center text-text-light-secondary-500 dark:text-text-dark-secondary-500 mt-4 text-sm">
         To register you must agree to the terms and conditions
-        {privacyPolicy?.helpLink && (
+        {legal?.helpLink && (
           <span>
-            <Link href={privacyPolicy.helpLink} target="_blank">
+            <Link href={legal.helpLink} target="_blank">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -45,7 +45,7 @@ export function PrivacyPolicyCheckboxes({ privacyPolicy, onChange }: Props) {
           </span>
         )}
       </p>
-      {privacyPolicy?.tosLink && (
+      {legal?.tosLink && (
         <div className="mt-4 flex items-center">
           <Checkbox
             className="mr-4"
@@ -62,18 +62,14 @@ export function PrivacyPolicyCheckboxes({ privacyPolicy, onChange }: Props) {
           <div className="mr-4 w-[28rem]">
             <p className="text-sm text-text-light-500 dark:text-text-dark-500">
               Agree&nbsp;
-              <Link
-                href={privacyPolicy.tosLink}
-                className="underline"
-                target="_blank"
-              >
+              <Link href={legal.tosLink} className="underline" target="_blank">
                 Terms of Service
               </Link>
             </p>
           </div>
         </div>
       )}
-      {privacyPolicy?.privacyLink && (
+      {legal?.privacyPolicyLink && (
         <div className="mt-4 flex items-center">
           <Checkbox
             className="mr-4"
@@ -91,7 +87,7 @@ export function PrivacyPolicyCheckboxes({ privacyPolicy, onChange }: Props) {
             <p className="text-sm text-text-light-500 dark:text-text-dark-500">
               Agree&nbsp;
               <Link
-                href={privacyPolicy.privacyLink}
+                href={legal.privacyPolicyLink}
                 className="underline"
                 target="_blank"
               >

apps/login/ui/RegisterForm.tsx

@@ -30,12 +30,12 @@ type Inputs =
   | FieldValues;
 
 type Props = {
-  privacyPolicy: LegalAndSupportSettings;
+  legal: LegalAndSupportSettings;
   passwordComplexityPolicy: PasswordComplexitySettings;
 };
 
 export default function RegisterForm({
-  privacyPolicy,
+  legal,
   passwordComplexityPolicy,
 }: Props) {
   const { register, handleSubmit, watch, formState } = useForm<Inputs>({
@@ -166,9 +166,9 @@ export default function RegisterForm({
         />
       )}
 
-      {privacyPolicy && (
+      {legal && (
         <PrivacyPolicyCheckboxes
-          privacyPolicy={privacyPolicy}
+          legal={legal}
           onChange={setTosAndPolicyAccepted}
         />
       )}

apps/login/ui/VerifyEmailForm.tsx

@@ -0,0 +1,90 @@
+"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 = {
+  code: string;
+};
+
+type Props = {
+  userId: string;
+};
+
+export default function VerifyEmailForm({ userId }: Props) {
+  const { register, handleSubmit, formState } = useForm<Inputs>({
+    mode: "onBlur",
+  });
+
+  const [error, setError] = useState<string>("");
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const router = useRouter();
+
+  async function submitCode(values: Inputs) {
+    setLoading(true);
+    const res = await fetch("/email/verify", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        code: values.code,
+        userId,
+      }),
+    });
+
+    if (!res.ok) {
+      setLoading(false);
+      throw new Error("Failed to verify email");
+    }
+
+    setLoading(false);
+    return res.json();
+  }
+
+  function submitCodeAndContinue(value: Inputs): Promise<boolean | void> {
+    console.log(value);
+    return submitCode(value).then((resp: any) => {
+      return router.push(`/accounts`);
+    });
+  }
+
+  const { errors } = formState;
+
+  return (
+    <form className="w-full">
+      <div className="">
+        <TextInput
+          type="text"
+          autoComplete="one-time-code"
+          {...register("code", { required: "This field is required" })}
+          label="Code"
+          //   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(submitCodeAndContinue)}
+        >
+          {loading && <Spinner className="h-5 w-5 mr-2" />}
+          continue
+        </Button>
+      </div>
+    </form>
+  );
+}