793ee82c29
Docker compose healthchecks target /health on combined-api, dashboard-api and portal, but these endpoints did not exist (returned 404). This caused all dependent services (condition: service_healthy) to fail startup. - combined_api.py: GET /health + /turf/health with DB connectivity check - dashboard_api.py: GET /health + /turf/health with DB connectivity check - portal_server.py: GET /health (lightweight, no DB) QA Finding 1 from HRT-34 review of HRT-33 branch feature/devops-cicd. Co-Authored-By: Paperclip <noreply@paperclip.ing>
272 lines
14 KiB
HTML
272 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inscription — Turf IA</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--green: #00c853; --green-d: #009624;
|
|
--dark: #0d1117; --dark2: #161b22; --dark3: #21262d;
|
|
--text: #e6edf3; --muted: #8b949e; --border: #30363d;
|
|
--error: #f85149; --radius: 10px;
|
|
}
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--dark); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
|
|
a { color: inherit; text-decoration: none; }
|
|
nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 5%; border-bottom: 1px solid var(--border); }
|
|
.nav-logo { font-weight: 700; font-size: 1.1rem; }
|
|
.nav-link { color: var(--muted); font-size: .9rem; }
|
|
.nav-link:hover { color: var(--text); }
|
|
main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; gap: 40px; flex-wrap: wrap; }
|
|
.auth-card { width: 100%; max-width: 440px; background: var(--dark2); border: 1px solid var(--border); border-radius: 14px; padding: 40px; }
|
|
.plan-preview { width: 100%; max-width: 300px; }
|
|
.auth-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
|
|
.auth-subtitle { color: var(--muted); font-size: .9rem; margin-bottom: 28px; }
|
|
.form-group { margin-bottom: 16px; }
|
|
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
|
|
input, select {
|
|
width: 100%; padding: 11px 14px; background: var(--dark3);
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|
color: var(--text); font-size: .95rem; outline: none; transition: border-color .2s;
|
|
}
|
|
input:focus, select:focus { border-color: var(--green); }
|
|
input.error { border-color: var(--error); }
|
|
select option { background: var(--dark3); }
|
|
.field-error { color: var(--error); font-size: .8rem; margin-top: 4px; display: none; }
|
|
.field-error.show { display: block; }
|
|
.btn { width: 100%; padding: 12px; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 700; cursor: pointer; transition: all .2s; margin-top: 4px; }
|
|
.btn-primary { background: var(--green); color: #000; }
|
|
.btn-primary:hover { background: var(--green-d); }
|
|
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
|
|
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: .82rem; }
|
|
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
|
|
.auth-footer { text-align: center; margin-top: 20px; color: var(--muted); font-size: .9rem; }
|
|
.auth-footer a { color: var(--green); font-weight: 600; }
|
|
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: .88rem; margin-bottom: 18px; display: none; }
|
|
.alert.show { display: block; }
|
|
.alert-error { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.3); color: #f85149; }
|
|
.loader { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.3); border-top-color: #000; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 6px; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.terms { font-size: .8rem; color: var(--muted); line-height: 1.6; }
|
|
.terms a { color: var(--green); }
|
|
.password-strength { height: 4px; border-radius: 2px; margin-top: 6px; background: var(--border); overflow: hidden; }
|
|
.strength-bar { height: 100%; width: 0; transition: width .3s, background .3s; }
|
|
|
|
/* Plan preview sidebar */
|
|
.plan-card {
|
|
background: var(--dark2); border: 1px solid var(--border);
|
|
border-radius: 14px; padding: 24px; margin-bottom: 16px;
|
|
transition: border-color .3s;
|
|
}
|
|
.plan-card.selected { border-color: var(--green); }
|
|
.plan-card-name { font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; }
|
|
.plan-card-price { font-size: 1.5rem; font-weight: 800; margin: 8px 0; }
|
|
.plan-card-features { list-style: none; margin-top: 12px; }
|
|
.plan-card-features li { font-size: .83rem; color: var(--muted); padding: 4px 0; }
|
|
.plan-card-features li::before { content: "✓ "; color: var(--green); }
|
|
.plan-badge { background: var(--green); color: #000; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
|
|
|
|
footer { text-align: center; padding: 20px; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border); }
|
|
@media (max-width: 768px) { .plan-preview { display: none; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="/" class="nav-logo">🏇 Turf IA</a>
|
|
<a href="/login" class="nav-link">Déjà un compte ? Se connecter →</a>
|
|
</nav>
|
|
<main>
|
|
<div class="auth-card">
|
|
<h1 class="auth-title">Créer votre compte</h1>
|
|
<p class="auth-subtitle">Commencez gratuitement, sans carte bancaire.</p>
|
|
|
|
<div class="alert alert-error" id="alert-error"></div>
|
|
|
|
<form id="register-form" novalidate>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="firstname">Prénom</label>
|
|
<input type="text" id="firstname" name="firstname" placeholder="Jean" autocomplete="given-name" required>
|
|
<div class="field-error" id="firstname-error">Requis.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lastname">Nom</label>
|
|
<input type="text" id="lastname" name="lastname" placeholder="Dupont" autocomplete="family-name" required>
|
|
<div class="field-error" id="lastname-error">Requis.</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Adresse email</label>
|
|
<input type="email" id="email" name="email" placeholder="vous@exemple.fr" autocomplete="email" required>
|
|
<div class="field-error" id="email-error">Email invalide.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Mot de passe</label>
|
|
<input type="password" id="password" name="password" placeholder="8 caractères minimum" autocomplete="new-password" required>
|
|
<div class="password-strength"><div class="strength-bar" id="strength-bar"></div></div>
|
|
<div class="field-error" id="password-error">8 caractères minimum requis.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="plan">Plan de départ</label>
|
|
<select id="plan" name="plan">
|
|
<option value="free">Free — Gratuit</option>
|
|
<option value="premium">Premium — 9,90€/mois</option>
|
|
<option value="pro">Pro — 24,90€/mois</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<p class="terms">En vous inscrivant, vous acceptez nos <a href="/legal/cgu">Conditions Générales d'Utilisation</a> et notre <a href="/legal/privacy">Politique de Confidentialité</a>. Vous devez avoir 18 ans ou plus.</p>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="submit-btn">Créer mon compte gratuit</button>
|
|
</form>
|
|
|
|
<div class="auth-footer">
|
|
Déjà un compte ? <a href="/login">Se connecter</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan preview sidebar -->
|
|
<div class="plan-preview">
|
|
<div id="plan-card-free" class="plan-card selected">
|
|
<div class="plan-card-name">Free <span>—</span></div>
|
|
<div class="plan-card-price">0€<span style="font-size:.9rem;font-weight:400;color:var(--muted)">/mois</span></div>
|
|
<ul class="plan-card-features">
|
|
<li>Aperçu Top-3 du jour</li>
|
|
<li>1 course complète/jour</li>
|
|
<li>Statistiques basiques</li>
|
|
</ul>
|
|
</div>
|
|
<div id="plan-card-premium" class="plan-card" style="display:none">
|
|
<div class="plan-card-name">Premium <span class="plan-badge">⭐</span></div>
|
|
<div class="plan-card-price">9,90€<span style="font-size:.9rem;font-weight:400;color:var(--muted)">/mois</span></div>
|
|
<ul class="plan-card-features">
|
|
<li>Toutes les courses</li>
|
|
<li>Value bets identifiés</li>
|
|
<li>Alertes Telegram</li>
|
|
<li>Historique 90 jours</li>
|
|
</ul>
|
|
</div>
|
|
<div id="plan-card-pro" class="plan-card" style="display:none">
|
|
<div class="plan-card-name">Pro <span></span></div>
|
|
<div class="plan-card-price">24,90€<span style="font-size:.9rem;font-weight:400;color:var(--muted)">/mois</span></div>
|
|
<ul class="plan-card-features">
|
|
<li>Tout du Premium</li>
|
|
<li>Export CSV illimité</li>
|
|
<li>API REST documentée</li>
|
|
<li>Backtest personnalisé</li>
|
|
<li>Support prioritaire</li>
|
|
</ul>
|
|
</div>
|
|
<p style="font-size:.78rem;color:var(--muted);text-align:center;">⚡ Pas de carte bancaire requise pour le plan Free</p>
|
|
</div>
|
|
</main>
|
|
<footer>© 2026 Turf IA — H3R7 Tech. Jouez de façon responsable. 18+</footer>
|
|
|
|
<script>
|
|
const API = '/api/v1';
|
|
const form = document.getElementById('register-form');
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
const alertBox = document.getElementById('alert-error');
|
|
const planSelect = document.getElementById('plan');
|
|
|
|
// Pre-select plan from URL param
|
|
const urlPlan = new URLSearchParams(location.search).get('plan');
|
|
if (urlPlan && ['free','premium','pro'].includes(urlPlan)) planSelect.value = urlPlan;
|
|
|
|
function updatePlanPreview() {
|
|
['free','premium','pro'].forEach(p => {
|
|
const el = document.getElementById(`plan-card-${p}`);
|
|
if (!el) return;
|
|
if (planSelect.value === p) {
|
|
el.style.display = '';
|
|
el.classList.add('selected');
|
|
} else {
|
|
el.style.display = 'none';
|
|
el.classList.remove('selected');
|
|
}
|
|
});
|
|
}
|
|
planSelect.addEventListener('change', updatePlanPreview);
|
|
updatePlanPreview();
|
|
|
|
function showError(msg) { alertBox.textContent = msg; alertBox.classList.add('show'); }
|
|
function hideError() { alertBox.classList.remove('show'); }
|
|
function setLoading(on) {
|
|
submitBtn.disabled = on;
|
|
submitBtn.innerHTML = on ? '<span class="loader"></span>Création…' : 'Créer mon compte gratuit';
|
|
}
|
|
function validateField(input, errId, condition, msg) {
|
|
const err = document.getElementById(errId);
|
|
if (condition) { input.classList.add('error'); err.textContent = msg; err.classList.add('show'); return false; }
|
|
input.classList.remove('error'); err.classList.remove('show'); return true;
|
|
}
|
|
|
|
// Password strength
|
|
const passInput = document.getElementById('password');
|
|
const bar = document.getElementById('strength-bar');
|
|
passInput.addEventListener('input', () => {
|
|
const v = passInput.value;
|
|
let score = 0;
|
|
if (v.length >= 8) score++;
|
|
if (/[A-Z]/.test(v)) score++;
|
|
if (/[0-9]/.test(v)) score++;
|
|
if (/[^A-Za-z0-9]/.test(v)) score++;
|
|
const colors = ['#f85149','#e3b341','#58a6ff','#00c853'];
|
|
bar.style.width = (score * 25) + '%';
|
|
bar.style.background = colors[score - 1] || '#30363d';
|
|
});
|
|
|
|
form.addEventListener('submit', async e => {
|
|
e.preventDefault();
|
|
hideError();
|
|
const firstname = document.getElementById('firstname').value.trim();
|
|
const lastname = document.getElementById('lastname').value.trim();
|
|
const email = document.getElementById('email').value.trim();
|
|
const password = passInput.value;
|
|
const plan = planSelect.value;
|
|
|
|
let ok = true;
|
|
ok = validateField(document.getElementById('firstname'), 'firstname-error', !firstname, 'Prénom requis.') && ok;
|
|
ok = validateField(document.getElementById('lastname'), 'lastname-error', !lastname, 'Nom requis.') && ok;
|
|
ok = validateField(document.getElementById('email'), 'email-error', !email || !/^[^@]+@[^@]+\.[^@]+$/.test(email), 'Email invalide.') && ok;
|
|
ok = validateField(passInput, 'password-error', password.length < 8, '8 caractères minimum.') && ok;
|
|
if (!ok) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch(`${API}/auth/register`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ firstname, lastname, email, password, plan })
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
showError(data.error || 'Erreur lors de la création du compte.');
|
|
} else {
|
|
localStorage.setItem('turf_token', data.token);
|
|
localStorage.setItem('turf_user', JSON.stringify(data.user));
|
|
localStorage.setItem('turf_onboarding', 'pending');
|
|
location.href = '/onboarding';
|
|
}
|
|
} catch(_) {
|
|
showError('Erreur de connexion. Vérifiez votre réseau.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('input').forEach(el => el.addEventListener('input', () => {
|
|
el.classList.remove('error');
|
|
document.getElementById(el.id + '-error')?.classList.remove('show');
|
|
hideError();
|
|
}));
|
|
|
|
(function() {
|
|
if (localStorage.getItem('turf_token')) location.href = '/dashboard';
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|