388071fef8
- Rename /user-profile → /settings with 301 redirect from old URL - Add multi-section settings nav (Profile, Account, API placeholder, Data & Privacy) reusing existing SettingsDesktopNav/SettingsMobileGridNav components - Implement account deletion via anonymization: wipes all PII from users row, releases team ownerships, removes commissioner records, deletes sessions/accounts - Add data export request form that emails privacy@brackt.com via Resend - Add deletedAt timestamp column to users table (migration 0100) - Add anonymizeUserAccount() to user model - Add removeAllCommissionersByUserId() to commissioner model - Tests for both new model functions - Update UserMenu "Profile" link → "Settings" at /settings https://claude.ai/code/session_017Hvmof82Xr3UwKFc3pnC4X
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { Link } from "react-router";
|
|
import { Badge } from "~/components/ui/badge";
|
|
|
|
type LinkedAccount = {
|
|
id: string;
|
|
providerId: string;
|
|
};
|
|
|
|
type Props = {
|
|
email: string;
|
|
linkedAccounts: LinkedAccount[];
|
|
};
|
|
|
|
const PROVIDER_LABELS: Record<string, string> = {
|
|
credential: "Email & Password",
|
|
google: "Google",
|
|
discord: "Discord",
|
|
};
|
|
|
|
export function AccountSection({ email, linkedAccounts }: Props) {
|
|
const hasPassword = linkedAccounts.some((a) => a.providerId === "credential");
|
|
const oauthAccounts = linkedAccounts.filter((a) => a.providerId !== "credential");
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h2 className="text-lg font-semibold">Account</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Your login email and connected providers.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="rounded-lg border p-4 space-y-3">
|
|
<h3 className="text-sm font-medium">Email Address</h3>
|
|
<p className="text-sm text-muted-foreground">{email}</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg border p-4 space-y-3">
|
|
<h3 className="text-sm font-medium">Sign-in Methods</h3>
|
|
<div className="space-y-2">
|
|
{hasPassword && (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm">Email & Password</span>
|
|
<Badge variant="secondary">Active</Badge>
|
|
</div>
|
|
)}
|
|
{oauthAccounts.map((account) => (
|
|
<div key={account.id} className="flex items-center justify-between">
|
|
<span className="text-sm">
|
|
{PROVIDER_LABELS[account.providerId] ?? account.providerId}
|
|
</span>
|
|
<Badge variant="secondary">Connected</Badge>
|
|
</div>
|
|
))}
|
|
{linkedAccounts.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">No sign-in methods found.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{hasPassword && (
|
|
<div className="rounded-lg border p-4 space-y-2">
|
|
<h3 className="text-sm font-medium">Password</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
To change your password, use the forgot password flow.
|
|
</p>
|
|
<Link
|
|
to="/forgot-password"
|
|
className="text-sm text-primary underline-offset-4 hover:underline"
|
|
>
|
|
Reset password
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|