register button improvement

This commit is contained in:
peintnermax
2024-08-08 10:29:17 +02:00
parent 113e19a957
commit 6cd07c70aa
3 changed files with 27 additions and 25 deletions

View File

@@ -51,16 +51,16 @@ export default async function Page({
organization={organization} organization={organization}
submit={submit} submit={submit}
allowRegister={!!loginSettings?.allowRegister} allowRegister={!!loginSettings?.allowRegister}
/> >
{legal && identityProviders && process.env.ZITADEL_API_URL && (
{legal && identityProviders && process.env.ZITADEL_API_URL && ( <SignInWithIDP
<SignInWithIDP host={host}
host={host} identityProviders={identityProviders}
identityProviders={identityProviders} authRequestId={authRequestId}
authRequestId={authRequestId} organization={organization}
organization={organization} ></SignInWithIDP>
></SignInWithIDP> )}
)} </UsernameForm>
</div> </div>
</DynamicTheme> </DynamicTheme>
); );

View File

@@ -143,10 +143,6 @@ export function SignInWithIDP({
<Alert>{error}</Alert> <Alert>{error}</Alert>
</div> </div>
)} )}
<div className="mt-8 flex w-full flex-row items-center pt-4">
<BackButton />
<span className="flex-grow"></span>
</div>
</div> </div>
); );
} }

View File

@@ -11,6 +11,7 @@ import {
LoginSettings, LoginSettings,
PasskeysType, PasskeysType,
} from "@zitadel/proto/zitadel/settings/v2/login_settings_pb"; } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
import BackButton from "./BackButton";
type Inputs = { type Inputs = {
loginName: string; loginName: string;
@@ -23,6 +24,7 @@ type Props = {
organization?: string; organization?: string;
submit: boolean; submit: boolean;
allowRegister: boolean; allowRegister: boolean;
children?: React.ReactNode;
}; };
export default function UsernameForm({ export default function UsernameForm({
@@ -32,6 +34,7 @@ export default function UsernameForm({
organization, organization,
submit, submit,
allowRegister, allowRegister,
children,
}: Props) { }: Props) {
const { register, handleSubmit, formState } = useForm<Inputs>({ const { register, handleSubmit, formState } = useForm<Inputs>({
mode: "onBlur", mode: "onBlur",
@@ -220,6 +223,16 @@ export default function UsernameForm({
{...register("loginName", { required: "This field is required" })} {...register("loginName", { required: "This field is required" })}
label="Loginname" label="Loginname"
/> />
{allowRegister && (
<button
className="transition-all text-sm hover:text-primary-light-500 dark:hover:text-primary-dark-500"
onClick={() => router.push("/register")}
type="button"
disabled={loading}
>
Register new user
</button>
)}
</div> </div>
{error && ( {error && (
@@ -228,17 +241,10 @@ export default function UsernameForm({
</div> </div>
)} )}
<div className="mt-8 flex w-full flex-row items-center"> <div className="pt-6 pb-4">{children}</div>
{allowRegister && (
<Button <div className="mt-4 flex w-full flex-row items-center">
type="button" <BackButton />
className="self-end"
variant={ButtonVariants.Secondary}
onClick={() => router.push("/register")}
>
register
</Button>
)}
<span className="flex-grow"></span> <span className="flex-grow"></span>
<Button <Button
type="submit" type="submit"