@@ -40,33 +40,21 @@ export default function TwoFactorChallenge() {
40
40
< Head title = "Two-Factor Authentication" />
41
41
42
42
< 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
+ ) : (
70
58
< div className = "flex flex-col items-center justify-center space-y-3 text-center" >
71
59
< div className = "flex w-full items-center justify-center" >
72
60
< InputOTP
@@ -86,23 +74,25 @@ export default function TwoFactorChallenge() {
86
74
</ div >
87
75
< InputError message = { errors . code } />
88
76
</ 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 >
106
96
</ div >
107
97
</ AuthLayout >
108
98
) ;
0 commit comments