68 lines
2.5 KiB
HTML

{% extends "base_auth.html" %}
{% block title %}Sign Up — TheNicheQuiz{% endblock %}
{% block content %}
<h1 class="auth-title">Create your account</h1>
<p class="auth-subtitle">Start finding profitable niches in 60 seconds</p>
<div id="auth-error" class="auth-error" style="display:none;"></div>
<form id="signup-form">
<div class="form-group">
<label class="form-label">Full Name</label>
<input type="text" name="name" id="name" class="form-input" placeholder="John Smith" required autofocus>
</div>
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" name="email" id="email" class="form-input" placeholder="you@example.com" required>
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input type="password" name="password" id="password" class="form-input" placeholder="At least 6 characters" minlength="6" required>
</div>
<button type="submit" class="auth-btn" id="submit-btn">Create Account →</button>
</form>
<script>
document.getElementById('signup-form').addEventListener('submit', async function(e) {
e.preventDefault();
const btn = document.getElementById('submit-btn');
const errDiv = document.getElementById('auth-error');
btn.disabled = true;
btn.textContent = 'Creating account...';
errDiv.style.display = 'none';
try {
const resp = await fetch('/api/signup', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: document.getElementById('name').value,
email: document.getElementById('email').value,
password: document.getElementById('password').value
})
});
const data = await resp.json();
if (data.success) {
window.location.href = '/app/generate';
} else {
errDiv.textContent = data.error || 'Something went wrong.';
errDiv.style.display = 'block';
btn.disabled = false;
btn.textContent = 'Create Account →';
}
} catch (err) {
errDiv.textContent = 'Connection error. Please try again.';
errDiv.style.display = 'block';
btn.disabled = false;
btn.textContent = 'Create Account →';
}
});
</script>
{% endblock %}
{% block footer %}
<div class="auth-footer">
Already have an account? <a href="/login">Log in</a>
</div>
{% endblock %}