🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../l7-pro-2-e-learning-2023-Epolleke/LOGIN_GUIDE.md

# 🔐 Login System - Quick Start Guide

## Features Added

✅ **User Registration** - Create new accounts  
✅ **User Login** - Secure authentication  
✅ **Session Management** - Stay logged in  
✅ **User Progress Tracking** - Save progress per user  
✅ **Guest Mode** - Practice without account  

## 🚀 Quick Start

### Access the Application

1. **Open**: http://localhost/login.html
2. **Login with demo account**:
   - Username: `demo`
   - Password: `demo123`
3. **Or create a new account**

### Demo Account

The database comes pre-loaded with a demo account:

```
Username: demo
Password: demo123
```

## 📝 How It Works

### 1. **Login Page** (`login.html`)
- Beautiful auth interface
- Login form
- Registration form
- Guest access option

### 2. **User Flow**

```
┌─────────────┐
│ login.html  │
└──────┬──────┘
       │
       ├─► Login ──────► Main App (logged in)
       │
       ├─► Register ───► Login ──► Main App
       │
       └─► Guest ──────► Main App (guest mode)
```

### 3. **API Endpoints**

#### Register New User
```javascript
POST /php/register.php
{
  "username": "john",
  "email": "john@example.com",
  "password": "secret123",
  "full_name": "John Doe"
}
```

#### Login
```javascript
POST /php/login.php
{
  "username": "demo",
  "password": "demo123"
}
```

#### Check Auth Status
```javascript
GET /php/check_auth.php
```

#### Logout
```javascript
POST /php/logout.php
```

## 🗄️ Database Changes

### New Table: `users`

```sql
CREATE TABLE users (
    user_id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE,
    email VARCHAR(100) UNIQUE,
    password_hash VARCHAR(255),
    full_name VARCHAR(100),
    created_at TIMESTAMP,
    last_login TIMESTAMP,
    is_active BOOLEAN
);
```

### Updated Table: `user_progress`

Now tracks progress per user:

```sql
ALTER TABLE user_progress ADD COLUMN user_id INT;
```

## 🎨 Features

### Header Changes
- Shows username when logged in
- Logout button
- Login button for guests

### Progress Tracking
- **Logged in users**: Progress saved to database
- **Guest users**: Progress in session only

## 📱 Usage Examples

### 1. Create Account

```javascript
// Navigate to login page
http://localhost/login.html

// Click "Register here"
// Fill form:
- Username: myuser
- Email: myuser@example.com  
- Password: mypass123
- Confirm: mypass123

// Click "Create Account"
// Automatically redirected to login
```

### 2. Login

```javascript
// Enter credentials:
- Username: demo
- Password: demo123

// Click "Login"
// Redirected to main app
// Username shown in header
```

### 3. Practice as User

```javascript
// All progress is saved to your account
// View your statistics
// Progress persists across sessions
```

### 4. Continue as Guest

```javascript
// Click "Continue as Guest"
// Practice without account
// Progress NOT saved
```

## 🔒 Security Features

✅ **Password Hashing** - BCrypt encryption  
✅ **SQL Injection Protection** - Prepared statements  
✅ **Session Management** - Secure PHP sessions  
✅ **Input Validation** - Server-side validation  
✅ **XSS Protection** - Sanitized outputs  

## 🧪 Testing

### Test Registration

1. Go to: http://localhost/login.html
2. Click "Register here"
3. Create account with:
   - Username: testuser
   - Email: test@test.com
   - Password: test123
4. Should see success message

### Test Login

1. Use demo account or your new account
2. Should redirect to main app
3. Username should appear in header

### Test Logout

1. Click "Logout" in header
2. Should redirect to login page
3. Session cleared

### Test Guest Mode

1. Click "Continue as Guest"
2. Can practice normally
3. No username in header
4. Progress not saved

## 🐛 Troubleshooting

### "Username already exists"
- Username must be unique
- Try different username

### "Invalid username or password"
- Check caps lock
- Verify password is correct
- Use demo account to test

### Can't see login button
- Clear browser cache
- Hard refresh: Ctrl+F5

### Session not persisting
- Check browser cookies enabled
- Clear cookies and try again

## 📊 Database Management

### View Users

```sql
-- Open phpMyAdmin: http://localhost:8080
SELECT * FROM users;
```

### Create Admin User

```sql
INSERT INTO users (username, email, password_hash, full_name)
VALUES (
    'admin',
    'admin@example.com',
    '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi',
    'Administrator'
);
-- Password: password
```

### Reset User Password

```php
// Generate new hash
$new_hash = password_hash('newpassword123', PASSWORD_BCRYPT);
echo $new_hash;

// Update database
UPDATE users 
SET password_hash = '$2y$10$...' 
WHERE username = 'demo';
```

## 🎯 Next Steps

1. ✅ Login system is working
2. ✅ User registration available
3. ✅ Progress tracking implemented
4. 📧 Add email verification (optional)
5. 🔐 Add password reset (optional)
6. 👥 Add user profiles (optional)

## 🎉 Success!

Your English Vocabulary Learning app now has:
- ✅ Full authentication system
- ✅ User registration
- ✅ Secure login
- ✅ Progress tracking per user
- ✅ Guest mode option

**Try it now**: http://localhost/login.html

Login with:
- Username: `demo`
- Password: `demo123`

---

**Happy Learning! 🎓**

🎯 Available Actions