added discord oauth2 to get basic user info to complete profile when registering
This commit is contained in:
cedrick2711
@@ -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" id="register-form">
|
||||
<form method="POST" action="{{ url_for('auth.register') }}" class="auth-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,32 +22,102 @@
|
||||
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-gamepad"></i> E-Sports Profile</h4>
|
||||
<p class="text-muted small">Select the games you play and provide your gamertag for each.</p>
|
||||
|
||||
<div class="form-group" id="games-container">
|
||||
<label><i class="fas fa-headset"></i> Games You Play</label>
|
||||
{% for game in esport_games %}
|
||||
<div class="game-entry">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" name="games" value="{{ game }}" class="game-checkbox" data-game="{{ game }}">
|
||||
<span>{{ game }}</span>
|
||||
</label>
|
||||
<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>
|
||||
{% endfor %}
|
||||
<small class="form-text text-muted">Check each game you play, then enter your gamertag for that game.</small>
|
||||
</div>
|
||||
<p class="text-muted small">Set up your competitive gaming profile for tryouts.</p>
|
||||
|
||||
<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">
|
||||
<label><i class="fas fa-headset"></i> Games You Play</label>
|
||||
<div class="checkbox-grid">
|
||||
{% for game in esport_games %}
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" name="games" value="{{ game }}"
|
||||
{% if session.get('discord_oauth') and game in session['discord_oauth'].get('auto_select_games', []) %}checked{% endif %}
|
||||
onchange="toggleGamertagInput(this)">
|
||||
<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 (shown when game is checked or pre-filled from Discord) -->
|
||||
{% set discord_suggestions = session.get('discord_oauth', {}).get('gamertag_suggestions', {}) %}
|
||||
{% for game in esport_games %}
|
||||
<div class="form-group gamertag-group" id="gamertag_group_{{ game|replace(' ', '_') }}"
|
||||
style="{% if session.get('discord_oauth') and game in discord_suggestions %}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="{{ discord_suggestions.get(game, '') }}">
|
||||
<small class="form-text text-muted">
|
||||
Your in-game name or username for {{ game }}.
|
||||
{% if game in discord_suggestions %}
|
||||
<span class="text-success">Pre-filled from Discord connections.</span>
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Discord Connection Section -->
|
||||
{% set discord_data = session.get('discord_oauth') %}
|
||||
{% if discord_data %}
|
||||
<div class="form-group discord-connected">
|
||||
<label><i class="fab fa-discord"></i> Discord Account</label>
|
||||
<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> Your Discord account is connected. Gamertags from your linked game accounts have been pre-filled.
|
||||
</small>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="form-group discord-connect-section">
|
||||
<label><i class="fab fa-discord"></i> Discord Connection</label>
|
||||
<p class="text-muted small">Connect your Discord account to automatically fill your profile and gamertags from your connected game accounts (Steam, Battle.net, Xbox, etc.).</p>
|
||||
<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">You can also enter your Discord username manually below.</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">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<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">
|
||||
<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">
|
||||
@@ -58,67 +128,162 @@
|
||||
</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>
|
||||
<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>
|
||||
</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 = '';
|
||||
// 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';
|
||||
// Clear the input when unchecking (unless it was pre-filled from Discord)
|
||||
if (!checkbox.checked) {
|
||||
var input = group.querySelector('input[type="text"]');
|
||||
if (input && !input.dataset.discordPrefilled) {
|
||||
input.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 = '';
|
||||
// On page load, ensure gamertag groups match checkbox state
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var checkboxes = document.querySelectorAll('input[name="games"]');
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
var game = checkbox.value.replace(/ /g, '_');
|
||||
var group = document.getElementById('gamertag_group_' + game);
|
||||
if (group) {
|
||||
group.style.display = checkbox.checked ? 'block' : 'none';
|
||||
// Mark Discord-prefilled inputs so they aren't cleared on uncheck
|
||||
var input = group.querySelector('input[type="text"]');
|
||||
if (input && input.value) {
|
||||
input.dataset.discordPrefilled = 'true';
|
||||
}
|
||||
});
|
||||
|
||||
if (!allFilled) {
|
||||
e.preventDefault();
|
||||
alert('Please enter a gamertag for each game you selected.');
|
||||
}
|
||||
});
|
||||
});
|
||||
</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 %}
|
||||
Reference in New Issue
Block a user