@amirulabu/create-recurring-rabbit-app 0.0.0-alpha

package/templates/default/src/app/auth/reset-password.tsx

@@ -0,0 +1,171 @@
+import { createFileRoute, useRouter, useSearch } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import { authClient } from '@/lib/auth'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+export const Route = createFileRoute('/auth/reset-password')({
+  component: ResetPassword,
+})
+
+function ResetPassword() {
+  const router = useRouter()
+  const search = useSearch({ from: '/auth/reset-password' })
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
+  const [error, setError] = useState('')
+  const [tokenValid, setTokenValid] = useState(false)
+
+  useEffect(() => {
+    if (search.token) {
+      setTokenValid(true)
+    } else {
+      setError('Invalid reset link. Please request a new password reset.')
+    }
+  }, [search.token])
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setMessage('')
+    setError('')
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match.')
+      setLoading(false)
+      return
+    }
+
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters.')
+      setLoading(false)
+      return
+    }
+
+    try {
+      await authClient.resetPassword({
+        newPassword: password,
+        token: search.token as string,
+      })
+
+      setMessage(
+        'Password reset successful! You can now sign in with your new password.'
+      )
+      setTimeout(() => {
+        router.navigate({ to: '/auth/login' })
+      }, 2000)
+    } catch (err) {
+      setError('Failed to reset password. The link may have expired.')
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Reset Password</CardTitle>
+          <CardDescription>Enter your new password below</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {!tokenValid ? (
+            <div className="space-y-4">
+              <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+                {error}
+              </div>
+              <Button
+                onClick={() => router.navigate({ to: '/auth/forgot-password' })}
+                className="w-full"
+              >
+                Request New Reset Link
+              </Button>
+            </div>
+          ) : message ? (
+            <div className="space-y-4">
+              <div className="p-3 text-sm text-green-700 bg-green-50 border border-green-200 rounded-md">
+                {message}
+              </div>
+              <p className="text-sm text-gray-500 text-center">
+                Redirecting to sign in...
+              </p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <label
+                  htmlFor="password"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  New Password
+                </label>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter new password"
+                  required
+                  disabled={loading}
+                  minLength={8}
+                />
+                <p className="text-xs text-gray-500">
+                  Must be at least 8 characters
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <label
+                  htmlFor="confirmPassword"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Confirm Password
+                </label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="Confirm new password"
+                  required
+                  disabled={loading}
+                  minLength={8}
+                />
+              </div>
+
+              {error && (
+                <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+                  {error}
+                </div>
+              )}
+
+              <Button type="submit" disabled={loading} className="w-full">
+                {loading ? 'Resetting...' : 'Reset Password'}
+              </Button>
+
+              <div className="text-center">
+                <button
+                  type="button"
+                  onClick={() => router.navigate({ to: '/auth/login' })}
+                  className="text-sm text-gray-600 hover:text-gray-900"
+                >
+                  Back to Sign In
+                </button>
+              </div>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/default/src/app/auth/verify-email.tsx

@@ -0,0 +1,111 @@
+import { createFileRoute, useRouter, useSearch } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+export const Route = createFileRoute('/auth/verify-email')({
+  component: VerifyEmail,
+})
+
+function VerifyEmail() {
+  const router = useRouter()
+  const search = useSearch({ from: '/auth/verify-email' })
+  const error = search.error as string | null
+  const success = search.success as string | null
+
+  useEffect(() => {
+    if (success === 'true') {
+      const timeout = setTimeout(() => {
+        router.navigate({ to: '/auth/login' })
+      }, 3000)
+      return () => clearTimeout(timeout)
+    }
+  }, [success, router])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Email Verification</CardTitle>
+          <CardDescription>
+            {error ? 'Verification Failed' : 'Verification Complete'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {success === 'true' ? (
+            <div className="text-center py-4">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
+                <svg
+                  className="w-8 h-8 text-green-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </div>
+              <p className="text-gray-700">
+                Your email has been verified! You can now sign in.
+              </p>
+              <p className="text-sm text-gray-500 mt-2">
+                Redirecting to sign in...
+              </p>
+            </div>
+          ) : error ? (
+            <div className="text-center py-4">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
+                <svg
+                  className="w-8 h-8 text-red-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </div>
+              <p className="text-gray-700 mb-4">
+                {error === 'invalid_token'
+                  ? 'Invalid verification link. Please request a new verification email.'
+                  : error === 'expired_token'
+                    ? 'Verification link has expired. Please request a new verification email.'
+                    : 'Verification failed. Please try again.'}
+              </p>
+              <div className="space-x-2">
+                <Button onClick={() => router.navigate({ to: '/auth/login' })}>
+                  Sign In
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => router.navigate({ to: '/auth/register' })}
+                >
+                  Register
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center py-4">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto mb-4" />
+              <p className="text-gray-700">Verifying your email...</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/default/src/app/dashboard/index.tsx

@@ -0,0 +1,122 @@
+import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { useTRPC } from '@/lib/api'
+import { signOut } from '@/lib/auth'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { DashboardLayout } from '@/components/layout/dashboard-layout'
+
+export const Route = createFileRoute('/dashboard/')({
+  beforeLoad: async ({ location }) => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    try {
+      const response = await fetch('/api/auth/get-session', {
+        headers: {
+          cookie: document.cookie,
+        },
+      })
+      const session = await response.json()
+      if (!session?.user) {
+        throw redirect({
+          to: '/auth/login',
+          search: { redirect: location.href },
+        })
+      }
+    } catch (error) {
+      if (error instanceof Error && error.message.includes('redirect')) {
+        throw error
+      }
+      throw redirect({
+        to: '/auth/login',
+        search: { redirect: location.href },
+      })
+    }
+  },
+  component: Dashboard,
+})
+
+function Dashboard() {
+  const router = useRouter()
+  const trpc = useTRPC()
+  const { data: stats } = useQuery(trpc.dashboard.getStats.queryOptions())
+
+  const handleSignOut = async () => {
+    await signOut()
+    router.navigate({ to: '/' as const })
+  }
+
+  return (
+    <DashboardLayout
+      userName={stats?.currentUser?.name}
+      onSignOut={handleSignOut}
+    >
+      <div className="max-w-6xl">
+        <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>User Stats</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-sm text-gray-600">Total Users</p>
+                  <p className="text-3xl font-bold">{stats?.totalUsers ?? 0}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Active Users</p>
+                  <p className="text-3xl font-bold">
+                    {stats?.activeUsers ?? 0}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Your Profile</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div>
+                  <p className="text-sm text-gray-600">Name</p>
+                  <p className="font-medium">{stats?.currentUser?.name}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Email</p>
+                  <p className="font-medium">{stats?.currentUser?.email}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Email Verified</p>
+                  <p className="font-medium">
+                    {stats?.currentUser?.emailVerified ? 'Yes' : 'No'}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="mt-8 bg-blue-50 p-6 rounded-lg border border-blue-200">
+          <h2 className="text-xl font-semibold mb-2">
+            Welcome to your dashboard!
+          </h2>
+          <p className="text-gray-700">
+            You've successfully set up your micro-SaaS starter. From here, you
+            can:
+          </p>
+          <ul className="mt-4 space-y-2 text-gray-700 list-disc list-inside">
+            <li>Add new features and pages</li>
+            <li>Explore the database schema in src/server/db/schema.ts</li>
+            <li>Create new tRPC procedures in src/server/api/routers/</li>
+            <li>Customize the UI components in src/components/</li>
+            <li>Deploy to Vercel, Railway, or your preferred platform</li>
+          </ul>
+        </div>
+      </div>
+    </DashboardLayout>
+  )
+}

package/templates/default/src/app/dashboard/settings.tsx

@@ -0,0 +1,161 @@
+import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
+import React, { useState } from 'react'
+import { useQuery, useMutation } from '@tanstack/react-query'
+import { useTRPC } from '@/lib/api'
+import { signOut } from '@/lib/auth'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { DashboardLayout } from '@/components/layout/dashboard-layout'
+
+export const Route = createFileRoute('/dashboard/settings')({
+  beforeLoad: async ({ location }) => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    try {
+      const response = await fetch('/api/auth/get-session', {
+        headers: {
+          cookie: document.cookie,
+        },
+      })
+      const session = await response.json()
+      if (!session?.user) {
+        throw redirect({
+          to: '/auth/login',
+          search: { redirect: location.href },
+        })
+      }
+    } catch (error) {
+      if (error instanceof Error && error.message.includes('redirect')) {
+        throw error
+      }
+      throw redirect({
+        to: '/auth/login',
+        search: { redirect: location.href },
+      })
+    }
+  },
+  component: Settings,
+})
+
+function Settings() {
+  const router = useRouter()
+  const trpc = useTRPC()
+  const { data: user } = useQuery(trpc.user.getProfile.queryOptions())
+  const updateProfile = useMutation(trpc.user.updateProfile.mutationOptions())
+
+  const [name, setName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
+  const [error, setError] = useState('')
+
+  React.useEffect(() => {
+    if (user) {
+      setName(user.name)
+    }
+  }, [user])
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setMessage('')
+    setError('')
+
+    try {
+      const result = await updateProfile.mutateAsync({
+        name,
+      })
+
+      setMessage('Profile updated successfully!')
+      setName(result.name)
+    } catch (err) {
+      setError('Failed to update profile. Please try again.')
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSignOut = async () => {
+    await signOut()
+    router.navigate({ to: '/' as const })
+  }
+
+  return (
+    <DashboardLayout userName={user?.name} onSignOut={handleSignOut}>
+      <div className="max-w-2xl">
+        <h1 className="text-3xl font-bold mb-8">Settings</h1>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Profile Settings</CardTitle>
+            <CardDescription>Update your account information</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <label
+                  htmlFor="name"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Name
+                </label>
+                <Input
+                  id="name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Your name"
+                  required
+                  disabled={loading}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label
+                  htmlFor="email-display"
+                  className="text-sm font-medium leading-none text-gray-600"
+                >
+                  Email
+                </label>
+                <Input
+                  id="email-display"
+                  type="email"
+                  value={user?.email ?? ''}
+                  disabled={true}
+                  className="bg-gray-50"
+                />
+                <p className="text-xs text-gray-500">
+                  Email cannot be changed. Contact support for updates.
+                </p>
+              </div>
+
+              {message && (
+                <div className="p-3 text-sm text-green-700 bg-green-50 border border-green-200 rounded-md">
+                  {message}
+                </div>
+              )}
+
+              {error && (
+                <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+                  {error}
+                </div>
+              )}
+
+              <Button type="submit" disabled={loading}>
+                {loading ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </DashboardLayout>
+  )
+}

package/templates/default/src/app/globals.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}