Skip to content

Commit a5f231a

Browse files
pushpak1300pushpak1300
committed
change condition signature to positive first
1 parent 2114888 commit a5f231a

File tree

4 files changed

+59
-57
lines changed

4 files changed

+59
-57
lines changed

‎resources/js/components/two-factor-recovery-codes.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,18 +79,18 @@ export default function TwoFactorRecoveryCodes({ recoveryCodesList, fetchRecover
7979
role="list"
8080
aria-label="Recovery codes"
8181
>
82-
{!recoveryCodesList.length ? (
83-
<div className="space-y-2" aria-label="Loading recovery codes">
84-
{Array.from({ length: 8 }, (_, index) => (
85-
<div key={index} className="h-4 animate-pulse rounded bg-muted-foreground/20" aria-hidden="true" />
86-
))}
87-
</div>
88-
) : (
82+
{recoveryCodesList.length ? (
8983
recoveryCodesList.map((code, index) => (
9084
<div key={index} role="listitem" className="select-text">
9185
{code}
9286
</div>
9387
))
88+
) : (
89+
<div className="space-y-2" aria-label="Loading recovery codes">
90+
{Array.from({ length: 8 }, (_, index) => (
91+
<div key={index} className="h-4 animate-pulse rounded bg-muted-foreground/20" aria-hidden="true" />
92+
))}
93+
</div>
9494
)}
9595
</div>
9696
<div className="text-xs text-muted-foreground select-none">

‎resources/js/components/two-factor-setup-modal.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@ function TwoFactorSetupStep({
4848
<>
4949
<div className="mx-auto flex max-w-md overflow-hidden">
5050
<div className="mx-auto aspect-square w-64 rounded-lg border border-border">
51-
{!qrCodeSvg ? (
52-
<div className="absolute inset-0 z-10 flex animate-pulse items-center justify-center bg-background">
53-
<Loader2 className="size-6 animate-spin" />
54-
</div>
55-
) : (
51+
{qrCodeSvg ? (
5652
<div className="z-10 p-5">
5753
<div className="flex size-full items-center justify-center" dangerouslySetInnerHTML={{ __html: qrCodeSvg }} />
5854
</div>
55+
) : (
56+
<div className="absolute inset-0 z-10 flex animate-pulse items-center justify-center bg-background">
57+
<Loader2 className="size-6 animate-spin" />
58+
</div>
5959
)}
6060
</div>
6161
</div>
@@ -194,8 +194,10 @@ export default function TwoFactorSetupModal({
194194
const handleModalNextStep = useCallback(() => {
195195
if (requiresConfirmation) {
196196
setShowVerificationStep(true);
197+
197198
return;
198199
}
200+
199201
clearSetupData();
200202
onClose();
201203
}, [requiresConfirmation, clearSetupData, onClose]);
@@ -212,6 +214,7 @@ export default function TwoFactorSetupModal({
212214
resetModalState();
213215
return;
214216
}
217+
215218
if (!qrCodeSvg) {
216219
fetchSetupData();
217220
}
@@ -227,15 +230,15 @@ export default function TwoFactorSetupModal({
227230
</DialogHeader>
228231

229232
<div className="flex flex-col items-center space-y-5">
230-
{!showVerificationStep ? (
233+
{showVerificationStep ? (
234+
<TwoFactorVerificationStep onClose={onClose} onBack={() => setShowVerificationStep(false)} />
235+
) : (
231236
<TwoFactorSetupStep
232237
qrCodeSvg={qrCodeSvg}
233238
manualSetupKey={manualSetupKey}
234239
buttonText={modalConfig.buttonText}
235240
onNextStep={handleModalNextStep}
236241
/>
237-
) : (
238-
<TwoFactorVerificationStep onClose={onClose} onBack={() => setShowVerificationStep(false)} />
239242
)}
240243
</div>
241244
</DialogContent>

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

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

4242
<div className="space-y-6">
43-
{!showRecoveryInput ? (
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+
) : (
4467
<Form {...store.form()} className="space-y-4" resetOnError resetOnSuccess>
4568
{({ errors, processing, clearErrors }) => (
4669
<>
@@ -66,29 +89,6 @@ export default function TwoFactorChallenge() {
6689
<Button type="submit" className="w-full" disabled={processing || code.length < OTP_MAX_LENGTH}>
6790
Continue
6891
</Button>
69-
<div className="text-center text-sm text-muted-foreground">
70-
<span>or you can </span>
71-
<button
72-
type="button"
73-
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"
74-
onClick={() => toggleRecoveryMode(clearErrors)}
75-
>
76-
{authConfigContent.toggleText}
77-
</button>
78-
</div>
79-
</>
80-
)}
81-
</Form>
82-
) : (
83-
<Form {...store.form()} className="space-y-4" resetOnError>
84-
{({ errors, processing, clearErrors }) => (
85-
<>
86-
<Input name="recovery_code" type="text" placeholder="Enter recovery code" autoFocus={showRecoveryInput} required />
87-
<InputError message={errors.recovery_code} />
88-
<Button type="submit" className="w-full" disabled={processing}>
89-
Continue
90-
</Button>
91-
9292
<div className="text-center text-sm text-muted-foreground">
9393
<span>or you can </span>
9494
<button

‎resources/js/pages/settings/two-factor.tsx‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -34,40 +34,39 @@ export default function TwoFactor({ requiresConfirmation = false, twoFactorEnabl
3434
<SettingsLayout>
3535
<div className="space-y-6">
3636
<HeadingSmall title="Two-Factor Authentication" description="Manage your two-factor authentication settings" />
37-
38-
{!twoFactorEnabled ? (
37+
{twoFactorEnabled ? (
3938
<div className="flex flex-col items-start justify-start space-y-4">
40-
<Badge variant="destructive">Disabled</Badge>
39+
<Badge variant="default">Enabled</Badge>
4140
<p className="text-muted-foreground">
42-
When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be
43-
retrieved from a TOTP-supported application on your phone.
41+
With two-factor authentication enabled, you will be prompted for a secure, random pin during login, which you can
42+
retrieve from the TOTP-supported application on your phone.
4443
</p>
4544

46-
<div>
47-
<Form {...enable.form()} onSuccess={() => setShowSetupModal(true)}>
45+
<TwoFactorRecoveryCodes recoveryCodesList={recoveryCodesList} fetchRecoveryCodes={fetchRecoveryCodes} />
46+
47+
<div className="relative inline">
48+
<Form {...disable.form()}>
4849
{({ processing }) => (
49-
<Button type="submit" disabled={processing}>
50-
<ShieldCheck /> Enable 2FA
50+
<Button variant="destructive" type="submit" disabled={processing}>
51+
<ShieldBan /> Disable 2FA
5152
</Button>
5253
)}
5354
</Form>
5455
</div>
5556
</div>
5657
) : (
5758
<div className="flex flex-col items-start justify-start space-y-4">
58-
<Badge variant="default">Enabled</Badge>
59+
<Badge variant="destructive">Disabled</Badge>
5960
<p className="text-muted-foreground">
60-
With two-factor authentication enabled, you will be prompted for a secure, random pin during login, which you can
61-
retrieve from the TOTP-supported application on your phone.
61+
When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be
62+
retrieved from a TOTP-supported application on your phone.
6263
</p>
6364

64-
<TwoFactorRecoveryCodes recoveryCodesList={recoveryCodesList} fetchRecoveryCodes={fetchRecoveryCodes} />
65-
66-
<div className="relative inline">
67-
<Form {...disable.form()}>
65+
<div>
66+
<Form {...enable.form()} onSuccess={() => setShowSetupModal(true)}>
6867
{({ processing }) => (
69-
<Button variant="destructive" type="submit" disabled={processing}>
70-
<ShieldBan /> Disable 2FA
68+
<Button type="submit" disabled={processing}>
69+
<ShieldCheck /> Enable 2FA
7170
</Button>
7271
)}
7372
</Form>

0 commit comments

Comments
 (0)