fix hydration issue for IDPs, i18n

apps/login/locales/de.json

@@ -37,6 +37,7 @@
   "idp": {
     "title": "Mit SSO anmelden",
     "description": "Wählen Sie einen der folgenden Anbieter, um sich anzumelden",
+    "orSignInWith": "oder melden Sie sich an mit",
     "signInWithApple": "Mit Apple anmelden",
     "signInWithGoogle": "Mit Google anmelden",
     "signInWithAzureAD": "Mit AzureAD anmelden",

apps/login/locales/en.json

@@ -37,6 +37,7 @@
   "idp": {
     "title": "Sign in with SSO",
     "description": "Select one of the following providers to sign in",
+    "orSignInWith": "or sign in with",
     "signInWithApple": "Sign in with Apple",
     "signInWithGoogle": "Sign in with Google",
     "signInWithAzureAD": "Sign in with AzureAD",

apps/login/locales/es.json

@@ -37,6 +37,7 @@
   "idp": {
     "title": "Iniciar sesión con SSO",
     "description": "Selecciona uno de los siguientes proveedores para iniciar sesión",
+    "orSignInWith": "o iniciar sesión con",
     "signInWithApple": "Iniciar sesión con Apple",
     "signInWithGoogle": "Iniciar sesión con Google",
     "signInWithAzureAD": "Iniciar sesión con AzureAD",

apps/login/locales/it.json

@@ -37,6 +37,7 @@
   "idp": {
     "title": "Accedi con SSO",
     "description": "Seleziona uno dei seguenti provider per accedere",
+    "orSignInWith": "o accedi con",
     "signInWithApple": "Accedi con Apple",
     "signInWithGoogle": "Accedi con Google",
     "signInWithAzureAD": "Accedi con AzureAD",

apps/login/locales/pl.json

@@ -37,6 +37,7 @@
   "idp": {
     "title": "Zaloguj się za pomocą SSO",
     "description": "Wybierz jednego z poniższych dostawców, aby się zalogować",
+    "orSignInWith": "lub zaloguj się przez",
     "signInWithApple": "Zaloguj się przez Apple",
     "signInWithGoogle": "Zaloguj się przez Google",
     "signInWithAzureAD": "Zaloguj się przez AzureAD",

apps/login/locales/ru.json

@@ -37,6 +37,7 @@
   "idp": {
     "title": "Войти через SSO",
     "description": "Выберите одного из провайдеров для входа",
+    "orSignInWith": "или войти через",
     "signInWithApple": "Войти через Apple",
     "signInWithGoogle": "Войти через Google",
     "signInWithAzureAD": "Войти через AzureAD",

apps/login/locales/zh.json

@@ -37,6 +37,7 @@
   "idp": {
     "title": "使用 SSO 登录",
     "description": "选择以下提供商中的一个进行登录",
+    "orSignInWith": "或使用以下方式登录",
     "signInWithApple": "用 Apple 登录",
     "signInWithGoogle": "用 Google 登录",
     "signInWithAzureAD": "用 AzureAD 登录",

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

@@ -74,15 +74,17 @@ export default async function Page(props: {
           suffix={suffix}
           submit={submit}
           allowRegister={!!loginSettings?.allowRegister}
-        >
-          {identityProviders && (
+        ></UsernameForm>
+
+        {identityProviders && (
+          <div className="w-full pt-6 pb-4">
             <SignInWithIdp
               identityProviders={identityProviders}
               requestId={requestId}
               organization={organization}
             ></SignInWithIdp>
-          )}
-        </UsernameForm>
+          </div>
+        )}
       </div>
     </DynamicTheme>
   );

apps/login/src/components/sign-in-with-idp.tsx

@@ -6,6 +6,7 @@ import {
   IdentityProvider,
   IdentityProviderType,
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { useTranslations } from "next-intl";
 import { ReactNode, useActionState } from "react";
 import { Alert } from "./alert";
 import { SignInWithIdentityProviderProps } from "./idps/base-button";
@@ -31,6 +32,7 @@ export function SignInWithIdp({
   linkOnly,
 }: Readonly<SignInWithIDPProps>) {
   const [state, action, _isPending] = useActionState(redirectToIdp, {});
+  const t = useTranslations("idp");
 
   const renderIDPButton = (idp: IdentityProvider, index: number) => {
     const { id, name, type } = idp;
@@ -53,6 +55,7 @@ export function SignInWithIdp({
       [IdentityProviderType.GITLAB]: SignInWithGitlab,
       [IdentityProviderType.GITLAB_SELF_HOSTED]: SignInWithGitlab,
       [IdentityProviderType.SAML]: SignInWithGeneric,
+      [IdentityProviderType.LDAP]: SignInWithGeneric,
     };
 
     const Component = components[type];
@@ -74,6 +77,7 @@ export function SignInWithIdp({
 
   return (
     <div className="flex flex-col w-full space-y-2 text-sm">
+      <p className="text-center ztdl-p">{t("orSignInWith")}</p>
       {!!identityProviders.length && identityProviders?.map(renderIDPButton)}
       {state?.error && (
         <div className="py-4">

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

@@ -137,9 +137,6 @@ export function UsernameForm({
           <Alert>{error}</Alert>
         </div>
       )}
-
-      <div className="pt-6 pb-4">{children}</div>
-
       <div className="mt-4 flex w-full flex-row items-center">
         <BackButton data-testid="back-button" />
         <span className="flex-grow"></span>