@mars-stack/cli 0.2.0 → 0.2.2

package/template/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useCSRF, usePasswordStrength } from '@mars-stack/core/auth/hooks';
+import { formSchemas } from '@mars-stack/core/auth/validation';
+import { routes } from '@/config/routes';
+import { useZodForm } from '@mars-stack/ui/hooks';
+import { Button, Input, Spinner, Text, PasswordStrengthIndicator } from '@mars-stack/ui';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, useState } from 'react';
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { getCSRFHeaders } = useCSRF();
+  const [serverError, setServerError] = useState('');
+
+  const token = searchParams?.get('token') || '';
+  const email = searchParams?.get('email') || '';
+
+  const form = useZodForm({
+    schema: formSchemas.resetPassword,
+    initialValues: { token, email, password: '', confirmPassword: '' },
+    mode: 'onBlur',
+  });
+
+  const passwordStrength = usePasswordStrength(form.values.password);
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    setServerError('');
+    try {
+      const response = await fetch('/api/auth/reset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...getCSRFHeaders() },
+        body: JSON.stringify(values),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setServerError(data.error || 'Failed to reset password');
+        return;
+      }
+
+      router.push(`${routes.signIn}?message=password-reset`);
+    } catch {
+      setServerError('Network error. Please try again.');
+    }
+  });
+
+  return (
+    <>
+      <div>
+        <Text.H3 as="h2">Set new password</Text.H3>
+        <Text.Paragraph className="text-sm">Enter your new password below.</Text.Paragraph>
+      </div>
+
+      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        {serverError && (
+          <div className="rounded-md bg-error-muted p-3 text-sm text-text-error">{serverError}</div>
+        )}
+
+        <div className="space-y-4">
+          <Input
+            {...form.getFieldProps('password')}
+            label="New Password"
+            type="password"
+            placeholder="Create a strong password"
+            showPasswordToggle
+            fullWidth
+            required
+          />
+          {form.values.password && (
+            <PasswordStrengthIndicator
+              strength={passwordStrength.strength}
+              requirements={passwordStrength.requirements}
+            />
+          )}
+          <Input
+            {...form.getFieldProps('confirmPassword')}
+            label="Confirm New Password"
+            type="password"
+            placeholder="Re-enter your password"
+            fullWidth
+            required
+          />
+        </div>
+
+        <Button type="submit" disabled={form.isSubmitting || !form.isValid} fullWidth loading={form.isSubmitting}>
+          {form.isSubmitting ? 'Resetting...' : 'Reset password'}
+        </Button>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Link href={routes.signIn} className="text-sm text-text-link hover:text-text-link-hover hover:underline">
+          Back to sign in
+        </Link>
+      </div>
+    </>
+  );
+}
+
+export default function ResetPassword() {
+  return (
+    <Suspense fallback={<Spinner size="md" />}>
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}

package/template/src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useAuth } from '@/features/auth/context/AuthContext';
+import { useCSRF } from '@mars-stack/core/auth/hooks';
+import { formSchemas, type LoginFormData } from '@mars-stack/core/auth/validation';
+import { routes } from '@/config/routes';
+import { useZodForm } from '@mars-stack/ui/hooks';
+import { Button, Input, Spinner, Text } from '@mars-stack/ui';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
+
+function SignInForm() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { login, isAuthenticated, isLoading } = useAuth();
+  const callbackUrl = searchParams?.get('callbackUrl') || routes.dashboard;
+  const resetMessage = searchParams?.get('message');
+  const { getCSRFHeaders, getCSRFFormData } = useCSRF();
+  const [serverError, setServerError] = useState('');
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated) router.push(callbackUrl);
+  }, [isAuthenticated, isLoading, router, callbackUrl]);
+
+  const form = useZodForm({
+    schema: formSchemas.login,
+    initialValues: { email: '', password: '' },
+    mode: 'onBlur',
+  });
+
+  const handleSubmit = form.handleSubmit(async (values: LoginFormData) => {
+    setServerError('');
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...getCSRFHeaders() },
+        body: JSON.stringify({ ...values, ...getCSRFFormData() }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setServerError(data.error || 'Failed to sign in');
+        return;
+      }
+
+      if (data.user) login(data.user);
+      router.push(callbackUrl);
+    } catch {
+      setServerError('Network error. Please try again.');
+    }
+  });
+
+  if (isLoading) return <Spinner size="md" />;
+  if (isAuthenticated) return <Text.Paragraph>Redirecting...</Text.Paragraph>;
+
+  return (
+    <>
+      <div>
+        <Text.H3 as="h2">Sign in to your account</Text.H3>
+        <Text.Paragraph className="text-sm">
+          Need to create an account?{' '}
+          <Link href="/register" className="text-text-link hover:text-text-link-hover hover:underline">
+            Register
+          </Link>
+        </Text.Paragraph>
+      </div>
+
+      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        {resetMessage === 'password-reset' && (
+          <div className="rounded-md bg-success-muted p-3 text-sm text-text-success">
+            Password reset successful. Please sign in with your new password.
+          </div>
+        )}
+        {serverError && (
+          <div className="rounded-md bg-error-muted p-3 text-sm text-text-error">{serverError}</div>
+        )}
+
+        <div className="space-y-4">
+          <Input
+            {...form.getFieldProps('email')}
+            label="Email Address"
+            type="email"
+            placeholder="you@example.com"
+            error={form.touched.email ? form.errors.email : undefined}
+            fullWidth
+            required
+          />
+          <Input
+            {...form.getFieldProps('password')}
+            label="Password"
+            type="password"
+            placeholder="Enter your password"
+            showPasswordToggle
+            error={form.touched.password ? form.errors.password : undefined}
+            fullWidth
+            required
+          />
+        </div>
+
+        <Button type="submit" disabled={form.isSubmitting || !form.isValid} fullWidth loading={form.isSubmitting}>
+          {form.isSubmitting ? 'Signing in...' : 'Sign in'}
+        </Button>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Link href="/forgotten-password" className="text-sm text-text-link hover:text-text-link-hover hover:underline">
+          Forgot your password?
+        </Link>
+      </div>
+    </>
+  );
+}
+
+export default function SignIn() {
+  return (
+    <Suspense fallback={<Spinner size="md" />}>
+      <SignInForm />
+    </Suspense>
+  );
+}

package/template/src/app/(auth)/verify/[token]/page.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { routes } from '@/config/routes';
+import { LinkButton, Spinner, Text } from '@mars-stack/ui';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
+
+function VerifyTokenContent() {
+  const params = useParams();
+  const token = params?.token as string;
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    if (!token) {
+      setStatus('error');
+      setMessage('Invalid verification link');
+      return;
+    }
+
+    const verify = async () => {
+      try {
+        const response = await fetch('/api/auth/verify', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token }),
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          setStatus('success');
+          setMessage(data.message || 'Email verified successfully');
+        } else {
+          setStatus('error');
+          setMessage(data.error || 'Verification failed');
+        }
+      } catch {
+        setStatus('error');
+        setMessage('Network error. Please try again.');
+      }
+    };
+
+    verify();
+  }, [token]);
+
+  if (status === 'loading') {
+    return (
+      <div className="text-center">
+        <Text.H3 as="h2">Verifying your email...</Text.H3>
+        <Text.Paragraph>Please wait while we verify your email address.</Text.Paragraph>
+        <Spinner size="md" className="mt-4" />
+      </div>
+    );
+  }
+
+  if (status === 'success') {
+    return (
+      <div className="text-center">
+        <Text.H3 as="h2">Email verified</Text.H3>
+        <Text.Paragraph>{message}</Text.Paragraph>
+        <LinkButton href={routes.signIn} className="mt-6">
+          Sign in
+        </LinkButton>
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-center">
+      <Text.H3 as="h2">Verification failed</Text.H3>
+      <Text.Paragraph className="text-text-error">{message}</Text.Paragraph>
+      <Link href={routes.signIn} className="mt-6 inline-block text-sm text-text-link hover:text-text-link-hover hover:underline">
+        Back to sign in
+      </Link>
+    </div>
+  );
+}
+
+export default function VerifyToken() {
+  return (
+    <Suspense fallback={<Spinner size="md" />}>
+      <VerifyTokenContent />
+    </Suspense>
+  );
+}

package/template/src/app/(auth)/verify/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { routes } from '@/config/routes';
+import { Spinner, Text } from '@mars-stack/ui';
+import Link from 'next/link';
+import { Suspense, useEffect, useState } from 'react';
+
+function VerifyContent() {
+  const [email, setEmail] = useState<string | null>(null);
+
+  useEffect(() => {
+    const stored = sessionStorage.getItem('verify-email');
+    if (stored) {
+      setEmail(stored);
+      sessionStorage.removeItem('verify-email');
+    }
+  }, []);
+
+  return (
+    <div className="text-center">
+      <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-success-muted">
+        <svg className="h-8 w-8 text-text-success" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+        </svg>
+      </div>
+      <Text.H3 as="h2">Check your email</Text.H3>
+      <Text.Paragraph className="mt-2">
+        {email ? (
+          <>We&apos;ve sent a verification link to <strong>{email}</strong>.</>
+        ) : (
+          <>We&apos;ve sent a verification link to your email address.</>
+        )}
+      </Text.Paragraph>
+      <Text.Paragraph className="mt-4 text-sm text-text-muted">
+        Click the link in the email to verify your account. The link expires in 24 hours.
+      </Text.Paragraph>
+      <Text.Paragraph className="mt-1 text-sm text-text-muted">
+        Didn&apos;t receive the email? Check your spam folder.
+      </Text.Paragraph>
+      <Link
+        href={routes.signIn}
+        className="mt-8 inline-block text-sm text-text-link hover:text-text-link-hover hover:underline"
+      >
+        Back to sign in
+      </Link>
+    </div>
+  );
+}
+
+export default function Verify() {
+  return (
+    <Suspense fallback={<Spinner size="md" />}>
+      <VerifyContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell } from '@mars-stack/ui';
+import { Badge } from '@mars-stack/ui';
+import { Spinner } from '@mars-stack/ui';
+
+interface AdminUser {
+  id: string;
+  name: string | null;
+  email: string;
+  role: string;
+  emailVerified: string | null;
+  createdAt: string;
+}
+
+export default function AdminPage() {
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchUsers() {
+      try {
+        const response = await fetch('/api/protected/admin/users', {
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          if (response.status === 403) {
+            setError('You do not have permission to view this page.');
+            return;
+          }
+          throw new Error('Failed to fetch users');
+        }
+
+        const data: { users: AdminUser[] } = await response.json();
+        setUsers(data.users);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An unexpected error occurred');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchUsers();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="rounded-lg border border-border-error bg-error-muted p-4">
+          <p className="text-text-error">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-text-primary">Admin</h1>
+        <p className="mt-2 text-text-secondary">
+          {users.length} {users.length === 1 ? 'user' : 'users'} registered
+        </p>
+      </div>
+
+      <Table>
+        <TableHead>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Email</TableHeaderCell>
+          <TableHeaderCell>Role</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Created</TableHeaderCell>
+        </TableHead>
+        <TableBody>
+          {users.map((user) => (
+            <TableRow key={user.id}>
+              <TableCell>{user.name || '—'}</TableCell>
+              <TableCell>{user.email}</TableCell>
+              <TableCell>
+                <Badge variant={user.role === 'admin' ? 'warning' : 'neutral'}>
+                  {user.role}
+                </Badge>
+              </TableCell>
+              <TableCell>
+                <Badge variant={user.emailVerified ? 'success' : 'error'}>
+                  {user.emailVerified ? 'Verified' : 'Unverified'}
+                </Badge>
+              </TableCell>
+              <TableCell className="text-text-muted">
+                {new Date(user.createdAt).toLocaleDateString()}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/template/src/app/(protected)/dashboard/loading.tsx

@@ -0,0 +1,20 @@
+export default function DashboardLoading() {
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="h-8 w-48 animate-pulse rounded bg-surface-skeleton" />
+      <div className="mt-2 h-5 w-64 animate-pulse rounded bg-surface-skeleton" />
+
+      <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="rounded-xl border border-border-default bg-surface-card p-6 shadow-xs">
+            <div className="h-6 w-32 animate-pulse rounded bg-surface-skeleton" />
+            <div className="mt-4 space-y-2">
+              <div className="h-4 w-full animate-pulse rounded bg-surface-skeleton" />
+              <div className="h-4 w-3/4 animate-pulse rounded bg-surface-skeleton" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { verifySession } from '@/lib/mars';
+import { Card } from '@mars-stack/ui';
+
+export default async function Dashboard() {
+  const session = await verifySession();
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-3xl font-bold text-text-primary">Dashboard</h1>
+      <p className="mt-2 text-text-secondary">Welcome back, {session.name}.</p>
+
+      <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <h3 className="text-lg font-semibold text-text-primary">Getting Started</h3>
+          <p className="mt-2 text-sm text-text-secondary">
+            This is a placeholder dashboard. Replace this with your app&apos;s content.
+          </p>
+        </Card>
+      </div>
+    </div>
+  );
+}