ldap components

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

@@ -10,7 +10,6 @@ import {
   getLoginSettings,
 } from "@/lib/zitadel";
 import { Organization } from "@zitadel/proto/zitadel/org/v2/org_pb";
-import { PasskeysType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { getLocale, getTranslations } from "next-intl/server";
 import { headers } from "next/headers";
 
@@ -22,7 +21,7 @@ export default async function Page(props: {
   const t = await getTranslations({ locale, namespace: "password" });
   const tError = await getTranslations({ locale, namespace: "error" });
 
-  let { loginName, organization, requestId, alt } = searchParams;
+  let { loginName, organization, requestId } = searchParams;
 
   const _headers = await headers();
   const { serviceUrl } = getServiceUrlFromHeaders(_headers);
@@ -93,10 +92,6 @@ export default async function Page(props: {
             requestId={requestId}
             organization={organization} // stick to "organization" as we still want to do user discovery based on the searchParams not the default organization, later the organization is determined by the found user
             loginSettings={loginSettings}
-            promptPasswordless={
-              loginSettings?.passkeysType == PasskeysType.ALLOWED
-            }
-            isAlternative={alt === "true"}
           />
         )}
       </div>

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

@@ -210,26 +210,26 @@ export function LoginPasskey({
             type="button"
             variant={ButtonVariants.Secondary}
             onClick={() => {
-              const params: any = { alt: "true" };
+              const params = new URLSearchParams();
 
               if (loginName) {
-                params.loginName = loginName;
+                params.append("loginName", loginName);
               }
 
               if (sessionId) {
-                params.sessionId = sessionId;
+                params.append("sessionId", sessionId);
               }
 
               if (requestId) {
-                params.requestId = requestId;
+                params.append("requestId", requestId);
               }
 
               if (organization) {
-                params.organization = organization;
+                params.append("organization", organization);
               }
 
               return router.push(
-                "/password?" + new URLSearchParams(params), // alt is set because password is requested as alternative auth method, so passwordless prompt can be escaped
+                "/password?" + params, // alt is set because password is requested as alternative auth method, so passwordless prompt can be escaped
               );
             }}
             data-testid="password-button"

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

@@ -23,8 +23,6 @@ type Props = {
   loginName: string;
   organization?: string;
   requestId?: string;
-  isAlternative?: boolean; // whether password was requested as alternative auth method
-  promptPasswordless?: boolean;
 };
 
 export function PasswordForm({
@@ -32,8 +30,6 @@ export function PasswordForm({
   loginName,
   organization,
   requestId,
-  promptPasswordless,
-  isAlternative,
 }: Props) {
   const t = useTranslations("password");
 

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

@@ -0,0 +1,120 @@
+"use client";
+
+import { sendPassword } from "@/lib/server/password";
+import { create } from "@zitadel/client";
+import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
+import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Alert } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { Spinner } from "./spinner";
+
+type Inputs = {
+  loginName: string;
+  password: string;
+};
+
+type Props = {
+  loginSettings: LoginSettings | undefined;
+  loginName: string;
+  organization?: string;
+  requestId?: string;
+};
+
+export function UsernamePasswordForm({
+  loginSettings,
+  loginName,
+  organization,
+  requestId,
+}: Props) {
+  const t = useTranslations("password");
+
+  const { register, handleSubmit, formState } = useForm<Inputs>({
+    mode: "onBlur",
+  });
+
+  const [error, setError] = useState<string>("");
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const router = useRouter();
+
+  async function submitUsernamePassword(values: Inputs) {
+    setError("");
+    setLoading(true);
+
+    const response = await sendPassword({
+      loginName,
+      organization,
+      checks: create(ChecksSchema, {
+        password: { password: values.password },
+      }),
+      requestId,
+    })
+      .catch(() => {
+        setError("Could not verify password");
+        return;
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+
+    if (response && "error" in response && response.error) {
+      setError(response.error);
+      return;
+    }
+
+    if (response && "redirect" in response && response.redirect) {
+      return router.push(response.redirect);
+    }
+  }
+
+  return (
+    <form className="w-full">
+      <TextInput
+        type="text"
+        autoComplete="username"
+        {...register("loginName", { required: "This field is required" })}
+        label={"Loginname"}
+        data-testid="username-text-input"
+      />
+
+      <div className={`${error && "transform-gpu animate-shake"}`}>
+        <TextInput
+          type="password"
+          autoComplete="password"
+          {...register("password", { required: "This field is required" })}
+          label="Password"
+          data-testid="password-text-input"
+        />
+      </div>
+
+      {error && (
+        <div className="py-4" data-testid="error">
+          <Alert>{error}</Alert>
+        </div>
+      )}
+
+      <div className="mt-8 flex w-full flex-row items-center">
+        <BackButton data-testid="back-button" />
+        <span className="flex-grow"></span>
+        <Button
+          type="submit"
+          className="self-end"
+          variant={ButtonVariants.Primary}
+          disabled={loading || !formState.isValid}
+          onClick={handleSubmit(submitUsernamePassword)}
+          data-testid="submit-button"
+        >
+          {loading && <Spinner className="h-5 w-5 mr-2" />}
+          {t("verify.submit")}
+        </Button>
+      </div>
+    </form>
+  );
+}