@mars-stack/cli 0.2.0 → 0.2.2

package/template/src/app/(protected)/layout.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Avatar, Text } from '@mars-stack/ui';
+import { useAuth } from '@/features/auth/context/AuthContext';
+import { routes } from '@/config/routes';
+import { appConfig } from '@/config/app.config';
+
+const NAV_ITEMS = [
+  { label: 'Dashboard', href: routes.dashboard },
+  { label: 'Settings', href: routes.settings },
+] as const;
+
+function NavLink({ href, label, active }: { href: string; label: string; active: boolean }) {
+  return (
+    <Link
+      href={href}
+      className={
+        active
+          ? 'text-sm font-semibold text-text-primary border-b-2 border-brand-primary pb-0.5'
+          : 'text-sm font-medium text-text-secondary hover:text-text-primary transition-colors duration-150'
+      }
+    >
+      {label}
+    </Link>
+  );
+}
+
+function MobileNavLink({
+  href,
+  label,
+  active,
+  onClick,
+}: {
+  href: string;
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className={
+        active
+          ? 'block px-3 py-2 text-sm font-semibold text-text-primary bg-ghost-active rounded-lg'
+          : 'block px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-ghost-hover rounded-lg transition-colors duration-150'
+      }
+    >
+      {label}
+    </Link>
+  );
+}
+
+function UserMenu() {
+  const { user, logout } = useAuth();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      setOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open, handleClickOutside]);
+
+  const handleLogout = async () => {
+    setOpen(false);
+    await logout();
+    router.push(routes.signIn);
+  };
+
+  if (!user) return null;
+
+  return (
+    <div ref={menuRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className="flex items-center gap-2 rounded-full p-1 hover:bg-ghost-hover transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-ring-focus"
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        <Avatar name={user.name} size="sm" />
+        <span className="hidden sm:block text-sm font-medium text-text-primary max-w-[120px] truncate">
+          {user.name}
+        </span>
+        <ChevronIcon open={open} />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-56 rounded-xl border border-border-default bg-surface-card shadow-lg py-1 z-50">
+          <div className="px-4 py-3 border-b border-border-default">
+            <Text.Paragraph noMargin className="text-sm! font-semibold! text-text-primary! mb-0!">
+              {user.name}
+            </Text.Paragraph>
+            <Text.Paragraph noMargin className="text-xs! text-text-muted! mb-0!">
+              {user.role}
+            </Text.Paragraph>
+          </div>
+
+          <div className="py-1">
+            <Link
+              href={routes.settings}
+              onClick={() => setOpen(false)}
+              className="flex items-center gap-2 px-4 py-2 text-sm text-text-secondary hover:bg-ghost-hover hover:text-text-primary transition-colors duration-150"
+            >
+              <SettingsIcon />
+              Settings
+            </Link>
+          </div>
+
+          <div className="border-t border-border-default py-1">
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="flex w-full items-center gap-2 px-4 py-2 text-sm text-text-error hover:bg-ghost-hover transition-colors duration-150"
+            >
+              <LogoutIcon />
+              Log out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function HamburgerIcon({ open }: { open: boolean }) {
+  return (
+    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+      {open ? (
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+      ) : (
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+      )}
+    </svg>
+  );
+}
+
+function ChevronIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      className={`hidden sm:block h-4 w-4 text-text-muted transition-transform duration-150 ${open ? 'rotate-180' : ''}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+    </svg>
+  );
+}
+
+function SettingsIcon() {
+  return (
+    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z"
+      />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}
+
+function LogoutIcon() {
+  return (
+    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
+      />
+    </svg>
+  );
+}
+
+export default function ProtectedLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    setMobileMenuOpen(false);
+  }, [pathname]);
+
+  return (
+    <div className="min-h-screen bg-surface-background">
+      <nav className="sticky top-0 z-40 border-b border-border-default bg-surface-primary/80 backdrop-blur-lg">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            {/* Logo */}
+            <div className="flex items-center gap-8">
+              <Link href={routes.dashboard} className="flex items-center gap-2">
+                <Text.H4 noMargin className="mb-0!">
+                  {appConfig.name}
+                </Text.H4>
+              </Link>
+
+              {/* Desktop nav */}
+              <div className="hidden md:flex items-center gap-6">
+                {NAV_ITEMS.map((item) => (
+                  <NavLink key={item.href} href={item.href} label={item.label} active={pathname === item.href} />
+                ))}
+              </div>
+            </div>
+
+            {/* Right side */}
+            <div className="flex items-center gap-3">
+              <div className="hidden md:block">
+                <UserMenu />
+              </div>
+
+              {/* Mobile hamburger */}
+              <button
+                type="button"
+                onClick={() => setMobileMenuOpen((prev) => !prev)}
+                className="md:hidden inline-flex items-center justify-center rounded-lg p-2 text-text-secondary hover:bg-ghost-hover hover:text-text-primary transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-ring-focus"
+                aria-expanded={mobileMenuOpen}
+                aria-label="Toggle navigation menu"
+              >
+                <HamburgerIcon open={mobileMenuOpen} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile menu */}
+        {mobileMenuOpen && (
+          <div className="md:hidden border-t border-border-default bg-surface-primary">
+            <div className="space-y-1 px-4 py-3">
+              {NAV_ITEMS.map((item) => (
+                <MobileNavLink
+                  key={item.href}
+                  href={item.href}
+                  label={item.label}
+                  active={pathname === item.href}
+                  onClick={() => setMobileMenuOpen(false)}
+                />
+              ))}
+            </div>
+            <div className="border-t border-border-default px-4 py-3">
+              <UserMenu />
+            </div>
+          </div>
+        )}
+      </nav>
+
+      <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">{children}</main>
+    </div>
+  );
+}

package/template/src/app/(protected)/settings/page.tsx

@@ -0,0 +1,370 @@
+'use client';
+
+import { useState, useEffect, useCallback, type FormEvent } from 'react';
+import { useAuth } from '@/features/auth/context/AuthContext';
+import { Card } from '@mars-stack/ui';
+import { FormField, Input, Button, Spinner } from '@mars-stack/ui';
+
+type FormStatus = { type: 'success' | 'error'; message: string } | null;
+
+interface SessionEntry {
+  id: string;
+  ipAddress: string | null;
+  userAgent: string | null;
+  createdAt: string;
+  expiresAt: string;
+}
+
+function parseUserAgent(ua: string | null): string {
+  if (!ua || ua === 'unknown') return 'Unknown device';
+
+  const browser =
+    ua.match(/(?:Chrome|Firefox|Safari|Edge|Opera|Brave)\/[\d.]+/)?.[0] ??
+    'Unknown browser';
+
+  let os = 'Unknown OS';
+  if (ua.includes('Windows')) os = 'Windows';
+  else if (ua.includes('Mac OS')) os = 'macOS';
+  else if (ua.includes('Linux')) os = 'Linux';
+  else if (ua.includes('Android')) os = 'Android';
+  else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'iOS';
+
+  return `${browser} on ${os}`;
+}
+
+export default function Settings() {
+  const { user, isLoading: authLoading, updateUser } = useAuth();
+
+  const [name, setName] = useState('');
+  const [nameInitialized, setNameInitialized] = useState(false);
+  const [nameStatus, setNameStatus] = useState<FormStatus>(null);
+  const [nameSaving, setNameSaving] = useState(false);
+
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordStatus, setPasswordStatus] = useState<FormStatus>(null);
+  const [passwordSaving, setPasswordSaving] = useState(false);
+
+  const [sessions, setSessions] = useState<SessionEntry[]>([]);
+  const [sessionsLoading, setSessionsLoading] = useState(true);
+  const [sessionsStatus, setSessionsStatus] = useState<FormStatus>(null);
+  const [revokingId, setRevokingId] = useState<string | null>(null);
+  const [revokingAll, setRevokingAll] = useState(false);
+
+  const fetchSessions = useCallback(async () => {
+    try {
+      const response = await fetch('/api/protected/user/sessions', {
+        credentials: 'include',
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setSessions(data.sessions);
+      }
+    } catch {
+      setSessionsStatus({ type: 'error', message: 'Failed to load sessions.' });
+    } finally {
+      setSessionsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (user) {
+      fetchSessions();
+    }
+  }, [user, fetchSessions]);
+
+  if (!nameInitialized && user?.name) {
+    setName(user.name);
+    setNameInitialized(true);
+  }
+
+  if (authLoading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  async function handleNameSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setNameStatus(null);
+    setNameSaving(true);
+
+    try {
+      const response = await fetch('/api/protected/user/profile', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ name: name.trim() }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setNameStatus({ type: 'error', message: data.error || 'Failed to update name' });
+        return;
+      }
+
+      updateUser({ name: data.user.name });
+      setNameStatus({ type: 'success', message: 'Display name updated.' });
+    } catch {
+      setNameStatus({ type: 'error', message: 'An unexpected error occurred.' });
+    } finally {
+      setNameSaving(false);
+    }
+  }
+
+  async function handleRevokeSession(sessionId: string) {
+    setRevokingId(sessionId);
+    setSessionsStatus(null);
+    try {
+      const response = await fetch(`/api/protected/user/sessions/${sessionId}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      if (!response.ok) {
+        const data = await response.json();
+        setSessionsStatus({ type: 'error', message: data.error || 'Failed to revoke session.' });
+        return;
+      }
+      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+      setSessionsStatus({ type: 'success', message: 'Session revoked.' });
+    } catch {
+      setSessionsStatus({ type: 'error', message: 'An unexpected error occurred.' });
+    } finally {
+      setRevokingId(null);
+    }
+  }
+
+  async function handleRevokeAllSessions() {
+    setRevokingAll(true);
+    setSessionsStatus(null);
+    try {
+      const response = await fetch('/api/protected/user/sessions', {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      if (!response.ok) {
+        const data = await response.json();
+        setSessionsStatus({ type: 'error', message: data.error || 'Failed to revoke sessions.' });
+        return;
+      }
+      setSessions([]);
+      setSessionsStatus({ type: 'success', message: 'All sessions revoked.' });
+    } catch {
+      setSessionsStatus({ type: 'error', message: 'An unexpected error occurred.' });
+    } finally {
+      setRevokingAll(false);
+    }
+  }
+
+  async function handlePasswordSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPasswordStatus(null);
+
+    if (newPassword !== confirmPassword) {
+      setPasswordStatus({ type: 'error', message: 'New passwords do not match.' });
+      return;
+    }
+
+    setPasswordSaving(true);
+
+    try {
+      const response = await fetch('/api/protected/user/password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ currentPassword, newPassword }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setPasswordStatus({ type: 'error', message: data.error || 'Failed to change password' });
+        return;
+      }
+
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setPasswordStatus({ type: 'success', message: 'Password changed successfully.' });
+    } catch {
+      setPasswordStatus({ type: 'error', message: 'An unexpected error occurred.' });
+    } finally {
+      setPasswordSaving(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-3xl font-bold text-text-primary">Settings</h1>
+      <p className="mt-2 text-text-secondary">Manage your account settings.</p>
+
+      <div className="mt-8 space-y-6">
+        <Card>
+          <h3 className="text-lg font-semibold text-text-primary">Display Name</h3>
+          <form onSubmit={handleNameSubmit} className="mt-4 space-y-4">
+            <FormField label="Name" htmlFor="display-name">
+              <Input
+                id="display-name"
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Your display name"
+                required
+                fullWidth
+              />
+            </FormField>
+
+            {nameStatus && (
+              <p
+                className={
+                  nameStatus.type === 'success' ? 'text-sm text-text-success' : 'text-sm text-text-error'
+                }
+              >
+                {nameStatus.message}
+              </p>
+            )}
+
+            <Button type="submit" loading={nameSaving} disabled={!name.trim()}>
+              Save Name
+            </Button>
+          </form>
+        </Card>
+
+        <Card>
+          <h3 className="text-lg font-semibold text-text-primary">Change Password</h3>
+          <form onSubmit={handlePasswordSubmit} className="mt-4 space-y-4">
+            <FormField label="Current Password" htmlFor="current-password">
+              <Input
+                id="current-password"
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                placeholder="Enter current password"
+                showPasswordToggle
+                required
+                fullWidth
+              />
+            </FormField>
+
+            <FormField label="New Password" htmlFor="new-password">
+              <Input
+                id="new-password"
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder="Enter new password"
+                showPasswordToggle
+                required
+                fullWidth
+              />
+            </FormField>
+
+            <FormField label="Confirm New Password" htmlFor="confirm-password">
+              <Input
+                id="confirm-password"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Re-enter new password"
+                showPasswordToggle
+                required
+                fullWidth
+              />
+            </FormField>
+
+            {passwordStatus && (
+              <p
+                className={
+                  passwordStatus.type === 'success'
+                    ? 'text-sm text-text-success'
+                    : 'text-sm text-text-error'
+                }
+              >
+                {passwordStatus.message}
+              </p>
+            )}
+
+            <Button
+              type="submit"
+              loading={passwordSaving}
+              disabled={!currentPassword || !newPassword || !confirmPassword}
+            >
+              Change Password
+            </Button>
+          </form>
+        </Card>
+
+        <Card>
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-text-primary">Active Sessions</h3>
+            {sessions.length > 1 && (
+              <Button
+                variant="subtle"
+                size="sm"
+                loading={revokingAll}
+                onClick={handleRevokeAllSessions}
+              >
+                Revoke All
+              </Button>
+            )}
+          </div>
+
+          {sessionsStatus && (
+            <p
+              className={
+                sessionsStatus.type === 'success'
+                  ? 'mt-2 text-sm text-text-success'
+                  : 'mt-2 text-sm text-text-error'
+              }
+            >
+              {sessionsStatus.message}
+            </p>
+          )}
+
+          <div className="mt-4 space-y-3">
+            {sessionsLoading ? (
+              <div className="flex justify-center py-4">
+                <Spinner size="md" />
+              </div>
+            ) : sessions.length === 0 ? (
+              <p className="text-sm text-text-secondary">No active sessions.</p>
+            ) : (
+              sessions.map((session) => (
+                <div
+                  key={session.id}
+                  className="flex items-center justify-between rounded-lg border border-border-default p-3"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-text-primary">
+                      {parseUserAgent(session.userAgent)}
+                    </p>
+                    <p className="text-xs text-text-secondary">
+                      IP: {session.ipAddress ?? 'Unknown'} &middot; Created{' '}
+                      {new Date(session.createdAt).toLocaleDateString()}
+                    </p>
+                  </div>
+                  <Button
+                    variant="subtle"
+                    size="sm"
+                    loading={revokingId === session.id}
+                    onClick={() => handleRevokeSession(session.id)}
+                  >
+                    Revoke
+                  </Button>
+                </div>
+              ))
+            )}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/template/src/app/api/auth/forgot/route.ts

@@ -0,0 +1,63 @@
+import { prisma } from '@/lib/prisma';
+import { sendEmail, handleApiError, getBaseUrl } from '@/lib/mars';
+import { checkRateLimit, getClientIP, RATE_LIMITS, rateLimitResponse } from '@mars-stack/core/rate-limit';
+import { hashPasswordResetToken } from '@mars-stack/core/auth/reset-token';
+import { findUserByEmailPublic } from '@/features/auth/server/user';
+import { buildPasswordResetUrl } from '@mars-stack/core/auth/link-utils';
+import { apiSchemas } from '@mars-stack/core/auth/validation';
+import { passwordResetEmailHtml } from '@/lib/core/email/templates';
+import { appConfig } from '@/config/app.config';
+import { randomBytes } from 'crypto';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const ip = getClientIP(request);
+  const rateLimit = await checkRateLimit(ip, RATE_LIMITS.forgotPassword);
+  if (!rateLimit.success) return rateLimitResponse(rateLimit.resetAt);
+
+  try {
+    const body = await request.json();
+    const { email } = apiSchemas.forgotPassword.parse(body);
+
+    const user = await findUserByEmailPublic(email);
+
+    if (!user) {
+      return NextResponse.json(
+        { message: 'If an account exists, a reset email will be sent' },
+        { status: 200 },
+      );
+    }
+
+    await prisma.verificationToken.deleteMany({ where: { identifier: email } });
+
+    const rawToken = randomBytes(32).toString('hex');
+    const tokenHash = await hashPasswordResetToken(rawToken);
+    const expires = new Date(Date.now() + 3600000);
+
+    await prisma.verificationToken.create({
+      data: { identifier: email, token: tokenHash, expires },
+    });
+
+    const baseUrl = getBaseUrl();
+    const resetUrl = buildPasswordResetUrl({ baseUrl, token: rawToken, email });
+    const { html, text } = passwordResetEmailHtml({
+      appName: appConfig.name,
+      resetUrl,
+      userName: user.name || undefined,
+    });
+
+    await sendEmail({
+      to: email,
+      subject: `Reset Your Password - ${appConfig.name}`,
+      html,
+      text,
+    });
+
+    return NextResponse.json(
+      { message: 'If an account exists, a reset email will be sent' },
+      { status: 200 },
+    );
+  } catch (error) {
+    return handleApiError(error, { endpoint: '/api/auth/forgot', fallbackMessage: 'Failed to process password reset request' });
+  }
+}