227 lines
11 KiB
TypeScript
227 lines
11 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
|
import { Shield, Lock, Trash2, X, Check, AlertTriangle } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
|
|
interface PrivacySecurityProps {
|
|
onDisconnect?: (accountId: string) => void
|
|
onDeleteAccount?: () => void
|
|
connectedAccounts?: Array<{ id: string; email: string; provider: string }>
|
|
}
|
|
|
|
export function PrivacySecurity({ onDisconnect, onDeleteAccount, connectedAccounts = [] }: PrivacySecurityProps) {
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* What data is accessed */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Shield className="w-5 h-5 text-primary-500" />
|
|
What data is accessed
|
|
</CardTitle>
|
|
<CardDescription>We only access what's necessary for sorting</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
|
<Check className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-green-900 dark:text-green-100">Email headers and metadata</p>
|
|
<p className="text-sm text-green-700 dark:text-green-300 mt-1">
|
|
We read: sender, subject, date, labels/categories. This is all we need to categorize emails.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
|
<Check className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-green-900 dark:text-green-100">Email preview/snippet</p>
|
|
<p className="text-sm text-green-700 dark:text-green-300 mt-1">
|
|
We read the first few lines to help AI understand the email content.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* What is stored */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Lock className="w-5 h-5 text-primary-500 dark:text-primary-400" />
|
|
What is stored
|
|
</CardTitle>
|
|
<CardDescription>Your data stays secure</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<Check className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-blue-900 dark:text-blue-100">Your preferences</p>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
|
VIP senders, category settings, company labels, sorting rules.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<Check className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-blue-900 dark:text-blue-100">Statistics</p>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
|
Counts of sorted emails, categories, time saved. No email content.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<Check className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-blue-900 dark:text-blue-100">Account connection tokens</p>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
|
Encrypted OAuth tokens to access your email (required for sorting).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* What is never stored */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<X className="w-5 h-5 text-red-500 dark:text-red-400" />
|
|
What is never stored
|
|
</CardTitle>
|
|
<CardDescription>Your privacy is protected</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<X className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-red-900 dark:text-red-100">Email bodies/content</p>
|
|
<p className="text-sm text-red-700 dark:text-red-300 mt-1">
|
|
We never store the full content of your emails.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<X className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-red-900 dark:text-red-100">Attachments</p>
|
|
<p className="text-sm text-red-700 dark:text-red-300 mt-1">
|
|
We never access or store file attachments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<X className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-red-900 dark:text-red-100">Passwords</p>
|
|
<p className="text-sm text-red-700 dark:text-red-300 mt-1">
|
|
We use OAuth - we never see or store your email passwords.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* How to disconnect */}
|
|
{connectedAccounts.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Disconnect email accounts</CardTitle>
|
|
<CardDescription>Remove access to your email accounts</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{connectedAccounts.map((account) => (
|
|
<div key={account.id} className="flex items-center justify-between p-4 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800">
|
|
<div>
|
|
<p className="font-medium text-slate-900 dark:text-slate-100">{account.email}</p>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400 capitalize">{account.provider}</p>
|
|
</div>
|
|
{onDisconnect && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onDisconnect(account.id)}
|
|
className="text-red-600 dark:text-red-400 border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20"
|
|
>
|
|
Disconnect
|
|
</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Delete account */}
|
|
{onDeleteAccount && (
|
|
<Card className="border-red-200 dark:border-red-800">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-red-600 dark:text-red-400">
|
|
<Trash2 className="w-5 h-5" />
|
|
Delete my data
|
|
</CardTitle>
|
|
<CardDescription>Permanently delete all your data and account</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!showDeleteConfirm ? (
|
|
<div className="space-y-3">
|
|
<div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<p className="text-sm text-red-800 dark:text-red-200 mb-2">
|
|
<AlertTriangle className="w-4 h-4 inline mr-1" />
|
|
This action cannot be undone
|
|
</p>
|
|
<p className="text-xs text-red-700 dark:text-red-300">
|
|
This will delete all your preferences, statistics, connected accounts, and subscription data.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="default"
|
|
onClick={() => setShowDeleteConfirm(true)}
|
|
className="w-full bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white"
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
Delete my account and data
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<div className="p-4 bg-red-100 dark:bg-red-900/30 border-2 border-red-300 dark:border-red-700 rounded-lg">
|
|
<p className="font-semibold text-red-900 dark:text-red-100 mb-2">Are you absolutely sure?</p>
|
|
<p className="text-sm text-red-800 dark:text-red-200">
|
|
This will permanently delete:
|
|
</p>
|
|
<ul className="text-sm text-red-700 dark:text-red-300 mt-2 space-y-1 list-disc list-inside">
|
|
<li>All your email account connections</li>
|
|
<li>All sorting statistics</li>
|
|
<li>All preferences and settings</li>
|
|
<li>Your subscription (if active)</li>
|
|
</ul>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="default"
|
|
onClick={onDeleteAccount}
|
|
className="flex-1 bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white"
|
|
>
|
|
Yes, delete everything
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowDeleteConfirm(false)}
|
|
className="flex-1"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|