子仓库提交

src/app/(app)/central-config/personal-center/account-security/components/TwoFactorAuth.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import type { SecuritySettings } from '../types';
+
+interface TwoFactorAuthProps {
+  securitySettings: SecuritySettings | null;
+  onUpdate: (updates: Partial<SecuritySettings>) => void;
+}
+
+export function TwoFactorAuth({ securitySettings, onUpdate }: TwoFactorAuthProps) {
+  const handleToggle = () => {
+    onUpdate({ twoFactorEnabled: !securitySettings?.twoFactorEnabled });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>双因素认证</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="font-medium">
+              {securitySettings?.twoFactorEnabled ? '已启用' : '未启用'}
+            </p>
+            <p className="text-sm text-gray-600">
+              为您的账户添加额外的安全保护
+            </p>
+          </div>
+          <Button
+            variant={securitySettings?.twoFactorEnabled ? "destructive" : "default"}
+            onClick={handleToggle}
+          >
+            {securitySettings?.twoFactorEnabled ? '禁用' : '启用'}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}