TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-13 21:40:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

streamlined resend code buttons

Browse Source
This commit is contained in:
Max Peintner
2024-12-12 17:46:11 +01:00
parent b68ea32748
commit 911edd39b0
7 changed files with 62 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/login/src/components/set-password-form.tsx
View File

@@ -18,7 +18,7 @@ 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";
import { Alert, AlertType } from "./alert";
import { BackButton } from "./back-button";
import { Button, ButtonVariants } from "./button";
import { TextInput } from "./input";
@@ -192,31 +192,39 @@ export function SetPasswordForm({
<form className="w-full">
<div className="pt-4 grid grid-cols-1 gap-4 mb-4">
{codeRequired && (
<div className="flex flex-row items-end">
<div className="flex-1">
<TextInput
type="text"
required
{...register("code", {
required: "This field is required",
})}
label="Code"
autoComplete="one-time-code"
error={errors.code?.message as string}
data-testid="code-text-input"
/>
</div>
<div className="ml-4 mb-1">
<Button
variant={ButtonVariants.Secondary}
data-testid="resend-button"
onClick={() => resendCode()}
<Alert type={AlertType.INFO}>
<div className="flex flex-row">
<span className="flex-1 mr-auto text-left">
{t("set.noCodeReceived")}
</span>
<button
aria-label="Resend OTP Code"
disabled={loading}
type="button"
className="ml-4 text-primary-light-500 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 hover:text-primary-light-400 cursor-pointer disabled:cursor-default disabled:text-gray-400 dark:disabled:text-gray-700"
onClick={() => {
resendCode();
}}
data-testid="resend-button"
>
{t("set.resend")}
</Button>
</button>
</div>
</Alert>
)}
{codeRequired && (
<div className="flex flex-row items-end">
<TextInput
type="text"
required
{...register("code", {
required: "This field is required",
})}
label="Code"
autoComplete="one-time-code"
error={errors.code?.message as string}
data-testid="code-text-input"
/>
</div>
)}
<div className="">