@@ -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