Corriger erreur d'enregistrement

app/templates/pages/register.html

@@ -1,7 +1,7 @@
 {% extends "layouts/base.html" %}
 {% block title %}Register - TryoutPro{% endblock %}
 {% block auth_content %}
-<form method="POST" action="{{ url_for('auth.register') }}" class="auth-form">
+<form method="POST" action="{{ url_for('auth.register') }}" class="auth-form" id="register-form">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
     <div class="form-group">
         <label for="full_name"><i class="fas fa-id-card"></i> Full Name</label>
@@ -22,34 +22,30 @@
 
     <hr class="section-divider">
     <h4 class="section-title"><i class="fas fa-gamepad"></i> E-Sports Profile</h4>
-    <p class="text-muted small">Set up your competitive gaming profile for tryouts.</p>
+    <p class="text-muted small">Select the games you play and provide your gamertag for each.</p>
 
-    <div class="form-group">
+    <div class="form-group" id="games-container">
         <label><i class="fas fa-headset"></i> Games You Play</label>
-        <div class="checkbox-grid">
-            {% for game in esport_games %}
+        {% for game in esport_games %}
+        <div class="game-entry">
             <label class="checkbox-label">
-                <input type="checkbox" name="games" value="{{ game }}">
+                <input type="checkbox" name="games" value="{{ game }}" class="game-checkbox" data-game="{{ game }}">
                 <span>{{ game }}</span>
             </label>
-            {% endfor %}
+            <div class="gamertag-input" id="gamertag-group-{{ game | replace(' ', '_') }}" style="display:none; margin-top: 4px; margin-left: 20px;">
+                <input type="text" name="gamertag_{{ game }}" id="gamertag_{{ game | replace(' ', '_') }}"
+                       placeholder="Enter your {{ game }} gamertag" class="gamertag-field"
+                       data-game="{{ game }}">
+            </div>
         </div>
-        <small class="form-text text-muted">Select all games you're signing in for.</small>
-    </div>
-    <div class="form-group">
-        <label for="trn_username"><i class="fas fa-chart-line"></i> TRN (Tracker Network) Username</label>
-        <input type="text" id="trn_username" name="trn_username" placeholder="e.g. YourTrackerGGUsername">
-        <small class="form-text text-muted">Your public Tracker Network profile name. Others can click it to view your stats.</small>
+        {% endfor %}
+        <small class="form-text text-muted">Check each game you play, then enter your gamertag for that game.</small>
     </div>
+
     <div class="form-group">
         <label for="discord_username"><i class="fab fa-discord"></i> Discord Username</label>
         <input type="text" id="discord_username" name="discord_username" placeholder="e.g. YourName#1234">
     </div>
-    <div class="form-group">
-        <label for="league_os_profile"><i class="fas fa-link"></i> League OS Connection</label>
-        <input type="text" id="league_os_profile" name="league_os_profile" placeholder="League OS profile link or ID">
-        <small class="form-text text-muted">Connect your League OS profile for organized play.</small>
-    </div>
 
     <hr class="section-divider">
     <div class="form-group">
@@ -60,7 +56,69 @@
         <label for="confirm_password"><i class="fas fa-check-circle"></i> Confirm Password</label>
         <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm your password" required>
     </div>
+
+    <div class="form-group">
+        <label for="captcha_answer">
+            <i class="fas fa-shield-alt"></i> Security Check: {{ captcha.question }}
+        </label>
+        <input type="text" id="captcha_answer" name="captcha_answer" placeholder="Enter the answer" required>
+    </div>
+
     <button type="submit" class="btn btn-primary btn-block">Create Account</button>
     <p class="auth-link">Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></p>
 </form>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const checkboxes = document.querySelectorAll('.game-checkbox');
+    const form = document.getElementById('register-form');
+
+    checkboxes.forEach(function(checkbox) {
+        checkbox.addEventListener('change', function() {
+            const game = this.dataset.game.replace(/ /g, '_');
+            const gamertagGroup = document.getElementById('gamertag-group-' + game);
+            const gamertagField = document.getElementById('gamertag_' + game);
+
+            if (this.checked) {
+                gamertagGroup.style.display = 'block';
+                gamertagField.setAttribute('required', 'required');
+            } else {
+                gamertagGroup.style.display = 'none';
+                gamertagField.removeAttribute('required');
+                gamertagField.value = '';
+            }
+        });
+
+        // Initialize on page load (in case of form re-render after validation error)
+        const game = checkbox.dataset.game.replace(/ /g, '_');
+        const gamertagGroup = document.getElementById('gamertag-group-' + game);
+        if (checkbox.checked) {
+            gamertagGroup.style.display = 'block';
+        }
+    });
+
+    form.addEventListener('submit', function(e) {
+        const checkedGames = document.querySelectorAll('.game-checkbox:checked');
+        let allFilled = true;
+
+        checkedGames.forEach(function(checkbox) {
+            const game = checkbox.dataset.game.replace(/ /g, '_');
+            const gamertagField = document.getElementById('gamertag_' + game);
+            if (!gamertagField || !gamertagField.value.trim()) {
+                allFilled = false;
+                gamertagField.style.borderColor = '#dc3545';
+            } else {
+                gamertagField.style.borderColor = '';
+            }
+        });
+
+        if (!allFilled) {
+            e.preventDefault();
+            alert('Please enter a gamertag for each game you selected.');
+        }
+    });
+});
+</script>
 {% endblock %}