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

To_DO: ERROR AFTER LOGGING IN

Browse Source
This commit is contained in:
florianuhlig
2025-10-03 15:03:18 +02:00
parent 70c85cb8be
commit 1554723ed4
27 changed files with 1484 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
frontend/app.py
View File

@@ -1,79 +1,273 @@
from flask import Flask, render_template, request, redirect, url_for, flash
from datetime import datetime, timedelta # Add this line at the top
from flask import Flask, render_template, request, redirect, url_for, flash, session
import logging
from config.database import DatabaseConfig
from database import DatabaseFactory
from database.flask_integration import FlaskDatabaseManager
from services.user_service import UserService
from services.auth_service import AuthService
from utils.auth_decorators import login_required, logout_required, get_current_user
import hashlib
def hash_password(password):
return hashlib.sha512(password.strip().encode('utf-8')).hexdigest()
# Logging konfigurieren
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
app = Flask(__name__)
app.secret_key = 'your_secret_key'
app.secret_key = 'your-secret-key-change-this-in-production'
# Session-Konfiguration
app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(hours=24) # Session läuft nach 24h ab
app.config['SESSION_COOKIE_SECURE'] = False # Für Development - in Production auf True setzen
app.config['SESSION_COOKIE_HTTPONLY'] = True # Verhindert XSS-Angriffe
# Database Manager initialisieren
db_config = DatabaseConfig()
db_type, config = db_config.get_database_config()
def create_database():
"""Factory-Funktion für Datenbank-Instanzen"""
return DatabaseFactory.create_database(db_type, config)
db_manager = FlaskDatabaseManager(create_database)
db_manager.init_app(app)
# Template-Context für alle Templates
@app.context_processor
def inject_user():
"""Macht User-Daten in allen Templates verfügbar"""
return {'current_user': get_current_user()}
@app.route('/')
def home():
"""Startseite - Weiterleitung je nach Login-Status"""
if 'user_id' in session:
return redirect(url_for('dashboard'))
return redirect(url_for('login'))
@app.route('/register', methods=['GET', 'POST'])
@logout_required
def register():
import standard.getter as st_getter
import sqlLite.set as setter
"""Registrierung - nur für nicht eingeloggte User"""
if request.method == 'POST':
username = request.form['username']
email = request.form.get('email')
password = request.form.get('password')
pwd_confirm = request.form.get('confirm_password')
username = request.form.get('username', '').strip()
email = request.form.get('email', '').strip()
password = request.form.get('password', '')
confirm_password = request.form.get('confirm_password', '')
if not email or not password or not pwd_confirm or not username:
# Basis-Validierung
if not username or not email or not password or not confirm_password:
flash('Please fill out all fields', 'error')
return redirect(url_for('register'))
if password != pwd_confirm:
if password != confirm_password:
flash('Passwords do not match', 'error')
return redirect(url_for('register'))
try:
if st_getter.get_validate_email(email):
setter.set_login(username, email, password)
flash('Registration successful! Please log in.', 'success')
return redirect(url_for('login'))
else:
flash('Invalid email format', 'error')
return redirect(url_for('register'))
except Exception as e:
flash(f'Error: {str(e)}', 'error')
# Services mit request-lokaler DB-Instanz
database = db_manager.get_db()
user_service = UserService(database)
# User erstellen
success, errors = user_service.create_user(username, email, password)
if success:
flash('Registration successful! Please log in.', 'success')
logger.info(f"New user registered: {email}")
return redirect(url_for('login'))
else:
for error in errors:
flash(error, 'error')
return redirect(url_for('register'))
# For GET-requests:
return render_template('register.html')
@app.route('/login', methods=['GET', 'POST'])
@logout_required
def login():
"""Login - nur für nicht eingeloggte User"""
if request.method == 'POST':
enter_email = request.form.get('email')
enter_password = request.form.get('password')
import hashlib
import sqlLite.get as getter
import standard.getter as st_getter
email = request.form.get('email', '').strip()
password = request.form.get('password', '')
remember_me = request.form.get('remember_me') # Checkbox für "Remember Me"
stored_hash = getter.get_password_by_email(enter_email) # use email here
if not email or not password:
flash('Please enter email and password', 'error')
return redirect(url_for('login'))
if stored_hash is None:
flash("User not found!")
return redirect(url_for("login"))
# Services mit request-lokaler DB-Instanz
database = db_manager.get_db()
auth_service = AuthService(database)
hash_entered = st_getter.get_password_hash(enter_password)
# Authentifizierung
success, user_data, message = auth_service.authenticate(email, password)
if success:
# Session setzen
session['user_id'] = user_data['id']
session['username'] = user_data['username']
session['email'] = user_data['email']
session['login_time'] = datetime.utcnow().isoformat()
# Permanent session wenn "Remember Me" aktiviert
if remember_me:
session.permanent = True
flash(f'Welcome back, {user_data["username"]}!', 'success')
logger.info(f"User logged in: {email}")
# Weiterleitung zu ursprünglich angeforderte Seite (falls vorhanden)
next_page = request.args.get('next')
if next_page:
return redirect(next_page)
if hash_entered == stored_hash:
return redirect(url_for('dashboard'))
else:
flash('Invalid email or password', 'error')
print("Stored hash:", stored_hash)
print("Entered hash:", hash_entered)
flash(message, 'error')
return redirect(url_for('login'))
return render_template('login.html')
@app.route('/logout')
@login_required
def logout():
"""Logout - nur für eingeloggte User"""
user_email = session.get('email')
username = session.get('username')
# Session komplett löschen
session.clear()
flash(f'Goodbye, {username}! You have been logged out successfully.', 'info')
if user_email:
logger.info(f"User logged out: {user_email}")
return redirect(url_for('login'))
@app.route('/dashboard')
@login_required
def dashboard():
#return "Welcome to the dashboard! Login successful."
return render_template('dashboard.html')
"""Dashboard - nur für eingeloggte User"""
user = get_current_user()
# Zusätzliche Dashboard-Daten (optional)
dashboard_data = {
'total_users': 'N/A', # Könnte aus DB geholt werden
'last_login': session.get('login_time', 'Unknown'),
'session_expires': 'Never' if session.permanent else '24 hours'
}
logger.debug(f"Dashboard accessed by user: {user['email']}")
return render_template('dashboard.html',
user=user,
dashboard_data=dashboard_data)
@app.route('/profile')
@login_required
def profile():
"""User Profile - nur für eingeloggte User"""
user = get_current_user()
# Hier könnten zusätzliche User-Daten aus der DB geholt werden
database = db_manager.get_db()
full_user_data = database.get_user_by_email(user['email'])
return render_template('profile.html', user=full_user_data)
@app.route('/change-password', methods=['GET', 'POST'])
@login_required
def change_password():
"""Passwort ändern - nur für eingeloggte User"""
if request.method == 'POST':
current_password = request.form.get('current_password', '')
new_password = request.form.get('new_password', '')
confirm_password = request.form.get('confirm_password', '')
if not current_password or not new_password or not confirm_password:
flash('Please fill out all fields', 'error')
return redirect(url_for('change_password'))
if new_password != confirm_password:
flash('New passwords do not match', 'error')
return redirect(url_for('change_password'))
# Aktuelles Passwort verifizieren
user = get_current_user()
database = db_manager.get_db()
auth_service = AuthService(database)
success, _, message = auth_service.authenticate(user['email'], current_password)
if not success:
flash('Current password is incorrect', 'error')
return redirect(url_for('change_password'))
# Neues Passwort setzen
from utils.password_utils import PasswordUtils
new_password_hash = PasswordUtils.hash_password_simple(new_password)
if database.update_user_password(user['email'], new_password_hash):
flash('Password changed successfully', 'success')
logger.info(f"Password changed for user: {user['email']}")
return redirect(url_for('dashboard'))
else:
flash('Failed to change password', 'error')
return redirect(url_for('change_password'))
return render_template('change_password.html')
# Error Handlers
@app.errorhandler(404)
def not_found(error):
return render_template('404.html'), 404
@app.errorhandler(500)
def internal_error(error):
logger.error(f"Internal server error: {error}")
flash('An internal error occurred. Please try again.', 'error')
return redirect(url_for('home'))
# Session Timeout Check
@app.before_request
def check_session_timeout():
"""Prüft ob Session abgelaufen ist"""
from datetime import datetime
if 'user_id' in session:
# Prüfe ob Session zu alt ist (optional)
login_time = session.get('login_time')
if login_time:
try:
login_datetime = datetime.fromisoformat(login_time)
now = datetime.utcnow()
# Session nach 24h abgelaufen (falls nicht permanent)
if not session.permanent and (now - login_datetime).total_seconds() > 86400:
session.clear()
flash('Your session has expired. Please log in again.', 'warning')
return redirect(url_for('login'))
except (ValueError, TypeError):
# Ungültiger Zeitstempel - Session löschen
session.clear()
flash('Invalid session. Please log in again.', 'warning')
return redirect(url_for('login'))
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=8080, threaded=True)

397
frontend/templates/dashboard.html
View File

@@ -1,119 +1,312 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Register</title>
<style>
/* Use the same styling as login.html for consistency */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dashboard - 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: 'Poppins', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.login-container {
background: white;
max-width: 400px;
width: 100%;
padding: 40px 30px 50px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
text-align: center;
transition: transform 0.3s ease;
}
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
}
.login-container:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.header {
background: white;
padding: 20px 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
h2 {
font-weight: 600;
color: #333;
margin-bottom: 30px;
font-size: 28px;
letter-spacing: 1.2px;
}
.welcome-message {
color: #333;
}
.input-group {
margin-bottom: 25px;
text-align: left;
}
.welcome-message h1 {
font-size: 28px;
font-weight: 600;
margin-bottom: 5px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 600;
font-size: 14px;
}
input[type="username"],
input[type="email"],
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);
}
.welcome-message p {
color: #666;
font-size: 16px;
}
input[type="email"]:focus,
input[type="password"]:focus {
border-color: #2575fc;
outline: none;
box-shadow: 0 0 12px rgba(37, 117, 252, 0.5);
}
.user-actions {
display: flex;
gap: 15px;
align-items: center;
}
button {
width: 100%;
padding: 16px 0;
margin-top: 10px;
background-color: #2575fc;
border: none;
border-radius: 14px;
color: white;
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(37, 117, 252, 0.4);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.user-info {
background: #f8f9fa;
padding: 10px 15px;
border-radius: 10px;
font-size: 14px;
color: #555;
}
button:hover {
background-color: #1859d6;
box-shadow: 0 15px 25px rgba(24, 89, 214, 0.6);
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.error-message {
margin-top: 20px;
color: #ff4d4f;
font-weight: 600;
font-size: 15px;
text-align: center;
background: #ffe6e6;
padding: 10px 15px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(255,77,79,0.3);
display: none;
}
</style>
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5a67d8;
transform: translateY(-1px);
}
.btn-secondary {
background: #e2e8f0;
color: #4a5568;
}
.btn-secondary:hover {
background: #cbd5e0;
}
.btn-danger {
background: #e53e3e;
color: white;
}
.btn-danger:hover {
background: #c53030;
transform: translateY(-1px);
}
.dashboard-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
color: #333;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.card p {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.stats {
display: flex;
justify-content: space-between;
margin: 15px 0;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #667eea;
}
.stat-label {
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}
.alert {
padding: 15px 20px;
margin: 20px 0;
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;
}
.quick-actions {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
grid-column: 1 / -1;
}
.quick-actions h3 {
margin-bottom: 20px;
color: #333;
}
.action-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 20px;
text-align: center;
}
.user-actions {
flex-direction: column;
width: 100%;
}
.dashboard-content {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="dashboard-container">
<!-- 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 %}
<!-- Header -->
<div class="header">
<div class="welcome-message">
<h1>Welcome, {{ user.username }}! 👋</h1>
<p>Here's your ChatBot dashboard overview</p>
</div>
<div class="user-actions">
<div class="user-info">
Logged in as: <strong>{{ user.email }}</strong>
</div>
<a href="{{ url_for('profile') }}" class="btn btn-secondary">Profile</a>
<a href="{{ url_for('logout') }}" class="btn btn-danger"
onclick="return confirm('Are you sure you want to log out?')">
Logout
</a>
</div>
</div>
<!-- Dashboard Content -->
<div class="dashboard-content">
<div class="card">
<h3>Account Information</h3>
<p><strong>Username:</strong> {{ user.username }}</p>
<p><strong>Email:</strong> {{ user.email }}</p>
<p><strong>User ID:</strong> #{{ user.id }}</p>
<p><strong>Last Login:</strong> {{ dashboard_data.last_login[:19] if dashboard_data.last_login != 'Unknown' else 'Unknown' }}</p>
<a href="{{ url_for('change_password') }}" class="btn btn-primary">Change Password</a>
</div>
<div class="card">
<h3>Session Information</h3>
<p><strong>Session Status:</strong> Active</p>
<p><strong>Session Type:</strong> {{ 'Persistent' if session.permanent else 'Temporary' }}</p>
<p><strong>Expires:</strong> {{ dashboard_data.session_expires }}</p>
<div class="stats">
<div class="stat-item">
<div class="stat-value">{{ user.id }}</div>
<div class="stat-label">User ID</div>
</div>
</div>
</div>
<div class="card">
<h3>ChatBot Status</h3>
<p>Your personal chatbot is ready to help you.</p>
<p><strong>Status:</strong> <span style="color: #28a745;">Active</span></p>
<p><strong>Total Users:</strong> {{ dashboard_data.total_users }}</p>
<a href="#" class="btn btn-primary">Start Chat</a>
</div>
<!-- Quick Actions -->
<div class="quick-actions">
<h3>Quick Actions</h3>
<div class="action-buttons">
<a href="#" class="btn btn-primary">Start New Conversation</a>
<a href="{{ url_for('profile') }}" class="btn btn-secondary">View Profile</a>
<a href="{{ url_for('change_password') }}" class="btn btn-secondary">Change Password</a>
<a href="#" class="btn btn-secondary">Settings</a>
</div>
</div>
</div>
</div>
</body>
</html>
</html>

295
frontend/templates/login.html
View File

@@ -1,141 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Login</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Login - ChatBot</title>
<style>
/* Use your existing beautiful login CSS here */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* Your existing login styles... */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
body {
height: 100vh;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-container {
background: white;
max-width: 400px;
width: 100%;
padding: 40px 30px 50px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
text-align: center;
transition: transform 0.3s ease;
}
.login-container {
background: white;
max-width: 400px;
width: 100%;
padding: 40px 30px 50px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
text-align: center;
transition: transform 0.3s ease;
}
.login-container:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.login-container:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
h2 {
font-weight: 600;
color: #333;
margin-bottom: 30px;
font-size: 28px;
letter-spacing: 1.2px;
}
h2 {
font-weight: 600;
color: #333;
margin-bottom: 30px;
font-size: 28px;
letter-spacing: 1.2px;
}
.input-group {
margin-bottom: 25px;
text-align: left;
}
.input-group {
margin-bottom: 25px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 600;
font-size: 14px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 600;
font-size: 14px;
}
input[type="email"],
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="email"],
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="email"]:focus,
input[type="password"]:focus {
border-color: #2575fc;
outline: none;
box-shadow: 0 0 12px rgba(37, 117, 252, 0.5);
}
input[type="email"]:focus,
input[type="password"]:focus {
border-color: #2575fc;
outline: none;
box-shadow: 0 0 12px rgba(37, 117, 252, 0.5);
}
button {
width: 100%;
padding: 16px 0;
margin-top: 10px;
background-color: #2575fc;
border: none;
border-radius: 14px;
color: white;
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(37, 117, 252, 0.4);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.checkbox-group {
display: flex;
align-items: center;
margin: 15px 0;
text-align: left;
}
button:hover {
background-color: #1859d6;
box-shadow: 0 15px 25px rgba(24, 89, 214, 0.6);
}
.checkbox-group input[type="checkbox"] {
margin-right: 8px;
}
.error-message {
margin-top: 20px;
color: #ff4d4f;
font-weight: 600;
font-size: 15px;
text-align: center;
background: #ffe6e6;
padding: 10px 15px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(255,77,79,0.3);
display: none;
}
</style>
.checkbox-group label {
margin: 0;
font-size: 14px;
color: #666;
}
button {
width: 100%;
padding: 16px 0;
margin-top: 10px;
background-color: #2575fc;
border: none;
border-radius: 14px;
color: white;
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(37, 117, 252, 0.4);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
button:hover {
background-color: #1859d6;
box-shadow: 0 15px 25px rgba(24, 89, 214, 0.6);
}
.register-link {
margin-top: 20px;
font-size: 14px;
color: #666;
}
.register-link a {
color: #2575fc;
text-decoration: none;
font-weight: 600;
}
.register-link a:hover {
text-decoration: underline;
}
.error-message {
margin-top: 20px;
color: #ff4d4f;
font-weight: 600;
font-size: 15px;
text-align: center;
background: #ffe6e6;
padding: 10px 15px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(255,77,79,0.3);
display: none;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login to Your Account</h2>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="error-message" style="display: block;">
{% for category, message in messages %}
{{ message }}
{% endfor %}
</div>
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('login') }}">
<div class="input-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="you@example.com" required />
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Your password" required />
</div>
<button type="submit">Log In</button>
</form>
</div>
<div class="login-container">
<h2>Login to Your Account</h2>
<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="error-message" style="display: block;">
{% for category, message in messages %}
{{ message }}
{% endfor %}
</div>
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('login') }}">
<div class="input-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email"
placeholder="you@example.com"
value="{{ request.form.email if request.form.email }}"
required />
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password"
placeholder="Your password" required />
</div>
<div class="checkbox-group">
<input type="checkbox" id="remember_me" name="remember_me" />
<label for="remember_me">Remember me</label>
</div>
<button type="submit">Log In</button>
<div class="register-link">
Don't have an account? <a href="{{ url_for('register') }}">Sign up here</a>
</div>
</form>
</div>
</body>
</html>
</html>

155
frontend/templates/profile.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Profile - ChatBot</title>
<style>
/* Use similar styles as dashboard */
@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;
}
.profile-container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.profile-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
text-align: center;
}
.profile-header h1 {
font-size: 36px;
margin-bottom: 10px;
}
.profile-header p {
font-size: 18px;
opacity: 0.9;
}
.profile-content {
padding: 40px;
}
.profile-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.info-card {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
border-left: 4px solid #667eea;
}
.info-card h3 {
color: #333;
margin-bottom: 15px;
}
.info-card p {
color: #666;
margin-bottom: 10px;
}
.btn {
display: inline-block;
padding: 12px 24px;
background: #667eea;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
margin-right: 10px;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.btn:hover {
background: #5a67d8;
transform: translateY(-2px);
}
.btn-secondary {
background: #e2e8f0;
color: #4a5568;
}
.btn-secondary:hover {
background: #cbd5e0;
}
.back-link {
margin-bottom: 20px;
}
.back-link a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.back-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="profile-container">
<div class="profile-header">
<h1>{{ user.username }}</h1>
<p>User Profile</p>
</div>
<div class="profile-content">
<div class="back-link">
<a href="{{ url_for('dashboard') }}">&larr; Back to Dashboard</a>
</div>
<div class="profile-info">
<div class="info-card">
<h3>Account Details</h3>
<p><strong>User ID:</strong> #{{ user.id }}</p>
<p><strong>Username:</strong> {{ user.username }}</p>
<p><strong>Email:</strong> {{ user.email }}</p>
</div>
<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>
</div>
</div>
<div style="text-align: center; margin-top: 30px;">
<a href="{{ url_for('change_password') }}" class="btn">Change Password</a>
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
</div>
</div>
</div>
</body>
</html>