Skip to main content
← Back to Pathmode🧪 Demo Mode

Intent-Driven Development Demo

This page demonstrates implementing a login form from an Intent Specification. The spec defines what to build; the code implements how.

📋

Intent Specification

INT-TEMPLATE-LOGIN-001

{
  "intentId": "INT-TEMPLATE-LOGIN-001",
  "title": "User Login Flow",
  "source": {
    "type": "feature-request",
    "description": "Enable users to authenticate and access protected features."
  },
  "behavior": {
    "userStory": "As a registered user, I can log in with my email and password so that I can access my personal dashboard and data.",
    "acceptanceCriteria": [
      "A login form is accessible from the main navigation.",
      "Form fields: Email (required, email format validation), Password (required, min 8 characters).",
      "Submitting valid credentials authenticates the user.",
      "Successful login redirects to /dashboard.",
      "Invalid credentials display an inline error: 'Invalid email or password.'",
      "A 'Forgot Password?' link is visible and navigates to /reset-password.",
      "The login button shows a loading state during authentication.",
      "Session persists across browser tabs."
    ]
  },
  "context": {
    "suggestedComponent": "IntentLoginForm.tsx",
    "framework": "Next.js 16",
    "authProvider": "Supabase",
    "designSystem": "TailwindCSS"
  },
  "constraints": [
    "Passwords must NOT be logged to the console or any analytics service.",
    "All API calls must be over HTTPS.",
    "Rate limiting: Max 5 failed attempts per email per 15 minutes."
  ]
}
✨

Live Implementation

IntentLoginForm.tsx

Forgot Password?

Max 5 login attempts per 15 minutes for security.

🎯 Try it out:

  • • Enter demo@example.com to see error handling
  • • Try invalid email formats to see validation
  • • Use short passwords (<8 chars) to test requirements
  • • Watch the loading state on submit

✅ Acceptance Criteria Coverage

✓A login form is accessible from the main navigation.
✓Form fields: Email (required, email format validation), Password (required, min 8 characters).
✓Submitting valid credentials authenticates the user.
✓Successful login redirects to /dashboard.
✓Invalid credentials display an inline error: 'Invalid email or password.'
✓A 'Forgot Password?' link is visible and navigates to /reset-password.
✓The login button shows a loading state during authentication.
✓Session persists across browser tabs.

This is a standalone demo page. To revert, delete: app/intent-demo/ and components/IntentLoginForm.tsx