Files
team-tryouts/app/templates/pages/register.html
T
GGThedandClaude Opus 5 80bc1413f1 feat(i18n): traduire l'ensemble des gabarits
Le site s'affiche desormais integralement en francais. 483 chaines, aucune
non traduite, dans les deux catalogues.

Couvert : navigation et mise en page partagee, connexion, les cinq pages
d'erreur, et les 29 gabarits de pages.

Methode
  Marquage semi-automatique, conservateur par construction : seuls des
  motifs sans ambiguite sont balises -- contenu de balises de texte,
  attributs placeholder/title/aria-label, texte suivant une icone, blocs
  title et page_title -- et tout contenu comportant du Jinja ou du balisage
  imbrique est laisse de cote. Deux passes, la seconde pour td, li, h6,
  strong, em et caption.

  97 entrees etaient marquees fuzzy par pybabel update, c'est-a-dire
  devinees par similarite. Une entree fuzzy est **ignoree a l'execution** :
  elles ont donc ete traitees comme non traduites, et le drapeau retire une
  fois la traduction ecrite.

Deux pieges rencontres, tous deux documentes dans docs/translations.md

  Une entite HTML n'est pas du texte. ×, utilise comme libelle de
  bouton de fermeture, a ete balise par la passe automatique. Jinja
  l'echappait alors en × et le bouton aurait affiche le texte
  litteral × au lieu de la croix. Corrige dans cinq gabarits.

  Huit chaines subsistent dans des blocs <script>. Elles fonctionnent mais
  restent fragiles : Jinja echappe & < > " ' dans un bloc script, et ces
  entites n'y sont pas decodees -- une traduction contenant une apostrophe
  droite arriverait dans la chaine JavaScript sous la forme &#39;. Le
  francais retenu utilise des apostrophes typographiques, non echappees,
  donc l'existant est sur. Toute nouvelle chaine a cet endroit devra passer
  par un attribut data- ou un bloc <script type="application/json">.

Vocabulaire retenu -- a valider avec le club
  tryout -> selection · manager -> gerant · coach -> coach (conserve, terme
  d'usage en e-sport) · scout -> recruteur · email -> courriel · scrim ->
  scrim. Les noms de jeux et les postes (Support, Duelist, AWPer) restent
  en anglais : ce sont les termes employes par les joueurs.
  Ces choix vivent dans un seul catalogue, donc chacun se change en un
  endroit.

Reste a faire : les messages flash hors routes/auth.py, et les messages de
validation de app/validators.py, qui necessitent lazy_gettext puisque les
champs de schema sont construits a l'import.

Verifie : 13 pages parcourues dans les deux langues, aucune ne laisse de
marqueur Jinja non evalue ni d'entite doublement echappee. 193 tests.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-07 21:43:29 -04:00

299 lines
12 KiB
HTML

{% extends "layouts/base.html" %}
{% block title %}{{ _('Register') }} - TryoutPro{% endblock %}
{% block auth_content %}
<form method="POST" action="{{ url_for('auth.register') }}" class="auth-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<!-- ==================== Personal Info ==================== -->
<h4 class="section-title"><i class="fas fa-id-card"></i> {{ _('Personal Information') }}</h4>
<div class="form-group">
<label for="full_name"><i class="fas fa-id-card"></i> {{ _('Full Name') }}</label>
<input type="text" id="full_name" name="full_name" placeholder="{{ _('Enter your full name') }}"
value="{{ form_data.get('full_name', '') }}" required>
</div>
<div class="form-group">
<label for="username"><i class="fas fa-user"></i> {{ _('Username') }}</label>
<input type="text" id="username" name="username" placeholder="{{ _('Choose a username') }}"
value="{{ form_data.get('username', '') }}" required>
</div>
<div class="form-group">
<label for="email"><i class="fas fa-envelope"></i> {{ _('Email') }}</label>
<input type="email" id="email" name="email" placeholder="{{ _('Enter your email') }}"
value="{{ form_data.get('email', '') }}" required>
</div>
<div class="form-group">
<label for="phone"><i class="fas fa-phone"></i> {{ _('Phone (Optional)') }}</label>
<input type="tel" id="phone" name="phone" placeholder="{{ _('Enter your phone number') }}"
value="{{ form_data.get('phone', '') }}">
</div>
<hr class="section-divider">
<!-- ==================== Discord Connection (before games) ==================== -->
<h4 class="section-title"><i class="fab fa-discord"></i> {{ _('Discord Connection') }}</h4>
<p class="text-muted small">{{ _('Connect your Discord account to automatically fill your gamertags from your connected game accounts.') }}</p>
{% set discord_data = session.get('discord_oauth') %}
{% if discord_data %}
<div class="form-group discord-connected">
<div class="discord-connection-card">
<div class="discord-user-display">
{% if discord_data.avatar %}
{% set avatar_url = 'https://cdn.discordapp.com/avatars/' + discord_data.id|string + '/' + discord_data.avatar + '.png?size=64' %}
<img src="{{ avatar_url }}" alt="Discord Avatar" class="discord-avatar" width="48" height="48">
{% else %}
<div class="discord-avatar-placeholder">
<i class="fab fa-discord"></i>
</div>
{% endif %}
<div class="discord-user-info">
<span class="discord-username">{{ discord_data.username }}</span>
<span class="discord-connected-label text-success">
<i class="fas fa-check-circle"></i> {{ _('Connected') }}
</span>
</div>
</div>
<a href="{{ url_for('auth.discord_login') }}" class="btn btn-sm btn-outline discord-reconnect">
<i class="fas fa-sync-alt"></i> {{ _('Reconnect') }}
</a>
</div>
<input type="hidden" name="discord_username" value="{{ discord_data.username }}">
<input type="hidden" name="discord_user_id" value="{{ discord_data.id }}">
<small class="form-text text-success">
<i class="fas fa-check-circle"></i> {{ _('Discord connected. Game connections have been used to pre-fill your profile below.') }}
</small>
</div>
{% else %}
<div class="form-group discord-connect-section">
<a href="{{ url_for('auth.discord_login') }}" class="btn btn-discord btn-block">
<i class="fab fa-discord"></i> {{ _('Connect Discord Account') }}
</a>
<small class="form-text text-muted">{{ _('Connect to pre-fill your gamertags from Steam, Battle.net, Xbox, etc.') }}</small>
</div>
<div class="form-group">
<label for="discord_username"><i class="fab fa-discord"></i> {{ _('Discord Username (Manual)') }}</label>
<input type="text" id="discord_username" name="discord_username" placeholder="{{ _('e.g. YourName') }}"
value="{{ form_data.get('discord_username', '') }}">
</div>
{% endif %}
<hr class="section-divider">
<!-- ==================== E-Sports Profile ==================== -->
<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>
<div class="form-group">
<label><i class="fas fa-headset"></i> {{ _('Games You Play') }}</label>
<div class="checkbox-grid">
{% set selected_games = form_data.get('games', []) %}
{% set auto_select = session.get('discord_oauth', {}).get('auto_select_games', []) %}
{% for game in esport_games %}
{% set is_checked = game in selected_games or (not form_data and game in auto_select) %}
<label class="checkbox-label">
<input type="checkbox" name="games" value="{{ game }}"
{% if is_checked %}checked{% endif %}
data-change="toggle-gamertag">
<span>{{ game }}</span>
</label>
{% endfor %}
</div>
<small class="form-text text-muted">{{ _('Select all games you\'re signing in for.') }}</small>
</div>
<!-- Gamertag fields per game -->
{% set discord_suggestions = session.get('discord_oauth', {}).get('gamertag_suggestions', {}) %}
{% for game in esport_games %}
{% set game_id = game|replace(' ', '_') %}
{% set form_gamertag = form_data.get('gamertag_' ~ game, '') if form_data else '' %}
{% set suggested = discord_suggestions.get(game, '') %}
{% set gamertag_val = form_gamertag if form_gamertag else suggested %}
{% set game_checked = (form_data and game in selected_games) or (not form_data and game in auto_select) %}
{% set is_visible = gamertag_val or game_checked %}
<div class="form-group gamertag-group" id="gamertag_group_{{ game_id }}"
style="{% if is_visible %}display:block{% else %}display:none{% endif %}">
<label for="gamertag_{{ game }}"><i class="fas fa-gamepad"></i> {{ game }} Gamertag</label>
<input type="text" id="gamertag_{{ game }}" name="gamertag_{{ game }}"
placeholder="Enter your {{ game }} username"
value="{{ gamertag_val }}">
<small class="form-text text-muted">
Your in-game name for {{ game }}.
{% if suggested and not form_gamertag %}
<span class="text-success">Pre-filled from Discord connections.</span>
{% endif %}
</small>
</div>
{% endfor %}
<div class="form-group">
<label for="league_os_profile"><i class="fas fa-link"></i> {{ _('League OS Connection (Optional)') }}</label>
<input type="text" id="league_os_profile" name="league_os_profile"
placeholder="{{ _('League OS profile link or ID') }}"
value="{{ form_data.get('league_os_profile', '') }}">
<small class="form-text text-muted">{{ _('Connect your League OS profile for organized play.') }}</small>
</div>
<hr class="section-divider">
<h4 class="section-title"><i class="fas fa-shield-alt"></i> {{ _('Security') }}</h4>
<div class="form-group">
<label for="password"><i class="fas fa-lock"></i> {{ _('Password') }}</label>
<input type="password" id="password" name="password" placeholder="{{ _('Create a password') }}"
required minlength="6">
</div>
<div class="form-group">
<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-calculator"></i> {{ captcha.question }}</label>
<input type="number" id="captcha_answer" name="captcha_answer" placeholder="{{ _('Answer') }}" required autocomplete="off">
</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>
<script nonce="{{ csp_nonce }}">
// Toggle gamertag input visibility when a game checkbox is checked/unchecked
function toggleGamertagInput(checkbox) {
var game = checkbox.value.replace(/ /g, '_');
var group = document.getElementById('gamertag_group_' + game);
if (group) {
group.style.display = checkbox.checked ? 'block' : 'none';
}
}
// On page load, ensure gamertag groups match checkbox state
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('input[name="games"]');
checkboxes.forEach(function(checkbox) {
toggleGamertagInput(checkbox);
});
});
// Behaviours are declared in the markup with data-action / data-change and
// dispatched by the delegated listener in main.js. This replaces inline
// onclick attributes, which no CSP nonce is able to authorise.
registerActions({
'toggle-gamertag': toggleGamertagInput,
});
</script>
<style>
/* Discord Connection Card */
.discord-connection-card {
display: flex;
align-items: center;
justify-content: space-between;
background: #2f3136;
border: 1px solid #40444b;
border-radius: 8px;
padding: 12px 16px;
margin-top: 4px;
}
.discord-user-display {
display: flex;
align-items: center;
gap: 12px;
}
.discord-avatar {
border-radius: 50%;
border: 2px solid #5865F2;
}
.discord-avatar-placeholder {
width: 48px;
height: 48px;
border-radius: 50%;
background: #5865F2;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
}
.discord-user-info {
display: flex;
flex-direction: column;
}
.discord-username {
font-weight: 600;
font-size: 15px;
color: #fff;
}
.discord-connected-label {
font-size: 12px;
font-weight: 500;
}
.discord-connect-section {
background: #2f3136;
border: 1px dashed #5865F2;
border-radius: 8px;
padding: 16px;
text-align: center;
}
.discord-connect-section label {
display: block;
margin-bottom: 8px;
}
.btn-discord {
background-color: #5865F2;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color 0.2s;
width: 100%;
}
.btn-discord:hover {
background-color: #4752C4;
color: #fff;
}
.btn-outline {
background: transparent;
color: #5865F2;
border: 1px solid #5865F2;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background-color 0.2s;
white-space: nowrap;
}
.btn-outline:hover {
background-color: #5865F2;
color: #fff;
}
.discord-reconnect {
font-size: 11px;
}
.btn-sm {
padding: 4px 8px;
font-size: 12px;
}
.gamertag-group {
margin-bottom: 12px;
}
.gamertag-group label {
font-size: 13px;
font-weight: 500;
margin-bottom: 4px;
}
.text-success {
color: #57F287 !important;
}
</style>
{% endblock %}