@xk2800/nextjs-template 0.5.3

package/components/dashboard/sessionsCard.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card"
+import { Badge } from "../ui/badge"
+import { Button } from "../ui/button"
+import { DataTable, type Column } from "../ui/data-table"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog"
+import { formatDateTime } from "../../lib/formatters"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+
+interface Session {
+  id: string
+  createdAt: Date
+  expiresAt: Date
+  ipAddress: string | null
+  userAgent: string | null
+  token: string
+}
+
+interface SessionsCardProps {
+  userId: string
+  initialSessions: Session[]
+  currentSessionToken: string
+  enableSessionRevocation: boolean
+}
+
+const baseColumns: Column<Session>[] = [
+  {
+    name: 'createdAt',
+    title: 'Created',
+    renderer: (session) => <span className="text-sm">{formatDateTime(session.createdAt)}</span>,
+  },
+  {
+    name: 'expiresAt',
+    title: 'Expires',
+    renderer: (session) => <span className="text-sm">{formatDateTime(session.expiresAt)}</span>,
+  },
+  {
+    name: 'ipAddress',
+    title: 'IP Address',
+    renderer: (session) => <span className="text-sm font-mono">{session.ipAddress || 'N/A'}</span>,
+  },
+  {
+    name: 'userAgent',
+    title: 'User Agent',
+    renderer: (session) => (
+      <span className="text-sm max-w-xs truncate block">{session.userAgent || 'N/A'}</span>
+    ),
+  },
+]
+
+export default function SessionsCard({
+  userId,
+  initialSessions,
+  currentSessionToken,
+  enableSessionRevocation
+}: SessionsCardProps) {
+  const router = useRouter()
+  const [sessions, setSessions] = useState(initialSessions)
+  const [sessionToRevoke, setSessionToRevoke] = useState<string | null>(null)
+  const [isRevoking, setIsRevoking] = useState(false)
+
+  const now = new Date()
+  const activeSessions = sessions.filter(s => new Date(s.expiresAt) > now)
+  const expiredSessions = sessions.filter(s => new Date(s.expiresAt) <= now)
+
+  const handleRevokeSession = async (sessionId: string) => {
+    setIsRevoking(true)
+    try {
+      const response = await fetch('/api/sessions/revoke', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId }),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to revoke session')
+      }
+
+      toast.success('Session revoked successfully')
+      setSessions(sessions.filter(s => s.id !== sessionId))
+      setSessionToRevoke(null)
+      router.refresh()
+    } catch (error) {
+      toast.error('Failed to revoke session')
+      console.error(error)
+    } finally {
+      setIsRevoking(false)
+    }
+  }
+
+  const isCurrentSession = (token: string) => token === currentSessionToken
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Active Sessions</CardTitle>
+          <CardDescription>
+            You have {activeSessions.length} active session(s)
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {activeSessions.length === 0 ? (
+            <p className="text-sm text-gray-600 dark:text-gray-400 text-center py-8">
+              No active sessions found
+            </p>
+          ) : (
+            <DataTable
+              columns={[
+                {
+                  name: 'status',
+                  title: 'Status',
+                  renderer: (session) => {
+                    const isCurrent = isCurrentSession(session.token)
+                    return (
+                      <Badge variant={isCurrent ? "default" : "secondary"}>
+                        {isCurrent ? "Current" : "Active"}
+                      </Badge>
+                    )
+                  },
+                },
+                ...baseColumns,
+                ...(enableSessionRevocation
+                  ? [
+                      {
+                        name: 'actions',
+                        title: 'Actions',
+                        renderer: (session: Session) =>
+                          !isCurrentSession(session.token) && (
+                            <Button
+                              variant="destructive"
+                              size="sm"
+                              onClick={() => setSessionToRevoke(session.id)}
+                            >
+                              Revoke
+                            </Button>
+                          ),
+                      },
+                    ]
+                  : []),
+              ]}
+              data={activeSessions}
+              getRowId={(session) => session.id}
+            />
+          )}
+
+          {/* Show expired sessions count if any */}
+          {expiredSessions.length > 0 && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
+              {expiredSessions.length} expired session(s) not shown
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog
+        open={!!sessionToRevoke}
+        onOpenChange={() => setSessionToRevoke(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Revoke Session?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will log out the device associated with this session.
+              This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isRevoking}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => sessionToRevoke && handleRevokeSession(sessionToRevoke)}
+              disabled={isRevoking}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isRevoking ? "Revoking..." : "Revoke Session"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/components/dashboard/sessionsCardSkeleton.tsx

@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card"
+import { Skeleton } from "../ui/skeleton"
+
+export default function SessionsCardSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Active Sessions</CardTitle>
+        <CardDescription>Loading...</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {[...Array(5)].map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full" />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/sessionsSection.tsx

@@ -0,0 +1,22 @@
+import { cookies } from "next/headers"
+import { getUserSessions } from "@xk2800/nextjs-template/sessions/queries"
+import { getSystemSettings } from "@xk2800/nextjs-template/settings/queries"
+import SessionsCard from "./sessionsCard"
+
+export default async function SessionsSection({ userId }: { userId: string }) {
+  const [allSessions, settings] = await Promise.all([
+    getUserSessions(userId),
+    getSystemSettings(),
+  ])
+  const cookieStore = await cookies()
+  const currentSessionToken = cookieStore.get('better-auth.session_token')?.value || ''
+
+  return (
+    <SessionsCard
+      userId={userId}
+      initialSessions={allSessions}
+      currentSessionToken={currentSessionToken}
+      enableSessionRevocation={settings.enableSessionRevocation}
+    />
+  )
+}

package/components/dashboard/twoFactorCard.tsx

@@ -0,0 +1,344 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import QRCode from 'react-qr-code'
+import { toast } from 'sonner'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { PasswordInput } from '../ui/password-input'
+import { Badge } from '../ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { useSession, authClient } from '../../lib/auth-client'
+
+type SetupStep = 'password' | 'verify' | 'backup'
+
+function BackupCodeList({ codes }: { codes: string[] }) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">
+        Save these backup codes somewhere safe. Each one works once if you lose
+        access to your authenticator. They won&apos;t be shown again.
+      </p>
+      <div className="grid grid-cols-2 gap-2 rounded-md border p-3 font-mono text-sm">
+        {codes.map((code) => (
+          <span key={code}>{code}</span>
+        ))}
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => {
+          navigator.clipboard.writeText(codes.join('\n'))
+          toast.success('Backup codes copied')
+        }}
+      >
+        Copy codes
+      </Button>
+    </div>
+  )
+}
+
+export default function TwoFactorCard() {
+  const router = useRouter()
+  const { data: session } = useSession()
+  const enabled = !!session?.user?.twoFactorEnabled
+
+  const [setupOpen, setSetupOpen] = useState(false)
+  const [step, setStep] = useState<SetupStep>('password')
+  const [password, setPassword] = useState('')
+  const [code, setCode] = useState('')
+  const [totpUri, setTotpUri] = useState('')
+  const [backupCodes, setBackupCodes] = useState<string[]>([])
+  const [busy, setBusy] = useState(false)
+
+  const [disableOpen, setDisableOpen] = useState(false)
+  const [regenOpen, setRegenOpen] = useState(false)
+
+  const resetSetup = () => {
+    setStep('password')
+    setPassword('')
+    setCode('')
+    setTotpUri('')
+    setBackupCodes([])
+  }
+
+  const startSetup = async () => {
+    setBusy(true)
+    try {
+      const { data, error } = await authClient.twoFactor.enable({ password })
+      if (error || !data) {
+        toast.error(error?.message || 'Could not start 2FA setup')
+        return
+      }
+      setTotpUri(data.totpURI)
+      setBackupCodes(data.backupCodes)
+      setStep('verify')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const verifySetup = async () => {
+    setBusy(true)
+    try {
+      const { error } = await authClient.twoFactor.verifyTotp({ code: code.trim() })
+      if (error) {
+        toast.error(error.message || 'That code did not match')
+        return
+      }
+      setStep('backup')
+      router.refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const disable2fa = async () => {
+    setBusy(true)
+    try {
+      const { error } = await authClient.twoFactor.disable({ password })
+      if (error) {
+        toast.error(error.message || 'Could not disable 2FA')
+        return
+      }
+      toast.success('Two-factor authentication disabled')
+      setDisableOpen(false)
+      setPassword('')
+      router.refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const regenerate = async () => {
+    setBusy(true)
+    try {
+      const { data, error } = await authClient.twoFactor.generateBackupCodes({ password })
+      if (error || !data) {
+        toast.error(error?.message || 'Could not regenerate backup codes')
+        return
+      }
+      setBackupCodes(data.backupCodes)
+      setPassword('')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const secret = (() => {
+    try {
+      return new URL(totpUri).searchParams.get('secret') ?? ''
+    } catch {
+      return ''
+    }
+  })()
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <CardTitle>Two-factor authentication</CardTitle>
+          <Badge variant={enabled ? 'default' : 'secondary'}>
+            {enabled ? 'Enabled' : 'Disabled'}
+          </Badge>
+        </div>
+        <CardDescription>
+          Require a time-based code from an authenticator app when signing in
+          with your password.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-wrap gap-3">
+        {enabled ? (
+          <>
+            <Button variant="outline" onClick={() => { setBackupCodes([]); setPassword(''); setRegenOpen(true) }}>
+              Regenerate backup codes
+            </Button>
+            <Button variant="destructive" onClick={() => { setPassword(''); setDisableOpen(true) }}>
+              Disable 2FA
+            </Button>
+          </>
+        ) : (
+          <Button
+            onClick={() => {
+              resetSetup()
+              setSetupOpen(true)
+            }}
+          >
+            Enable 2FA
+          </Button>
+        )}
+      </CardContent>
+
+      {/* Setup flow */}
+      <Dialog
+        open={setupOpen}
+        onOpenChange={(o) => {
+          setSetupOpen(o)
+          if (!o) resetSetup()
+        }}
+      >
+        <DialogContent>
+          {step === 'password' && (
+            <>
+              <DialogHeader>
+                <DialogTitle>Confirm your password</DialogTitle>
+                <DialogDescription>
+                  Enter your current password to begin setting up two-factor
+                  authentication.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="tfa-password">Password</Label>
+                <PasswordInput
+                  id="tfa-password"
+                  autoComplete="current-password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <DialogFooter>
+                <Button onClick={startSetup} disabled={busy || !password}>
+                  {busy ? 'Checking...' : 'Continue'}
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+
+          {step === 'verify' && (
+            <>
+              <DialogHeader>
+                <DialogTitle>Scan the QR code</DialogTitle>
+                <DialogDescription>
+                  Scan this with your authenticator app, then enter the 6-digit
+                  code it shows to confirm.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex flex-col items-center gap-4">
+                <div className="rounded-md bg-white p-3">
+                  <QRCode value={totpUri} size={160} />
+                </div>
+                {secret && (
+                  <p className="break-all text-center text-xs text-muted-foreground">
+                    Or enter this key manually: <span className="font-mono">{secret}</span>
+                  </p>
+                )}
+                <div className="flex w-full flex-col gap-2">
+                  <Label htmlFor="tfa-code">Authenticator code</Label>
+                  <Input
+                    id="tfa-code"
+                    inputMode="numeric"
+                    autoComplete="one-time-code"
+                    value={code}
+                    onChange={(e) => setCode(e.target.value)}
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <Button onClick={verifySetup} disabled={busy || !code.trim()}>
+                  {busy ? 'Verifying...' : 'Verify & enable'}
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+
+          {step === 'backup' && (
+            <>
+              <DialogHeader>
+                <DialogTitle>Two-factor authentication is on</DialogTitle>
+              </DialogHeader>
+              <BackupCodeList codes={backupCodes} />
+              <DialogFooter>
+                <Button
+                  onClick={() => {
+                    setSetupOpen(false)
+                    resetSetup()
+                  }}
+                >
+                  Done
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Disable */}
+      <Dialog open={disableOpen} onOpenChange={setDisableOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Disable two-factor authentication</DialogTitle>
+            <DialogDescription>
+              Enter your password to turn off 2FA. Your account will be less
+              protected.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="tfa-disable-password">Password</Label>
+            <PasswordInput
+              id="tfa-disable-password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="destructive" onClick={disable2fa} disabled={busy || !password}>
+              {busy ? 'Disabling...' : 'Disable 2FA'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Regenerate backup codes */}
+      <Dialog
+        open={regenOpen}
+        onOpenChange={(o) => {
+          setRegenOpen(o)
+          if (!o) { setBackupCodes([]); setPassword('') }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Regenerate backup codes</DialogTitle>
+            <DialogDescription>
+              This invalidates your existing backup codes.
+            </DialogDescription>
+          </DialogHeader>
+          {backupCodes.length > 0 ? (
+            <BackupCodeList codes={backupCodes} />
+          ) : (
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="tfa-regen-password">Password</Label>
+              <PasswordInput
+                id="tfa-regen-password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+          )}
+          <DialogFooter>
+            {backupCodes.length > 0 ? (
+              <Button onClick={() => setRegenOpen(false)}>Done</Button>
+            ) : (
+              <Button onClick={regenerate} disabled={busy || !password}>
+                {busy ? 'Generating...' : 'Generate new codes'}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  )
+}

package/components/dashboard/verifyEmailButton.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { Button } from '../ui/button'
+import { authClient } from '../../lib/auth-client'
+
+export default function VerifyEmailButton({ email }: { email: string }) {
+  const [sending, setSending] = useState(false)
+  const [sent, setSent] = useState(false)
+
+  async function send() {
+    setSending(true)
+    const { error } = await authClient.sendVerificationEmail({
+      email,
+      callbackURL: '/dashboard',
+    })
+    setSending(false)
+    if (error) {
+      toast.error(error.message || 'Could not send verification email')
+      return
+    }
+    setSent(true)
+    toast.success('Verification email sent — check your inbox')
+  }
+
+  return (
+    <Button size="sm" variant="outline" onClick={send} disabled={sending || sent}>
+      {sent ? 'Email sent' : sending ? 'Sending…' : 'Verify email'}
+    </Button>
+  )
+}

package/components/email/email-template-2.tsx

@@ -0,0 +1,44 @@
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Section,
+  Text,
+  Heading,
+  Hr,
+} from '@react-email/components';
+
+interface EmailTemplate2Props {
+  firstName: string;
+}
+
+export function EmailTemplate2({ firstName }: EmailTemplate2Props) {
+  return (
+    <Html>
+      <Head />
+      <Body style={{ backgroundColor: '#f3f4f6', fontFamily: 'Arial, sans-serif' }}>
+        <Container style={{ margin: '0 auto', padding: '20px 0 48px', maxWidth: '560px' }}>
+          <Section style={{ backgroundColor: '#ffffff', borderRadius: '8px', padding: '32px', boxShadow: '0 1px 3px rgba(0,0,0,0.1)' }}>
+            <Heading style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '8px', color: '#1f2937' }}>
+              Hello {firstName},
+            </Heading>
+            <Text style={{ fontSize: '14px', color: '#6b7280', marginBottom: '24px' }}>
+              This is your second template
+            </Text>
+            <Hr style={{ borderColor: '#e5e7eb', margin: '24px 0' }} />
+            <Text style={{ fontSize: '16px', lineHeight: '24px', color: '#374151', marginBottom: '16px' }}>
+              This is an alternate email template with a different design and layout. You can customize this template with different content, styling, and structure to suit your needs.
+            </Text>
+            <Text style={{ fontSize: '16px', lineHeight: '24px', color: '#374151' }}>
+              Feel free to modify this template to match your brand and message.
+            </Text>
+          </Section>
+          <Text style={{ fontSize: '12px', color: '#9ca3af', marginTop: '32px', textAlign: 'center' }}>
+            © 2024 Your Company. All rights reserved.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}