Florian Uhlig
4
.env.example
Normal file
4
.env.example
Normal file
@@ -0,0 +1,4 @@
|
||||
DB_TYPE=sqlite
|
||||
SQLITE_PATH=databases/chatbot.db
|
||||
FLASK_DEBUG=true
|
||||
FLASK_SECRET_KEY=change-this-in-productio
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,5 +2,6 @@
|
||||
/.idea/
|
||||
testing.py
|
||||
/databases/
|
||||
.venv
|
||||
|
||||
.env
|
||||
64
Dockerfile
Normal file
64
Dockerfile
Normal file
@@ -0,0 +1,64 @@
|
||||
# Use Python 3.11 slim image for smaller size
|
||||
FROM python:3.11-slim
|
||||
|
||||
# Set maintainer
|
||||
LABEL maintainer="fuh@fuhlig.de"
|
||||
LABEL description="PY_ChatBot - Modern Flask-based Chatbot Application"
|
||||
|
||||
# Set environment variables
|
||||
ENV PYTHONDONTWRITEBYTECODE=1 \
|
||||
PYTHONUNBUFFERED=1 \
|
||||
FLASK_APP=main.py \
|
||||
FLASK_ENV=production \
|
||||
PIP_NO_CACHE_DIR=1 \
|
||||
PIP_DISABLE_PIP_VERSION_CHECK=1
|
||||
|
||||
# Set work directory
|
||||
WORKDIR /app
|
||||
|
||||
# Install system dependencies
|
||||
RUN apt-get update && apt-get install -y \
|
||||
gcc \
|
||||
sqlite3 \
|
||||
curl \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Create non-root user for security
|
||||
RUN addgroup --system --gid 1001 chatbot && \
|
||||
adduser --system --uid 1001 --gid 1001 --no-create-home --disabled-password chatbot
|
||||
|
||||
# Create necessary directories with proper permissions
|
||||
RUN mkdir -p /app/data /app/logs /app/static && \
|
||||
chown -R chatbot:chatbot /app
|
||||
|
||||
# Copy requirements first for better Docker layer caching
|
||||
COPY requirements.txt .
|
||||
RUN chown chatbot:chatbot requirements.txt
|
||||
|
||||
# Install Python dependencies
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
# Copy application code
|
||||
COPY . .
|
||||
RUN chown -R chatbot:chatbot .
|
||||
|
||||
# Copy entrypoint script
|
||||
COPY docker-entrypoint.sh /usr/local/bin/
|
||||
RUN chmod +x /usr/local/bin/docker-entrypoint.sh && \
|
||||
chown chatbot:chatbot /usr/local/bin/docker-entrypoint.sh
|
||||
|
||||
# Switch to non-root user
|
||||
USER chatbot
|
||||
|
||||
# Expose port
|
||||
EXPOSE 8080
|
||||
|
||||
# Health check
|
||||
HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
|
||||
CMD curl -f http://localhost:8080/ || exit 1
|
||||
|
||||
# Set entrypoint
|
||||
ENTRYPOINT ["docker-entrypoint.sh"]
|
||||
|
||||
# Default command
|
||||
CMD ["python", "main.py"]
|
||||
157
README.md
Normal file
157
README.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# 🤖 PY_ChatBot
|
||||
|
||||
A modular, secure, and extensible web-based chatbot platform built with Flask. Features include user authentication, session management, multi-database support, and a modern responsive UI.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Table of Contents
|
||||
|
||||
- [Features](#features)
|
||||
- [Demo](#demo)
|
||||
- [Installation](#installation)
|
||||
- [Configuration](#configuration)
|
||||
- [Usage](#usage)
|
||||
- [Project Structure](#project-structure)
|
||||
- [Docker Setup](#docker-setup)
|
||||
- [Contributing](#contributing)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [License](#license)
|
||||
|
||||
---
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- **User Authentication**
|
||||
- Registration, login, logout, and password change
|
||||
- Email validation and strong password requirements
|
||||
- Secure session cookies with configurable lifetime
|
||||
|
||||
- **Multi-Database Support**
|
||||
- Abstracted database layer
|
||||
- Thread-safe SQLite implementation
|
||||
- Ready for PostgreSQL/MySQL integration
|
||||
|
||||
- **Modern UI/UX**
|
||||
- Responsive templates: login, register, dashboard, profile, change password, 404
|
||||
- Gradient backgrounds, animations, and hover effects
|
||||
- Flash messages for real-time feedback
|
||||
|
||||
- **Security**
|
||||
- SHA-512 password hashing
|
||||
- Decorators for route protection (`@login_required`, `@logout_required`)
|
||||
- CSRF-ready and input validation utilities
|
||||
|
||||
- **Developer-Friendly**
|
||||
- Well-organized code: `config`, `database`, `frontend`, `models`, `services`, `utils`
|
||||
- Comprehensive logging and error handlers
|
||||
- Environment-based configuration
|
||||
|
||||
---
|
||||
|
||||
## 🖥 Demo
|
||||
|
||||
Screenshots and live demo links can be added here.
|
||||
|
||||
---
|
||||
|
||||
## 🛠 Installation
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Python 3.8+
|
||||
- Git
|
||||
|
||||
### Local Setup
|
||||
|
||||
1. **Clone the repo**
|
||||
|
||||
```bash
|
||||
git clone https://github.com/florianuhlig/PY_ChatBot.git
|
||||
cd PY_ChatBot
|
||||
git checkout Development
|
||||
```
|
||||
|
||||
2. **Create virtual environment**
|
||||
|
||||
```bash
|
||||
python -m venv .venv
|
||||
source .venv/bin/activate # macOS/Linux
|
||||
.venv\Scripts\activate # Windows
|
||||
```
|
||||
|
||||
3. **Install dependencies**
|
||||
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
4. **Configure environment**
|
||||
|
||||
Copy `.env.example` to `.env` and adjust values:
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
5. **Run the app**
|
||||
|
||||
```bash
|
||||
python main.py
|
||||
```
|
||||
|
||||
Open your browser to `http://localhost:8080`.
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Configuration
|
||||
|
||||
Edit `.env` for:
|
||||
|
||||
- `DB_TYPE` (e.g., `sqlite`, `postgresql`, `mysql`)
|
||||
- `SQLITE_PATH` (path to SQLite file)
|
||||
- `FLASK_SECRET_KEY`
|
||||
- `FLASK_DEBUG`, `FLASK_HOST`, `FLASK_PORT`
|
||||
- Session and password policy variables
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Usage
|
||||
|
||||
- **Register**: `/register`
|
||||
- **Login**: `/login`
|
||||
- **Dashboard**: `/dashboard` (protected)
|
||||
- **Profile**: `/profile` (protected)
|
||||
- **Change Password**: `/change-password` (protected)
|
||||
- **Logout**: `/logout`
|
||||
|
||||
---
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
PY_ChatBot/
|
||||
├── config/ # App configuration loader
|
||||
│ └── database.py
|
||||
├── database/ # DB abstraction and implementations
|
||||
│ ├── interface.py
|
||||
│ ├── sqlite_db.py
|
||||
│ └── flask_integration.py
|
||||
├── frontend/ # Flask application and templates
|
||||
│ ├── app.py
|
||||
│ └── templates/
|
||||
│ ├── login.html
|
||||
│ ├── register.html
|
||||
│ ├── dashboard.html
|
||||
│ ├── profile.html
|
||||
│ ├── change_password.html
|
||||
│ └── 404.html
|
||||
├── models/ # Data models (if any)
|
||||
├── services/ # Business logic: user and auth services
|
||||
├── utils/ # Utility functions and decorators
|
||||
├── .env.example # Environment variable template
|
||||
├── Dockerfile # Container setup
|
||||
├── docker-compose.yml # Orchestration
|
||||
├── docker-entrypoint.sh # Init script
|
||||
├── main.py # Entry point
|
||||
└── requirements.txt # Python dependencies
|
||||
```
|
||||
66
docker-compose.yml
Normal file
66
docker-compose.yml
Normal file
@@ -0,0 +1,66 @@
|
||||
services:
|
||||
chatbot:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: py_chatbot
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "8080:8080"
|
||||
environment:
|
||||
# Database Configuration
|
||||
- DB_TYPE=sqlite
|
||||
- SQLITE_PATH=/app/data/chatbot.db
|
||||
|
||||
# Flask Configuration
|
||||
- FLASK_HOST=0.0.0.0
|
||||
- FLASK_PORT=8080
|
||||
- FLASK_DEBUG=false
|
||||
- FLASK_SECRET_KEY=your-super-secret-key-change-this-in-production
|
||||
|
||||
# Session Configuration
|
||||
- SESSION_LIFETIME_HOURS=24
|
||||
- SESSION_COOKIE_SECURE=false
|
||||
- SESSION_COOKIE_HTTPONLY=true
|
||||
volumes:
|
||||
# Persist database and logs
|
||||
- chatbot_data:/app/data
|
||||
- chatbot_logs:/app/logs
|
||||
networks:
|
||||
- chatbot_network
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-f", "http://localhost:8080/"]
|
||||
interval: 30s
|
||||
timeout: 10s
|
||||
retries: 3
|
||||
start_period: 30s
|
||||
|
||||
postgres:
|
||||
image: postgres:15-alpine
|
||||
container_name: py_chatbot_postgres
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- POSTGRES_DB=chatbot
|
||||
- POSTGRES_USER=chatbot_user
|
||||
- POSTGRES_PASSWORD=secure_password_change_this
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
- ./init.sql:/docker-entrypoint-initdb.d/init.sql:ro
|
||||
networks:
|
||||
- chatbot_network
|
||||
profiles:
|
||||
- postgres
|
||||
|
||||
# Named Volumes
|
||||
volumes:
|
||||
chatbot_data:
|
||||
driver: local
|
||||
chatbot_logs:
|
||||
driver: local
|
||||
postgres_data:
|
||||
driver: local
|
||||
|
||||
# Networks
|
||||
networks:
|
||||
chatbot_network:
|
||||
driver: bridge
|
||||
53
docker-entrypoint.sh
Normal file
53
docker-entrypoint.sh
Normal file
@@ -0,0 +1,53 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
echo "🤖 Starting PY_ChatBot..."
|
||||
# Create directory for database dynamically based on SQLITE_PATH
|
||||
|
||||
DB_DIR=$(dirname "$SQLITE_PATH")
|
||||
mkdir -p "$DB_DIR" /app/logs
|
||||
|
||||
# Set default environment variables if not provided
|
||||
export DB_TYPE=${DB_TYPE:-sqlite}
|
||||
export SQLITE_PATH=${SQLITE_PATH:-databases/chatbot.db}
|
||||
export FLASK_HOST=${FLASK_HOST:-0.0.0.0}
|
||||
export FLASK_PORT=${FLASK_PORT:-8080}
|
||||
export FLASK_DEBUG=${FLASK_DEBUG:-false}
|
||||
|
||||
# Generate a random secret key if not provided
|
||||
if [ -z "$FLASK_SECRET_KEY" ]; then
|
||||
export FLASK_SECRET_KEY=$(python -c "import secrets; print(secrets.token_hex(32))")
|
||||
echo "⚠️ Generated random secret key. Set FLASK_SECRET_KEY environment variable for production!"
|
||||
fi
|
||||
|
||||
# Initialize database if it doesn't exist
|
||||
if [ "$DB_TYPE" = "sqlite" ] && [ ! -f "$SQLITE_PATH" ]; then
|
||||
echo "📦 Initializing SQLite database at $SQLITE_PATH..."
|
||||
python -c "
|
||||
import sys
|
||||
sys.path.append('/app')
|
||||
from config.database import DatabaseConfig
|
||||
from database import get_database
|
||||
|
||||
try:
|
||||
db_config = DatabaseConfig()
|
||||
db_type, config = db_config.get_database_config()
|
||||
database = get_database(db_type, config)
|
||||
print('✅ Database initialized successfully!')
|
||||
database.disconnect()
|
||||
except Exception as e:
|
||||
print(f'❌ Database initialization failed: {e}')
|
||||
sys.exit(1)
|
||||
"
|
||||
fi
|
||||
|
||||
# Print configuration info
|
||||
echo "📋 Configuration:"
|
||||
echo " - Database Type: $DB_TYPE"
|
||||
echo " - Database Path: $SQLITE_PATH"
|
||||
echo " - Flask Host: $FLASK_HOST"
|
||||
echo " - Flask Port: $FLASK_PORT"
|
||||
echo " - Debug Mode: $FLASK_DEBUG"
|
||||
|
||||
# Execute the command
|
||||
exec "$@"
|
||||
471
frontend/templates/404.html
Normal file
471
frontend/templates/404.html
Normal file
@@ -0,0 +1,471 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>404 - Page Not Found | ChatBot</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
background: white;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
padding: 60px 40px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 120px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
line-height: 1;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 30px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.error-description h3 {
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error-description p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.suggestions h4 {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.suggestions ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.suggestions li {
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.suggestions li:before {
|
||||
content: "→";
|
||||
color: #667eea;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 14px 28px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 140px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
box-shadow: 0 6px 16px rgba(90, 103, 216, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e2e8f0;
|
||||
color: #4a5568;
|
||||
border: 1px solid #cbd5e0;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #cbd5e0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.chatbot-info {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.chatbot-info h4 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chatbot-info p {
|
||||
font-size: 15px;
|
||||
opacity: 0.9;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.floating-shapes {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
animation: float 6s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.shape:nth-child(1) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.shape:nth-child(2) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: 20%;
|
||||
right: 15%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.shape:nth-child(3) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.shape:nth-child(4) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 10%;
|
||||
right: 10%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.error-container {
|
||||
padding: 40px 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.error-code {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Floating background shapes -->
|
||||
<div class="floating-shapes">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
</div>
|
||||
|
||||
<div class="error-container">
|
||||
<div class="error-code">404</div>
|
||||
|
||||
<h1 class="error-title">Oops! Page Not Found</h1>
|
||||
|
||||
<p class="error-message">
|
||||
The page you're looking for seems to have wandered off into the digital void.
|
||||
Don't worry, even the best explorers sometimes take a wrong turn!
|
||||
</p>
|
||||
|
||||
<div class="error-description">
|
||||
<h3>🤔 What happened?</h3>
|
||||
<p>
|
||||
The requested URL was not found on this server. This could be due to a
|
||||
mistyped URL, a moved page, or a link that's no longer valid.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="suggestions">
|
||||
<h4>Here's what you can try:</h4>
|
||||
<ul>
|
||||
<li>Check the URL for any typos or spelling errors</li>
|
||||
<li>Use your browser's back button to return to the previous page</li>
|
||||
<li>Visit our homepage and navigate from there</li>
|
||||
<li>Try searching for what you're looking for</li>
|
||||
<li>Contact support if you believe this is an error</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="{{ url_for('home') }}" class="btn btn-primary">
|
||||
🏠 Go Home
|
||||
</a>
|
||||
|
||||
{% if current_user %}
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">
|
||||
📊 Dashboard
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login') }}" class="btn btn-secondary">
|
||||
🔐 Login
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="javascript:history.back()" class="btn btn-outline">
|
||||
↩️ Go Back
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="chatbot-info">
|
||||
<h4>🤖 ChatBot Application</h4>
|
||||
<p>
|
||||
You're currently using our ChatBot platform. If you were trying to access
|
||||
a specific chat or feature, please navigate through the main menu or
|
||||
contact our support team for assistance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ url_for('home') }}">Home</a>
|
||||
{% if current_user %}
|
||||
<a href="{{ url_for('dashboard') }}">Dashboard</a>
|
||||
<a href="{{ url_for('profile') }}">Profile</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login') }}">Login</a>
|
||||
<a href="{{ url_for('register') }}">Register</a>
|
||||
{% endif %}
|
||||
<a href="mailto:support@chatbot.com">Support</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Add some interactivity
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add a subtle shake animation to the 404 code when clicked
|
||||
const errorCode = document.querySelector('.error-code');
|
||||
errorCode.addEventListener('click', function() {
|
||||
this.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
this.style.animation = 'bounce 0.5s ease-in-out 3';
|
||||
}, 10);
|
||||
});
|
||||
|
||||
// Add random movement to floating shapes
|
||||
const shapes = document.querySelectorAll('.shape');
|
||||
shapes.forEach((shape, index) => {
|
||||
shape.addEventListener('animationiteration', function() {
|
||||
const randomX = Math.random() * 100;
|
||||
const randomY = Math.random() * 100;
|
||||
this.style.left = randomX + '%';
|
||||
this.style.top = randomY + '%';
|
||||
});
|
||||
});
|
||||
|
||||
// Show a fun message in console
|
||||
console.log(`
|
||||
🤖 ChatBot 404 Error
|
||||
════════════════════
|
||||
|
||||
Looks like you've discovered our 404 page!
|
||||
If you're a developer, here are some debug details:
|
||||
|
||||
• URL: ${window.location.href}
|
||||
• Referrer: ${document.referrer || 'Direct access'}
|
||||
• User Agent: ${navigator.userAgent}
|
||||
• Timestamp: ${new Date().toISOString()}
|
||||
|
||||
Need help? Contact our development team!
|
||||
`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
358
frontend/templates/change_password.html
Normal file
358
frontend/templates/change_password.html
Normal file
@@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Change Password - ChatBot</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.change-password-container {
|
||||
background: white;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.change-password-container:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.back-link a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.back-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 14px 18px;
|
||||
font-size: 16px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #ddd;
|
||||
transition: 0.3s border-color ease;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
input[type="password"]:focus {
|
||||
border-color: #667eea;
|
||||
outline: none;
|
||||
box-shadow: 0 0 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.password-requirements {
|
||||
background: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.password-requirements h4 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.requirements-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.requirements-list li {
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.requirements-list li:before {
|
||||
content: "•";
|
||||
color: #667eea;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
box-shadow: 0 15px 25px rgba(90, 103, 216, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e2e8f0;
|
||||
color: #4a5568;
|
||||
border: 1px solid #cbd5e0;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #cbd5e0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
border: 1px solid #ffeaa7;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #cce7ff;
|
||||
color: #004085;
|
||||
border: 1px solid #b8daff;
|
||||
}
|
||||
|
||||
.security-notice {
|
||||
background: #e6f3ff;
|
||||
border: 1px solid #b8daff;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
color: #004085;
|
||||
}
|
||||
|
||||
.security-notice h4 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.change-password-container {
|
||||
margin: 10px;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="change-password-container">
|
||||
<div class="back-link">
|
||||
<a href="{{ url_for('dashboard') }}">← Back to Dashboard</a>
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
<h1>Change Password</h1>
|
||||
<p>Update your account password</p>
|
||||
</div>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ 'error' if category == 'error' else category }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="security-notice">
|
||||
<h4>🔒 Security Notice</h4>
|
||||
<p>For your security, we require your current password to make changes. Your new password will be encrypted and stored securely.</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('change_password') }}">
|
||||
<div class="input-group">
|
||||
<label for="current_password">Current Password</label>
|
||||
<input type="password" id="current_password" name="current_password"
|
||||
placeholder="Enter your current password"
|
||||
required autocomplete="current-password" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="new_password">New Password</label>
|
||||
<input type="password" id="new_password" name="new_password"
|
||||
placeholder="Enter your new password"
|
||||
required autocomplete="new-password" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="confirm_password">Confirm New Password</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password"
|
||||
placeholder="Confirm your new password"
|
||||
required autocomplete="new-password" />
|
||||
</div>
|
||||
|
||||
<div class="password-requirements">
|
||||
<h4>Password Requirements:</h4>
|
||||
<ul class="requirements-list">
|
||||
<li>At least 8 characters long</li>
|
||||
<li>Contains at least one uppercase letter (A-Z)</li>
|
||||
<li>Contains at least one lowercase letter (a-z)</li>
|
||||
<li>Contains at least one number (0-9)</li>
|
||||
<li>Contains at least one special character (!@#$%^&*)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Update Password
|
||||
</button>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Simple client-side validation for better UX
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('form');
|
||||
const newPassword = document.getElementById('new_password');
|
||||
const confirmPassword = document.getElementById('confirm_password');
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
if (newPassword.value !== confirmPassword.value) {
|
||||
e.preventDefault();
|
||||
alert('New passwords do not match!');
|
||||
confirmPassword.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (newPassword.value.length < 8) {
|
||||
e.preventDefault();
|
||||
alert('Password must be at least 8 characters long!');
|
||||
newPassword.focus();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Real-time password confirmation check
|
||||
confirmPassword.addEventListener('input', function() {
|
||||
if (this.value && this.value !== newPassword.value) {
|
||||
this.style.borderColor = '#e53e3e';
|
||||
} else if (this.value && this.value === newPassword.value) {
|
||||
this.style.borderColor = '#38a169';
|
||||
} else {
|
||||
this.style.borderColor = '#ddd';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -140,8 +140,8 @@
|
||||
<div class="info-card">
|
||||
<h3>Account Status</h3>
|
||||
<p><strong>Status:</strong> <span style="color: #28a745;">Active</span></p>
|
||||
<p><strong>Created:</strong> {{ user.created_at[:19] if user.created_at else 'Unknown' }}</p>
|
||||
<p><strong>Last Updated:</strong> {{ user.updated_at[:19] if user.updated_at else 'Unknown' }}</p>
|
||||
<p><strong>Created:</strong> {{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') if user.created_at else 'Unknown' }}</p>
|
||||
<p><strong>Last Updated:</strong> {{ user.updated_at.strftime('%Y-%m-%d %H:%M:%S') if user.updated_at else 'Unknown' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1 +1,36 @@
|
||||
flask
|
||||
# Requirements for PY_ChatBot
|
||||
# Core Framework
|
||||
Flask>=2.3.0,<3.0.0
|
||||
Werkzeug>=2.3.0,<3.0.0
|
||||
|
||||
# Database & ORM (Optional for future expansion)
|
||||
SQLAlchemy>=2.0.0,<3.0.0
|
||||
|
||||
# Environment & Configuration
|
||||
python-dotenv>=1.0.0
|
||||
|
||||
# Security & Authentication
|
||||
bcrypt>=4.0.0
|
||||
|
||||
# HTTP Client (for health checks and external APIs)
|
||||
requests>=2.31.0
|
||||
|
||||
# Date/Time utilities
|
||||
python-dateutil>=2.8.0
|
||||
|
||||
# Development Dependencies (commented out for production)
|
||||
# pytest>=7.4.0
|
||||
# pytest-flask>=1.2.0
|
||||
# pytest-cov>=4.1.0
|
||||
# black>=23.7.0
|
||||
# flake8>=6.0.0
|
||||
# mypy>=1.5.0
|
||||
|
||||
# Production WSGI Server
|
||||
gunicorn>=21.2.0
|
||||
|
||||
# Logging
|
||||
colorlog>=6.7.0
|
||||
|
||||
# Utility
|
||||
click>=8.1.0
|
||||
Reference in New Issue
Block a user