Merge pull request #230 from zitadel/qa

fix: use urlTemplate for reset password mail, fix error namespace for i18n
2025-12-11 22:22:31 +00:00 · 2024-10-18 12:26:02 +02:00
parent b1ad3ab374 ce79f8f170
commit 1f396dffec
17 changed files with 124 additions and 82 deletions
--- a/apps/login/src/app/(login)/mfa/page.tsx
+++ b/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) && (
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}

        {sessionFactors ? (
          <ChooseSecondFactor
--- a/apps/login/src/app/(login)/mfa/set/page.tsx
+++ b/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) && (
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}

-        {!valid && <Alert>{t("error.sessionExpired")}</Alert>}
+        {!valid && <Alert>{tError("sessionExpired")}</Alert>}

        {isSessionValid(sessionWithData).valid &&
          loginSettings &&
--- a/apps/login/src/app/(login)/otp/[method]/page.tsx
+++ b/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>
        )}

--- a/apps/login/src/app/(login)/otp/[method]/set/page.tsx
+++ b/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>
        )}

--- a/apps/login/src/app/(login)/passkey/page.tsx
+++ b/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) && (
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}

        {(loginName || sessionId) && (
          <LoginPasskey
--- a/apps/login/src/app/(login)/passkey/set/page.tsx
+++ b/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>
        )}

--- a/apps/login/src/app/(login)/password/change/page.tsx
+++ b/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>
--- a/apps/login/src/app/(login)/password/page.tsx
+++ b/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>
          )}

--- a/apps/login/src/app/(login)/password/set/page.tsx
+++ b/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) &&
-          !loginSettings?.ignoreUnknownUsernames && (
+        {loginName && !session && !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}
-            displayName={sessionFactors.factors?.user?.displayName}
+            loginName={loginName ?? session.factors?.user?.loginName}
+            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 &&
-        sessionFactors?.factors?.user?.id ? (
+        (loginName ?? user?.preferredLoginName) &&
+        (userId ?? session?.factors?.user?.id) ? (
          <SetPasswordForm
            code={code}
-            userId={sessionFactors.factors.user.id}
-            loginName={loginName}
+            userId={userId ?? (session?.factors?.user?.id as string)}
+            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>
--- a/apps/login/src/app/(login)/u2f/page.tsx
+++ b/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) && (
-          <Alert>{t("error:unknownContext")}</Alert>
-        )}
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}

        {(loginName || sessionId) && (
          <LoginPasskey
--- a/apps/login/src/app/(login)/u2f/set/page.tsx
+++ b/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>
        )}

--- a/apps/login/src/app/(login)/verify/page.tsx
+++ b/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>
        )}

--- a/apps/login/src/components/login-otp.tsx
+++ b/apps/login/src/components/login-otp.tsx
@@ -139,9 +139,10 @@ export function LoginOTP({
      organization,
      checks,
      authRequestId,
-    }).catch((error) => {
-      setError(error.message ?? "Could not verify OTP code");
+    }).catch(() => {
+      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);
        }
+      }
    });
  }

--- a/apps/login/src/components/password-form.tsx
+++ b/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;
    }

--- a/apps/login/src/components/set-password-form.tsx
+++ b/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({
--- a/apps/login/src/lib/server/password.ts
+++ b/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 = {
--- a/apps/login/src/lib/zitadel.ts
+++ b/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: {
-          notificationType: NotificationType.Email,
-        },
+        value: medium,
      },
    },
    {},