cleanup register, check for allowed methods

This commit is contained in:
Max Peintner
2024-11-19 15:57:40 +01:00
parent 56f2b90c76
commit dcee01d09f
7 changed files with 135 additions and 30 deletions

View File

@@ -122,6 +122,14 @@
} }
}, },
"register": { "register": {
"disabled": {
"title": "Registrierung deaktiviert",
"description": "Die Registrierung ist deaktiviert. Bitte wenden Sie sich an den Administrator."
},
"missingdata": {
"title": "Registrierung fehlgeschlagen",
"description": "Einige Daten fehlen. Bitte überprüfen Sie Ihre Eingaben."
},
"title": "Registrieren", "title": "Registrieren",
"description": "Erstellen Sie Ihr ZITADEL-Konto.", "description": "Erstellen Sie Ihr ZITADEL-Konto.",
"selectMethod": "Wählen Sie die Methode, mit der Sie sich authentifizieren möchten", "selectMethod": "Wählen Sie die Methode, mit der Sie sich authentifizieren möchten",

View File

@@ -122,6 +122,14 @@
} }
}, },
"register": { "register": {
"disabled": {
"title": "Registration disabled",
"description": "The registration is disabled. Please contact your administrator."
},
"missingdata": {
"title": "Missing data",
"description": "Provide email, first and last name to register."
},
"title": "Register", "title": "Register",
"description": "Create your ZITADEL account.", "description": "Create your ZITADEL account.",
"selectMethod": "Select the method you would like to authenticate", "selectMethod": "Select the method you would like to authenticate",

View File

@@ -122,6 +122,14 @@
} }
}, },
"register": { "register": {
"disabled": {
"title": "Registro deshabilitado",
"description": "Registrarse está deshabilitado en este momento."
},
"missingdata": {
"title": "Datos faltantes",
"description": "No se proporcionaron datos suficientes para el registro."
},
"title": "Registrarse", "title": "Registrarse",
"description": "Crea tu cuenta ZITADEL.", "description": "Crea tu cuenta ZITADEL.",
"selectMethod": "Selecciona el método con el que deseas autenticarte", "selectMethod": "Selecciona el método con el que deseas autenticarte",

View File

@@ -122,6 +122,14 @@
} }
}, },
"register": { "register": {
"disabled": {
"title": "Registration disabled",
"description": "Registrazione disabilitata. Contatta l'amministratore di sistema per assistenza."
},
"missingdata": {
"title": "Registrazione",
"description": "Inserisci i tuoi dati per registrarti."
},
"title": "Registrati", "title": "Registrati",
"description": "Crea il tuo account ZITADEL.", "description": "Crea il tuo account ZITADEL.",
"selectMethod": "Seleziona il metodo con cui desideri autenticarti", "selectMethod": "Seleziona il metodo con cui desideri autenticarti",

View File

@@ -1,10 +1,10 @@
import { DynamicTheme } from "@/components/dynamic-theme"; import { DynamicTheme } from "@/components/dynamic-theme";
import { RegisterFormWithoutPassword } from "@/components/register-form-without-password"; import { RegisterFormWithoutPassword } from "@/components/register-form-without-password";
import { SetRegisterPasswordForm } from "@/components/set-register-password-form";
import { import {
getBrandingSettings, getBrandingSettings,
getDefaultOrg, getDefaultOrg,
getLegalAndSupportSettings, getLegalAndSupportSettings,
getLoginSettings,
getPasswordComplexitySettings, getPasswordComplexitySettings,
} from "@/lib/zitadel"; } from "@/lib/zitadel";
import { Organization } from "@zitadel/proto/zitadel/org/v2/org_pb"; import { Organization } from "@zitadel/proto/zitadel/org/v2/org_pb";
@@ -36,25 +36,18 @@ export default async function Page({
const branding = await getBrandingSettings(organization); const branding = await getBrandingSettings(organization);
return setPassword ? ( const loginSettings = await getLoginSettings(organization);
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("password.title")}</h1>
<p className="ztdl-p">{t("description")}</p>
{legal && passwordComplexitySettings && ( if (!loginSettings?.allowRegister) {
<SetRegisterPasswordForm return (
passwordComplexitySettings={passwordComplexitySettings} <DynamicTheme branding={branding}>
email={email} <div>{t("disabled.title")}</div>
firstname={firstname} <p className="ztdl-p">{t("disabled.description")}</p>
lastname={lastname}
organization={organization}
authRequestId={authRequestId}
></SetRegisterPasswordForm>
)}
</div>
</DynamicTheme> </DynamicTheme>
) : ( );
}
return (
<DynamicTheme branding={branding}> <DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4"> <div className="flex flex-col items-center space-y-4">
<h1>{t("title")}</h1> <h1>{t("title")}</h1>
@@ -68,6 +61,7 @@ export default async function Page({
lastname={lastname} lastname={lastname}
email={email} email={email}
authRequestId={authRequestId} authRequestId={authRequestId}
loginSettings={loginSettings}
></RegisterFormWithoutPassword> ></RegisterFormWithoutPassword>
)} )}
</div> </div>

View File

@@ -0,0 +1,70 @@
import { DynamicTheme } from "@/components/dynamic-theme";
import { SetRegisterPasswordForm } from "@/components/set-register-password-form";
import {
getBrandingSettings,
getDefaultOrg,
getLegalAndSupportSettings,
getLoginSettings,
getPasswordComplexitySettings,
} from "@/lib/zitadel";
import { Organization } from "@zitadel/proto/zitadel/org/v2/org_pb";
import { getLocale, getTranslations } from "next-intl/server";
export default async function Page({
searchParams,
}: {
searchParams: Record<string | number | symbol, string | undefined>;
}) {
const locale = getLocale();
const t = await getTranslations({ locale, namespace: "register" });
let { firstname, lastname, email, organization, authRequestId } =
searchParams;
if (!organization) {
const org: Organization | null = await getDefaultOrg();
if (org) {
organization = org.id;
}
}
const missingData = !firstname || !lastname || !email;
const legal = await getLegalAndSupportSettings(organization);
const passwordComplexitySettings =
await getPasswordComplexitySettings(organization);
const branding = await getBrandingSettings(organization);
const loginSettings = await getLoginSettings(organization);
return missingData ? (
<DynamicTheme branding={branding}>
<div>{t("missingdata.title")}</div>
<p className="ztdl-p">{t("missingdata.description")}</p>
</DynamicTheme>
) : loginSettings?.allowRegister && loginSettings.allowUsernamePassword ? (
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("password.title")}</h1>
<p className="ztdl-p">{t("description")}</p>
{legal && passwordComplexitySettings && (
<SetRegisterPasswordForm
passwordComplexitySettings={passwordComplexitySettings}
email={email}
firstname={firstname}
lastname={lastname}
organization={organization}
authRequestId={authRequestId}
></SetRegisterPasswordForm>
)}
</div>
</DynamicTheme>
) : (
<DynamicTheme branding={branding}>
<div>{t("disabled.title")}</div>
<p className="ztdl-p">{t("disabled.description")}</p>
</DynamicTheme>
);
}

View File

@@ -2,6 +2,10 @@
import { registerUser } from "@/lib/server/register"; import { registerUser } from "@/lib/server/register";
import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb"; import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb";
import {
LoginSettings,
PasskeysType,
} from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -32,6 +36,7 @@ type Props = {
email?: string; email?: string;
organization?: string; organization?: string;
authRequestId?: string; authRequestId?: string;
loginSettings?: LoginSettings;
}; };
export function RegisterFormWithoutPassword({ export function RegisterFormWithoutPassword({
@@ -41,6 +46,7 @@ export function RegisterFormWithoutPassword({
lastname, lastname,
organization, organization,
authRequestId, authRequestId,
loginSettings,
}: Props) { }: Props) {
const t = useTranslations("register"); const t = useTranslations("register");
@@ -99,7 +105,9 @@ export function RegisterFormWithoutPassword({
} }
if (withPassword) { if (withPassword) {
return router.push(`/register?` + new URLSearchParams(registerParams)); return router.push(
`/register/password?` + new URLSearchParams(registerParams),
);
} else { } else {
return submitAndRegister(value); return submitAndRegister(value);
} }
@@ -143,29 +151,30 @@ export function RegisterFormWithoutPassword({
/> />
</div> </div>
</div> </div>
{legal && ( {legal && (
<PrivacyPolicyCheckboxes <PrivacyPolicyCheckboxes
legal={legal} legal={legal}
onChange={setTosAndPolicyAccepted} onChange={setTosAndPolicyAccepted}
/> />
)} )}
<p className="mt-4 ztdl-p mb-6 block text-left">{t("selectMethod")}</p> <p className="mt-4 ztdl-p mb-6 block text-left">{t("selectMethod")}</p>
{/* show chooser if both methods are allowed */}
{loginSettings &&
loginSettings.allowUsernamePassword &&
loginSettings.passkeysType === PasskeysType.ALLOWED && (
<div className="pb-4"> <div className="pb-4">
<AuthenticationMethodRadio <AuthenticationMethodRadio
selected={selected} selected={selected}
selectionChanged={setSelected} selectionChanged={setSelected}
/> />
</div> </div>
)}
{error && ( {error && (
<div className="py-4"> <div className="py-4">
<Alert>{error}</Alert> <Alert>{error}</Alert>
</div> </div>
)} )}
<div className="mt-8 flex w-full flex-row items-center justify-between"> <div className="mt-8 flex w-full flex-row items-center justify-between">
<BackButton /> <BackButton />
<Button <Button