22726550a6
* Add account deletion and multi-section settings page - 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 * Address code review feedback on settings/account deletion 1. Wrap anonymizeUserAccount in a DB transaction so partial failures (e.g. session delete succeeds but user update fails) can't leave accounts in an inconsistent state 2. Escape user email and notes with escapeHtml() before interpolating into the data request email body 3. Reset AlertDialog confirmed state when dialog is dismissed via backdrop click or Escape key (onOpenChange handler) 4. Extract accounts DB query to app/models/account.ts (findLinkedAccountsByUserId) to comply with the "always query through app/models/" convention 5. Replace dynamic imports() in action handlers with static top-level imports 6. Remove the unused hard-delete deleteUser() function 7. Add lastDataRequestAt timestamp to users (migration 0101) and enforce a 30-day server-side cooldown on data export requests 8. Replace fragile actionData type casts with a proper ActionData discriminated union; narrowing now works without `as` assertions 9. Strengthen tests: verify which schema tables are passed to delete() and that operations run inside the transaction https://claude.ai/code/session_017Hvmof82Xr3UwKFc3pnC4X * Fix no-non-null-assertion lint error in PrivacySection Replace non-null assertion with optional chaining on dataRequestCooldownUntil to satisfy oxlint no-non-null-assertion rule. https://claude.ai/code/session_017Hvmof82Xr3UwKFc3pnC4X --------- Co-authored-by: Claude <noreply@anthropic.com>
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>
|
|
);
|
|
}
|