fuhlig/ChatBot
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Merge pull request #3 from florianuhlig/Development

Browse Source 
Development
This commit is contained in:
Florian Uhlig
2025-10-05 00:20:35 +02:00
committed by GitHub
parent b0261be137 43257e8bdd
commit d2e6139f5f
10 changed files with 1212 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example Normal file
View 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
View File

@@ -2,5 +2,6 @@
/.idea/ /.idea/
testing.py testing.py
/databases/ /databases/
.venv
.env .env

64
Dockerfile Normal file
View 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
View 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
View 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
View 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
View 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
View 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>

4
frontend/templates/profile.html
View File

@@ -140,8 +140,8 @@
<div class="info-card"> <div class="info-card">
<h3>Account Status</h3> <h3>Account Status</h3>
<p><strong>Status:</strong> <span style="color: #28a745;">Active</span></p> <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>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[:19] if user.updated_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>
</div> </div>

37
requirements.txt
View File

@@ -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