Skip to content

Commit f779357

Browse files
committed
share more common elements, de-dupe
1 parent 85e3005 commit f779357

File tree

1 file changed

+34
-44
lines changed

1 file changed

+34
-44
lines changed

resources/js/pages/auth/two-factor-challenge.tsx

Lines changed: 34 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -40,33 +40,21 @@ export default function TwoFactorChallenge() {
4040
<Head title="Two-Factor Authentication" />
4141

4242
<div className="space-y-6">
43-
{showRecoveryInput ? (
44-
<Form {...store.form()} className="space-y-4" resetOnError>
45-
{({ errors, processing, clearErrors }) => (
46-
<>
47-
<Input name="recovery_code" type="text" placeholder="Enter recovery code" autoFocus={showRecoveryInput} required />
48-
<InputError message={errors.recovery_code} />
49-
<Button type="submit" className="w-full" disabled={processing}>
50-
Continue
51-
</Button>
52-
53-
<div className="text-center text-sm text-muted-foreground">
54-
<span>or you can </span>
55-
<button
56-
type="button"
57-
className="cursor-pointer text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
58-
onClick={() => toggleRecoveryMode(clearErrors)}
59-
>
60-
{authConfigContent.toggleText}
61-
</button>
62-
</div>
63-
</>
64-
)}
65-
</Form>
66-
) : (
67-
<Form {...store.form()} className="space-y-4" resetOnError resetOnSuccess>
68-
{({ errors, processing, clearErrors }) => (
69-
<>
43+
<Form {...store.form()} className="space-y-4" resetOnError resetOnSuccess={!showRecoveryInput}>
44+
{({ errors, processing, clearErrors }) => (
45+
<>
46+
{showRecoveryInput ? (
47+
<>
48+
<Input
49+
name="recovery_code"
50+
type="text"
51+
placeholder="Enter recovery code"
52+
autoFocus={showRecoveryInput}
53+
required
54+
/>
55+
<InputError message={errors.recovery_code} />
56+
</>
57+
) : (
7058
<div className="flex flex-col items-center justify-center space-y-3 text-center">
7159
<div className="flex w-full items-center justify-center">
7260
<InputOTP
@@ -86,23 +74,25 @@ export default function TwoFactorChallenge() {
8674
</div>
8775
<InputError message={errors.code} />
8876
</div>
89-
<Button type="submit" className="w-full" disabled={processing || code.length < OTP_MAX_LENGTH}>
90-
Continue
91-
</Button>
92-
<div className="text-center text-sm text-muted-foreground">
93-
<span>or you can </span>
94-
<button
95-
type="button"
96-
className="cursor-pointer text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
97-
onClick={() => toggleRecoveryMode(clearErrors)}
98-
>
99-
{authConfigContent.toggleText}
100-
</button>
101-
</div>
102-
</>
103-
)}
104-
</Form>
105-
)}
77+
)}
78+
79+
<Button type="submit" className="w-full" disabled={processing}>
80+
Continue
81+
</Button>
82+
83+
<div className="text-center text-sm text-muted-foreground">
84+
<span>or you can </span>
85+
<button
86+
type="button"
87+
className="cursor-pointer text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
88+
onClick={() => toggleRecoveryMode(clearErrors)}
89+
>
90+
{authConfigContent.toggleText}
91+
</button>
92+
</div>
93+
</>
94+
)}
95+
</Form>
10696
</div>
10797
</AuthLayout>
10898
);

0 commit comments

Comments
 (0)