component wrapping

apps/login/src/app/(login)/verify/page.tsx

@@ -1,8 +1,6 @@
-import { Alert } from "@/components/alert";
 import { DynamicTheme } from "@/components/dynamic-theme";
 import { VerifyEmailForm } from "@/components/verify-email-form";
 import { getBrandingSettings, getLoginSettings } from "@/lib/zitadel";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { getLocale, getTranslations } from "next-intl/server";
 
 export default async function Page({ searchParams }: { searchParams: any }) {
@@ -27,32 +25,16 @@ export default async function Page({ searchParams }: { searchParams: any }) {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("title")}</h1>
+        <VerifyEmailForm
-        <p className="ztdl-p mb-6 block">{t("description")}</p>
+          userId={userId}
-
+          loginName={loginName}
-        {!userId && (
+          code={code}
-          <div className="py-4">
+          organization={organization}
-            <Alert>{tError("unknownContext")}</Alert>
+          authRequestId={authRequestId}
-          </div>
+          sessionId={sessionId}
-        )}
+          loginSettings={loginSettings}
-
+          isInvite={invite === "true"}
-        {userId ? (
+        />
-          <VerifyEmailForm
-            userId={userId}
-            loginName={loginName}
-            code={code}
-            organization={organization}
-            authRequestId={authRequestId}
-            sessionId={sessionId}
-            loginSettings={loginSettings}
-            isInvite={invite === "true"}
-          />
-        ) : (
-          <div className="w-full flex flex-row items-center justify-center border border-yellow-600/40 dark:border-yellow-500/20 bg-yellow-200/30 text-yellow-600 dark:bg-yellow-700/20 dark:text-yellow-200 rounded-md py-2 scroll-px-40">
-            <ExclamationTriangleIcon className="h-5 w-5 mr-2" />
-            <span className="text-center text-sm">{t("userIdMissing")}</span>
-          </div>
-        )}
       </div>
     </DynamicTheme>
   );

apps/login/src/components/verify-email-form.tsx

@@ -18,7 +18,7 @@ type Inputs = {
 };
 
 type Props = {
-  userId: string;
+  userId?: string;
   loginName: string;
   code: string;
   organization?: string;
@@ -39,6 +39,7 @@ export function VerifyEmailForm({
   isInvite,
 }: Props) {
   const t = useTranslations("verify");
+  const tError = useTranslations("error");
 
   const { register, handleSubmit, formState } = useForm<Inputs>({
     mode: "onBlur",
@@ -65,9 +66,11 @@ export function VerifyEmailForm({
 
   const router = useRouter();
 
-  const params = new URLSearchParams({
+  const params = new URLSearchParams({});
-    userId: userId,
+
-  });
+  if (userId) {
+    params.append("userId", userId);
+  }
 
   if (isInvite) {
     params.append("initial", "true");
@@ -128,10 +131,13 @@ export function VerifyEmailForm({
 
     // if auth methods fall trough, we complete to login
     const params = new URLSearchParams({
-      userId: userId,
       initial: "true", // defines that a code is not required and is therefore not shown in the UI
     });
 
+    if (userId) {
+      params.set("userId", userId);
+    }
+
     if (organization) {
       params.set("organization", organization);
     }
@@ -146,50 +152,66 @@ export function VerifyEmailForm({
   }
 
   return !authMethods ? (
-    <form className="w-full">
+    <>
-      <div className="">
+      <h1>{t("title")}</h1>
-        <TextInput
+      <p className="ztdl-p mb-6 block">{t("description")}</p>
-          type="text"
-          autoComplete="one-time-code"
-          {...register("code", { required: "This field is required" })}
-          label="Code"
-          //   error={errors.username?.message as string}
-        />
-      </div>
 
-      {error && (
+      {!userId && (
         <div className="py-4">
-          <Alert>{error}</Alert>
+          <Alert>{tError("unknownContext")}</Alert>
         </div>
       )}
 
-      <div className="mt-8 flex w-full flex-row items-center">
+      <form className="w-full">
-        <Button
+        <div className="">
-          type="button"
+          <TextInput
-          onClick={() => resendCode()}
+            type="text"
-          variant={ButtonVariants.Secondary}
+            autoComplete="one-time-code"
-        >
+            {...register("code", { required: "This field is required" })}
-          {t("resendCode")}
+            label="Code"
-        </Button>
+            //   error={errors.username?.message as string}
-        <span className="flex-grow"></span>
+          />
-        <Button
+        </div>
-          type="submit"
+
-          className="self-end"
+        {error && (
-          variant={ButtonVariants.Primary}
+          <div className="py-4">
-          disabled={loading || !formState.isValid}
+            <Alert>{error}</Alert>
-          onClick={handleSubmit(submitCodeAndContinue)}
+          </div>
-        >
+        )}
-          {loading && <Spinner className="h-5 w-5 mr-2" />}
+
-          {t("submit")}
+        <div className="mt-8 flex w-full flex-row items-center">
-        </Button>
+          <Button
-      </div>
+            type="button"
-    </form>
+            onClick={() => resendCode()}
+            variant={ButtonVariants.Secondary}
+          >
+            {t("resendCode")}
+          </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" />}
+            {t("submit")}
+          </Button>
+        </div>
+      </form>
+    </>
   ) : (
-    <div className="grid grid-cols-1 gap-5 w-full pt-4">
+    <>
-      {!authMethods.includes(AuthenticationMethodType.PASSWORD) &&
+      <h1>{t("title")}</h1>
-        PASSWORD(false, "/password/set?" + params)}
+      <p className="ztdl-p mb-6 block">{t("description")}</p>
-      {!authMethods.includes(AuthenticationMethodType.PASSKEY) &&
+
-        PASSKEYS(false, "/passkeys/set?" + params)}
+      <div className="grid grid-cols-1 gap-5 w-full pt-4">
-    </div>
+        {!authMethods.includes(AuthenticationMethodType.PASSWORD) &&
+          PASSWORD(false, "/password/set?" + params)}
+        {!authMethods.includes(AuthenticationMethodType.PASSKEY) &&
+          PASSKEYS(false, "/passkeys/set?" + params)}
+      </div>
+    </>
   );
 }