203 lines
7.1 KiB
HTML
203 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mise à jour du Token Admin</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
margin-top: 0;
|
|
font-size: 28px;
|
|
}
|
|
.status {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
font-weight: 500;
|
|
}
|
|
.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeeba;
|
|
}
|
|
.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
button {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 30px;
|
|
font-size: 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: transform 0.2s;
|
|
}
|
|
button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
button:active {
|
|
transform: translateY(0);
|
|
}
|
|
.info {
|
|
background: #e7f3ff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #2196F3;
|
|
margin: 20px 0;
|
|
}
|
|
.token-display {
|
|
background: #f5f5f5;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
word-break: break-all;
|
|
margin: 15px 0;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.steps {
|
|
counter-reset: step-counter;
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
.steps li {
|
|
counter-increment: step-counter;
|
|
margin: 15px 0;
|
|
padding-left: 35px;
|
|
position: relative;
|
|
}
|
|
.steps li::before {
|
|
content: counter(step-counter);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: #667eea;
|
|
color: white;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔑 Mise à Jour du Token Admin</h1>
|
|
|
|
<div id="status"></div>
|
|
|
|
<div class="info">
|
|
<strong>📌 Important :</strong> Cette page met à jour automatiquement votre token JWT admin pour accéder à la page de tirage au sort.
|
|
</div>
|
|
|
|
<h2>Nouveau Token Généré</h2>
|
|
<div class="token-display" id="tokenDisplay">
|
|
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1YTIzOThkZi00NWNiLTQyOGQtOWY1ZS04YzQwNzQxNzEyNGIiLCJpYXQiOjE3NjMwODMyMzQsImV4cCI6MTc2MzY4ODAzNH0.-bNCN6fWHWvhHP_TBEGQ-cGjhz9nv6wGIpyV15UE-Ok
|
|
</div>
|
|
|
|
<button onclick="updateToken()" id="updateBtn">🚀 Mettre à Jour le Token Maintenant</button>
|
|
|
|
<div class="info" style="margin-top: 30px;">
|
|
<h3>📋 Étapes Automatiques</h3>
|
|
<ol class="steps">
|
|
<li>Suppression de l'ancien token du localStorage</li>
|
|
<li>Ajout du nouveau token valide (expire dans 7 jours)</li>
|
|
<li>Vérification que le token a été enregistré</li>
|
|
<li>Redirection automatique vers la page de tirage</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="info" style="background: #fff3cd; border-left-color: #ffc107;">
|
|
<strong>⚠️ Attention :</strong> Cette page doit être ouverte depuis <code>http://localhost:3000</code> pour que la mise à jour fonctionne correctement.
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const NEW_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1YTIzOThkZi00NWNiLTQyOGQtOWY1ZS04YzQwNzQxNzEyNGIiLCJpYXQiOjE3NjMwODMyMzQsImV4cCI6MTc2MzY4ODAzNH0.-bNCN6fWHWvhHP_TBEGQ-cGjhz9nv6wGIpyV15UE-Ok';
|
|
|
|
function showStatus(message, type) {
|
|
const statusDiv = document.getElementById('status');
|
|
statusDiv.className = 'status ' + type;
|
|
statusDiv.innerHTML = message;
|
|
}
|
|
|
|
function updateToken() {
|
|
const btn = document.getElementById('updateBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = '⏳ Mise à jour en cours...';
|
|
|
|
try {
|
|
// Étape 1: Supprimer l'ancien token
|
|
showStatus('🗑️ Étape 1/4 : Suppression de l\'ancien token...', 'warning');
|
|
localStorage.removeItem('token');
|
|
|
|
setTimeout(() => {
|
|
// Étape 2: Ajouter le nouveau token
|
|
showStatus('✏️ Étape 2/4 : Enregistrement du nouveau token...', 'warning');
|
|
localStorage.setItem('token', NEW_TOKEN);
|
|
|
|
setTimeout(() => {
|
|
// Étape 3: Vérification
|
|
const savedToken = localStorage.getItem('token');
|
|
if (savedToken === NEW_TOKEN) {
|
|
showStatus('✅ Étape 3/4 : Token enregistré avec succès !', 'success');
|
|
|
|
setTimeout(() => {
|
|
// Étape 4: Redirection
|
|
showStatus('🔄 Étape 4/4 : Redirection vers la page de tirage...', 'success');
|
|
|
|
setTimeout(() => {
|
|
window.location.href = 'http://localhost:3000/admin/tirages';
|
|
}, 1000);
|
|
}, 1000);
|
|
} else {
|
|
throw new Error('Le token n\'a pas été enregistré correctement');
|
|
}
|
|
}, 500);
|
|
}, 500);
|
|
|
|
} catch (error) {
|
|
showStatus('❌ Erreur : ' + error.message, 'error');
|
|
btn.disabled = false;
|
|
btn.textContent = '🚀 Réessayer';
|
|
}
|
|
}
|
|
|
|
// Vérifier si on est sur localhost:3000
|
|
window.addEventListener('load', () => {
|
|
if (!window.location.hostname.includes('localhost') && !window.location.hostname.includes('127.0.0.1')) {
|
|
showStatus('⚠️ Attention : Cette page doit être ouverte depuis localhost. Copiez ce fichier dans votre dossier public du frontend.', 'warning');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|