358 lines
14 KiB
HTML
358 lines
14 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% block title %}{{ _('Register') }} - UdeS team manager{% 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" data-action="save-form-draft">
|
|
<i class="fas fa-sync-alt"></i> {{ _('Reconnect') }}
|
|
</a>
|
|
</div>
|
|
<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" data-action="save-form-draft">
|
|
<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>
|
|
|
|
{# Honeypot (SEC-AUTH-008). Not a field anyone is meant to see or fill:
|
|
hidden in the stylesheet, kept out of the tab order, and told to
|
|
screen readers to skip. A submission that carries a value here is a
|
|
robot filling every input it can find.
|
|
Do not add a label, do not translate the name, do not remove
|
|
aria-hidden — each of those turns it into a trap for a person. #}
|
|
<div class="honeypot" aria-hidden="true">
|
|
<input type="text" name="{{ honeypot_field }}" tabindex="-1" autocomplete="off" value="">
|
|
</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';
|
|
}
|
|
}
|
|
|
|
// Save form draft to sessionStorage before navigating to Discord OAuth
|
|
function saveFormDraft() {
|
|
var draft = {};
|
|
var form = document.querySelector('.auth-form');
|
|
if (!form) return;
|
|
var inputs = form.querySelectorAll('input, select, textarea');
|
|
inputs.forEach(function(input) {
|
|
if (!input.name) return;
|
|
if (input.type === 'checkbox') {
|
|
if (!draft[input.name]) draft[input.name] = [];
|
|
if (input.checked) draft[input.name].push(input.value);
|
|
} else if (input.type === 'password') {
|
|
// Never save passwords
|
|
} else {
|
|
draft[input.name] = input.value;
|
|
}
|
|
});
|
|
sessionStorage.setItem('register_form_draft', JSON.stringify(draft));
|
|
}
|
|
|
|
// Restore form draft from sessionStorage on page load
|
|
function restoreFormDraft() {
|
|
var saved = sessionStorage.getItem('register_form_draft');
|
|
if (!saved) return;
|
|
try {
|
|
var draft = JSON.parse(saved);
|
|
var hasServerData = document.querySelector('.auth-form input[name="full_name"]').value !== '';
|
|
if (hasServerData) return;
|
|
for (var key in draft) {
|
|
if (key === 'games') {
|
|
var values = draft[key];
|
|
var checkboxes = document.querySelectorAll('input[name="games"]');
|
|
checkboxes.forEach(function(cb) {
|
|
cb.checked = values.indexOf(cb.value) !== -1;
|
|
toggleGamertagInput(cb);
|
|
});
|
|
} else if (key === 'csrf_token' || key.indexOf('password') !== -1) {
|
|
// Skip CSRF token and passwords
|
|
} else {
|
|
var input = document.querySelector('input[name="' + key + '"], textarea[name="' + key + '"]');
|
|
if (input) input.value = draft[key];
|
|
}
|
|
}
|
|
} catch(e) {
|
|
// Invalid JSON, ignore
|
|
}
|
|
}
|
|
|
|
// Clear draft on successful form submission
|
|
document.querySelector('.auth-form').addEventListener('submit', function() {
|
|
sessionStorage.removeItem('register_form_draft');
|
|
});
|
|
|
|
// On page load, ensure gamertag groups match checkbox state and restore draft
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
restoreFormDraft();
|
|
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({
|
|
'save-form-draft': saveFormDraft,
|
|
'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 %}
|