fastapi-fullstack 0.1.7__py3-none-any.whl

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/globals.css

@@ -0,0 +1,323 @@
+@import "tailwindcss";
+
+@theme {
+  /* Light theme - neutral grays with better contrast */
+  --color-background: oklch(97% 0 0);
+  --color-foreground: oklch(15% 0 0);
+  --color-card: oklch(100% 0 0);
+  --color-card-foreground: oklch(15% 0 0);
+  --color-popover: oklch(100% 0 0);
+  --color-popover-foreground: oklch(15% 0 0);
+  --color-primary: oklch(25% 0 0);
+  --color-primary-foreground: oklch(98% 0 0);
+  --color-secondary: oklch(93% 0 0);
+  --color-secondary-foreground: oklch(20% 0 0);
+  --color-muted: oklch(93% 0 0);
+  --color-muted-foreground: oklch(45% 0 0);
+  --color-accent: oklch(93% 0 0);
+  --color-accent-foreground: oklch(20% 0 0);
+  --color-destructive: oklch(57.7% 0.245 27.325);
+  --color-destructive-foreground: oklch(98.5% 0 0);
+  --color-border: oklch(88% 0 0);
+  --color-input: oklch(88% 0 0);
+  --color-ring: oklch(25% 0 0);
+  --radius: 0.5rem;
+}
+
+/* Dark theme - triggered by system preference or .dark class */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    /* Dark theme - neutral with better contrast between sections */
+    --color-background: oklch(12% 0 0);
+    --color-foreground: oklch(95% 0 0);
+    --color-card: oklch(18% 0 0);
+    --color-card-foreground: oklch(95% 0 0);
+    --color-popover: oklch(18% 0 0);
+    --color-popover-foreground: oklch(95% 0 0);
+    --color-primary: oklch(95% 0 0);
+    --color-primary-foreground: oklch(12% 0 0);
+    --color-secondary: oklch(22% 0 0);
+    --color-secondary-foreground: oklch(95% 0 0);
+    --color-muted: oklch(22% 0 0);
+    --color-muted-foreground: oklch(60% 0 0);
+    --color-accent: oklch(25% 0 0);
+    --color-accent-foreground: oklch(95% 0 0);
+    --color-destructive: oklch(57.7% 0.245 27.325);
+    --color-destructive-foreground: oklch(98.5% 0 0);
+    --color-border: oklch(28% 0 0);
+    --color-input: oklch(28% 0 0);
+    --color-ring: oklch(80% 0 0);
+  }
+}
+
+/* Manual dark mode via .dark class */
+:root.dark {
+  /* Dark theme - neutral with better contrast between sections */
+  --color-background: oklch(12% 0 0);
+  --color-foreground: oklch(95% 0 0);
+  --color-card: oklch(18% 0 0);
+  --color-card-foreground: oklch(95% 0 0);
+  --color-popover: oklch(18% 0 0);
+  --color-popover-foreground: oklch(95% 0 0);
+  --color-primary: oklch(95% 0 0);
+  --color-primary-foreground: oklch(12% 0 0);
+  --color-secondary: oklch(22% 0 0);
+  --color-secondary-foreground: oklch(95% 0 0);
+  --color-muted: oklch(22% 0 0);
+  --color-muted-foreground: oklch(60% 0 0);
+  --color-accent: oklch(25% 0 0);
+  --color-accent-foreground: oklch(95% 0 0);
+  --color-destructive: oklch(57.7% 0.245 27.325);
+  --color-destructive-foreground: oklch(98.5% 0 0);
+  --color-border: oklch(28% 0 0);
+  --color-input: oklch(28% 0 0);
+  --color-ring: oklch(80% 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar */
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: oklch(50% 0 0 / 0.3) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: oklch(50% 0 0 / 0.3);
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: oklch(50% 0 0 / 0.5);
+  }
+}
+
+/* Code syntax highlighting for markdown */
+@layer base {
+  /* Light theme code highlighting */
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0;
+    background: transparent;
+  }
+
+  code.hljs {
+    padding: 3px 5px;
+  }
+
+  .hljs {
+    color: #24292e;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #6a737d;
+    font-style: italic;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-literal {
+    color: #d73a49;
+  }
+
+  .hljs-name,
+  .hljs-tag {
+    color: #22863a;
+  }
+
+  .hljs-attr,
+  .hljs-attribute {
+    color: #6f42c1;
+  }
+
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-regexp,
+  .hljs-link {
+    color: #005cc5;
+  }
+
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet {
+    color: #032f62;
+  }
+
+  .hljs-number {
+    color: #005cc5;
+  }
+
+  .hljs-meta,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-type,
+  .hljs-params {
+    color: #e36209;
+  }
+
+  .hljs-function .hljs-title {
+    color: #6f42c1;
+  }
+
+  .hljs-addition {
+    color: #22863a;
+    background-color: #f0fff4;
+  }
+
+  .hljs-deletion {
+    color: #b31d28;
+    background-color: #ffeef0;
+  }
+
+  /* Dark theme code highlighting */
+  .dark .hljs,
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light) .hljs {
+      color: #e1e4e8;
+    }
+
+    :root:not(.light) .hljs-comment,
+    :root:not(.light) .hljs-quote {
+      color: #6a737d;
+    }
+
+    :root:not(.light) .hljs-keyword,
+    :root:not(.light) .hljs-selector-tag,
+    :root:not(.light) .hljs-literal {
+      color: #ff7b72;
+    }
+
+    :root:not(.light) .hljs-name,
+    :root:not(.light) .hljs-tag {
+      color: #7ee787;
+    }
+
+    :root:not(.light) .hljs-attr,
+    :root:not(.light) .hljs-attribute {
+      color: #d2a8ff;
+    }
+
+    :root:not(.light) .hljs-variable,
+    :root:not(.light) .hljs-template-variable,
+    :root:not(.light) .hljs-regexp,
+    :root:not(.light) .hljs-link {
+      color: #79c0ff;
+    }
+
+    :root:not(.light) .hljs-string,
+    :root:not(.light) .hljs-symbol,
+    :root:not(.light) .hljs-bullet {
+      color: #a5d6ff;
+    }
+
+    :root:not(.light) .hljs-number {
+      color: #79c0ff;
+    }
+
+    :root:not(.light) .hljs-meta,
+    :root:not(.light) .hljs-built_in,
+    :root:not(.light) .hljs-builtin-name,
+    :root:not(.light) .hljs-type,
+    :root:not(.light) .hljs-params {
+      color: #ffa657;
+    }
+
+    :root:not(.light) .hljs-function .hljs-title {
+      color: #d2a8ff;
+    }
+
+    :root:not(.light) .hljs-addition {
+      color: #aff5b4;
+      background-color: #033a16;
+    }
+
+    :root:not(.light) .hljs-deletion {
+      color: #ffdcd7;
+      background-color: #67060c;
+    }
+  }
+
+  .dark .hljs {
+    color: #e1e4e8;
+  }
+
+  .dark .hljs-comment,
+  .dark .hljs-quote {
+    color: #6a737d;
+  }
+
+  .dark .hljs-keyword,
+  .dark .hljs-selector-tag,
+  .dark .hljs-literal {
+    color: #ff7b72;
+  }
+
+  .dark .hljs-name,
+  .dark .hljs-tag {
+    color: #7ee787;
+  }
+
+  .dark .hljs-attr,
+  .dark .hljs-attribute {
+    color: #d2a8ff;
+  }
+
+  .dark .hljs-variable,
+  .dark .hljs-template-variable,
+  .dark .hljs-regexp,
+  .dark .hljs-link {
+    color: #79c0ff;
+  }
+
+  .dark .hljs-string,
+  .dark .hljs-symbol,
+  .dark .hljs-bullet {
+    color: #a5d6ff;
+  }
+
+  .dark .hljs-number {
+    color: #79c0ff;
+  }
+
+  .dark .hljs-meta,
+  .dark .hljs-built_in,
+  .dark .hljs-builtin-name,
+  .dark .hljs-type,
+  .dark .hljs-params {
+    color: #ffa657;
+  }
+
+  .dark .hljs-function .hljs-title {
+    color: #d2a8ff;
+  }
+
+  .dark .hljs-addition {
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+
+  .dark .hljs-deletion {
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "{{ cookiecutter.project_name }}",
+  description: "{{ cookiecutter.project_description }}",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/providers.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+import { ThemeProvider } from "@/components/theme";
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000, // 1 minute
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>{children}</ThemeProvider>
+    </QueryClientProvider>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/auth/index.ts

@@ -0,0 +1,2 @@
+export { LoginForm } from "./login-form";
+export { RegisterForm } from "./register-form";

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/auth/login-form.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useAuth } from "@/hooks";
+import { Button, Input, Label, Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui";
+import { ApiError } from "@/lib/api-client";
+import { ROUTES } from "@/lib/constants";
+{%- if cookiecutter.enable_oauth_google %}
+import { GoogleIcon } from "@/components/icons/google-icon";
+{%- endif %}
+
+export function LoginForm() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+{%- if cookiecutter.enable_oauth_google %}
+  const [isOAuthLoading, setIsOAuthLoading] = useState(false);
+{%- endif %}
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+
+    try {
+      await login({ email, password });
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message);
+      } else {
+        setError("Login failed. Please try again.");
+      }
+      setIsLoading(false);
+    }
+  };
+
+{%- if cookiecutter.enable_oauth_google %}
+
+  const handleGoogleLogin = () => {
+    setIsOAuthLoading(true);
+    // Redirect to backend OAuth endpoint
+    window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/oauth/google/login`;
+  };
+{%- endif %}
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle className="text-2xl text-center">Login</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? "Logging in..." : "Login"}
+          </Button>
+        </form>
+
+{%- if cookiecutter.enable_oauth_google %}
+
+        <div className="relative my-6">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
+          </div>
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full"
+          onClick={handleGoogleLogin}
+          disabled={isOAuthLoading || isLoading}
+        >
+          <GoogleIcon className="mr-2 h-4 w-4" />
+          {isOAuthLoading ? "Redirecting..." : "Continue with Google"}
+        </Button>
+{%- endif %}
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Don&apos;t have an account?{" "}
+          <Link href={ROUTES.REGISTER} className="text-primary hover:underline">
+            Register
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/auth/register-form.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks";
+import { Button, Input, Label, Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui";
+import { ApiError } from "@/lib/api-client";
+import { ROUTES } from "@/lib/constants";
+{%- if cookiecutter.enable_oauth_google %}
+import { GoogleIcon } from "@/components/icons/google-icon";
+{%- endif %}
+
+export function RegisterForm() {
+  const router = useRouter();
+  const { register } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+{%- if cookiecutter.enable_oauth_google %}
+  const [isOAuthLoading, setIsOAuthLoading] = useState(false);
+{%- endif %}
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await register({ email, password, name: name || undefined });
+      router.push(ROUTES.LOGIN + "?registered=true");
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message);
+      } else {
+        setError("Registration failed. Please try again.");
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+{%- if cookiecutter.enable_oauth_google %}
+
+  const handleGoogleSignUp = () => {
+    setIsOAuthLoading(true);
+    // Redirect to backend OAuth endpoint
+    window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/oauth/google/login`;
+  };
+{%- endif %}
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle className="text-2xl text-center">Create Account</CardTitle>
+      </CardHeader>
+      <CardContent>
+{%- if cookiecutter.enable_oauth_google %}
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full mb-6"
+          onClick={handleGoogleSignUp}
+          disabled={isOAuthLoading || isLoading}
+        >
+          <GoogleIcon className="mr-2 h-4 w-4" />
+          {isOAuthLoading ? "Redirecting..." : "Sign up with Google"}
+        </Button>
+
+        <div className="relative mb-6">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">Or register with email</span>
+          </div>
+        </div>
+{%- endif %}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name (optional)</Label>
+            <Input
+              id="name"
+              type="text"
+              placeholder="John Doe"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? "Creating account..." : "Register"}
+          </Button>
+        </form>
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <Link href={ROUTES.LOGIN} className="text-primary hover:underline">
+            Login
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}