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,16 +25,6 @@ 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>
-        <p className="ztdl-p mb-6 block">{t("description")}</p>
-
-        {!userId && (
-          <div className="py-4">
-            <Alert>{tError("unknownContext")}</Alert>
-          </div>
-        )}
-
-        {userId ? (
         <VerifyEmailForm
           userId={userId}
           loginName={loginName}
@@ -47,12 +35,6 @@ export default async function Page({ searchParams }: { searchParams: any }) {
           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({
-    userId: userId,
-  });
+  const params = new URLSearchParams({});
+
+  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,6 +152,16 @@ export function VerifyEmailForm({
   }
 
   return !authMethods ? (
+    <>
+      <h1>{t("title")}</h1>
+      <p className="ztdl-p mb-6 block">{t("description")}</p>
+
+      {!userId && (
+        <div className="py-4">
+          <Alert>{tError("unknownContext")}</Alert>
+        </div>
+      )}
+
       <form className="w-full">
         <div className="">
           <TextInput
@@ -184,12 +200,18 @@ export function VerifyEmailForm({
           </Button>
         </div>
       </form>
+    </>
   ) : (
+    <>
+      <h1>{t("title")}</h1>
+      <p className="ztdl-p mb-6 block">{t("description")}</p>
+
       <div className="grid grid-cols-1 gap-5 w-full pt-4">
         {!authMethods.includes(AuthenticationMethodType.PASSWORD) &&
           PASSWORD(false, "/password/set?" + params)}
         {!authMethods.includes(AuthenticationMethodType.PASSKEY) &&
           PASSKEYS(false, "/passkeys/set?" + params)}
       </div>
+    </>
   );
 }