Smart Authentication System

A beautiful, feature-rich full-stack web application connecting to the Authentication_System MySQL database. Built with a modern dark theme, glassmorphism design, animated particle effects, and 14+ dashboard sections.

---

What's New (Enhanced Version)

• Landing Page - Hero section with animated orbs, feature cards, authentication flow, database schema visualization, and CTA
• Glassmorphism Login - Particle animation background, password toggle, animated demo account cards
• 14 Dashboard Sections:
  1. Overview - Stats cards with trends, login activity charts, security score ring, recent activity, location bar chart
  2. Security Score - Big animated score, breakdown bars
  3. Risk Analysis - Risk distribution chart, anomaly types list, interactive heatmap
  4. Activity Timeline - Chronological event feed with colored dots
  5. Geo Location - Country flag cards with login stats
  6. Anomaly Map - Detailed anomaly cards with risk badges
  7. Users - Searchable, filterable user table with avatars
  8. Login Attempts - Filterable attempt history with badges
  9. Alerts - Card-based alert display with risk levels
  10. Notifications - Rich notification list with icons
  11. Permission Matrix - Role vs Permission table
  12. System Health - Database/API status, performance bars
  13. Audit Trail - Complete event log with filters
  14. Settings - Appearance, notification, and security toggles

---

Project Structure

HELLOUSER/
├── backend/
│   ├── .env               # Database credentials
│   ├── db.js              # MySQL connection pool
│   ├── package.json       # Node dependencies
│   └── server.js          # Express API (16 endpoints)
├── frontend/
│   ├── css/
│   │   └── style.css      # Complete dark theme + glassmorphism
│   ├── js/
│   │   ├── app.js         # Login with particle animation
│   │   ├── dashboard.js   # 14 views with real-time data
│   │   └── landing.js     # Landing page animations
│   ├── landing.html       # Beautiful marketing page
│   ├── index.html         # Glassmorphism login page
│   └── dashboard.html     # 14-section dashboard
└── README.md

---

Prerequisites

• Node.js installed
• MySQL installed and running
• The schema.sql file imported into MySQL as database Authentication_System

---

Setup Instructions

1. Import the Database

mysql -u root -p < /Users/eshaagrawal/schema.sql

2. Configure Backend

cd backend
npm install

Update .env with your MySQL credentials:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=Authentication_System
PORT=3000

3. Start the Backend Server

npm start

Server runs at: http://localhost:3000

4. Open the Website

Start with the Landing Page:

open frontend/landing.html

Or go directly to Login:

open frontend/index.html

---

API Endpoints

Method	Endpoint	Description
GET	/api/health	Server health check
POST	/api/auth/login	User authentication
GET	/api/dashboard	Summary statistics
GET	/api/security-score	System security score
GET	/api/risk-distribution	Risk score distribution
GET	/api/activity-timeline	Recent activity feed
GET	/api/location-stats	Geo-location data
GET	/api/anomaly-types	Anomaly type breakdown
GET	/api/system-health	System health metrics
GET	/api/audit-trail	Complete audit log
GET	/api/permission-matrix	Role-Permission matrix
GET	/api/users	List all users
GET	/api/login-attempts	View login attempts
GET	/api/alerts	View security alerts
GET	/api/notifications	View notifications
GET	/api/roles	List system roles

---

Demo Accounts

Username	Password	Role
rahul_01	pass123	Administrator
priya_02	secure456	Security Officer
amit_03	amit@789	Normal User
sneha_04	sneha#321	Normal User
vikram_05	vikram!99	Security Officer
ananya_06	ananya@123	Normal User

---

Tech Stack

• Backend: Node.js, Express, mysql2
• Frontend: HTML5, CSS3, Vanilla JavaScript, Font Awesome
• Design: Dark theme, glassmorphism, CSS animations, particle effects, SVG charts
• Database: MySQL

---

Features Summary

Feature	Description
Particle Animation	Animated network background on login
Glassmorphism	Frosted glass cards throughout
Animated Counters	Number counting animations
Scroll Reveal	Elements animate on scroll
Interactive Charts	CSS-based bar and doughnut charts
Risk Heatmap	7x7 interactive color grid
Security Score Ring	Animated SVG progress ring
Activity Timeline	Vertical timeline with color-coded dots
Real-time Stats	Live data from MySQL database
Responsive Design	Works on desktop, tablet, and mobile