create-workerstack 0.1.2 → 0.1.3

package/template/src/client/pages/ChangePasswordPage.tsx

@@ -0,0 +1,113 @@
+import { useState, type FormEvent } from 'react';
+import { TextField, Button, Alert, Typography, Box, CircularProgress } from '@mui/material';
+import { Link } from 'react-router';
+import { authClient } from '@/client/lib/auth-client';
+import { AuthLayout } from '../components/AuthLayout';
+
+export default function ChangePasswordPage() {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (newPassword !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+
+    const { error } = await authClient.changePassword({
+      currentPassword,
+      newPassword,
+      revokeOtherSessions: true,
+    });
+
+    setLoading(false);
+
+    if (error) {
+      setError(error.message);
+    } else {
+      setSuccess(true);
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+    }
+  };
+
+  return (
+    <AuthLayout
+      title="Change password"
+      subtitle="Update your account password"
+      footer={
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          <Typography
+            component={Link}
+            to="/dashboard"
+            variant="body2"
+            sx={{ color: 'primary.main', textDecoration: 'none', fontWeight: 600, '&:hover': { textDecoration: 'underline' } }}
+          >
+            Back to dashboard
+          </Typography>
+        </Typography>
+      }
+    >
+      <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {error && <Alert severity="error">{error}</Alert>}
+        {success && <Alert severity="success">Password changed successfully.</Alert>}
+
+        <TextField
+          label="Current Password"
+          type="password"
+          value={currentPassword}
+          onChange={(e) => setCurrentPassword(e.target.value)}
+          required
+          fullWidth
+          autoComplete="current-password"
+          autoFocus
+        />
+
+        <TextField
+          label="New Password"
+          type="password"
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+          required
+          fullWidth
+          autoComplete="new-password"
+        />
+
+        <TextField
+          label="Confirm New Password"
+          type="password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+          fullWidth
+          autoComplete="new-password"
+        />
+
+        <Button
+          type="submit"
+          variant="contained"
+          fullWidth
+          disabled={loading}
+          sx={{
+            py: 1.5,
+            bgcolor: 'primary.main',
+            fontWeight: 600,
+            '&:hover': { bgcolor: '#6D28D9' },
+          }}
+        >
+          {loading ? <CircularProgress size={24} color="inherit" /> : 'Change Password'}
+        </Button>
+      </Box>
+    </AuthLayout>
+  );
+}

package/template/src/client/pages/DashboardPage.tsx

@@ -0,0 +1,101 @@
+import { Typography, Box, Card, CardContent, Button, Container, Avatar } from '@mui/material';
+import { Link, useNavigate } from 'react-router';
+import { useSession, signOut } from '@/client/lib/auth-client';
+import { AppNavbar } from '../components/AppNavbar';
+
+export default function DashboardPage() {
+  const { data: session } = useSession();
+  const navigate = useNavigate();
+
+  const user = session?.user;
+
+  const handleSignOut = async () => {
+    await signOut({
+      fetchOptions: {
+        onSuccess: () => navigate('/'),
+      },
+    });
+  };
+
+  return (
+    <Box sx={{ minHeight: '100vh' }}>
+      <AppNavbar />
+
+      <Container maxWidth="md" sx={{ py: 6 }}>
+        <Box sx={{ animation: 'fadeInUp 0.6s ease-out' }}>
+          {/* Welcome Card */}
+          <Card
+            sx={{
+              bgcolor: 'background.paper',
+              border: '1px solid',
+              borderColor: 'rgba(124,58,237,0.15)',
+              mb: 3,
+            }}
+          >
+            <CardContent sx={{ p: 4 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+                <Avatar
+                  src={user?.image || undefined}
+                  sx={{
+                    width: 64,
+                    height: 64,
+                    bgcolor: 'primary.main',
+                    fontSize: '1.5rem',
+                    fontWeight: 700,
+                  }}
+                >
+                  {user?.name?.charAt(0)?.toUpperCase()}
+                </Avatar>
+                <Box>
+                  <Typography
+                    variant="h4"
+                    sx={{
+                      fontWeight: 700,
+                      fontFamily: "'Sora', sans-serif",
+                      background: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%)',
+                      backgroundClip: 'text',
+                      WebkitBackgroundClip: 'text',
+                      WebkitTextFillColor: 'transparent',
+                    }}
+                  >
+                    Welcome back, {user?.name}
+                  </Typography>
+                  <Typography variant="body1" sx={{ color: 'text.secondary', mt: 0.5 }}>
+                    {user?.email}
+                  </Typography>
+                </Box>
+              </Box>
+            </CardContent>
+          </Card>
+
+          {/* Actions */}
+          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+            <Button
+              component={Link}
+              to="/change-password"
+              variant="outlined"
+              sx={{
+                borderColor: 'rgba(124,58,237,0.3)',
+                color: 'text.primary',
+                '&:hover': { borderColor: 'primary.main' },
+              }}
+            >
+              Change Password
+            </Button>
+            <Button
+              onClick={handleSignOut}
+              variant="outlined"
+              sx={{
+                borderColor: 'rgba(124,58,237,0.3)',
+                color: 'text.primary',
+                '&:hover': { borderColor: 'primary.main' },
+              }}
+            >
+              Sign Out
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}

package/template/src/client/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,87 @@
+import { useState, type FormEvent } from 'react';
+import { TextField, Button, Alert, Typography, Box, CircularProgress } from '@mui/material';
+import { Link } from 'react-router';
+import { authClient } from '@/client/lib/auth-client';
+import { AuthLayout } from '../components/AuthLayout';
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    const { error } = await authClient.requestPasswordReset({
+      email,
+      redirectTo: window.location.origin + '/reset-password',
+    });
+
+    setLoading(false);
+
+    if (error) {
+      setError(error.message);
+    } else {
+      setSuccess(true);
+    }
+  };
+
+  return (
+    <AuthLayout
+      title="Forgot your password?"
+      subtitle="Enter your email and we'll send you a reset link"
+      footer={
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          Remember your password?{' '}
+          <Typography
+            component={Link}
+            to="/login"
+            variant="body2"
+            sx={{ color: 'primary.main', textDecoration: 'none', fontWeight: 600, '&:hover': { textDecoration: 'underline' } }}
+          >
+            Back to login
+          </Typography>
+        </Typography>
+      }
+    >
+      {success ? (
+        <Alert severity="success">
+          Check your email for a password reset link.
+        </Alert>
+      ) : (
+        <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {error && <Alert severity="error">{error}</Alert>}
+
+          <TextField
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            fullWidth
+            autoComplete="email"
+            autoFocus
+          />
+
+          <Button
+            type="submit"
+            variant="contained"
+            fullWidth
+            disabled={loading}
+            sx={{
+              py: 1.5,
+              bgcolor: 'primary.main',
+              fontWeight: 600,
+              '&:hover': { bgcolor: '#6D28D9' },
+            }}
+          >
+            {loading ? <CircularProgress size={24} color="inherit" /> : 'Send Reset Link'}
+          </Button>
+        </Box>
+      )}
+    </AuthLayout>
+  );
+}

package/template/src/client/pages/HomePage.tsx

@@ -0,0 +1,294 @@
+import {
+  Container,
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  Chip,
+  Stack,
+  Grid,
+} from '@mui/material';
+import { AppNavbar } from '../components/AppNavbar';
+
+const stackItems = [
+  {
+    name: 'Cloudflare Workers',
+    description: 'Edge-first serverless runtime. Your code runs in 300+ locations worldwide.',
+    icon: '\u2601\uFE0F',
+    url: 'https://developers.cloudflare.com/workers/',
+  },
+  {
+    name: 'Hono',
+    description: 'Ultrafast web framework built for the edge. Handles routing, middleware, and more.',
+    icon: '\uD83D\uDD25',
+    url: 'https://hono.dev/',
+  },
+  {
+    name: 'React 19',
+    description: 'The library for building user interfaces. Server and client rendering ready.',
+    icon: '\u269B\uFE0F',
+    url: 'https://react.dev/',
+  },
+  {
+    name: 'MUI Material',
+    description: 'Production-grade React component library with a comprehensive design system.',
+    icon: '\uD83C\uDFA8',
+    url: 'https://mui.com/',
+  },
+  {
+    name: 'Better Auth',
+    description: 'Authentication for modern apps. Email/password, OAuth, sessions, and admin.',
+    icon: '\uD83D\uDD10',
+    url: 'https://www.better-auth.com/',
+  },
+  {
+    name: 'Drizzle ORM',
+    description: 'Type-safe SQL ORM with zero dependencies. Migrations and schema management built-in.',
+    icon: '\uD83D\uDDC4\uFE0F',
+    url: 'https://orm.drizzle.team/',
+  },
+];
+
+const quickStartSteps = [
+  { cmd: 'src/client/pages/HomePage.tsx', desc: 'Edit this file to start building your UI' },
+  { cmd: 'src/api/index.ts', desc: 'Add your API routes here' },
+  { cmd: 'bun run dev', desc: 'Start the development server' },
+  { cmd: 'bun run deploy', desc: 'Deploy to Cloudflare Workers' },
+];
+
+export default function HomePage() {
+  return (
+    <Box sx={{ minHeight: '100vh', position: 'relative', overflow: 'hidden' }}>
+      <AppNavbar />
+
+      {/* Background glow */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '-20%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: '600px',
+          height: '600px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%)',
+          filter: 'blur(80px)',
+          pointerEvents: 'none',
+          animation: 'pulse 6s ease-in-out infinite',
+        }}
+      />
+
+      <Container maxWidth="md" sx={{ position: 'relative', py: 8 }}>
+        {/* Hero */}
+        <Box
+          sx={{
+            textAlign: 'center',
+            mb: 8,
+            animation: 'fadeInUp 0.8s ease-out',
+          }}
+        >
+          <Typography
+            variant="h1"
+            sx={{
+              fontSize: { xs: '2.5rem', md: '4rem' },
+              fontWeight: 800,
+              background: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 50%, #C4B5FD 100%)',
+              backgroundClip: 'text',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              mb: 2,
+              letterSpacing: '-0.02em',
+            }}
+          >
+            WorkerStack
+          </Typography>
+          <Typography
+            variant="h5"
+            sx={{
+              color: 'text.secondary',
+              fontWeight: 400,
+              maxWidth: '500px',
+              mx: 'auto',
+              lineHeight: 1.6,
+            }}
+          >
+            Full-stack Cloudflare Workers starter with everything you need to ship fast.
+          </Typography>
+        </Box>
+
+        {/* Stack Grid */}
+        <Box sx={{ mb: 8 }}>
+          <Grid container spacing={2}>
+            {stackItems.map((item) => (
+              <Grid size={{ xs: 12, sm: 6 }} key={item.name}>
+                <Card
+                  component="a"
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  sx={{
+                    height: '100%',
+                    display: 'flex',
+                    bgcolor: 'background.paper',
+                    border: '1px solid',
+                    borderColor: 'rgba(124,58,237,0.15)',
+                    textDecoration: 'none',
+                    transition: 'all 0.2s ease',
+                    '&:hover': {
+                      borderColor: 'primary.main',
+                      transform: 'translateY(-2px)',
+                      boxShadow: '0 8px 30px rgba(124,58,237,0.15)',
+                    },
+                  }}
+                >
+                  <CardContent sx={{ p: 3 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
+                      <Typography sx={{ fontSize: '1.5rem' }}>{item.icon}</Typography>
+                      <Typography variant="h6" sx={{ fontWeight: 700, color: 'text.primary' }}>
+                        {item.name}
+                      </Typography>
+                    </Box>
+                    <Typography variant="body2" sx={{ color: 'text.secondary', lineHeight: 1.6 }}>
+                      {item.description}
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+
+        {/* Quick Start */}
+        <Box
+          sx={{
+            mb: 8,
+            animation: 'fadeInUp 0.8s ease-out 0.2s both',
+          }}
+        >
+          <Typography
+            variant="h5"
+            sx={{
+              fontWeight: 700,
+              mb: 3,
+              textAlign: 'center',
+              fontFamily: "'Sora', sans-serif",
+            }}
+          >
+            Get started
+          </Typography>
+          <Box
+            sx={{
+              bgcolor: (theme) =>
+                theme.palette.mode === 'dark' ? '#0D0D14' : '#F1F3F5',
+              border: '1px solid',
+              borderColor: 'rgba(124,58,237,0.2)',
+              borderRadius: 2,
+              overflow: 'hidden',
+            }}
+          >
+            {/* Terminal header */}
+            <Box
+              sx={{
+                px: 2,
+                py: 1.5,
+                borderBottom: '1px solid',
+                borderColor: (theme) =>
+                  theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',
+                display: 'flex',
+                gap: 1,
+              }}
+            >
+              <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#FF5F57' }} />
+              <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#FFBD2E' }} />
+              <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#28C840' }} />
+            </Box>
+            {/* Terminal content */}
+            <Box sx={{ p: 3 }}>
+              {quickStartSteps.map((step, i) => (
+                <Box key={i} sx={{ mb: i < quickStartSteps.length - 1 ? 2 : 0 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography
+                      component="span"
+                      sx={{ color: '#7C3AED', fontFamily: 'monospace', fontWeight: 700 }}
+                    >
+                      {'\u276F'}
+                    </Typography>
+                    <Typography
+                      component="span"
+                      sx={{ color: '#C4B5FD', fontFamily: 'monospace', fontSize: '0.95rem' }}
+                    >
+                      {step.cmd}
+                    </Typography>
+                  </Box>
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      fontSize: '0.85rem',
+                      pl: 3,
+                      mt: 0.3,
+                    }}
+                  >
+                    {step.desc}
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Doc Links */}
+        <Box sx={{ textAlign: 'center', mb: 6 }}>
+          <Stack
+            direction="row"
+            spacing={1}
+            flexWrap="wrap"
+            justifyContent="center"
+            useFlexGap
+            sx={{ gap: 1 }}
+          >
+            {stackItems.map((item) => (
+              <Chip
+                key={item.name}
+                label={item.name}
+                component="a"
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                clickable
+                sx={{
+                  bgcolor: 'rgba(124,58,237,0.1)',
+                  border: '1px solid rgba(124,58,237,0.2)',
+                  color: '#C4B5FD',
+                  fontWeight: 500,
+                  '&:hover': {
+                    bgcolor: 'rgba(124,58,237,0.2)',
+                  },
+                }}
+              />
+            ))}
+          </Stack>
+        </Box>
+
+        {/* Footer */}
+        <Box sx={{ textAlign: 'center', pb: 4 }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            Built with{' '}
+            <Typography
+              component="span"
+              variant="body2"
+              sx={{
+                background: 'linear-gradient(135deg, #7C3AED, #A78BFA)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                fontWeight: 600,
+              }}
+            >
+              WorkerStack
+            </Typography>
+          </Typography>
+        </Box>
+      </Container>
+    </Box>
+  );
+}

package/template/src/client/pages/LoginPage.tsx

@@ -0,0 +1,108 @@
+import { useState, type FormEvent } from 'react';
+import { TextField, Button, Alert, Typography, Box, CircularProgress } from '@mui/material';
+import { Link, useNavigate, useLocation, Navigate } from 'react-router';
+import { signIn, useSession } from '@/client/lib/auth-client';
+import { AuthLayout } from '../components/AuthLayout';
+
+export default function LoginPage() {
+  const { data: session, isPending: sessionLoading } = useSession();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = (location.state as { from?: string })?.from || '/dashboard';
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  if (sessionLoading) return null;
+  if (session) return <Navigate to="/dashboard" replace />;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    await signIn.email({
+      email,
+      password,
+    }, {
+      onSuccess: () => navigate(from, { replace: true }),
+      onError: (ctx) => {
+        setError(ctx.error.message);
+        setLoading(false);
+      },
+    });
+  };
+
+  return (
+    <AuthLayout
+      title="Welcome back"
+      subtitle="Sign in to your account"
+      footer={
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          Don't have an account?{' '}
+          <Typography
+            component={Link}
+            to="/register"
+            variant="body2"
+            sx={{ color: 'primary.main', textDecoration: 'none', fontWeight: 600, '&:hover': { textDecoration: 'underline' } }}
+          >
+            Register
+          </Typography>
+        </Typography>
+      }
+    >
+      <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {error && <Alert severity="error">{error}</Alert>}
+
+        <TextField
+          label="Email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          fullWidth
+          autoComplete="email"
+          autoFocus
+        />
+
+        <TextField
+          label="Password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          fullWidth
+          autoComplete="current-password"
+        />
+
+        <Box sx={{ textAlign: 'right', mt: -1 }}>
+          <Typography
+            component={Link}
+            to="/forgot-password"
+            variant="body2"
+            sx={{ color: 'primary.main', textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
+          >
+            Forgot password?
+          </Typography>
+        </Box>
+
+        <Button
+          type="submit"
+          variant="contained"
+          fullWidth
+          disabled={loading}
+          sx={{
+            py: 1.5,
+            bgcolor: 'primary.main',
+            fontWeight: 600,
+            '&:hover': { bgcolor: '#6D28D9' },
+          }}
+        >
+          {loading ? <CircularProgress size={24} color="inherit" /> : 'Sign In'}
+        </Button>
+      </Box>
+    </AuthLayout>
+  );
+}