Merge pull request #230 from zitadel/qa

fix: use urlTemplate for reset password mail, fix error namespace for i18n

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

@@ -19,6 +19,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "mfa" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, authRequestId, organization, sessionId } = searchParams;
 
@@ -84,9 +85,7 @@ export default async function Page({
           ></UserAvatar>
         )}
 
-        {!(loginName || sessionId) && (
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
 
         {sessionFactors ? (
           <ChooseSecondFactor

apps/login/src/app/(login)/mfa/set/page.tsx

@@ -39,6 +39,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "mfa" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const {
     loginName,
@@ -121,11 +122,9 @@ export default async function Page({
           ></UserAvatar>
         )}
 
-        {!(loginName || sessionId) && (
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
 
-        {!valid && <Alert>{t("error.sessionExpired")}</Alert>}
+        {!valid && <Alert>{tError("sessionExpired")}</Alert>}
 
         {isSessionValid(sessionWithData).valid &&
           loginSettings &&

apps/login/src/app/(login)/otp/[method]/page.tsx

@@ -15,6 +15,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "otp" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, authRequestId, sessionId, organization, code, submit } =
     searchParams;
@@ -44,7 +45,7 @@ export default async function Page({
 
         {!session && (
           <div className="py-4">
-            <Alert>{t("error:unknownContext")}</Alert>
+            <Alert>{tError("unknownContext")}</Alert>
           </div>
         )}
 

apps/login/src/app/(login)/otp/[method]/set/page.tsx

@@ -25,6 +25,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "otp" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, organization, sessionId, authRequestId, checkAfter } =
     searchParams;
@@ -105,7 +106,7 @@ export default async function Page({
         <h1>{t("set.title")}</h1>
         {!session && (
           <div className="py-4">
-            <Alert>{t("error:unknownContext")}</Alert>
+            <Alert>{tError("unknownContext")}</Alert>
           </div>
         )}
 

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

@@ -14,6 +14,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "passkey" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, altPassword, authRequestId, organization, sessionId } =
     searchParams;
@@ -51,9 +52,7 @@ export default async function Page({
         )}
         <p className="ztdl-p mb-6 block">{t("verify.description")}</p>
 
-        {!(loginName || sessionId) && (
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
 
         {(loginName || sessionId) && (
           <LoginPasskey

apps/login/src/app/(login)/passkey/set/page.tsx

@@ -13,6 +13,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "passkey" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, prompt, organization, authRequestId } = searchParams;
 
@@ -53,7 +54,7 @@ export default async function Page({
 
         {!session && (
           <div className="py-4">
-            <Alert>{t("error:unknownContext")}</Alert>
+            <Alert>{tError("unknownContext")}</Alert>
           </div>
         )}
 

apps/login/src/app/(login)/password/change/page.tsx

@@ -17,6 +17,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "password" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, organization, authRequestId, code } = searchParams;
 
@@ -46,7 +47,7 @@ export default async function Page({
         {(!sessionFactors || !loginName) &&
           !loginSettings?.ignoreUnknownUsernames && (
             <div className="py-4">
-              <Alert>{t("error:unknownContext")}</Alert>
+              <Alert>{tError("unknownContext")}</Alert>
             </div>
           )}
 
@@ -71,7 +72,7 @@ export default async function Page({
           />
         ) : (
           <div className="py-4">
-            <Alert>{t("error:failedLoading")}</Alert>
+            <Alert>{tError("failedLoading")}</Alert>
           </div>
         )}
       </div>

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

@@ -14,6 +14,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "password" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, organization, authRequestId, alt } = searchParams;
 
@@ -44,7 +45,7 @@ export default async function Page({
         {(!sessionFactors || !loginName) &&
           !loginSettings?.ignoreUnknownUsernames && (
             <div className="py-4">
-              <Alert>{t("error:unknownContext")}</Alert>
+              <Alert>{tError("unknownContext")}</Alert>
             </div>
           )}
 

apps/login/src/app/(login)/password/set/page.tsx

@@ -7,7 +7,10 @@ import {
   getBrandingSettings,
   getLoginSettings,
   getPasswordComplexitySettings,
+  getUserByID,
 } from "@/lib/zitadel";
+import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
+import { HumanUser, User } from "@zitadel/proto/zitadel/user/v2/user_pb";
 import { getLocale, getTranslations } from "next-intl/server";
 
 export default async function Page({
@@ -17,62 +20,83 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "password" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
-  const { loginName, organization, authRequestId, code } = searchParams;
+  const { userId, loginName, organization, authRequestId, code } = searchParams;
 
   // also allow no session to be found (ignoreUnkownUsername)
-  const sessionFactors = await loadMostRecentSession({
+  let session: Session | undefined;
+  if (loginName) {
+    session = await loadMostRecentSession({
       loginName,
       organization,
     });
+  }
 
   const branding = await getBrandingSettings(organization);
 
   const passwordComplexity = await getPasswordComplexitySettings(
-    sessionFactors?.factors?.user?.organizationId,
+    session?.factors?.user?.organizationId,
   );
 
   const loginSettings = await getLoginSettings(organization);
 
+  let user: User | undefined;
+  let displayName: string | undefined;
+  if (userId) {
+    const userResponse = await getUserByID(userId);
+    user = userResponse.user;
+
+    if (user?.type.case === "human") {
+      displayName = (user.type.value as HumanUser).profile?.displayName;
+    }
+  }
+
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{sessionFactors?.factors?.user?.displayName ?? t("set.title")}</h1>
+        <h1>{session?.factors?.user?.displayName ?? t("set.title")}</h1>
         <p className="ztdl-p mb-6 block">{t("set.description")}</p>
 
         {/* show error only if usernames should be shown to be unknown */}
-        {(!sessionFactors || !loginName) &&
+        {loginName && !session && !loginSettings?.ignoreUnknownUsernames && (
-          !loginSettings?.ignoreUnknownUsernames && (
           <div className="py-4">
-              <Alert>{t("error:unknownContext")}</Alert>
+            <Alert>{tError("unknownContext")}</Alert>
           </div>
         )}
 
-        {sessionFactors && (
+        {session ? (
           <UserAvatar
-            loginName={loginName ?? sessionFactors.factors?.user?.loginName}
+            loginName={loginName ?? session.factors?.user?.loginName}
-            displayName={sessionFactors.factors?.user?.displayName}
+            displayName={session.factors?.user?.displayName}
             showDropdown
             searchParams={searchParams}
           ></UserAvatar>
-        )}
+        ) : user ? (
+          <UserAvatar
+            loginName={user?.preferredLoginName}
+            displayName={displayName}
+            showDropdown
+            searchParams={searchParams}
+          ></UserAvatar>
+        ) : null}
 
         <Alert type={AlertType.INFO}>{t("set.codeSent")}</Alert>
 
         {passwordComplexity &&
-        loginName &&
+        (loginName ?? user?.preferredLoginName) &&
-        sessionFactors?.factors?.user?.id ? (
+        (userId ?? session?.factors?.user?.id) ? (
           <SetPasswordForm
             code={code}
-            userId={sessionFactors.factors.user.id}
+            userId={userId ?? (session?.factors?.user?.id as string)}
-            loginName={loginName}
+            loginName={loginName ?? (user?.preferredLoginName as string)}
             authRequestId={authRequestId}
             organization={organization}
             passwordComplexitySettings={passwordComplexity}
           />
         ) : (
           <div className="py-4">
-            <Alert>{t("error:failedLoading")}</Alert>
+            <Alert>{tError("failedLoading")}</Alert>
           </div>
         )}
       </div>

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

@@ -14,6 +14,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "u2f" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, authRequestId, sessionId, organization } = searchParams;
 
@@ -50,9 +51,7 @@ export default async function Page({
         )}
         <p className="ztdl-p mb-6 block">{t("verify.description")}</p>
 
-        {!(loginName || sessionId) && (
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
 
         {(loginName || sessionId) && (
           <LoginPasskey

apps/login/src/app/(login)/u2f/set/page.tsx

@@ -13,6 +13,7 @@ export default async function Page({
 }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "u2f" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const { loginName, organization, authRequestId, checkAfter } = searchParams;
 
@@ -40,7 +41,7 @@ export default async function Page({
 
         {!sessionFactors && (
           <div className="py-4">
-            <Alert>{t("error:unknownContext")}</Alert>
+            <Alert>{tError("unknownContext")}</Alert>
           </div>
         )}
 

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

@@ -8,6 +8,7 @@ import { getLocale, getTranslations } from "next-intl/server";
 export default async function Page({ searchParams }: { searchParams: any }) {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "verify" });
+  const tError = await getTranslations({ locale, namespace: "error" });
 
   const {
     userId,
@@ -31,7 +32,7 @@ export default async function Page({ searchParams }: { searchParams: any }) {
 
         {!userId && (
           <div className="py-4">
-            <Alert>{t("error:unknownContext")}</Alert>
+            <Alert>{tError("unknownContext")}</Alert>
           </div>
         )}
 

apps/login/src/components/login-otp.tsx

@@ -139,9 +139,10 @@ export function LoginOTP({
       organization,
       checks,
       authRequestId,
-    }).catch((error) => {
+    }).catch(() => {
-      setError(error.message ?? "Could not verify OTP code");
+      setError("Could not verify OTP code");
       setLoading(false);
+      return;
     });
 
     setLoading(false);
@@ -151,6 +152,7 @@ export function LoginOTP({
 
   function setCodeAndContinue(values: Inputs, organization?: string) {
     return submitCode(values, organization).then((response) => {
+      if (response) {
         if (authRequestId && response && response.sessionId) {
           const params = new URLSearchParams({
             sessionId: response.sessionId,
@@ -185,6 +187,7 @@ export function LoginOTP({
 
           return router.push(`/signedin?` + params);
         }
+      }
     });
   }
 

apps/login/src/components/password-form.tsx

@@ -85,13 +85,13 @@ export function PasswordForm({
       organization,
     }).catch(() => {
       setError("Could not reset password");
+      return;
     });
 
     setLoading(false);
 
     if (response && "error" in response) {
       setError(response.error);
-
       return;
     }
 

apps/login/src/components/set-password-form.tsx

@@ -11,7 +11,6 @@ import { create } from "@zitadel/client";
 import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
 import { Alert } from "./alert";
@@ -58,8 +57,6 @@ export function SetPasswordForm({
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
 
-  const router = useRouter();
-
   async function submitRegister(values: Inputs) {
     setLoading(true);
     const changeResponse = await changePassword({

apps/login/src/lib/server/password.ts

@@ -18,6 +18,7 @@ import {
 } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { User, UserState } from "@zitadel/proto/zitadel/user/v2/user_pb";
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 import { getSessionCookieByLoginName } from "../cookies";
 
@@ -27,6 +28,8 @@ type ResetPasswordCommand = {
 };
 
 export async function resetPassword(command: ResetPasswordCommand) {
+  const host = headers().get("host");
+
   const users = await listUsers({
     loginName: command.loginName,
     organizationId: command.organization,
@@ -41,7 +44,7 @@ export async function resetPassword(command: ResetPasswordCommand) {
   }
   const userId = users.result[0].userId;
 
-  return passwordReset(userId);
+  return passwordReset(userId, host);
 }
 
 export type UpdateSessionCommand = {

apps/login/src/lib/zitadel.ts

@@ -28,7 +28,10 @@ import {
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { PasswordComplexitySettingsSchema } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 import type { RedirectURLsJson } from "@zitadel/proto/zitadel/user/v2/idp_pb";
-import { NotificationType } from "@zitadel/proto/zitadel/user/v2/password_pb";
+import {
+  NotificationType,
+  SendPasswordResetLinkSchema,
+} from "@zitadel/proto/zitadel/user/v2/password_pb";
 import {
   SearchQuery,
   SearchQuerySchema,
@@ -492,15 +495,24 @@ export function createUser(
  * @param userId the id of the user where the email should be set
  * @returns the newly set email
  */
-export async function passwordReset(userId: string) {
+export async function passwordReset(userId: string, host: string | null) {
+  let medium = create(SendPasswordResetLinkSchema, {
+    notificationType: NotificationType.Email,
+  });
+
+  if (host) {
+    medium = {
+      ...medium,
+      urlTemplate: `https://${host}/password/set?code={{.Code}}&userId={{.UserID}}&organization={{.OrgID}}`,
+    };
+  }
+
   return userService.passwordReset(
     {
       userId,
       medium: {
         case: "sendLink",
-        value: {
+        value: medium,
-          notificationType: NotificationType.Email,
-        },
       },
     },
     {},