INit

2025-09-28 19:55:43 +05:45
commit 2162084b95
236 changed files with 28717 additions and 0 deletions
--- a/resources/js/pages/settings/two-factor.tsx
+++ b/resources/js/pages/settings/two-factor.tsx
@@ -0,0 +1,137 @@
+import HeadingSmall from '@/components/heading-small';
+import TwoFactorRecoveryCodes from '@/components/two-factor-recovery-codes';
+import TwoFactorSetupModal from '@/components/two-factor-setup-modal';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth';
+import AppLayout from '@/layouts/app-layout';
+import SettingsLayout from '@/layouts/settings/layout';
+import { disable, enable, show } from '@/routes/two-factor';
+import { type BreadcrumbItem } from '@/types';
+import { Form, Head } from '@inertiajs/react';
+import { ShieldBan, ShieldCheck } from 'lucide-react';
+import { useState } from 'react';
+
+interface TwoFactorProps {
+    requiresConfirmation?: boolean;
+    twoFactorEnabled?: boolean;
+}
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Two-Factor Authentication',
+        href: show.url(),
+    },
+];
+
+export default function TwoFactor({
+    requiresConfirmation = false,
+    twoFactorEnabled = false,
+}: TwoFactorProps) {
+    const {
+        qrCodeSvg,
+        hasSetupData,
+        manualSetupKey,
+        clearSetupData,
+        fetchSetupData,
+        recoveryCodesList,
+        fetchRecoveryCodes,
+        errors,
+    } = useTwoFactorAuth();
+    const [showSetupModal, setShowSetupModal] = useState<boolean>(false);
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Two-Factor Authentication" />
+            <SettingsLayout>
+                <div className="space-y-6">
+                    <HeadingSmall
+                        title="Two-Factor Authentication"
+                        description="Manage your two-factor authentication settings"
+                    />
+                    {twoFactorEnabled ? (
+                        <div className="flex flex-col items-start justify-start space-y-4">
+                            <Badge variant="default">Enabled</Badge>
+                            <p className="text-muted-foreground">
+                                With two-factor authentication enabled, you will
+                                be prompted for a secure, random pin during
+                                login, which you can retrieve from the
+                                TOTP-supported application on your phone.
+                            </p>
+
+                            <TwoFactorRecoveryCodes
+                                recoveryCodesList={recoveryCodesList}
+                                fetchRecoveryCodes={fetchRecoveryCodes}
+                                errors={errors}
+                            />
+
+                            <div className="relative inline">
+                                <Form {...disable.form()}>
+                                    {({ processing }) => (
+                                        <Button
+                                            variant="destructive"
+                                            type="submit"
+                                            disabled={processing}
+                                        >
+                                            <ShieldBan /> Disable 2FA
+                                        </Button>
+                                    )}
+                                </Form>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="flex flex-col items-start justify-start space-y-4">
+                            <Badge variant="destructive">Disabled</Badge>
+                            <p className="text-muted-foreground">
+                                When you enable two-factor authentication, you
+                                will be prompted for a secure pin during login.
+                                This pin can be retrieved from a TOTP-supported
+                                application on your phone.
+                            </p>
+
+                            <div>
+                                {hasSetupData ? (
+                                    <Button
+                                        onClick={() => setShowSetupModal(true)}
+                                    >
+                                        <ShieldCheck />
+                                        Continue Setup
+                                    </Button>
+                                ) : (
+                                    <Form
+                                        {...enable.form()}
+                                        onSuccess={() =>
+                                            setShowSetupModal(true)
+                                        }
+                                    >
+                                        {({ processing }) => (
+                                            <Button
+                                                type="submit"
+                                                disabled={processing}
+                                            >
+                                                <ShieldCheck />
+                                                Enable 2FA
+                                            </Button>
+                                        )}
+                                    </Form>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    <TwoFactorSetupModal
+                        isOpen={showSetupModal}
+                        onClose={() => setShowSetupModal(false)}
+                        requiresConfirmation={requiresConfirmation}
+                        twoFactorEnabled={twoFactorEnabled}
+                        qrCodeSvg={qrCodeSvg}
+                        manualSetupKey={manualSetupKey}
+                        clearSetupData={clearSetupData}
+                        fetchSetupData={fetchSetupData}
+                        errors={errors}
+                    />
+                </div>
+            </SettingsLayout>
+        </AppLayout>
+    );
+}