Changes

src/pages/user/ActivityPage.tsx

@@ -0,0 +1,182 @@
+import { useState } from "react";
+import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, CheckCircle, MapPin } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const activityEvents = [
+  {
+    id: "1",
+    type: "login_success",
+    method: "password",
+    timestamp: "2024-01-15T10:30:00Z",
+    location: "San Francisco, CA",
+    device: "Chrome on macOS",
+    ip: "192.168.1.1",
+  },
+  {
+    id: "2",
+    type: "login_success",
+    method: "passkey",
+    timestamp: "2024-01-14T15:45:00Z",
+    location: "San Francisco, CA",
+    device: "Safari on iOS",
+    ip: "192.168.1.2",
+  },
+  {
+    id: "3",
+    type: "login_failed",
+    method: "password",
+    timestamp: "2024-01-14T12:00:00Z",
+    location: "Unknown",
+    device: "Firefox on Windows",
+    ip: "10.0.0.5",
+  },
+  {
+    id: "4",
+    type: "mfa_enabled",
+    method: "totp",
+    timestamp: "2024-01-13T09:00:00Z",
+    location: "San Francisco, CA",
+    device: "Chrome on macOS",
+    ip: "192.168.1.1",
+  },
+  {
+    id: "5",
+    type: "passkey_added",
+    method: "passkey",
+    timestamp: "2024-01-12T14:30:00Z",
+    location: "San Francisco, CA",
+    device: "Safari on macOS",
+    ip: "192.168.1.1",
+  },
+];
+
+const getEventIcon = (type: string, method: string) => {
+  switch (type) {
+    case "login_success":
+      return method === "passkey" ? (
+        <Fingerprint className="w-4 h-4" />
+      ) : (
+        <LogIn className="w-4 h-4" />
+      );
+    case "login_failed":
+      return <AlertTriangle className="w-4 h-4" />;
+    case "mfa_enabled":
+      return <Smartphone className="w-4 h-4" />;
+    case "passkey_added":
+      return <Fingerprint className="w-4 h-4" />;
+    case "logout":
+      return <LogOut className="w-4 h-4" />;
+    default:
+      return <Key className="w-4 h-4" />;
+  }
+};
+
+const getEventTitle = (type: string, method: string) => {
+  switch (type) {
+    case "login_success":
+      return `Signed in with ${method}`;
+    case "login_failed":
+      return "Failed login attempt";
+    case "mfa_enabled":
+      return "Two-factor authentication enabled";
+    case "passkey_added":
+      return "Passkey added";
+    case "logout":
+      return "Signed out";
+    default:
+      return "Security event";
+  }
+};
+
+const getEventStatus = (type: string) => {
+  if (type === "login_failed") {
+    return { variant: "destructive" as const, label: "Failed" };
+  }
+  return { variant: "default" as const, label: "Success" };
+};
+
+export default function ActivityPage() {
+  const [filter, setFilter] = useState("all");
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(date);
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="page-title">Activity</h1>
+          <p className="page-description">
+            Your recent account activity and security events
+          </p>
+        </div>
+        <Select value={filter} onValueChange={setFilter}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Filter events" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All events</SelectItem>
+            <SelectItem value="logins">Logins only</SelectItem>
+            <SelectItem value="security">Security changes</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Card>
+        <CardContent className="p-0">
+          <div className="divide-y">
+            {activityEvents.map((event) => {
+              const status = getEventStatus(event.type);
+              return (
+                <div key={event.id} className="p-4 flex items-start gap-4">
+                  <div
+                    className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                      event.type === "login_failed"
+                        ? "bg-destructive/10 text-destructive"
+                        : "bg-accent/10 text-accent"
+                    }`}
+                  >
+                    {getEventIcon(event.type, event.method)}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <p className="font-medium text-foreground">
+                        {getEventTitle(event.type, event.method)}
+                      </p>
+                      {event.type === "login_failed" && (
+                        <Badge variant="destructive" className="text-xs">
+                          Failed
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="mt-1 text-sm text-muted-foreground space-y-0.5">
+                      <p>{event.device}</p>
+                      <div className="flex items-center gap-2">
+                        <MapPin className="w-3 h-3" />
+                        <span>{event.location}</span>
+                        <span className="text-muted-foreground/50">•</span>
+                        <span className="font-mono text-xs">{event.ip}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-sm text-muted-foreground whitespace-nowrap">
+                    {formatDate(event.timestamp)}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/pages/user/LinkedAccountsPage.tsx

@@ -0,0 +1,121 @@
+import { Link2, Unlink, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+const socialProviders = [
+  {
+    id: "google",
+    name: "Google",
+    icon: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        />
+        <path
+          fill="currentColor"
+          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        />
+        <path
+          fill="currentColor"
+          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        />
+        <path
+          fill="currentColor"
+          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        />
+      </svg>
+    ),
+    linked: true,
+    email: "john.doe@gmail.com",
+  },
+  {
+    id: "github",
+    name: "GitHub",
+    icon: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
+        />
+      </svg>
+    ),
+    linked: true,
+    email: "johndoe",
+  },
+  {
+    id: "microsoft",
+    name: "Microsoft",
+    icon: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24">
+        <path fill="#f25022" d="M1 1h10v10H1z" />
+        <path fill="#00a4ef" d="M1 13h10v10H1z" />
+        <path fill="#7fba00" d="M13 1h10v10H13z" />
+        <path fill="#ffb900" d="M13 13h10v10H13z" />
+      </svg>
+    ),
+    linked: false,
+    email: null,
+  },
+];
+
+export default function LinkedAccountsPage() {
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Linked Accounts</h1>
+        <p className="page-description">
+          Connect external accounts for alternative login methods
+        </p>
+      </div>
+
+      <Alert className="mb-6">
+        <AlertCircle className="w-4 h-4" />
+        <AlertDescription>
+          Linked accounts can only be used to sign in to an existing Authy2 account.
+          They cannot be used to create new accounts.
+        </AlertDescription>
+      </Alert>
+
+      <div className="space-y-4">
+        {socialProviders.map((provider) => (
+          <Card key={provider.id}>
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 rounded-lg bg-secondary flex items-center justify-center">
+                    {provider.icon}
+                  </div>
+                  <div>
+                    <p className="font-medium text-foreground">{provider.name}</p>
+                    {provider.linked ? (
+                      <p className="text-sm text-muted-foreground">{provider.email}</p>
+                    ) : (
+                      <p className="text-sm text-muted-foreground">Not connected</p>
+                    )}
+                  </div>
+                </div>
+                {provider.linked ? (
+                  <div className="flex items-center gap-3">
+                    <Badge className="bg-success/10 text-success border-0">Connected</Badge>
+                    <Button variant="outline" size="sm">
+                      <Unlink className="w-4 h-4 mr-2" />
+                      Disconnect
+                    </Button>
+                  </div>
+                ) : (
+                  <Button size="sm">
+                    <Link2 className="w-4 h-4 mr-2" />
+                    Connect
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/user/ProfilePage.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { Mail, Building2, Upload, CheckCircle, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export default function ProfilePage() {
+  const [name, setName] = useState("John Doe");
+  const [isEditing, setIsEditing] = useState(false);
+
+  // Mock user data
+  const user = {
+    name: "John Doe",
+    email: "john@example.com",
+    emailVerified: true,
+    avatar: null,
+    initials: "JD",
+    organizations: [
+      { name: "Acme Corp", role: "Admin" },
+      { name: "Beta Inc", role: "Member" },
+    ],
+  };
+
+  const handleSave = () => {
+    setIsEditing(false);
+    // Save logic here
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Profile</h1>
+        <p className="page-description">
+          Manage your personal information and organization memberships
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Profile Photo & Name */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Personal Information</CardTitle>
+            <CardDescription>Update your photo and personal details</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Avatar */}
+            <div className="flex items-center gap-6">
+              <Avatar className="w-20 h-20">
+                <AvatarImage src={user.avatar || undefined} />
+                <AvatarFallback className="bg-primary text-primary-foreground text-xl">
+                  {user.initials}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <Button variant="outline" size="sm">
+                  <Upload className="w-4 h-4 mr-2" />
+                  Change photo
+                </Button>
+                <p className="text-xs text-muted-foreground mt-2">
+                  JPG, PNG or GIF. Max 2MB.
+                </p>
+              </div>
+            </div>
+
+            {/* Name */}
+            <div className="space-y-2">
+              <Label htmlFor="name">Full name</Label>
+              {isEditing ? (
+                <div className="flex gap-2">
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                  />
+                  <Button onClick={handleSave}>Save</Button>
+                  <Button variant="outline" onClick={() => setIsEditing(false)}>
+                    Cancel
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
+                  <span className="text-foreground">{user.name}</span>
+                  <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
+                    Edit
+                  </Button>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Email */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Email Address</CardTitle>
+            <CardDescription>Your email is used for login and notifications</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
+              <div className="flex items-center gap-3">
+                <Mail className="w-4 h-4 text-muted-foreground" />
+                <span className="text-foreground">{user.email}</span>
+                {user.emailVerified ? (
+                  <Badge variant="secondary" className="bg-success/10 text-success border-0">
+                    <CheckCircle className="w-3 h-3 mr-1" />
+                    Verified
+                  </Badge>
+                ) : (
+                  <Badge variant="secondary" className="bg-warning/10 text-warning border-0">
+                    <AlertCircle className="w-3 h-3 mr-1" />
+                    Unverified
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Organizations */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Organizations</CardTitle>
+            <CardDescription>Organizations you're a member of</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {user.organizations.map((org, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
+                      <Building2 className="w-4 h-4 text-primary" />
+                    </div>
+                    <span className="text-foreground font-medium">{org.name}</span>
+                  </div>
+                  <Badge variant="secondary">{org.role}</Badge>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/pages/user/SecurityPage.tsx

@@ -0,0 +1,185 @@
+import { useState } from "react";
+import { Lock, Fingerprint, Smartphone, Shield, Plus, AlertTriangle, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+
+export default function SecurityPage() {
+  const [showPasswordForm, setShowPasswordForm] = useState(false);
+
+  // Mock security data
+  const security = {
+    passwordLastChanged: "3 months ago",
+    totpEnabled: true,
+    passkeysCount: 2,
+    passkeys: [
+      { id: "1", name: "MacBook Pro Touch ID", lastUsed: "Today" },
+      { id: "2", name: "iPhone Face ID", lastUsed: "Yesterday" },
+    ],
+    policyRequirements: {
+      totpRequired: true,
+      passkeysRequired: false,
+      minPasswordLength: 12,
+    },
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Security</h1>
+        <p className="page-description">
+          Manage your authentication methods and security settings
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Policy Status */}
+        <Card className="border-accent/30 bg-accent/5">
+          <CardContent className="p-4">
+            <div className="flex items-start gap-3">
+              <Shield className="w-5 h-5 text-accent mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-foreground">Organization Policy</p>
+                <p className="text-sm text-muted-foreground">
+                  Your organization requires TOTP to be enabled for all members.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Password */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Lock className="w-4 h-4" />
+                  Password
+                </CardTitle>
+                <CardDescription>Last changed {security.passwordLastChanged}</CardDescription>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowPasswordForm(!showPasswordForm)}
+              >
+                Change password
+              </Button>
+            </div>
+          </CardHeader>
+          {showPasswordForm && (
+            <CardContent className="space-y-4 border-t pt-4">
+              <div className="space-y-2">
+                <Label htmlFor="currentPassword">Current password</Label>
+                <Input id="currentPassword" type="password" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="newPassword">New password</Label>
+                <Input id="newPassword" type="password" />
+                <p className="text-xs text-muted-foreground">
+                  Minimum {security.policyRequirements.minPasswordLength} characters required by organization
+                </p>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm new password</Label>
+                <Input id="confirmPassword" type="password" />
+              </div>
+              <div className="flex gap-2">
+                <Button>Update password</Button>
+                <Button variant="outline" onClick={() => setShowPasswordForm(false)}>
+                  Cancel
+                </Button>
+              </div>
+            </CardContent>
+          )}
+        </Card>
+
+        {/* TOTP / Authenticator */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Smartphone className="w-4 h-4" />
+                  Authenticator App (TOTP)
+                  {security.policyRequirements.totpRequired && (
+                    <Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
+                  )}
+                </CardTitle>
+                <CardDescription>
+                  Use an authenticator app for two-factor authentication
+                </CardDescription>
+              </div>
+              {security.totpEnabled ? (
+                <Badge className="bg-success/10 text-success border-0">
+                  <CheckCircle className="w-3 h-3 mr-1" />
+                  Enabled
+                </Badge>
+              ) : (
+                <Button size="sm">Set up</Button>
+              )}
+            </div>
+          </CardHeader>
+          {security.totpEnabled && (
+            <CardContent className="border-t pt-4">
+              <Button variant="outline" size="sm">
+                Reconfigure
+              </Button>
+            </CardContent>
+          )}
+        </Card>
+
+        {/* Passkeys */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Fingerprint className="w-4 h-4" />
+                  Passkeys
+                  {security.policyRequirements.passkeysRequired && (
+                    <Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
+                  )}
+                </CardTitle>
+                <CardDescription>
+                  Use biometrics or security keys for passwordless login
+                </CardDescription>
+              </div>
+              <Button size="sm">
+                <Plus className="w-4 h-4 mr-2" />
+                Add passkey
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="border-t pt-4">
+            <div className="space-y-3">
+              {security.passkeys.map((passkey) => (
+                <div
+                  key={passkey.id}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
+                      <Fingerprint className="w-4 h-4 text-primary" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-foreground">{passkey.name}</p>
+                      <p className="text-xs text-muted-foreground">Last used: {passkey.lastUsed}</p>
+                    </div>
+                  </div>
+                  <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
+                    Remove
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}