391 lines
20 KiB
TypeScript
391 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { onAuthStateChanged, User } from 'firebase/auth';
|
|
import { firebaseAuth } from '../../lib/firebase-client';
|
|
import { AppCloudData } from '../../components/app-cloud-data';
|
|
import { SessionManager } from '../../components/session-manager';
|
|
import { FirebaseLink } from '../../components/firebase-link';
|
|
import { SignOutButton } from '../../components/sign-out-button';
|
|
|
|
export default function AccountPage() {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [authChecked, setAuthChecked] = useState(false);
|
|
const [syncTrigger, setSyncTrigger] = useState(0);
|
|
const [isSyncing, setIsSyncing] = useState(false);
|
|
const [lastSynced, setLastSynced] = useState<string | null>(null);
|
|
const [metrics, setMetrics] = useState({ totalMiles: 12480, rideCount: 184, peakLean: 56.4 });
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = onAuthStateChanged(firebaseAuth, (currentUser) => {
|
|
setUser(currentUser);
|
|
setAuthChecked(true);
|
|
});
|
|
return () => unsubscribe();
|
|
}, []);
|
|
|
|
function handleQuickSync() {
|
|
setIsSyncing(true);
|
|
setSyncTrigger((prev) => prev + 1);
|
|
}
|
|
|
|
const initials = user?.displayName
|
|
? user.displayName.split(' ').map((n) => n[0]).join('').slice(0, 2).toUpperCase()
|
|
: (user?.email ? user.email.slice(0, 2).toUpperCase() : 'MS');
|
|
return (
|
|
<div className="flagship-page text-slate-200 bg-brand-bg min-h-screen pt-24 pb-20">
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
|
|
{/* BEGIN: HeroIdentitySection */}
|
|
<section className="glass-card rounded-2xl border border-brand-border p-6 md:p-8 relative overflow-hidden" data-purpose="rider-identity-banner">
|
|
{/* Top aesthetic accent line (Red Area Fixed) */}
|
|
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-brand-cyan/80 via-blue-500/40 to-transparent"></div>
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 relative z-10">
|
|
{/* Rider Info */}
|
|
<div className="flex items-start md:items-center space-x-5">
|
|
{/* Rider Avatar / Helmet Node */}
|
|
<div className="relative shrink-0">
|
|
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-brand-borderLight to-slate-900 border border-brand-cyan/40 p-1 flex items-center justify-center shadow-xl">
|
|
<span className="font-mono text-3xl font-extrabold text-brand-cyan tracking-wider">{initials}</span>
|
|
</div>
|
|
<span className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-slate-500 border-2 border-brand-bg flex items-center justify-center" title="Motorcycle hardware telemetry is not available">
|
|
<svg className="w-3 h-3 text-black fill-current" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>
|
|
</span>
|
|
</div>
|
|
{/* Titles & Metadata */}
|
|
<div>
|
|
<div className="flex items-center space-x-2 text-xs font-mono text-brand-emerald tracking-normal mb-1">
|
|
<span className="inline-block w-2 h-2 rounded-full bg-brand-emerald animate-ping"></span>
|
|
<span>Rider Portal // Telemetry Cockpit</span>
|
|
</div>
|
|
<h1 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
|
{user ? `Welcome back, ${user.displayName || user.email?.split('@')[0] || 'Rider'}.` : 'Rider Account & Cloud Telemetry'}
|
|
</h1>
|
|
<div className="flex flex-wrap items-center gap-y-1 gap-x-3 mt-2 text-sm text-slate-400 font-mono">
|
|
<span className="text-slate-300 font-medium">{user?.email || 'Guest Session (Not Signed In)'}</span>
|
|
<span>•</span>
|
|
<span className="inline-flex items-center text-brand-cyan">
|
|
<svg className="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path></svg>
|
|
{user ? 'Pro Telemetry Tier' : 'Guest Tier'}
|
|
</span>
|
|
<span>•</span>
|
|
<span>Status: <span className="text-slate-200">{user ? 'Active Rider' : 'Signed Out'}</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Quick Action Buttons (Green Area Fixed) */}
|
|
<div className="flex flex-wrap items-center gap-3 pt-2 lg:pt-0">
|
|
{user ? (
|
|
<>
|
|
<Link
|
|
href="/group-rides"
|
|
className="px-4 py-2 rounded-xl bg-gradient-to-r from-brand-cyan/20 to-blue-600/20 hover:from-brand-cyan/30 hover:to-blue-600/30 text-brand-cyan text-sm font-semibold border border-brand-cyan/40 hover:border-brand-cyan transition flex items-center space-x-2"
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">groups</span>
|
|
<span>Group Rides Hub</span>
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={handleQuickSync}
|
|
disabled={isSyncing}
|
|
className="px-4 py-2 rounded-xl bg-brand-cardAlt hover:bg-slate-800 text-slate-200 text-sm font-medium border border-brand-border hover:border-brand-cyan/60 transition flex items-center space-x-2 cursor-pointer disabled:opacity-60"
|
|
>
|
|
<svg
|
|
className={`w-4 h-4 ${isSyncing ? 'animate-spin text-brand-cyan' : 'text-slate-400'}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
></path>
|
|
</svg>
|
|
<span>{isSyncing ? 'Syncing...' : lastSynced ? `Synced (${lastSynced})` : 'Quick Sync'}</span>
|
|
</button>
|
|
<div className="px-3 py-1.5 rounded-lg bg-brand-cardAlt border border-brand-border text-xs font-mono text-rose-400">
|
|
<SignOutButton />
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="px-4 py-2 rounded-lg bg-gradient-to-r from-brand-cyan to-blue-600 hover:opacity-95 text-slate-950 font-semibold text-sm transition">
|
|
Sign In
|
|
</Link>
|
|
<Link href="/register" className="px-4 py-2 rounded-lg bg-brand-cardAlt hover:bg-slate-800 text-slate-200 text-sm font-medium border border-brand-border">
|
|
Register
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: HeroIdentitySection */}
|
|
{/* BEGIN: TelemetryKpiGrid */}
|
|
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" data-purpose="telemetry-overview-stats">
|
|
{/* Metric 1: Distance */}
|
|
<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200">
|
|
<div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
|
|
<span>Total Distance Logged</span>
|
|
<span className="text-brand-cyan bg-brand-cyan/10 px-1.5 py-0.5 rounded text-[10px]">Cloud Aggregate</span>
|
|
</div>
|
|
<div className="mt-3 flex items-baseline space-x-2">
|
|
<span className="text-3xl font-extrabold text-white font-mono">{metrics.totalMiles.toLocaleString()}</span>
|
|
<span className="text-sm font-mono text-slate-400">miles</span>
|
|
</div>
|
|
<div className="mt-2 text-xs text-slate-400 flex items-center space-x-1.5">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-brand-emerald"></span>
|
|
<span>All-time telemetry aggregate</span>
|
|
</div>
|
|
</div>
|
|
{/* Metric 2: Sessions */}
|
|
<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200">
|
|
<div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
|
|
<span>Recorded Sessions</span>
|
|
<span className="text-brand-emerald bg-brand-emerald/10 px-1.5 py-0.5 rounded text-[10px]">100% Cloud Synced</span>
|
|
</div>
|
|
<div className="mt-3 flex items-baseline space-x-2">
|
|
<span className="text-3xl font-extrabold text-white font-mono">{metrics.rideCount}</span>
|
|
<span className="text-sm font-mono text-slate-400">rides</span>
|
|
</div>
|
|
<div className="mt-2 text-xs text-slate-400 flex items-center space-x-1.5">
|
|
<span>Canyons, Circuits & Commutes</span>
|
|
</div>
|
|
</div>
|
|
{/* Metric 3: Lean Angle Peak */}
|
|
<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200">
|
|
<div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
|
|
<span>Peak Lean Angle</span>
|
|
<span className="text-brand-cyan font-mono text-[10px]">Lateral Roll</span>
|
|
</div>
|
|
<div className="mt-3 flex items-baseline space-x-2">
|
|
<span className="text-3xl font-extrabold text-brand-cyan font-mono">{metrics.peakLean > 0 ? `${metrics.peakLean}°` : '--'}</span>
|
|
<span className="text-sm font-mono text-slate-400">lateral roll</span>
|
|
</div>
|
|
<div className="mt-2 text-xs text-slate-400 flex items-center space-x-1.5">
|
|
<span className="text-amber-400">6-Axis IMU Verified</span>
|
|
</div>
|
|
</div>
|
|
{/* Metric 4: Hardware Link */}
|
|
<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200">
|
|
<div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
|
|
<span>Hardware Telemetry</span>
|
|
<span className="w-2.5 h-2.5 rounded-full bg-brand-emerald animate-pulse"></span>
|
|
</div>
|
|
<div className="mt-3 flex items-baseline space-x-2">
|
|
<span className="text-xl font-bold text-white font-mono">Not connected</span>
|
|
</div>
|
|
<div className="mt-2 text-xs text-brand-emerald font-mono flex items-center space-x-1.5">
|
|
<span>OBD-II / CAN telemetry unavailable</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: TelemetryKpiGrid */}
|
|
|
|
{/* Live App Cloud Data (Vehicle Garage, Telemetry Hardware & Recent Rides from Firestore) */}
|
|
<AppCloudData
|
|
syncTrigger={syncTrigger}
|
|
onSyncStateChange={(syncing) => {
|
|
setIsSyncing(syncing);
|
|
if (!syncing) {
|
|
setLastSynced(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
|
|
}
|
|
}}
|
|
onMetricsLoaded={(m) => setMetrics(m)}
|
|
/>
|
|
{/* BEGIN: PlanAndClusterSection */}
|
|
<section className="grid grid-cols-1 lg:grid-cols-12 gap-6" data-purpose="subscription-and-sync-status">
|
|
{/* Left 7 cols: Plan & Hardware Dongle */}
|
|
<div className="lg:col-span-7 glass-card rounded-xl border border-brand-border p-6 flex flex-col justify-between" data-purpose="subscription-tier">
|
|
<div>
|
|
<div className="flex items-center justify-between border-b border-brand-border pb-4 mb-5">
|
|
<div>
|
|
<span className="text-xs font-mono tracking-normal text-brand-cyan">Subscription billing</span>
|
|
<h3 className="text-xl font-bold text-white flex items-center space-x-2 mt-0.5">
|
|
<span>Not connected</span>
|
|
<span className="text-xs font-mono bg-slate-700 text-slate-300 px-2 py-0.5 rounded border border-slate-600 font-medium">Web billing unavailable</span>
|
|
</h3>
|
|
</div>
|
|
<span className="text-xs font-mono text-slate-400">No active plan data</span>
|
|
</div>
|
|
{/* Inclusions Pills */}
|
|
<div className="mb-5">
|
|
<span className="text-xs font-mono text-slate-400 tracking-normal block mb-2">Entitlements & Features</span>
|
|
<div className="flex flex-wrap gap-2 text-xs font-mono">
|
|
<span className="px-2.5 py-1 rounded-md bg-brand-cardAlt border border-brand-border text-slate-300 flex items-center space-x-1.5">
|
|
<svg className="w-3 h-3 text-brand-cyan" fill="currentColor" viewBox="0 0 20 20"><path clipRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fillRule="evenodd"></path></svg>
|
|
<span>Phone-based ride recording</span>
|
|
</span>
|
|
<span className="px-2.5 py-1 rounded-md bg-brand-cardAlt border border-brand-border text-slate-300 flex items-center space-x-1.5">
|
|
<svg className="w-3 h-3 text-brand-cyan" fill="currentColor" viewBox="0 0 20 20"><path clipRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fillRule="evenodd"></path></svg>
|
|
<span>OBD-II / ECU telemetry unavailable</span>
|
|
</span>
|
|
<span className="px-2.5 py-1 rounded-md bg-brand-cardAlt border border-brand-border text-slate-300 flex items-center space-x-1.5">
|
|
<svg className="w-3 h-3 text-brand-cyan" fill="currentColor" viewBox="0 0 20 20"><path clipRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fillRule="evenodd"></path></svg>
|
|
<span>Cloud sync status shown below</span>
|
|
</span>
|
|
<span className="px-2.5 py-1 rounded-md bg-brand-cardAlt border border-brand-border text-slate-300 flex items-center space-x-1.5">
|
|
<svg className="w-3 h-3 text-brand-cyan" fill="currentColor" viewBox="0 0 20 20"><path clipRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fillRule="evenodd"></path></svg>
|
|
<span>Emergency dispatch is not provided</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/* Linked Hardware Details */}
|
|
<div className="p-3.5 bg-brand-cardAlt rounded-lg border border-brand-border mb-4 font-mono text-xs flex flex-col sm:flex-row justify-between gap-3">
|
|
<div>
|
|
<span className="text-slate-400 block text-[11px]">Motorcycle hardware</span>
|
|
<span className="font-bold text-white">Not available</span>
|
|
</div>
|
|
<div className="sm:text-right">
|
|
<span className="text-slate-400 block text-[11px]">Device status</span>
|
|
<span className="text-slate-300 font-semibold">No device linked</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3 pt-2">
|
|
<Link
|
|
href="/group-rides"
|
|
className="px-4 py-2 rounded-lg bg-brand-cyan/15 text-brand-cyan border border-brand-cyan/40 hover:bg-brand-cyan/25 text-xs font-semibold transition inline-flex items-center gap-1.5"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px]">groups</span>
|
|
<span>Group Rides Hub</span>
|
|
</Link>
|
|
<Link
|
|
href="/clubs/manage"
|
|
className="px-4 py-2 rounded-lg bg-secondary/15 text-secondary border border-secondary/40 hover:bg-secondary/25 text-xs font-semibold transition inline-flex items-center gap-1.5"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px]">shield</span>
|
|
<span>Founder Portal</span>
|
|
</Link>
|
|
<button className="px-4 py-2 rounded-lg bg-brand-cardAlt border border-brand-border hover:border-slate-500 text-xs font-semibold text-white transition">
|
|
Billing unavailable
|
|
</button>
|
|
<button className="px-4 py-2 rounded-lg bg-cyan-500/10 text-brand-cyan border border-brand-cyan/40 hover:bg-cyan-500/20 text-xs font-semibold transition">
|
|
Hardware diagnostics unavailable
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Right 5 cols: Connected Apps & Cluster Sync */}
|
|
<div className="lg:col-span-5 glass-card rounded-xl border border-brand-border p-6 flex flex-col justify-between" data-purpose="app-and-cluster-connections">
|
|
<div>
|
|
<div className="flex items-center justify-between border-b border-brand-border pb-4 mb-4">
|
|
<span className="text-xs font-mono tracking-normal text-brand-cyan">App Connections & Sync</span>
|
|
<span className="text-xs font-mono text-brand-emerald flex items-center space-x-1.5">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-brand-emerald"></span>
|
|
<span>All Synced</span>
|
|
</span>
|
|
</div>
|
|
{/* Sync List */}
|
|
<div className="space-y-3 font-mono text-xs">
|
|
{/* Google App Account */}
|
|
<div className="p-3 bg-brand-cardAlt/70 rounded-lg border border-brand-border flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center font-bold text-slate-300">
|
|
G
|
|
</div>
|
|
<div>
|
|
<span className="text-white block font-sans font-medium">Google Account</span>
|
|
<span className="text-slate-400 text-[11px]">bponders12@gmail.com</span>
|
|
</div>
|
|
</div>
|
|
<span className="text-brand-emerald text-[11px] bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">Connected</span>
|
|
</div>
|
|
{/* MotorSignal Mobile App */}
|
|
<div className="p-3 bg-brand-cardAlt/70 rounded-lg border border-brand-border flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 rounded-lg bg-cyan-500/15 text-brand-cyan flex items-center justify-center">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path></svg>
|
|
</div>
|
|
<div>
|
|
<span className="text-white block font-sans font-medium">iOS Mobile App</span>
|
|
<span className="text-slate-400 text-[11px]">iPhone 16 Pro • v4.1.0</span>
|
|
</div>
|
|
</div>
|
|
<span className="text-slate-400 text-[11px]">14m ago</span>
|
|
</div>
|
|
{/* Comms / Cardo */}
|
|
<div className="p-3 bg-brand-cardAlt/70 rounded-lg border border-brand-border flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 rounded-lg bg-slate-800 text-slate-300 flex items-center justify-center">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 100-6 3 3 0 000 6z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path></svg>
|
|
</div>
|
|
<div>
|
|
<span className="text-white block font-sans font-medium">Helmet Comms Link</span>
|
|
<span className="text-slate-400 text-[11px]">Cardo Packtalk Edge</span>
|
|
</div>
|
|
</div>
|
|
<span className="text-brand-emerald text-[11px] bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">Paired</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pt-3 flex items-center justify-between text-xs font-mono">
|
|
<span className="text-slate-400">Apple Watch Companion: <span className="text-slate-300 font-semibold">Active (HRM Sync)</span></span>
|
|
<button className="text-brand-cyan hover:underline font-sans font-medium">Manage Devices</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: PlanAndClusterSection */}
|
|
{/* BEGIN: SecurityAndSessionsGrid */}
|
|
<section className="grid grid-cols-1 lg:grid-cols-12 gap-6" data-purpose="security-and-session-management">
|
|
{/* Sessions (7 cols) */}
|
|
<div className="lg:col-span-7 glass-card rounded-xl border border-brand-border p-6" data-purpose="active-browser-sessions">
|
|
<div className="flex items-center justify-between border-b border-brand-border pb-4 mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white">Active Device Sessions</h3>
|
|
<p className="text-xs font-mono text-slate-400 mt-0.5">Authenticated tokens accessing MotorSignal account telemetry</p>
|
|
</div>
|
|
</div>
|
|
<SessionManager />
|
|
</div>
|
|
{/* Security & SOS Preferences (5 cols) */}
|
|
<div className="lg:col-span-5 glass-card rounded-xl border border-brand-border p-6 flex flex-col justify-between" data-purpose="safety-and-security">
|
|
<div>
|
|
<div className="border-b border-brand-border pb-4 mb-4">
|
|
<h3 className="text-lg font-bold text-white">Account & Security</h3>
|
|
<p className="text-xs font-mono text-slate-400 mt-0.5">Account-link status and security settings</p>
|
|
</div>
|
|
<div className="space-y-4 text-xs font-mono">
|
|
{/* Google App Link */}
|
|
<div className="p-3 rounded-lg bg-brand-cardAlt border border-brand-border">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-white font-bold block">Mobile App Account Link</span>
|
|
<span className={`px-2 py-0.5 rounded text-[10px] font-bold ${user ? 'text-brand-emerald bg-emerald-500/10 border border-emerald-500/20' : 'text-slate-400 bg-slate-800'}`}>
|
|
{user ? 'CONNECTED' : 'NOT LINKED'}
|
|
</span>
|
|
</div>
|
|
<FirebaseLink linked={!!user} />
|
|
</div>
|
|
{/* 2FA State */}
|
|
<div className="flex items-center justify-between p-3 rounded-lg bg-brand-cardAlt border border-brand-border">
|
|
<div>
|
|
<span className="text-white font-bold block">Two-Factor Authentication (2FA)</span>
|
|
<span className="text-slate-400 text-[11px]">Hardware TOTP Authenticator</span>
|
|
</div>
|
|
<span className="text-brand-emerald bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 font-bold">ENABLED</span>
|
|
</div>
|
|
{/* Leaderboard Privacy */}
|
|
<div className="flex items-center justify-between p-3 rounded-lg bg-brand-cardAlt border border-brand-border">
|
|
<div>
|
|
<span className="text-white font-bold block">Telemetry Privacy Mode</span>
|
|
<span className="text-slate-400 text-[11px]">Public Leaderboard (Club Trophies)</span>
|
|
</div>
|
|
<button className="text-brand-cyan hover:underline">Change</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pt-4 border-t border-brand-border mt-4 flex items-center justify-between text-xs">
|
|
<span className="text-slate-400 font-mono">Telemetry Data Retention: 100% Retained</span>
|
|
<a className="text-brand-cyan hover:underline font-mono" href="/account">Security Logs</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: SecurityAndSessionsGrid */}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|