New version
This commit is contained in:
177
templates/history.html
Normal file
177
templates/history.html
Normal file
@@ -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 %}
|
||||
@@ -1,116 +1,299 @@
|
||||
<!DOCTYPE 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">
|
||||
{% extends "layout.html" %}
|
||||
|
||||
<div class="container text-center">
|
||||
<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>
|
||||
{% block title %}Télécharger - Spotify Downloader{% endblock %}
|
||||
|
||||
<div class="mb-3 d-flex">
|
||||
<input type="checkbox" class="form-check-input me-2" id="delete_old" name="delete_old">
|
||||
<label class="form-check-label me-3" for="delete_old">Supprimer les anciens fichiers</label>
|
||||
<button type="submit" class="btn btn-primary ms-auto">Télécharger</button>
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<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) Exemple: https://open.spotify.com/track/... 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">
|
||||
<label for="copy_choice" class="form-label">Copier vers /mnt/data/Musique ?</label><br>
|
||||
<input type="radio" id="copy_yes" name="copy_choice" value="yes" required>
|
||||
<label for="copy_yes">Oui</label>
|
||||
<input type="radio" id="copy_no" name="copy_choice" value="no" required>
|
||||
<label for="copy_no">Non</label>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label for="format" class="form-label">
|
||||
<i class="bi bi-music-note me-1"></i>Format
|
||||
</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>
|
||||
$(document).ready(function() {
|
||||
$('#downloadForm').submit(function(event) {
|
||||
event.preventDefault();
|
||||
$('#output').empty(); // Clear previous output
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var form = $(this);
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", form.attr('action'), true);
|
||||
const form = document.getElementById('downloadForm');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
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() {
|
||||
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
|
||||
}
|
||||
};
|
||||
const spotifyPattern = /^https?:\/\/open\.spotify\.com\/(track|album|playlist)\/[\w-]+/;
|
||||
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||
xhr.send(form.serialize());
|
||||
});
|
||||
function validateUrls(text) {
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
logOutput.scrollTop = logOutput.scrollHeight;
|
||||
}
|
||||
|
||||
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 %}
|
||||
|
||||
152
templates/layout.html
Normal file
152
templates/layout.html
Normal file
@@ -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>
|
||||
@@ -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 {
|
||||
margin-top: 50px;
|
||||
.form-control::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
.form-label {
|
||||
color: white;
|
||||
.input-group:focus-within .input-group-text {
|
||||
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">
|
||||
<h1 class="text-center">Connexion</h1>
|
||||
<form action="/login" method="POST">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Nom d'utilisateur</label>
|
||||
<input type="text" class="form-control" id="username" name="username" required>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="logo-container">
|
||||
<img src="{{ url_for('static', filename='images/spotify_pirate.png') }}" alt="Logo">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Mot de passe</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
|
||||
<h2 class="login-title">Spotify Downloader</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="/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>
|
||||
|
||||
247
templates/register.html
Normal file
247
templates/register.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user