diff --git a/.env.template b/.env.template
index 6323459..45c1954 100644
--- a/.env.template
+++ b/.env.template
@@ -17,6 +17,7 @@ BACKEND_PORT=8000
# Must be at least 32 characters
SECRET_KEY=your_secret_key_here_REPLACE_WITH_GENERATED_KEY_32_CHARS_MIN
ENVIRONMENT=development
+DEMO_MODE=false
DEBUG=true
BACKEND_CORS_ORIGINS=["http://localhost:3000"]
FIRST_SUPERUSER_EMAIL=admin@example.com
diff --git a/backend/app/core/config.py b/backend/app/core/config.py
index c192697..a5c44d5 100644
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -14,6 +14,10 @@ class Settings(BaseSettings):
default="development",
description="Environment: development, staging, or production",
)
+ DEMO_MODE: bool = Field(
+ default=False,
+ description="Enable demo mode (relaxed security, demo users)",
+ )
# Security: Content Security Policy
# Set to False to disable CSP entirely (not recommended)
@@ -110,11 +114,21 @@ class Settings(BaseSettings):
@field_validator("FIRST_SUPERUSER_PASSWORD")
@classmethod
- def validate_superuser_password(cls, v: str | None) -> str | None:
+ def validate_superuser_password(cls, v: str | None, info) -> str | None:
"""Validate superuser password strength."""
if v is None:
return v
+ # Get environment from values if available
+ values_data = info.data if info.data else {}
+ demo_mode = values_data.get("DEMO_MODE", False)
+
+ if demo_mode:
+ # In demo mode, allow specific weak passwords for demo accounts
+ demo_passwords = {"Demo123!", "Admin123!"}
+ if v in demo_passwords:
+ return v
+
if len(v) < 12:
raise ValueError("FIRST_SUPERUSER_PASSWORD must be at least 12 characters")
diff --git a/backend/app/init_db.py b/backend/app/init_db.py
index ba0b61a..7e09058 100644
--- a/backend/app/init_db.py
+++ b/backend/app/init_db.py
@@ -57,6 +57,27 @@ async def init_db() -> User | None:
await session.refresh(user)
logger.info(f"Created first superuser: {user.email}")
+
+ # Create demo user if in demo mode
+ if settings.DEMO_MODE:
+ demo_email = "demo@example.com"
+ demo_password = "Demo123!"
+
+ existing_demo_user = await user_crud.get_by_email(session, email=demo_email)
+ if not existing_demo_user:
+ demo_user_in = UserCreate(
+ email=demo_email,
+ password=demo_password,
+ first_name="Demo",
+ last_name="User",
+ is_superuser=False,
+ )
+ demo_user = await user_crud.create(session, obj_in=demo_user_in)
+ await session.commit()
+ logger.info(f"Created demo user: {demo_user.email}")
+ else:
+ logger.info(f"Demo user already exists: {existing_demo_user.email}")
+
return user
except Exception as e:
diff --git a/backend/app/schemas/validators.py b/backend/app/schemas/validators.py
index 9b6f745..6b57b98 100644
--- a/backend/app/schemas/validators.py
+++ b/backend/app/schemas/validators.py
@@ -60,6 +60,15 @@ def validate_password_strength(password: str) -> str:
>>> validate_password_strength("MySecureP@ss123") # Valid
>>> validate_password_strength("password1") # Invalid - too weak
"""
+ # Check if we are in demo mode
+ from app.core.config import settings
+
+ if settings.DEMO_MODE:
+ # In demo mode, allow specific weak passwords for demo accounts
+ demo_passwords = {"Demo123!", "Admin123!"}
+ if password in demo_passwords:
+ return password
+
# Check minimum length
if len(password) < 12:
raise ValueError("Password must be at least 12 characters long")
diff --git a/frontend/docs/branding/02-visual-identity.md b/frontend/docs/branding/02-visual-identity.md
index 40ab034..53d69d3 100644
--- a/frontend/docs/branding/02-visual-identity.md
+++ b/frontend/docs/branding/02-visual-identity.md
@@ -12,6 +12,7 @@ The **PragmaStack** logo represents the core values of the project: structure, s
### Icon
+
For smaller contexts (favicons, headers), we use the simplified icon:
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
index eeb7185..0f164c2 100644
--- a/frontend/src/components/auth/LoginForm.tsx
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -6,8 +6,9 @@
'use client';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import { Link } from '@/lib/i18n/routing';
+import { useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
@@ -82,6 +83,9 @@ export function LoginForm({
const [serverError, setServerError] = useState
(null);
const loginMutation = useLogin();
+ // Get query parameters for demo auto-fill
+ const searchParams = useSearchParams();
+
const loginSchema = createLoginSchema((key: string) => {
if (key.startsWith('validation.')) {
return tValidation(key.replace('validation.', ''));
@@ -102,6 +106,15 @@ export function LoginForm({
},
});
+ // Auto-fill form from query params (for demo mode)
+ useEffect(() => {
+ const email = searchParams.get('email');
+ const password = searchParams.get('password');
+
+ if (email) form.setValue('email', email);
+ if (password) form.setValue('password', password);
+ }, [searchParams, form]);
+
const onSubmit = async (data: LoginFormData) => {
try {
// Clear previous errors
diff --git a/frontend/src/components/dev/DevLayout.tsx b/frontend/src/components/dev/DevLayout.tsx
index 9486b24..aa9f6fd 100644
--- a/frontend/src/components/dev/DevLayout.tsx
+++ b/frontend/src/components/dev/DevLayout.tsx
@@ -8,10 +8,10 @@
'use client';
+import Image from 'next/image';
import { Link } from '@/lib/i18n/routing';
import { usePathname } from '@/lib/i18n/routing';
import {
-
Palette,
LayoutDashboard,
Box,
@@ -94,7 +94,13 @@ export function DevLayout({ children }: DevLayoutProps) {
{/* Left: Logo + Badge */}
-
+
PragmaStack
Dev
diff --git a/frontend/src/components/home/DemoCredentialsModal.tsx b/frontend/src/components/home/DemoCredentialsModal.tsx
index 68002ec..87dcc1f 100644
--- a/frontend/src/components/home/DemoCredentialsModal.tsx
+++ b/frontend/src/components/home/DemoCredentialsModal.tsx
@@ -141,12 +141,12 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
-
+
Login as User
-
+
Login as Admin
diff --git a/frontend/src/components/home/Header.tsx b/frontend/src/components/home/Header.tsx
index c07b321..98915e3 100644
--- a/frontend/src/components/home/Header.tsx
+++ b/frontend/src/components/home/Header.tsx
@@ -5,6 +5,7 @@
'use client';
+import Image from 'next/image';
import { useState } from 'react';
import { Link } from '@/lib/i18n/routing';
import { Menu, X, Github, Star } from 'lucide-react';
@@ -13,12 +14,20 @@ import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { LocaleSwitcher } from '@/components/i18n';
import { ThemeToggle } from '@/components/theme';
+import { useIsAuthenticated, useLogout } from '@/lib/api/hooks/useAuth';
+
interface HeaderProps {
onOpenDemoModal: () => void;
}
export function Header({ onOpenDemoModal }: HeaderProps) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+ const isAuthenticated = useIsAuthenticated();
+ const logoutMutation = useLogout();
+
+ const handleLogout = () => {
+ logoutMutation.mutate();
+ };
const navLinks = [
{ href: '/', label: 'Home' },
@@ -31,8 +40,17 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
{/* Logo */}
-
-
+
+
PragmaStack
@@ -75,9 +93,16 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
Try Demo
-
- Login
-
+
+ {isAuthenticated ? (
+
+ Logout
+
+ ) : (
+
+ Login
+
+ )}
{/* Mobile Menu Toggle */}
@@ -138,11 +163,25 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
>
Try Demo
-
- setMobileMenuOpen(false)}>
- Login
-
-
+
+ {isAuthenticated ? (
+
{
+ setMobileMenuOpen(false);
+ handleLogout();
+ }}
+ variant="outline"
+ className="w-full"
+ >
+ Logout
+
+ ) : (
+
+ setMobileMenuOpen(false)}>
+ Login
+
+
+ )}
diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index b3064d3..757d46d 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -124,8 +124,6 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
-
-
diff --git a/frontend/src/components/home/TechStackSection.tsx b/frontend/src/components/home/TechStackSection.tsx
index be485cf..1c0b280 100644
--- a/frontend/src/components/home/TechStackSection.tsx
+++ b/frontend/src/components/home/TechStackSection.tsx
@@ -66,9 +66,7 @@ export function TechStackSection() {
viewport={{ once: true, margin: '-100px' }}
transition={{ duration: 0.6 }}
>
-
- A Stack You Can Trust
-
+
A Stack You Can Trust
We chose these tools because they are boring, reliable, and standard. No hype, just
results. Async architecture, type safety, and developer experience.
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index 74d8b03..c1c7c72 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -5,6 +5,7 @@
'use client';
+import Image from 'next/image';
import { Link } from '@/lib/i18n/routing';
export function Footer() {
@@ -15,7 +16,13 @@ export function Footer() {
-
+
© {currentYear} PragmaStack. All rights reserved.
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 4136993..341a465 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -6,6 +6,7 @@
'use client';
+import Image from 'next/image';
import { Link } from '@/lib/i18n/routing';
import { usePathname } from '@/lib/i18n/routing';
import { useAuth } from '@/lib/auth/AuthContext';
@@ -83,7 +84,13 @@ export function Header() {
{/* Logo */}
-
+
PragmaStack
diff --git a/frontend/src/lib/api/hooks/useAuth.ts b/frontend/src/lib/api/hooks/useAuth.ts
index c5dd11c..f47b5df 100755
--- a/frontend/src/lib/api/hooks/useAuth.ts
+++ b/frontend/src/lib/api/hooks/useAuth.ts
@@ -9,7 +9,7 @@
import { useEffect } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
import {
login,
register,