|
{% extends "base.html" %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{{ static_url('/static/css/auth.css') }}">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="auth-page">
|
|
<div class="auth-card">
|
|
<a href="/" class="auth-back">← Back</a>
|
|
<h2>Join the Community</h2>
|
|
<p class="subtitle">Create your DevPlace account and start connecting with developers</p>
|
|
|
|
{% if errors %}
|
|
<div class="auth-error" role="alert">
|
|
<ul>
|
|
{% for error in errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if registration_closed %}
|
|
<div class="auth-error" role="alert">
|
|
<ul>
|
|
<li>Registration is currently closed.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="auth-footer">
|
|
Already have an account? <a href="/auth/login">Sign in instead</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<form class="auth-form" method="POST" action="/auth/signup">
|
|
<div class="auth-field">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" value="{{ username or '' }}" required aria-required="true" maxlength="32" placeholder="cooldev42" aria-describedby="username-hint">
|
|
<small class="hint-text" id="username-hint">Letters, numbers, hyphens, and underscores only</small>
|
|
</div>
|
|
|
|
<div class="auth-field">
|
|
<label for="email">Email address</label>
|
|
<input type="email" id="email" name="email" value="{{ email or '' }}" required aria-required="true" maxlength="255" placeholder="you@example.com">
|
|
</div>
|
|
|
|
<div class="auth-field">
|
|
<label for="password">Password</label>
|
|
<div class="input-wrap">
|
|
<input type="password" id="password" name="password" required aria-required="true" maxlength="128" placeholder="At least 6 characters">
|
|
<button type="button" class="auth-toggle-pw" aria-label="Show password" aria-pressed="false">👁</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-field">
|
|
<label for="confirm_password">Confirm Password</label>
|
|
<div class="input-wrap">
|
|
<input type="password" id="confirm_password" name="confirm_password" required aria-required="true" maxlength="128" placeholder="Repeat your password">
|
|
<button type="button" class="auth-toggle-pw" aria-label="Show password" aria-pressed="false">👁</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-field">
|
|
<label for="birth_date">Date of birth</label>
|
|
<input type="date" id="birth_date" name="birth_date" value="{{ birth_date or '' }}" required aria-required="true" aria-describedby="birth-date-hint">
|
|
<small class="hint-text" id="birth-date-hint">You must be at least {{ moderation_minimum_age() }}. Only the age band is stored - the date itself is discarded.</small>
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-check">
|
|
<label for="accept_terms">
|
|
<input type="checkbox" id="accept_terms" name="accept_terms" value="1" required aria-required="true"{% if accept_terms %} checked{% endif %}>
|
|
<span>I accept the <a href="/docs/terms.html" target="_blank" rel="noopener">Terms of Service</a> and the <a href="/docs/community-guidelines.html" target="_blank" rel="noopener">Community Guidelines</a>, and I have read the <a href="/docs/privacy.html" target="_blank" rel="noopener">Privacy Policy</a>.</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="auth-submit"><span class="icon">✨</span> Create account</button>
|
|
</form>
|
|
|
|
<div class="auth-footer">
|
|
Already have an account? <a href="/auth/login">Sign in instead</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|