New version

.gitignore

@@ -0,0 +1,28 @@
+# Environment
+.env
+*.env.local
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+
+# Flask
+instance/
+.webassets-cache
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db

app.py

@@ -1,56 +1,309 @@
 import os
+import re
 import shutil
 import subprocess
-from flask import Flask, render_template, request, redirect, url_for, flash, Response
-from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
 import sys
+import threading
+from datetime import datetime
+from queue import Queue
+
+from dotenv import load_dotenv
+from flask import Flask, render_template, request, redirect, url_for, flash, Response, jsonify, abort
+from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
+from werkzeug.security import generate_password_hash, check_password_hash
+from flask_sqlalchemy import SQLAlchemy
+
+load_dotenv()
 
 app = Flask(__name__)
-app.secret_key = 'votre_cle_secrete'  # Clé secrète pour Flask
+app.config['SECRET_KEY'] = os.getenv('SECRET_KEY', 'change-me-in-production')
+app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('DATABASE_URI', 'sqlite:///users.db')
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+app.config['SESSION_COOKIE_SECURE'] = True
+app.config['SESSION_COOKIE_HTTPONLY'] = True
+app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
+
+db = SQLAlchemy(app)
 
-# Gestion de l'authentification
 login_manager = LoginManager()
 login_manager.init_app(app)
-login_manager.login_view = 'login'  # Rediriger ici si non connecté
+login_manager.login_view = 'login'
 
-# Simuler une base de données utilisateur
-USERS = {
-    "admin": {"password": "password123"}
-}
 
-# Classe utilisateur
+class User(db.Model, UserMixin):
-class User(UserMixin):
+    id = db.Column(db.Integer, primary_key=True)
-    def __init__(self, username):
+    username = db.Column(db.String(80), unique=True, nullable=False)
-        self.id = username
+    password_hash = db.Column(db.String(256), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)
+
+
+class Download(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    url = db.Column(db.String(512), nullable=False)
+    format_type = db.Column(db.String(10), nullable=False)
+    status = db.Column(db.String(20), default='pending')
+    progress = db.Column(db.Integer, default=0)
+    log = db.Column(db.Text, default='')
+    error = db.Column(db.Text, nullable=True)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    completed_at = db.Column(db.DateTime, nullable=True)
+    process_id = db.Column(db.Integer, nullable=True)
+
+    def append_log(self, message):
+        self.log += f"{datetime.now().strftime('%H:%M:%S')} {message}\n"
+
+
+download_processes = {}
+
 
 @login_manager.user_loader
 def load_user(user_id):
-    if user_id in USERS:
+    return User.query.get(int(user_id))
-        return User(user_id)
+
-    return None
+
+def count_users():
+    return User.query.count()
+
+
+@app.cli.command("init-db")
+def init_db():
+    db.create_all()
+    print("Database initialized.")
+
+
+@app.cli.command("create-admin")
+def create_admin():
+    if count_users() > 0:
+        print("Users already exist.")
+        return
+    
+    username = input("Username: ")
+    password = input("Password: ")
+    
+    user = User(username=username)
+    user.set_password(password)
+    db.session.add(user)
+    db.session.commit()
+    print(f"Admin user '{username}' created.")
+
+
+def validate_spotify_url(url):
+    patterns = [
+        r'https?://open\.spotify\.com/track/[\w-]+',
+        r'https?://open\.spotify\.com/album/[\w-]+',
+        r'https?://open\.spotify\.com/playlist/[\w-]+',
+        r'https?://spotify:[\w-]+',
+    ]
+    return any(re.match(pattern, url) for pattern in patterns)
+
+
+def run_download(download_id, urls, format_type, delete_old, copy_choice):
+    download = Download.query.get(download_id)
+    if not download:
+        return
+
+    download.status = 'running'
+    db.session.commit()
+
+    if format_type == 'flac':
+        download_dir = os.getenv('DOWNLOAD_DIR_FLAC', '/home/jules/Musique/flac')
+    else:
+        download_dir = os.getenv('DOWNLOAD_DIR_MP3', '/home/jules/Musique/mp3')
+
+    copy_destination = os.getenv('COPY_DESTINATION', '/mnt/data/Musique')
+
+    if delete_old and os.path.exists(download_dir):
+        shutil.rmtree(download_dir)
+
+    os.makedirs(download_dir, exist_ok=True)
+
+    total_urls = len(urls)
+    
+    try:
+        for idx, url in enumerate(urls, 1):
+            download.append_log(f"[{idx}/{total_urls}] Téléchargement: {url}")
+            db.session.commit()
+
+            spotdl_command = [
+                'spotdl',
+                '--output', '{artist}/{album}/{track-number} - {title}.{output-ext}',
+                '--format', format_type,
+                url
+            ]
+
+            process = subprocess.Popen(
+                ['stdbuf', '-oL'] + spotdl_command,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                universal_newlines=True,
+                cwd=download_dir,
+                bufsize=1
+            )
+            download_processes[download_id] = process
+            download.process_id = process.pid
+            db.session.commit()
+
+            for line in iter(process.stdout.readline, ""):
+                if download_id not in download_processes:
+                    process.terminate()
+                    break
+                line = line.strip()
+                if line:
+                    download.append_log(line)
+                    if 'Downloaded' in line or '100%' in line:
+                        progress = int((idx / total_urls) * 100)
+                        download.progress = progress
+                    db.session.commit()
+
+            process.stdout.close()
+            process.wait()
+
+            if process.returncode != 0:
+                stderr = process.stderr.read()
+                download.append_log(f"Erreur: {stderr}")
+                db.session.commit()
+
+            download.progress = int((idx / total_urls) * 100)
+            db.session.commit()
+
+        download.append_log("Ajout des couvertures...")
+        db.session.commit()
+
+        sacad_command = ['sacad_r', download_dir, '900', 'cover.jpg']
+        sacad_process = subprocess.Popen(
+            ['stdbuf', '-oL'] + sacad_command,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            universal_newlines=True,
+            bufsize=1
+        )
+
+        for line in iter(sacad_process.stdout.readline, ""):
+            if download_id not in download_processes:
+                sacad_process.terminate()
+                break
+            line = line.strip()
+            if line:
+                download.append_log(line)
+                db.session.commit()
+
+        sacad_process.wait()
+
+        if copy_choice == 'yes':
+            download.append_log(f"Copie vers {copy_destination}...")
+            db.session.commit()
+            
+            if os.path.exists(download_dir) and os.listdir(download_dir):
+                for root, dirs, files in os.walk(download_dir):
+                    for file in files:
+                        src = os.path.join(root, file)
+                        dst = os.path.join(copy_destination, os.path.relpath(src, download_dir))
+                        os.makedirs(os.path.dirname(dst), exist_ok=True)
+                        shutil.copy2(src, dst)
+                download.append_log("Copie terminée.")
+            else:
+                download.append_log("Aucune copie - répertoire vide.")
+
+        download.status = 'completed'
+        download.progress = 100
+        download.completed_at = datetime.utcnow()
+        download.append_log("=== Téléchargement terminé ===")
+        db.session.commit()
+
+    except Exception as e:
+        download.status = 'error'
+        download.error = str(e)
+        download.append_log(f"Erreur critique: {e}")
+        db.session.commit()
+
+    finally:
+        if download_id in download_processes:
+            del download_processes[download_id]
+
 
 @app.route('/')
 @login_required
 def index():
-    return render_template('index.html')
+    recent = Download.query.order_by(Download.created_at.desc()).limit(5).all()
+    return render_template('index.html', recent_downloads=recent)
+
+
+@app.route('/history')
+@login_required
+def history():
+    downloads = Download.query.order_by(Download.created_at.desc()).limit(50).all()
+    return render_template('history.html', downloads=downloads)
+
+
+@app.route('/logs/<int:download_id>')
+@login_required
+def get_logs(download_id):
+    download = Download.query.get_or_404(download_id)
+    return Response(download.log, mimetype='text/plain')
+
 
 @app.route('/login', methods=['GET', 'POST'])
 def login():
+    if current_user.is_authenticated:
+        return redirect(url_for('index'))
+
     if request.method == 'POST':
         username = request.form['username']
         password = request.form['password']
 
-        if username in USERS and USERS[username]['password'] == password:
+        user = User.query.filter_by(username=username).first()
-            user = User(username)
+
+        if user and user.check_password(password):
             login_user(user)
             flash('Connexion réussie', 'success')
-            return redirect(url_for('index'))  # Redirection vers la page d'accueil
+            next_page = request.args.get('next')
+            return redirect(next_page or url_for('index'))
         else:
             flash('Nom d\'utilisateur ou mot de passe incorrect', 'danger')
-            return redirect(url_for('login'))
 
     return render_template('login.html')
 
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if current_user.is_authenticated:
+        return redirect(url_for('index'))
+
+    if count_users() > 0:
+        flash('Un utilisateur existe déjà. Connectez-vous.', 'warning')
+        return redirect(url_for('login'))
+
+    if request.method == 'POST':
+        username = request.form['username']
+        password = request.form['password']
+        confirm_password = request.form['confirm_password']
+
+        if password != confirm_password:
+            flash('Les mots de passe ne correspondent pas', 'danger')
+            return redirect(url_for('register'))
+
+        if User.query.filter_by(username=username).first():
+            flash('Ce nom d\'utilisateur est déjà pris', 'danger')
+            return redirect(url_for('register'))
+
+        user = User(username=username)
+        user.set_password(password)
+        db.session.add(user)
+        db.session.commit()
+
+        flash('Compte créé ! Vous pouvez maintenant vous connecter.', 'success')
+        return redirect(url_for('login'))
+
+    return render_template('register.html')
+
+
 @app.route('/logout')
 @login_required
 def logout():
@@ -58,88 +311,128 @@ def logout():
     flash('Vous êtes déconnecté', 'info')
     return redirect(url_for('login'))
 
-# Fonction pour exécuter une commande en temps réel
-def run_command_live(command, cwd=None):
-    process = subprocess.Popen(['stdbuf', '-oL'] + command, stdout=subprocess.PIPE, stderr=subprocess.PIPE, universal_newlines=True, cwd=cwd, bufsize=1)
 
-    for stdout_line in iter(process.stdout.readline, ""):
+@app.route('/api/download', methods=['POST'])
-        yield stdout_line
-        sys.stdout.flush()
-    process.stdout.close()
-    process.wait()
-
-# Fonction pour copier les fichiers individuellement
-def copy_files(source, destination):
-    try:
-        if os.path.exists(source):
-            if len(os.listdir(source)) > 0:  # Vérifier si le répertoire contient des fichiers
-                for root, dirs, files in os.walk(source):
-                    for file in files:
-                        file_source = os.path.join(root, file)
-                        file_destination = os.path.join(destination, os.path.relpath(file_source, source))
-                        os.makedirs(os.path.dirname(file_destination), exist_ok=True)
-                        shutil.copy2(file_source, file_destination)
-                return f"Fichiers copiés vers {destination}\n"
-            else:
-                return f"Le répertoire source ({source}) est vide. Aucune copie effectuée.\n"
-        else:
-            return f"Le répertoire source ({source}) n'existe pas. Aucune copie effectuée.\n"
-    except Exception as e:
-        return f"Erreur lors de la copie : {str(e)}\n"
-
-# Fonction pour gérer le téléchargement d'une seule URL
-@app.route('/download', methods=['POST'])
 @login_required
-def download():
+def api_download():
-    url = request.form.get('url')  # Récupérer une seule URL
+    data = request.get_json()
-    format_choice = request.form.get('format', 'mp3')  # Par défaut à 'mp3'
-    delete_old = request.form.get('delete_old', False)
-    copy_choice = request.form.get('copy_choice', 'no')
     
-    if not url:
+    urls_raw = data.get('url', '')
-        return "Aucune URL n'a été soumise.", 400  # Gérer le cas où aucune URL n'est soumise
+    format_choice = data.get('format', 'mp3')
+    delete_old = data.get('delete_old', False)
+    copy_choice = data.get('copy_choice', 'no')
 
-    # Déterminer le répertoire de téléchargement en fonction du format
+    urls = [u.strip() for u in urls_raw.split('\n') if u.strip()]
-    if format_choice == 'flac':
-        download_dir = "/home/jules/Musique/flac"
-        format_type = 'flac'
-    else:
-        download_dir = "/home/jules/Musique/mp3"
-        format_type = 'mp3'
     
-    # Supprimer les anciens répertoires si l'utilisateur a choisi
+    if not urls:
-    if delete_old:
+        return jsonify({'error': 'Aucune URL fournie'}), 400
-        if os.path.exists(download_dir):
-            shutil.rmtree(download_dir)
 
-    # Créer le répertoire de téléchargement s'il n'existe pas
+    for url in urls:
-    os.makedirs(download_dir, exist_ok=True)
+        if not validate_spotify_url(url):
+            return jsonify({'error': f'URL invalide: {url}'}), 400
 
-    # Commande pour télécharger la musique avec spotdl dans le répertoire correct
+    download = Download(
-    spotdl_command = [
+        url=urls_raw,
-        'spotdl',
+        format_type=format_choice,
-        '--output', '{artist}/{album}/{track-number} - {title}.{output-ext}',
+        status='pending',
-        '--format', format_type,
+        progress=0
-        url
+    )
-    ]
+    db.session.add(download)
+    db.session.commit()
 
-    def stream():
+    thread = threading.Thread(
-        yield f"Téléchargement en cours dans {download_dir}...\n"
+        target=run_download,
-        for output in run_command_live(spotdl_command, cwd=download_dir):
+        args=(download.id, urls, format_choice, delete_old, copy_choice)
-            yield output
+    )
+    thread.daemon = True
+    thread.start()
 
-        # Exécuter sacad_r pour ajouter les couvertures
+    return jsonify({'id': download.id, 'status': 'started'})
-        sacad_command = ['sacad_r', download_dir, '900', 'cover.jpg']
-        yield "Ajout des couvertures...\n"
-        for output in run_command_live(sacad_command):
-            yield output
 
-        # Copier les fichiers vers /mnt/data/Musique si l'utilisateur a choisi "Oui"
-        if copy_choice == 'yes':
-            yield f"Copie des fichiers depuis {download_dir} vers /mnt/data/Musique...\n"
-            yield copy_files(download_dir, "/mnt/data/Musique")
 
-    return Response(stream(), mimetype='text/plain')
+@app.route('/api/download/<int:download_id>/stream')
+@login_required
+def stream_download(download_id):
+    download = Download.query.get_or_404(download_id)
+
+    def generate():
+        last_len = 0
+        while True:
+            db.session.refresh(download)
+            current_len = len(download.log)
+            
+            if current_len > last_len:
+                new_log = download.log[last_len:]
+                data = f"data: {download.id}|{download.status}|{download.progress}|{new_log}\n\n"
+                yield data
+                last_len = current_len
+
+            if download.status in ('completed', 'error'):
+                data = f"data: {download.id}|{download.status}|{download.progress}|__END__\n\n"
+                yield data
+                break
+
+            import time
+            time.sleep(0.5)
+
+    return Response(generate(), mimetype='text/event-stream')
+
+
+@app.route('/api/download/<int:download_id>/cancel', methods=['POST'])
+@login_required
+def cancel_download(download_id):
+    download = Download.query.get_or_404(download_id)
+    
+    if download_id in download_processes:
+        download_processes[download_id].terminate()
+        del download_processes[download_id]
+    
+    download.status = 'cancelled'
+    download.completed_at = datetime.utcnow()
+    download.append_log("=== Annulé par l'utilisateur ===")
+    db.session.commit()
+    
+    return jsonify({'status': 'cancelled'})
+
+
+@app.route('/api/download/<int:download_id>', methods=['GET'])
+@login_required
+def get_download(download_id):
+    download = Download.query.get_or_404(download_id)
+    return jsonify({
+        'id': download.id,
+        'url': download.url,
+        'format': download.format_type,
+        'status': download.status,
+        'progress': download.progress,
+        'log': download.log,
+        'error': download.error,
+        'created_at': download.created_at.isoformat() if download.created_at else None,
+        'completed_at': download.completed_at.isoformat() if download.completed_at else None
+    })
+
+
+@app.route('/api/download/<int:download_id>', methods=['DELETE'])
+@login_required
+def delete_download(download_id):
+    download = Download.query.get_or_404(download_id)
+    
+    if download_id in download_processes:
+        return jsonify({'error': 'Impossible de supprimer un téléchargement en cours'}), 400
+    
+    db.session.delete(download)
+    db.session.commit()
+    
+    return jsonify({'status': 'deleted'})
+
+
+def init_app():
+    with app.app_context():
+        db.create_all()
+        if count_users() == 0:
+            print("Aucun utilisateur trouvé. Accédez à /register pour créer un compte.")
+
 
 if __name__ == '__main__':
+    init_app()
     app.run(debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+flask>=2.3.0
+flask-login>=0.6.0
+flask-sqlalchemy>=3.0.0
+python-dotenv>=1.0.0
+werkzeug>=2.3.0

run.sh

@@ -1,2 +0,0 @@
-cd /home/garfi/sys/spotdl-py
-flask run --host=192.168.1.10 --port=5024

templates/history.html

@@ -0,0 +1,177 @@
+{% extends "layout.html" %}
+
+{% block title %}Historique - Spotify Downloader{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h4 class="mb-0"><i class="bi bi-clock-history me-2"></i>Historique des téléchargements</h4>
+                <span class="badge bg-secondary">{{ downloads|length }} téléchargement(s)</span>
+            </div>
+            <div class="card-body p-0">
+                {% if downloads %}
+                <div class="table-responsive">
+                    <table class="table table-dark table-hover mb-0">
+                        <thead>
+                            <tr>
+                                <th class="text-center" style="width: 80px;">Statut</th>
+                                <th>URL</th>
+                                <th style="width: 80px;">Format</th>
+                                <th style="width: 100px;">Progression</th>
+                                <th style="width: 150px;">Date</th>
+                                <th style="width: 120px;">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for dl in downloads %}
+                            <tr data-download-id="{{ dl.id }}">
+                                <td class="text-center">
+                                    {% if dl.status == 'completed' %}
+                                    <span class="badge bg-success" title="Terminé">
+                                        <i class="bi bi-check-circle"></i>
+                                    </span>
+                                    {% elif dl.status == 'running' %}
+                                    <span class="badge bg-warning" title="En cours">
+                                        <i class="bi bi-arrow-repeat spin"></i>
+                                    </span>
+                                    {% elif dl.status == 'error' %}
+                                    <span class="badge bg-danger" title="Erreur">
+                                        <i class="bi bi-x-circle"></i>
+                                    </span>
+                                    {% elif dl.status == 'cancelled' %}
+                                    <span class="badge bg-secondary" title="Annulé">
+                                        <i class="bi bi-slash-circle"></i>
+                                    </span>
+                                    {% else %}
+                                    <span class="badge bg-info" title="En attente">
+                                        <i class="bi bi-clock"></i>
+                                    </span>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    <small class="text-break" style="max-width: 400px; display: inline-block;">
+                                        {{ dl.url[:80] }}{% if dl.url|length > 80 %}...{% endif %}
+                                    </small>
+                                </td>
+                                <td>
+                                    <span class="badge bg-dark">{{ dl.format_type|upper }}</span>
+                                </td>
+                                <td>
+                                    <div class="progress" style="height: 20px;">
+                                        <div class="progress-bar {{ 'bg-success' if dl.status == 'completed' else 'bg-warning' }}" 
+                                             style="width: {{ dl.progress }}%">
+                                            {{ dl.progress }}%
+                                        </div>
+                                    </div>
+                                </td>
+                                <td>
+                                    <small>
+                                        {{ dl.created_at.strftime('%d/%m/%Y') }}<br>
+                                        <span class="text-muted">{{ dl.created_at.strftime('%H:%M') }}</span>
+                                    </small>
+                                </td>
+                                <td>
+                                    <div class="btn-group btn-group-sm">
+                                        <button class="btn btn-outline-light view-log" data-id="{{ dl.id }}" title="Voir les logs">
+                                            <i class="bi bi-file-text"></i>
+                                        </button>
+                                        {% if dl.status != 'running' %}
+                                        <button class="btn btn-outline-danger delete-download" data-id="{{ dl.id }}" title="Supprimer">
+                                            <i class="bi bi-trash"></i>
+                                        </button>
+                                        {% endif %}
+                                    </div>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                {% else %}
+                <div class="text-center py-5">
+                    <i class="bi bi-inbox fs-1 text-muted"></i>
+                    <p class="text-muted mt-2">Aucun téléchargement pour le moment</p>
+                    <a href="{{ url_for('index') }}" class="btn btn-spotify">
+                        <i class="bi bi-download me-1"></i>Télécharger
+                    </a>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="logModal" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content bg-dark">
+            <div class="modal-header">
+                <h5 class="modal-title"><i class="bi bi-terminal me-2"></i>Logs du téléchargement</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <pre id="logContent" class="output-box p-3 mb-0" style="white-space: pre-wrap; max-height: 500px; overflow-y: auto;"></pre>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Fermer</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .spin {
+        animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+</style>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const logModal = new bootstrap.Modal(document.getElementById('logModal'));
+    const logContent = document.getElementById('logContent');
+
+    document.querySelectorAll('.view-log').forEach(btn => {
+        btn.addEventListener('click', async function() {
+            const id = this.dataset.id;
+            try {
+                const response = await fetch(`/api/download/${id}`);
+                const data = await response.json();
+                logContent.textContent = data.log || 'Aucun log disponible';
+                logModal.show();
+            } catch (err) {
+                showToast('Erreur lors du chargement des logs', 'error');
+            }
+        });
+    });
+
+    document.querySelectorAll('.delete-download').forEach(btn => {
+        btn.addEventListener('click', async function() {
+            const id = this.dataset.id;
+            const row = this.closest('tr');
+            
+            if (!confirm('Supprimer ce téléchargement de l\'historique ?')) return;
+            
+            try {
+                const response = await fetch(`/api/download/${id}`, { method: 'DELETE' });
+                if (response.ok) {
+                    row.remove();
+                    showToast('Supprimé de l\'historique', 'success');
+                } else {
+                    const data = await response.json();
+                    showToast(data.error || 'Erreur', 'error');
+                }
+            } catch (err) {
+                showToast('Erreur réseau', 'error');
+            }
+        });
+    });
+});
+</script>
+{% endblock %}

templates/index.html

@@ -1,116 +1,299 @@
-<!DOCTYPE html>
+{% extends "layout.html" %}
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Downloader spotify</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <style>
-        body {
-            background-color: #121212;
-            color: white;
-            position: relative;
-        }
-        .container {
-            margin-top: 50px;
-        }
-        .form-label {
-            color: white;
-        }
-        .output-box {
-            background-color: #333;
-            padding: 20px;
-            border-radius: 8px;
-            white-space: pre-wrap;
-            color: lightgreen;
-            height: 500px;
-            overflow-y: auto;
-            text-align: left;
-        }
-        .spotify-icon {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            width: 150px;
-            height: 150px;
-        }
-        .d-flex {
-            display: flex;
-            align-items: center;
-        }
-        /* Ajuster la taille de la liste déroulante */
-        .format-select {
-            width: auto;
-        }
-    </style>
-</head>
-<body>
-    <!-- Ajouter l'icône Spotify pirate -->
-    <img src="{{ url_for('static', filename='images/spotify_pirate.png') }}" alt="Spotify Pirate Icon" class="spotify-icon">
 
-    <div class="container text-center">
+{% block title %}Télécharger - Spotify Downloader{% endblock %}
-        <h1>Downloader spotify</h1>
-        <form id="downloadForm" action="/download" method="POST">
-            <div class="mb-3">
-                <label for="url" class="form-label">URL Spotify</label>
-                <input type="text" class="form-control" id="url" name="url" placeholder="Entrez une URL Spotify" required>
-            </div>
-            <div class="mb-3 d-flex">
-                <label for="format" class="form-label">Choisissez le format</label>
-                <select class="form-select format-select" id="format" name="format" required>
-                    <option value="flac">FLAC</option>
-                    <option value="mp3">MP3</option>
-                </select>
-            </div>
 
-            <div class="mb-3 d-flex">
+{% block content %}
-                <input type="checkbox" class="form-check-input me-2" id="delete_old" name="delete_old">
+<div class="row justify-content-center">
-                <label class="form-check-label me-3" for="delete_old">Supprimer les anciens fichiers</label>
+    <div class="col-lg-8">
-                <button type="submit" class="btn btn-primary ms-auto">Télécharger</button>
+        <div class="card">
+            <div class="card-header">
+                <h4 class="mb-0"><i class="bi bi-download me-2"></i>Nouveau téléchargement</h4>
             </div>
+            <div class="card-body">
+                <form id="downloadForm">
+                    <div class="mb-3">
+                        <label for="url" class="form-label">
+                            <i class="bi bi-link-45deg me-1"></i>URL Spotify
+                        </label>
+                        <textarea 
+                            class="form-control" 
+                            id="url" 
+                            name="url" 
+                            rows="4" 
+                            placeholder="Collez une ou plusieurs URLs Spotify (une par ligne)&#10;Exemple:&#10;https://open.spotify.com/track/...&#10;https://open.spotify.com/playlist/..."
+                            required
+                        ></textarea>
+                        <div class="form-text">Accepte les tracks, albums et playlists Spotify</div>
+                        <div id="urlError" class="text-danger mt-1" style="display: none;"></div>
+                    </div>
 
-            <div class="mb-3">
+                    <div class="row g-3 mb-3">
-                <label for="copy_choice" class="form-label">Copier vers /mnt/data/Musique ?</label><br>
+                        <div class="col-md-4">
-                <input type="radio" id="copy_yes" name="copy_choice" value="yes" required>
+                            <label for="format" class="form-label">
-                <label for="copy_yes">Oui</label>
+                                <i class="bi bi-music-note me-1"></i>Format
-                <input type="radio" id="copy_no" name="copy_choice" value="no" required>
+                            </label>
-                <label for="copy_no">Non</label>
+                            <select class="form-select" id="format" name="format">
+                                <option value="mp3">MP3</option>
+                                <option value="flac">FLAC</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="copy_choice" class="form-label">
+                                <i class="bi bi-folder-plus me-1"></i>Copier vers NAS
+                            </label>
+                            <select class="form-select" id="copy_choice" name="copy_choice">
+                                <option value="no">Non</option>
+                                <option value="yes">Oui</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4 d-flex align-items-end">
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="delete_old" name="delete_old">
+                                <label class="form-check-label" for="delete_old">Supprimer anciens fichiers</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                        <button type="button" id="cancelBtn" class="btn btn-outline-danger me-md-2" disabled>
+                            <i class="bi bi-x-circle me-1"></i>Annuler
+                        </button>
+                        <button type="submit" id="submitBtn" class="btn btn-spotify">
+                            <i class="bi bi-download me-1"></i>Télécharger
+                        </button>
+                    </div>
+                </form>
+
+                <div id="downloadStatus" class="mt-4" style="display: none;">
+                    <div class="d-flex justify-content-between align-items-center mb-2">
+                        <span id="statusText" class="badge bg-info">En attente...</span>
+                        <span id="progressText" class="text-muted small">0%</span>
+                    </div>
+                    <div id="progressContainer" class="progress mb-3 progress-indeterminate" style="height: 25px;">
+                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
+                    </div>
+                    <div class="output-box rounded p-3" id="logOutput" style="max-height: 400px; overflow-y: auto;">
+                        <div class="text-muted text-center">En attente du téléchargement...</div>
+                    </div>
+                </div>
             </div>
-        </form>
+        </div>
 
-        <div id="output" class="output-box mt-3"></div>
+        {% if recent_downloads %}
+        <div class="card mt-4">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Téléchargements récents</h5>
+                <a href="{{ url_for('history') }}" class="btn btn-sm btn-outline-light">Voir tout</a>
+            </div>
+            <div class="card-body p-0">
+                <div class="list-group list-group-flush">
+                    {% for dl in recent_downloads %}
+                    <div class="list-group-item bg-transparent d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="badge bg-{{ 'success' if dl.status == 'completed' else 'danger' if dl.status == 'error' else 'warning' if dl.status == 'running' else 'secondary' }}">
+                                {{ dl.status }}
+                            </span>
+                            <small class="text-muted ms-2">{{ dl.format_type.upper() }}</small>
+                        </div>
+                        <small class="text-muted">{{ dl.created_at.strftime('%d/%m %H:%M') }}</small>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
     </div>
+</div>
+{% endblock %}
 
-    <script>
+{% block extra_js %}
-        $(document).ready(function() {
+<script>
-            $('#downloadForm').submit(function(event) {
+(function() {
-                event.preventDefault();
+    'use strict';
-                $('#output').empty(); // Clear previous output
 
-                var form = $(this);
+    const form = document.getElementById('downloadForm');
-                var xhr = new XMLHttpRequest();
+    const submitBtn = document.getElementById('submitBtn');
-                xhr.open("POST", form.attr('action'), true);
+    const cancelBtn = document.getElementById('cancelBtn');
+    const downloadStatus = document.getElementById('downloadStatus');
+    const statusText = document.getElementById('statusText');
+    const progressText = document.getElementById('progressText');
+    const progressBar = document.getElementById('progressBar');
+    const progressContainer = document.getElementById('progressContainer');
+    const logOutput = document.getElementById('logOutput');
+    const urlError = document.getElementById('urlError');
 
-                var seenLines = new Set();  // Stocker les lignes déjà vues
+    let currentDownloadId = null;
+    let eventSource = null;
 
-                xhr.onreadystatechange = function() {
+    const spotifyPattern = /^https?:\/\/open\.spotify\.com\/(track|album|playlist)\/[\w-]+/;
-                    if (xhr.readyState == 3 || xhr.readyState == 4) { // Partial or complete data received
-                        var newOutput = xhr.responseText.split("\n");  // Diviser les lignes de l'output
-                        newOutput.forEach(function(line) {
-                            if (!seenLines.has(line) && line.trim() !== "") {  // Vérifier si la ligne est nouvelle
-                                seenLines.add(line);  // Marquer la ligne comme vue
-                                $('#output').append(line + "\n");  // Ajouter la nouvelle ligne
-                            }
-                        });
-                        $('#output').scrollTop($('#output')[0].scrollHeight); // Scroll to the bottom
-                    }
-                };
 
-                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    function validateUrls(text) {
-                xhr.send(form.serialize());
+        const urls = text.split('\n').filter(u => u.trim());
-            });
+        for (const url of urls) {
+            if (!spotifyPattern.test(url.trim())) {
+                return { valid: false, invalid: url };
+            }
+        }
+        return { valid: true, count: urls.length };
+    }
+
+    document.getElementById('url').addEventListener('input', function() {
+        const result = validateUrls(this.value);
+        if (this.value.trim() && !result.valid) {
+            urlError.textContent = `URL invalide: ${result.invalid.substring(0, 50)}...`;
+            urlError.style.display = 'block';
+        } else {
+            urlError.style.display = 'none';
+        }
+    });
+
+    function appendLog(message, type = 'info') {
+        const lines = message.split('\n').filter(l => l.trim());
+        lines.forEach(line => {
+            const span = document.createElement('div');
+            span.className = `log-${type}`;
+            span.textContent = line;
+            logOutput.appendChild(span);
         });
-    </script>
+        logOutput.scrollTop = logOutput.scrollHeight;
-</body>
+    }
-</html>
+
+    function setStatus(status, progress) {
+        const badges = {
+            'pending': ['bg-secondary', 'En attente...'],
+            'running': ['bg-warning', 'En cours...'],
+            'completed': ['bg-success', 'Terminé !'],
+            'error': ['bg-danger', 'Erreur'],
+            'cancelled': ['bg-secondary', 'Annulé']
+        };
+        const [color, text] = badges[status] || ['bg-secondary', status];
+        statusText.className = `badge ${color}`;
+        statusText.textContent = text;
+        progressText.textContent = `${progress}%`;
+        
+        if (status === 'running') {
+            progressBar.classList.add('progress-bar-animated');
+            progressBar.style.width = '100%';
+            progressContainer.classList.add('progress-indeterminate');
+        } else {
+            progressBar.classList.remove('progress-bar-animated');
+            progressBar.style.width = `${progress}%`;
+            progressContainer.classList.remove('progress-indeterminate');
+            
+            if (status === 'completed') {
+                progressBar.classList.remove('progress-bar-striped');
+                showToast('Téléchargement terminé avec succès !', 'success');
+            } else if (status === 'error') {
+                showToast('Erreur lors du téléchargement', 'error');
+            } else if (status === 'cancelled') {
+                showToast('Téléchargement annulé', 'warning');
+            }
+        }
+    }
+
+    function startStream(downloadId) {
+        if (eventSource) {
+            eventSource.close();
+        }
+        
+        eventSource = new EventSource(`/api/download/${downloadId}/stream`);
+        
+        eventSource.onmessage = function(e) {
+            const [id, status, progress, log] = e.data.split('|');
+            
+            if (log !== '__END__' && log) {
+                let type = 'info';
+                if (log.includes('Erreur') || log.includes('Error')) type = 'error';
+                else if (log.includes('terminé') || log.includes('Terminé')) type = 'success';
+                else if (log.includes('Downloaded')) type = 'success';
+                else if (log.includes('Ajout')) type = 'info';
+                
+                appendLog(log, type);
+            }
+            
+            setStatus(status, parseInt(progress));
+            
+            if (status === 'completed' || status === 'error' || status === 'cancelled') {
+                eventSource.close();
+                eventSource = null;
+                submitBtn.disabled = false;
+                cancelBtn.disabled = true;
+            }
+        };
+
+        eventSource.onerror = function() {
+            eventSource.close();
+            eventSource = null;
+        };
+    }
+
+    form.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const urlValue = document.getElementById('url').value;
+        const validation = validateUrls(urlValue);
+        
+        if (!validation.valid) {
+            urlError.textContent = `URL invalide: ${validation.invalid.substring(0, 50)}...`;
+            urlError.style.display = 'block';
+            return;
+        }
+
+        const formData = {
+            url: urlValue,
+            format: document.getElementById('format').value,
+            delete_old: document.getElementById('delete_old').checked,
+            copy_choice: document.getElementById('copy_choice').value
+        };
+
+        submitBtn.disabled = true;
+        cancelBtn.disabled = false;
+        downloadStatus.style.display = 'block';
+        logOutput.innerHTML = '';
+        setStatus('pending', 0);
+        appendLog(`Démarrage de ${validation.count} téléchargement(s)...`, 'info');
+
+        try {
+            const response = await fetch('/api/download', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData)
+            });
+
+            const data = await response.json();
+            
+            if (data.error) {
+                appendLog(`Erreur: ${data.error}`, 'error');
+                setStatus('error', 0);
+                submitBtn.disabled = false;
+                cancelBtn.disabled = true;
+                return;
+            }
+
+            currentDownloadId = data.id;
+            setStatus('running', 0);
+            startStream(currentDownloadId);
+
+        } catch (err) {
+            appendLog(`Erreur réseau: ${err.message}`, 'error');
+            setStatus('error', 0);
+            submitBtn.disabled = false;
+            cancelBtn.disabled = true;
+        }
+    });
+
+    cancelBtn.addEventListener('click', async function() {
+        if (!currentDownloadId) return;
+        
+        try {
+            await fetch(`/api/download/${currentDownloadId}/cancel`, {
+                method: 'POST'
+            });
+            appendLog('Annulation en cours...', 'warning');
+        } catch (err) {
+            appendLog(`Erreur: ${err.message}`, 'error');
+        }
+    });
+})();
+</script>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,152 @@
+{% macro navbar() %}
+<nav class="navbar navbar-expand navbar-dark" style="background-color: #1a1a1a; border-bottom: 1px solid #333;">
+    <div class="container">
+        <a class="navbar-brand d-flex align-items-center" href="{{ url_for('index') }}" style="font-size: 1rem; color: #fff;">
+            <img src="{{ url_for('static', filename='images/spotify_pirate.png') }}" alt="Logo" height="32" class="me-2">
+            <span style="font-weight: 500;">Spotify Downloader</span>
+        </a>
+        
+        <ul class="navbar-nav ms-auto flex-row gap-3">
+            <li class="nav-item">
+                <a class="nav-link px-3 py-2 rounded" href="{{ url_for('index') }}" style="color: #aaa;">
+                    <i class="bi bi-download me-1"></i> <span class="d-none d-md-inline">Télécharger</span>
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link px-3 py-2 rounded" href="{{ url_for('history') }}" style="color: #aaa;">
+                    <i class="bi bi-clock-history me-1"></i> <span class="d-none d-md-inline">Historique</span>
+                </a>
+            </li>
+            <li class="nav-item dropdown">
+                <a class="nav-link px-3 py-2 rounded dropdown-toggle" href="#" data-bs-toggle="dropdown" style="color: #aaa;">
+                    <i class="bi bi-person-circle me-1"></i> <span class="d-none d-md-inline">{{ current_user.username }}</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end" style="background: #2a2a2a; border: 1px solid #444;">
+                    <li><a class="dropdown-item" href="{{ url_for('logout') }}" style="color: #dc3545;">
+                        <i class="bi bi-box-arrow-right me-2"></i>Déconnexion
+                    </a></li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</nav>
+<style>
+.navbar-nav .nav-link:hover {
+    color: #1DB954 !important;
+    background-color: rgba(29, 185, 84, 0.1);
+}
+</style>
+{% endmacro %}
+
+{% macro toast_container() %}
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <i class="bi bi-bell me-2"></i>
+            <strong class="me-auto">Notification</strong>
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
+        </div>
+        <div class="toast-body" id="toast-message"></div>
+    </div>
+</div>
+{% endmacro %}
+
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Spotify Downloader{% endblock %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <style>
+        :root {
+            --spotify-green: #1DB954;
+            --spotify-dark: #121212;
+            --spotify-dark-secondary: #1a1a1a;
+        }
+        body {
+            background-color: var(--spotify-dark);
+            color: white;
+            min-height: 100vh;
+        }
+        .card {
+            background-color: var(--spotify-dark-secondary);
+            border: 1px solid #333;
+        }
+        .output-box {
+            background-color: #1a1a1a;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.875rem;
+        }
+        .log-info { color: #17a2b8; }
+        .log-success { color: var(--spotify-green); }
+        .log-error { color: #dc3545; }
+        .log-warning { color: #ffc107; }
+        .toast {
+            background-color: var(--spotify-dark-secondary);
+            color: white;
+        }
+        .toast-header {
+            background-color: #2a2a2a;
+            color: white;
+        }
+        .btn-spotify {
+            background-color: var(--spotify-green);
+            color: black;
+            border: none;
+        }
+        .btn-spotify:hover {
+            background-color: #1ed760;
+            color: black;
+        }
+        @keyframes progress-indeterminate {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(400%); }
+        }
+        .progress-indeterminate .progress-bar {
+            animation: progress-indeterminate 1.5s infinite linear;
+        }
+        .dropdown-menu a:hover {
+            background-color: #3a3a3a;
+        }
+    </style>
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    {{ navbar() }}
+    
+    <main class="container py-4">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show">
+                        {{ message }}
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
+        {% block content %}{% endblock %}
+    </main>
+    
+    {{ toast_container() }}
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        function showToast(message, type = 'info') {
+            const toast = document.getElementById('toast');
+            const toastMessage = document.getElementById('toast-message');
+            toastMessage.textContent = message;
+            
+            const header = toast.querySelector('.toast-header');
+            header.className = 'toast-header bg-' + (type === 'error' ? 'danger' : type);
+            
+            const bsToast = new bootstrap.Toast(toast);
+            bsToast.show();
+        }
+    </script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

templates/login.html

@@ -1,37 +1,243 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login</title>
+    <title>Connexion - Spotify Downloader</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
         body {
-            background-color: #121212;
+            background: linear-gradient(135deg, #121212 0%, #1a1a2e 50%, #16213e 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        .login-container {
+            animation: fadeIn 0.6s ease-out;
+            width: 100%;
+            max-width: 400px;
+            padding: 1rem;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .login-card {
+            background: rgba(30, 30, 30, 0.95);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        }
+        .logo-container {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .logo-container img {
+            width: 80px;
+            height: 80px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+        .login-title {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-weight: 300;
+            letter-spacing: 1px;
+            color: #fff;
+        }
+        .input-group-text {
+            background: #2a2a2a;
+            border: 1px solid #333;
+            border-right: none;
+            color: #888;
+        }
+        .form-control {
+            background: #2a2a2a;
+            border: 1px solid #333;
+            color: white;
+            padding: 0.75rem 1rem;
+        }
+        .form-control:focus {
+            background: #2a2a2a;
+            border-color: #1DB954;
+            box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.2);
             color: white;
         }
-        .container {
+        .form-control::placeholder {
-            margin-top: 50px;
+            color: #666;
         }
-        .form-label {
+        .input-group:focus-within .input-group-text {
-            color: white;
+            border-color: #1DB954;
+            color: #1DB954;
+        }
+        .btn-spotify-login {
+            background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
+            color: black;
+            font-weight: 600;
+            padding: 0.875rem 2rem;
+            border: none;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(29, 185, 84, 0.4);
+            width: 100%;
+        }
+        .btn-spotify-login:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(29, 185, 84, 0.5);
+            background: linear-gradient(135deg, #1ed760 0%, #2ecc71 100%);
+            color: black;
+        }
+        .btn-spotify-login:disabled {
+            background: #333;
+            color: #666;
+            box-shadow: none;
+        }
+        .form-divider {
+            display: flex;
+            align-items: center;
+            margin: 1.5rem 0;
+            color: #666;
+            font-size: 0.875rem;
+        }
+        .form-divider::before,
+        .form-divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: linear-gradient(to right, transparent, #333, transparent);
+        }
+        .form-divider span {
+            padding: 0 1rem;
+        }
+        .footer-text {
+            text-align: center;
+            color: #555;
+            font-size: 0.75rem;
+            margin-top: 2rem;
+        }
+        .footer-text a {
+            color: #1DB954;
+            text-decoration: none;
+        }
+        .footer-text a:hover {
+            text-decoration: underline;
+        }
+        .alert {
+            border-radius: 10px;
+            border: none;
+        }
+        .visually-hidden {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            border: 0;
         }
     </style>
 </head>
 <body>
-    <div class="container">
+    <div class="login-container">
-        <h1 class="text-center">Connexion</h1>
+        <div class="login-card">
-        <form action="/login" method="POST">
+            <div class="logo-container">
-            <div class="mb-3">
+                <img src="{{ url_for('static', filename='images/spotify_pirate.png') }}" alt="Logo">
-                <label for="username" class="form-label">Nom d'utilisateur</label>
-                <input type="text" class="form-control" id="username" name="username" required>
             </div>
-            <div class="mb-3">
+            
-                <label for="password" class="form-label">Mot de passe</label>
+            <h2 class="login-title">Spotify Downloader</h2>
-                <input type="password" class="form-control" id="password" name="password" required>
+            
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        <div class="alert alert-{{ 'danger' if category == 'error' else category }} mb-3">
+                            <i class="bi bi-exclamation-circle me-2"></i>{{ message }}
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+            
+            <form action="/login" method="POST">
+                <div class="mb-3">
+                    <label for="username" class="visually-hidden">Nom d'utilisateur</label>
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="bi bi-person"></i>
+                        </span>
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            id="username" 
+                            name="username" 
+                            placeholder="Nom d'utilisateur"
+                            required
+                            autocomplete="username"
+                        >
+                    </div>
+                </div>
+                
+                <div class="mb-4">
+                    <label for="password" class="visually-hidden">Mot de passe</label>
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="bi bi-lock"></i>
+                        </span>
+                        <input 
+                            type="password" 
+                            class="form-control" 
+                            id="password" 
+                            name="password" 
+                            placeholder="Mot de passe"
+                            required
+                            autocomplete="current-password"
+                        >
+                    </div>
+                </div>
+                
+                <div class="d-grid">
+                    <button type="submit" class="btn btn-spotify-login">
+                        <i class="bi bi-box-arrow-in-right me-2"></i>Se connecter
+                    </button>
+                </div>
+            </form>
+            
+            <div class="form-divider">
+                <span><i class="bi bi-music-note"></i></span>
             </div>
-            <button type="submit" class="btn btn-primary">Se connecter</button>
+            
-        </form>
+            <div class="footer-text">
+                <a href="{{ url_for('register') }}">
+                    <i class="bi bi-person-plus me-1"></i>Créer un compte
+                </a>
+                <br><br>
+                v1.0.0
+            </div>
+        </div>
     </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.querySelector('form').addEventListener('submit', function() {
+            const btn = this.querySelector('button[type="submit"]');
+            btn.disabled = true;
+            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Connexion...';
+        });
+    </script>
 </body>
 </html>

templates/register.html

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Inscription - Spotify Downloader</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background: linear-gradient(135deg, #121212 0%, #1a1a2e 50%, #16213e 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        .register-container {
+            animation: fadeIn 0.6s ease-out;
+            width: 100%;
+            max-width: 400px;
+            padding: 1rem;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .register-card {
+            background: rgba(30, 30, 30, 0.95);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        }
+        .logo-container {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .logo-container img {
+            width: 80px;
+            height: 80px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+        .register-title {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-weight: 300;
+            letter-spacing: 1px;
+            color: #fff;
+        }
+        .input-group-text {
+            background: #2a2a2a;
+            border: 1px solid #333;
+            border-right: none;
+            color: #888;
+        }
+        .form-control {
+            background: #2a2a2a;
+            border: 1px solid #333;
+            color: white;
+            padding: 0.75rem 1rem;
+        }
+        .form-control:focus {
+            background: #2a2a2a;
+            border-color: #1DB954;
+            box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.2);
+            color: white;
+        }
+        .form-control::placeholder {
+            color: #666;
+        }
+        .input-group:focus-within .input-group-text {
+            border-color: #1DB954;
+            color: #1DB954;
+        }
+        .btn-spotify-register {
+            background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
+            color: black;
+            font-weight: 600;
+            padding: 0.875rem 2rem;
+            border: none;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(29, 185, 84, 0.4);
+            width: 100%;
+        }
+        .btn-spotify-register:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(29, 185, 84, 0.5);
+            background: linear-gradient(135deg, #1ed760 0%, #2ecc71 100%);
+            color: black;
+        }
+        .form-divider {
+            display: flex;
+            align-items: center;
+            margin: 1.5rem 0;
+            color: #666;
+            font-size: 0.875rem;
+        }
+        .form-divider::before,
+        .form-divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: linear-gradient(to right, transparent, #333, transparent);
+        }
+        .form-divider span {
+            padding: 0 1rem;
+        }
+        .footer-text {
+            text-align: center;
+            color: #555;
+            font-size: 0.75rem;
+            margin-top: 2rem;
+        }
+        .footer-text a {
+            color: #1DB954;
+            text-decoration: none;
+        }
+        .footer-text a:hover {
+            text-decoration: underline;
+        }
+        .alert {
+            border-radius: 10px;
+            border: none;
+        }
+        .visually-hidden {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            border: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="register-container">
+        <div class="register-card">
+            <div class="logo-container">
+                <img src="{{ url_for('static', filename='images/spotify_pirate.png') }}" alt="Logo">
+            </div>
+            
+            <h2 class="register-title">Créer un compte</h2>
+            
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        <div class="alert alert-{{ 'danger' if category == 'error' else category }} mb-3">
+                            <i class="bi bi-exclamation-circle me-2"></i>{{ message }}
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+            
+            <form action="/register" method="POST">
+                <div class="mb-3">
+                    <label for="username" class="visually-hidden">Nom d'utilisateur</label>
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="bi bi-person"></i>
+                        </span>
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            id="username" 
+                            name="username" 
+                            placeholder="Nom d'utilisateur"
+                            required
+                            autocomplete="username"
+                        >
+                    </div>
+                </div>
+                
+                <div class="mb-3">
+                    <label for="password" class="visually-hidden">Mot de passe</label>
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="bi bi-lock"></i>
+                        </span>
+                        <input 
+                            type="password" 
+                            class="form-control" 
+                            id="password" 
+                            name="password" 
+                            placeholder="Mot de passe"
+                            required
+                            autocomplete="new-password"
+                        >
+                    </div>
+                </div>
+                
+                <div class="mb-4">
+                    <label for="confirm_password" class="visually-hidden">Confirmer le mot de passe</label>
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="bi bi-lock-fill"></i>
+                        </span>
+                        <input 
+                            type="password" 
+                            class="form-control" 
+                            id="confirm_password" 
+                            name="confirm_password" 
+                            placeholder="Confirmer le mot de passe"
+                            required
+                            autocomplete="new-password"
+                        >
+                    </div>
+                </div>
+                
+                <div class="d-grid">
+                    <button type="submit" class="btn btn-spotify-register">
+                        <i class="bi bi-person-plus me-2"></i>S'inscrire
+                    </button>
+                </div>
+            </form>
+            
+            <div class="form-divider">
+                <span><i class="bi bi-music-note"></i></span>
+            </div>
+            
+            <div class="footer-text">
+                <a href="{{ url_for('login') }}">
+                    <i class="bi bi-box-arrow-in-left me-1"></i>Déjà inscrit ? Se connecter
+                </a>
+            </div>
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>