create-stackr 0.2.0 → 0.3.0

package/templates/features/web/auth/components/settings/two-factor-manage.tsx.ejs

@@ -0,0 +1,253 @@
+'use client';
+
+import { useState } from '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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Shield, ShieldCheck, ShieldOff, Download, Loader2, RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+import { disableTwoFactor, generateBackupCodes } from '@/lib/auth/actions';
+
+interface TwoFactorManageProps {
+  enabled: boolean;
+  onSetupClick: () => void;
+  onDisabled: () => void;
+}
+
+export function TwoFactorManage({ enabled, onSetupClick, onDisabled }: TwoFactorManageProps) {
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [disableDialogOpen, setDisableDialogOpen] = useState(false);
+  const [backupDialogOpen, setBackupDialogOpen] = useState(false);
+  const [newBackupCodes, setNewBackupCodes] = useState<string[]>([]);
+
+  const handleDisable = async () => {
+    if (!password) {
+      toast.error('Please enter your password');
+      return;
+    }
+
+    setIsLoading(true);
+    const result = await disableTwoFactor(password);
+    setIsLoading(false);
+
+    if (!result.success) {
+      toast.error(result.error || 'Failed to disable 2FA');
+      return;
+    }
+
+    toast.success('Two-factor authentication disabled');
+    setDisableDialogOpen(false);
+    setPassword('');
+    onDisabled();
+  };
+
+  const handleGenerateBackupCodes = async () => {
+    if (!password) {
+      toast.error('Please enter your password');
+      return;
+    }
+
+    setIsLoading(true);
+    const result = await generateBackupCodes(password);
+    setIsLoading(false);
+
+    if (!result.success) {
+      toast.error(result.error || 'Failed to generate backup codes');
+      return;
+    }
+
+    setNewBackupCodes(result.backupCodes || []);
+    toast.success('New backup codes generated');
+  };
+
+  const downloadBackupCodes = () => {
+    const content = `Two-Factor Authentication Backup Codes\n${'='.repeat(40)}\n\nKeep these codes safe. Each code can only be used once.\n\n${newBackupCodes.join('\n')}`;
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = '2fa-backup-codes.txt';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  if (!enabled) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            Two-Factor Authentication
+          </CardTitle>
+          <CardDescription>
+            Add an extra layer of security to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <ShieldOff className="h-4 w-4" />
+              <span className="text-sm">Not enabled</span>
+            </div>
+            <Button onClick={onSetupClick}>Enable 2FA</Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldCheck className="h-5 w-5 text-green-600" />
+          Two-Factor Authentication
+        </CardTitle>
+        <CardDescription>
+          Your account is protected with two-factor authentication
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-2 text-green-600">
+          <ShieldCheck className="h-4 w-4" />
+          <span className="text-sm font-medium">Enabled</span>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {/* Generate new backup codes */}
+          <Dialog open={backupDialogOpen} onOpenChange={setBackupDialogOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="sm">
+                <RefreshCw className="mr-2 h-4 w-4" />
+                New Backup Codes
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Generate New Backup Codes</DialogTitle>
+                <DialogDescription>
+                  This will invalidate your existing backup codes and generate new ones.
+                </DialogDescription>
+              </DialogHeader>
+
+              {newBackupCodes.length === 0 ? (
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="backup-password">Confirm your password</Label>
+                    <Input
+                      id="backup-password"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      placeholder="Enter your password"
+                    />
+                  </div>
+                  <Button onClick={handleGenerateBackupCodes} disabled={isLoading} className="w-full">
+                    {isLoading ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Generating...
+                      </>
+                    ) : (
+                      'Generate New Codes'
+                    )}
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <div className="rounded-lg border bg-muted/50 p-4">
+                    <div className="grid grid-cols-2 gap-2">
+                      {newBackupCodes.map((code, i) => (
+                        <code
+                          key={i}
+                          className="rounded bg-background px-2 py-1 text-center text-sm font-mono"
+                        >
+                          {code}
+                        </code>
+                      ))}
+                    </div>
+                  </div>
+                  <Button onClick={downloadBackupCodes} className="w-full">
+                    <Download className="mr-2 h-4 w-4" />
+                    Download Backup Codes
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setBackupDialogOpen(false);
+                      setNewBackupCodes([]);
+                      setPassword('');
+                    }}
+                    className="w-full"
+                  >
+                    Done
+                  </Button>
+                </div>
+              )}
+            </DialogContent>
+          </Dialog>
+
+          {/* Disable 2FA */}
+          <Dialog open={disableDialogOpen} onOpenChange={setDisableDialogOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="sm" className="text-destructive hover:text-destructive">
+                <ShieldOff className="mr-2 h-4 w-4" />
+                Disable 2FA
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Disable Two-Factor Authentication</DialogTitle>
+                <DialogDescription>
+                  This will make your account less secure. Are you sure you want to disable 2FA?
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-2">
+                <Label htmlFor="disable-password">Confirm your password</Label>
+                <Input
+                  id="disable-password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter your password"
+                />
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setDisableDialogOpen(false)}>
+                  Cancel
+                </Button>
+                <Button variant="destructive" onClick={handleDisable} disabled={isLoading}>
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Disabling...
+                    </>
+                  ) : (
+                    'Disable 2FA'
+                  )}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/features/web/auth/components/settings/two-factor-setup.tsx.ejs

@@ -0,0 +1,249 @@
+'use client';
+
+import { useState } from 'react';
+import QRCode from 'react-qr-code';
+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 { Shield, Copy, Download, Check, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { enableTwoFactor, verifyTotpSetup } from '@/lib/auth/actions';
+
+interface TwoFactorSetupProps {
+  onComplete: () => void;
+}
+
+type Step = 'password' | 'qr' | 'verify' | 'backup';
+
+export function TwoFactorSetup({ onComplete }: TwoFactorSetupProps) {
+  const [step, setStep] = useState<Step>('password');
+  const [password, setPassword] = useState('');
+  const [totpURI, setTotpURI] = useState<string | null>(null);
+  const [backupCodes, setBackupCodes] = useState<string[]>([]);
+  const [verificationCode, setVerificationCode] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const handleStartSetup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password) {
+      toast.error('Please enter your password');
+      return;
+    }
+
+    setIsLoading(true);
+    const result = await enableTwoFactor(password);
+    setIsLoading(false);
+
+    if (!result.success) {
+      toast.error(result.error || 'Failed to start 2FA setup');
+      return;
+    }
+
+    setTotpURI(result.totpURI || null);
+    setBackupCodes(result.backupCodes || []);
+    setStep('qr');
+  };
+
+  const handleVerify = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (verificationCode.length !== 6) {
+      toast.error('Please enter a 6-digit code');
+      return;
+    }
+
+    setIsLoading(true);
+    const result = await verifyTotpSetup(verificationCode);
+    setIsLoading(false);
+
+    if (!result.success) {
+      toast.error(result.error || 'Invalid verification code');
+      return;
+    }
+
+    setStep('backup');
+  };
+
+  const copySecret = () => {
+    if (totpURI) {
+      // Extract secret from URI
+      const match = totpURI.match(/secret=([^&]+)/);
+      if (match) {
+        navigator.clipboard.writeText(match[1]);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+        toast.success('Secret copied to clipboard');
+      }
+    }
+  };
+
+  const downloadBackupCodes = () => {
+    const content = `Two-Factor Authentication Backup Codes\n${'='.repeat(40)}\n\nKeep these codes safe. Each code can only be used once.\n\n${backupCodes.join('\n')}`;
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = '2fa-backup-codes.txt';
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success('Backup codes downloaded');
+  };
+
+  const handleFinish = () => {
+    toast.success('Two-factor authentication enabled!');
+    onComplete();
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Shield className="h-5 w-5" />
+          Two-Factor Authentication
+        </CardTitle>
+        <CardDescription>
+          Add an extra layer of security to your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {step === 'password' && (
+          <form onSubmit={handleStartSetup} className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Two-factor authentication adds an additional layer of security by
+              requiring a code from your authenticator app when signing in.
+            </p>
+            <div className="space-y-2">
+              <Label htmlFor="password">Confirm your password</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter your password"
+                disabled={isLoading}
+              />
+            </div>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Setting up...
+                </>
+              ) : (
+                'Enable 2FA'
+              )}
+            </Button>
+          </form>
+        )}
+
+        {step === 'qr' && totpURI && (
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Scan this QR code with your authenticator app (Google Authenticator,
+              Authy, 1Password, etc.)
+            </p>
+
+            <div className="flex justify-center">
+              <div className="rounded-lg bg-white p-4">
+                <QRCode value={totpURI} size={200} />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Input
+                value={totpURI.match(/secret=([^&]+)/)?.[1] || ''}
+                readOnly
+                className="font-mono text-sm"
+              />
+              <Button variant="outline" size="icon" onClick={copySecret}>
+                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+
+            <p className="text-xs text-muted-foreground">
+              Can&apos;t scan? Enter the secret key manually in your app.
+            </p>
+
+            <Button onClick={() => setStep('verify')} className="w-full">
+              Continue
+            </Button>
+          </div>
+        )}
+
+        {step === 'verify' && (
+          <form onSubmit={handleVerify} className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Enter the 6-digit code from your authenticator app to verify setup.
+            </p>
+
+            <div className="space-y-2">
+              <Label htmlFor="verification-code">Verification Code</Label>
+              <Input
+                id="verification-code"
+                value={verificationCode}
+                onChange={(e) =>
+                  setVerificationCode(e.target.value.replace(/\D/g, '').slice(0, 6))
+                }
+                placeholder="000000"
+                className="text-center font-mono text-lg tracking-widest"
+                maxLength={6}
+                autoComplete="one-time-code"
+              />
+            </div>
+
+            <Button type="submit" disabled={isLoading} className="w-full">
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Verifying...
+                </>
+              ) : (
+                'Verify'
+              )}
+            </Button>
+          </form>
+        )}
+
+        {step === 'backup' && (
+          <div className="space-y-4">
+            <div className="rounded-lg border bg-muted/50 p-4">
+              <p className="mb-3 text-sm font-medium">Backup Codes</p>
+              <div className="grid grid-cols-2 gap-2">
+                {backupCodes.map((code, i) => (
+                  <code
+                    key={i}
+                    className="rounded bg-background px-2 py-1 text-center text-sm font-mono"
+                  >
+                    {code}
+                  </code>
+                ))}
+              </div>
+            </div>
+
+            <p className="text-sm text-muted-foreground">
+              Save these backup codes in a safe place. You can use them to access
+              your account if you lose your authenticator device. Each code can
+              only be used once.
+            </p>
+
+            <Button variant="outline" onClick={downloadBackupCodes} className="w-full">
+              <Download className="mr-2 h-4 w-4" />
+              Download Backup Codes
+            </Button>
+
+            <Button onClick={handleFinish} className="w-full">
+              Done
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/templates/features/web/auth/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/templates/features/web/auth/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}