42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
'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>
|
|
);
|
|
} |