Congruent - Modern Login Page

A clean, responsive login form built with vanilla HTML, CSS, and JavaScript. No frameworks, no dependencies, no build step. Perfect for quick integration with any backend API.

✨ Features

• 📱 Responsive Design — Works beautifully on mobile, tablet, and desktop
• ⚡ Zero Dependencies — Pure vanilla JavaScript, no frameworks or libraries
• ✅ Form Validation — Email format and password strength validation
• 👁️ Password Toggle — Show/hide password with one click
• 💬 Real-time Error Clearing — Errors disappear as users correct input
• 🎨 Modern Styling — Gradient background, smooth transitions, accessibility-focused
• ♿ Accessible — WCAG AA compliant, screen reader friendly, keyboard navigable
• 🔒 Security Ready — Prepared for HTTPS and backend authentication
• 📚 Thoroughly Documented — 6 comprehensive markdown guides included

🚀 Quick Start

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Optional: Python or Node.js for local development server

Installation

1. Clone the repository:

   git clone https://github.com/DataSpoof/congruent.git
   cd congruent

2. Start a local server:

   # Python 3
   python -m http.server 8000
   
   # Python 2
   python -m SimpleHTTPServer 8000
   
   # Node.js
   npx http-server -p 8000

3. Open in browser:

   http://localhost:8000
   

📁 Project Structure

congruent/
├── index.html           # Login form markup
├── style.css            # All styling and layout
├── script.js            # Form behavior and validation
├── signup.html          # Sign-up page template
├── signup.js            # Sign-up form logic
├── CLAUDE.md            # Project overview and guidelines
├── ARCHITECTURE.md      # System design and data flow
├── API.md               # Backend API contract and examples
├── VALIDATION.md        # Validation logic and testing
├── DEVELOPMENT.md       # Development workflow guide
├── QUICK-REFERENCE.md   # Quick lookup cheat sheet
└── README.md            # This file

📖 Documentation

Complete documentation is included in the repository:

• CLAUDE.md — Project overview, file structure, and key points
• ARCHITECTURE.md — System design, data flow, security considerations
• API.md — Backend API contract, examples in Node/Python/Ruby, CORS setup
• VALIDATION.md — Validation rules, testing strategies, code examples
• DEVELOPMENT.md — Workflow guide, debugging, optimization, checklists
• QUICK-REFERENCE.md — Condensed cheat sheet for common tasks

🔌 API Integration

The form expects a backend endpoint at POST /api/login:

Request:

{
  "email": "user@example.com",
  "password": "password123"
}

Success Response (200):

{
  "access_token": "eyJhbGciOiJIUzI1NiIs...",
  "name": "User Name"
}

See API.md for implementation examples in Node.js, Python, and Ruby.

✅ Validation Rules

Field	Rule	Error Message
Email	Valid format (a@b.c)	"Enter a valid email address."
Password	6+ characters	"Password must be at least 6 characters."

Both validations run on submit and in real-time as users correct input.

🎨 Customization

Change colors in style.css:

• Primary (purple): #667eea → your color
• Error (red): #ef4444 → your color
• Success (green): #10b981 → your color

Adjust form width:

.login-container { max-width: 400px; } /* Change this value */

Add new fields:

1. Add input + error span in HTML
2. Add validation in JavaScript
3. Include in API request body

See DEVELOPMENT.md for detailed customization guide.

🧪 Testing

Manual Testing Checklist

• Empty email → error shown
• Invalid email → error shown
• Short password → error shown
• Toggle password visibility
• Error clearing on input
• Successful login flow
• Error handling and retry

See VALIDATION.md for automated testing examples with Jest and Playwright.

📊 Performance

• Total size: ~9 KB uncompressed (~3 KB gzipped)
• Load time: <1ms on good connection
• No external dependencies: Pure vanilla HTML/CSS/JS
• Browser support: Chrome 45+, Firefox 39+, Safari 10+, Edge 14+

🔐 Security

This form is a frontend template. For production:

• ✅ Use HTTPS only
• ✅ Implement CORS on backend
• ✅ Hash passwords with bcrypt/Argon2
• ✅ Add rate limiting
• ✅ Validate input on backend
• ✅ Use HttpOnly cookies for tokens
• ✅ Add CSRF protection if needed

See ARCHITECTURE.md for complete security checklist.

📝 License

MIT License - feel free to use for personal and commercial projects.

🤝 Contributing

Contributions welcome! Feel free to:

• Report bugs
• Suggest improvements
• Submit pull requests
• Share feedback

📧 Contact

Created by DataSpoof

---

Ready to get started? Clone the repo and follow the Quick Start section above! 🚀

For questions or issues, check the comprehensive documentation or create an issue in the repository.