@wakastellar/ui 2.1.2 → 2.3.0

package/src/components/waka-secret-card/index.tsx

@@ -0,0 +1,371 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import { Card, CardContent, CardHeader, CardTitle } from "../card"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Key,
+  Copy,
+  CheckCircle2,
+  RotateCcw,
+  Trash2,
+  Clock,
+  Eye,
+  EyeOff,
+  AlertTriangle,
+  Shield,
+  User,
+  Calendar,
+  History,
+} from "lucide-react"
+
+export interface SecretAccess {
+  user: string
+  action: "read" | "write" | "rotate"
+  timestamp: Date
+}
+
+export interface Secret {
+  id: string
+  name: string
+  description?: string
+  type: "api-key" | "password" | "certificate" | "token" | "other"
+  value?: string // Usually not exposed
+  createdAt: Date
+  updatedAt: Date
+  expiresAt?: Date
+  rotatedAt?: Date
+  rotationPeriod?: number // in days
+  lastAccessedAt?: Date
+  lastAccessedBy?: string
+  accessHistory?: SecretAccess[]
+  tags?: string[]
+}
+
+export interface WakaSecretCardProps {
+  /** Secret data */
+  secret: Secret
+  /** Callback when rotating secret */
+  onRotate?: () => void
+  /** Callback when deleting secret */
+  onDelete?: () => void
+  /** Callback when copying secret */
+  onCopy?: () => void
+  /** Callback when viewing secret value */
+  onView?: () => void
+  /** Whether the secret value is visible */
+  isValueVisible?: boolean
+  /** Show access history */
+  showHistory?: boolean
+  /** Compact mode */
+  compact?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const typeConfig: Record<Secret["type"], { icon: React.ElementType; label: string; color: string }> = {
+  "api-key": { icon: Key, label: "API Key", color: "text-blue-500" },
+  password: { icon: Shield, label: "Password", color: "text-purple-500" },
+  certificate: { icon: Shield, label: "Certificate", color: "text-green-500" },
+  token: { icon: Key, label: "Token", color: "text-orange-500" },
+  other: { icon: Key, label: "Secret", color: "text-gray-500" },
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("fr-FR", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  })
+}
+
+function formatRelativeTime(date: Date): string {
+  const diff = Date.now() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 30) return formatDate(date)
+  if (days > 0) return `${days}d ago`
+  if (hours > 0) return `${hours}h ago`
+  return `${minutes}m ago`
+}
+
+function isExpiringSoon(date?: Date): boolean {
+  if (!date) return false
+  const diff = date.getTime() - Date.now()
+  return diff > 0 && diff < 7 * 24 * 60 * 60 * 1000 // Less than 7 days
+}
+
+function isExpired(date?: Date): boolean {
+  if (!date) return false
+  return date.getTime() < Date.now()
+}
+
+function needsRotation(secret: Secret): boolean {
+  if (!secret.rotationPeriod || !secret.rotatedAt) return false
+  const daysSinceRotation = Math.floor(
+    (Date.now() - secret.rotatedAt.getTime()) / (24 * 60 * 60 * 1000)
+  )
+  return daysSinceRotation >= secret.rotationPeriod
+}
+
+export function WakaSecretCard({
+  secret,
+  onRotate,
+  onDelete,
+  onCopy,
+  onView,
+  isValueVisible = false,
+  showHistory = false,
+  compact = false,
+  className,
+}: WakaSecretCardProps) {
+  const [copied, setCopied] = React.useState(false)
+  const typeConf = typeConfig[secret.type]
+  const TypeIcon = typeConf.icon
+  const expired = isExpired(secret.expiresAt)
+  const expiringSoon = isExpiringSoon(secret.expiresAt)
+  const needsRotate = needsRotation(secret)
+
+  const handleCopy = () => {
+    onCopy?.()
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  if (compact) {
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/30 transition-colors",
+          expired && "border-red-500/50 bg-red-500/5",
+          expiringSoon && !expired && "border-yellow-500/50 bg-yellow-500/5",
+          needsRotate && "border-orange-500/50",
+          className
+        )}
+      >
+        <TypeIcon className={cn("h-5 w-5 shrink-0", typeConf.color)} />
+
+        <div className="flex-1 min-w-0">
+          <div className="font-medium truncate">{secret.name}</div>
+          <div className="text-xs text-muted-foreground flex items-center gap-2">
+            <span>{typeConf.label}</span>
+            {secret.lastAccessedAt && (
+              <span>Last used {formatRelativeTime(secret.lastAccessedAt)}</span>
+            )}
+          </div>
+        </div>
+
+        {expired && (
+          <Badge className="bg-red-500 text-xs">Expired</Badge>
+        )}
+        {expiringSoon && !expired && (
+          <Badge className="bg-yellow-500 text-xs">Expiring Soon</Badge>
+        )}
+        {needsRotate && (
+          <Badge variant="outline" className="text-orange-500 text-xs">
+            <RotateCcw className="h-3 w-3 mr-1" />
+            Rotate
+          </Badge>
+        )}
+
+        <div className="flex items-center gap-1">
+          {onView && (
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={onView}>
+              {isValueVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </Button>
+          )}
+          {onCopy && (
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={handleCopy}>
+              {copied ? <CheckCircle2 className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+            </Button>
+          )}
+          {onRotate && (
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={onRotate}>
+              <RotateCcw className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Card className={cn(
+      expired && "border-red-500/50",
+      expiringSoon && !expired && "border-yellow-500/50",
+      className
+    )}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <div className={cn(
+              "w-10 h-10 rounded-lg flex items-center justify-center",
+              "bg-muted"
+            )}>
+              <TypeIcon className={cn("h-5 w-5", typeConf.color)} />
+            </div>
+            <div>
+              <CardTitle className="text-base">{secret.name}</CardTitle>
+              <div className="flex items-center gap-2 mt-1">
+                <Badge variant="outline" className="text-xs">
+                  {typeConf.label}
+                </Badge>
+                {secret.tags?.map((tag) => (
+                  <Badge key={tag} variant="secondary" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1">
+            {expired && (
+              <Badge className="bg-red-500">
+                <AlertTriangle className="h-3 w-3 mr-1" />
+                Expired
+              </Badge>
+            )}
+            {expiringSoon && !expired && (
+              <Badge className="bg-yellow-500">
+                <Clock className="h-3 w-3 mr-1" />
+                Expires {formatDate(secret.expiresAt!)}
+              </Badge>
+            )}
+            {needsRotate && (
+              <Badge variant="outline" className="text-orange-500">
+                <RotateCcw className="h-3 w-3 mr-1" />
+                Needs Rotation
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {secret.description && (
+          <p className="text-sm text-muted-foreground">{secret.description}</p>
+        )}
+
+        {/* Secret value preview */}
+        {secret.value && (
+          <div className="flex items-center gap-2 p-2 bg-muted/50 rounded-lg font-mono text-sm">
+            <span className="flex-1 truncate">
+              {isValueVisible ? secret.value : "•".repeat(24)}
+            </span>
+            {onView && (
+              <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0" onClick={onView}>
+                {isValueVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+            )}
+            {onCopy && (
+              <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0" onClick={handleCopy}>
+                {copied ? <CheckCircle2 className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Metadata */}
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Calendar className="h-4 w-4" />
+            <span>Created {formatDate(secret.createdAt)}</span>
+          </div>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Clock className="h-4 w-4" />
+            <span>Updated {formatRelativeTime(secret.updatedAt)}</span>
+          </div>
+          {secret.rotatedAt && (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <RotateCcw className="h-4 w-4" />
+              <span>Rotated {formatRelativeTime(secret.rotatedAt)}</span>
+            </div>
+          )}
+          {secret.lastAccessedAt && (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <User className="h-4 w-4" />
+              <span>
+                Used {formatRelativeTime(secret.lastAccessedAt)}
+                {secret.lastAccessedBy && ` by ${secret.lastAccessedBy}`}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Access history */}
+        {showHistory && secret.accessHistory && secret.accessHistory.length > 0 && (
+          <div className="border-t pt-4">
+            <div className="flex items-center gap-2 mb-2 text-sm font-medium">
+              <History className="h-4 w-4" />
+              Recent Access
+            </div>
+            <div className="space-y-1">
+              {secret.accessHistory.slice(0, 5).map((access, i) => (
+                <div key={i} className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>
+                    {access.user} - {access.action}
+                  </span>
+                  <span>{formatRelativeTime(access.timestamp)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center gap-2 pt-2 border-t">
+          {onRotate && (
+            <Button variant="outline" size="sm" onClick={onRotate}>
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Rotate
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={onDelete}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// Default sample secret for demo
+export const defaultSecret: Secret = {
+  id: "1",
+  name: "Production API Key",
+  description: "Main API key for production services",
+  type: "api-key",
+  value: "sk_live_1234567890abcdefghijklmnopqrstuvwxyz",
+  createdAt: new Date(Date.now() - 90 * 24 * 3600000),
+  updatedAt: new Date(Date.now() - 7 * 24 * 3600000),
+  rotatedAt: new Date(Date.now() - 30 * 24 * 3600000),
+  rotationPeriod: 30,
+  expiresAt: new Date(Date.now() + 23 * 24 * 3600000),
+  lastAccessedAt: new Date(Date.now() - 2 * 3600000),
+  lastAccessedBy: "api-gateway",
+  tags: ["production", "critical"],
+  accessHistory: [
+    { user: "api-gateway", action: "read", timestamp: new Date(Date.now() - 2 * 3600000) },
+    { user: "john.doe", action: "rotate", timestamp: new Date(Date.now() - 30 * 24 * 3600000) },
+    { user: "api-gateway", action: "read", timestamp: new Date(Date.now() - 24 * 3600000) },
+  ],
+}