create-workerstack 0.1.1 → 0.1.3

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

@@ -0,0 +1,80 @@
+import { Typography, Box, Button } from '@mui/material';
+import { Link } from 'react-router';
+
+export default function NotFoundPage() {
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Background glow */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '400px',
+          height: '400px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(124,58,237,0.1) 0%, transparent 70%)',
+          filter: 'blur(60px)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <Box sx={{ textAlign: 'center', position: 'relative', animation: 'fadeInUp 0.6s ease-out' }}>
+        <Typography
+          variant="h1"
+          sx={{
+            fontSize: { xs: '6rem', md: '10rem' },
+            fontWeight: 800,
+            fontFamily: "'Sora', sans-serif",
+            background: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 50%, #C4B5FD 100%)',
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            lineHeight: 1,
+          }}
+        >
+          404
+        </Typography>
+
+        <Typography
+          variant="h5"
+          sx={{
+            color: 'text.secondary',
+            fontWeight: 400,
+            mt: 2,
+            mb: 4,
+          }}
+        >
+          Page not found
+        </Typography>
+
+        <Button
+          component={Link}
+          to="/"
+          variant="contained"
+          size="large"
+          sx={{
+            bgcolor: 'primary.main',
+            fontWeight: 600,
+            px: 4,
+            py: 1.5,
+            '&:hover': { bgcolor: '#6D28D9' },
+          }}
+        >
+          Go Home
+        </Button>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,123 @@
+import { useState, type FormEvent } from 'react';
+import { TextField, Button, Alert, Typography, Box, CircularProgress } from '@mui/material';
+import { Link, useNavigate, Navigate } from 'react-router';
+import { signUp, useSession } from '@/client/lib/auth-client';
+import { AuthLayout } from '../components/AuthLayout';
+
+export default function RegisterPage() {
+  const { data: session, isPending: sessionLoading } = useSession();
+  const navigate = useNavigate();
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = 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('');
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+
+    await signUp.email({
+      name,
+      email,
+      password,
+    }, {
+      onSuccess: () => navigate('/dashboard', { replace: true }),
+      onError: (ctx) => {
+        setError(ctx.error.message);
+        setLoading(false);
+      },
+    });
+  };
+
+  return (
+    <AuthLayout
+      title="Create an account"
+      subtitle="Get started with WorkerStack"
+      footer={
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          Already have an account?{' '}
+          <Typography
+            component={Link}
+            to="/login"
+            variant="body2"
+            sx={{ color: 'primary.main', textDecoration: 'none', fontWeight: 600, '&:hover': { textDecoration: 'underline' } }}
+          >
+            Login
+          </Typography>
+        </Typography>
+      }
+    >
+      <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {error && <Alert severity="error">{error}</Alert>}
+
+        <TextField
+          label="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          fullWidth
+          autoComplete="name"
+          autoFocus
+        />
+
+        <TextField
+          label="Email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          fullWidth
+          autoComplete="email"
+        />
+
+        <TextField
+          label="Password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          fullWidth
+          autoComplete="new-password"
+        />
+
+        <TextField
+          label="Confirm 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" /> : 'Create Account'}
+        </Button>
+      </Box>
+    </AuthLayout>
+  );
+}

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

@@ -0,0 +1,143 @@
+import { useState, type FormEvent } from 'react';
+import { TextField, Button, Alert, Typography, Box, CircularProgress } from '@mui/material';
+import { Link, useSearchParams } from 'react-router';
+import { authClient } from '@/client/lib/auth-client';
+import { AuthLayout } from '../components/AuthLayout';
+
+export default function ResetPasswordPage() {
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('token');
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  if (!token) {
+    return (
+      <AuthLayout
+        title="Invalid link"
+        subtitle="This password reset link is invalid or has expired"
+        footer={
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            <Typography
+              component={Link}
+              to="/forgot-password"
+              variant="body2"
+              sx={{ color: 'primary.main', textDecoration: 'none', fontWeight: 600, '&:hover': { textDecoration: 'underline' } }}
+            >
+              Request a new reset link
+            </Typography>
+          </Typography>
+        }
+      >
+        <Alert severity="error">No reset token found in the URL.</Alert>
+      </AuthLayout>
+    );
+  }
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+
+    const { error } = await authClient.resetPassword({
+      newPassword: password,
+      token,
+    });
+
+    setLoading(false);
+
+    if (error) {
+      setError(error.message);
+    } else {
+      setSuccess(true);
+    }
+  };
+
+  return (
+    <AuthLayout
+      title="Set a new password"
+      subtitle="Enter your new password below"
+      footer={
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          <Typography
+            component={Link}
+            to="/login"
+            variant="body2"
+            sx={{ color: 'primary.main', textDecoration: 'none', fontWeight: 600, '&:hover': { textDecoration: 'underline' } }}
+          >
+            Back to login
+          </Typography>
+        </Typography>
+      }
+    >
+      {success ? (
+        <Box sx={{ textAlign: 'center' }}>
+          <Alert severity="success" sx={{ mb: 2 }}>
+            Your password has been reset successfully.
+          </Alert>
+          <Button
+            component={Link}
+            to="/login"
+            variant="contained"
+            sx={{
+              bgcolor: 'primary.main',
+              fontWeight: 600,
+              '&:hover': { bgcolor: '#6D28D9' },
+            }}
+          >
+            Go to Login
+          </Button>
+        </Box>
+      ) : (
+        <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {error && <Alert severity="error">{error}</Alert>}
+
+          <TextField
+            label="New Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            fullWidth
+            autoComplete="new-password"
+            autoFocus
+          />
+
+          <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" /> : 'Reset Password'}
+          </Button>
+        </Box>
+      )}
+    </AuthLayout>
+  );
+}

package/template/src/client/theme.ts

@@ -0,0 +1,30 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  cssVariables: { colorSchemeSelector: 'class' },
+  defaultColorScheme: 'dark',
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: { main: '#7C3AED' },
+        background: { default: '#F8F9FA', paper: '#FFFFFF' },
+        text: { primary: '#1A1A2E', secondary: '#64748B' },
+      },
+    },
+    dark: {
+      palette: {
+        primary: { main: '#7C3AED' },
+        background: { default: '#0A0A0F', paper: '#12121A' },
+        text: { primary: '#F1F5F9', secondary: '#94A3B8' },
+      },
+    },
+  },
+  typography: {
+    fontFamily: "'Plus Jakarta Sans', sans-serif",
+    h1: { fontFamily: "'Sora', sans-serif" },
+    h2: { fontFamily: "'Sora', sans-serif" },
+  },
+  shape: { borderRadius: 12 },
+});
+
+export default theme;

package/template/src/style.css

@@ -11,8 +11,6 @@ html {
 }
 
 body {
-  background-color: #0A0A0F;
-  color: #F1F5F9;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;