72 lines
2.6 KiB
HTML
72 lines
2.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Register — Meal Tracker{% endblock %}
|
|
{% block content %}
|
|
<div class="form-card register-card">
|
|
<h2>Create Account</h2>
|
|
<form method="POST">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" required autofocus>
|
|
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" required>
|
|
|
|
<label for="confirm">Confirm Password</label>
|
|
<input type="password" id="confirm" name="confirm" required>
|
|
|
|
<fieldset class="household-section">
|
|
<legend>Household</legend>
|
|
|
|
<label class="radio-label">
|
|
<input type="radio" name="household_action" value="join" id="radio-join" checked>
|
|
Join an existing household
|
|
</label>
|
|
<div id="join-block" class="household-block">
|
|
<select name="household_id" class="select-input">
|
|
<option value="">— Select —</option>
|
|
{% for h in households %}
|
|
<option value="{{ h.id }}">{{ h.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% if not households %}
|
|
<p class="hint">No households yet. Create one below!</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<label class="radio-label">
|
|
<input type="radio" name="household_action" value="create" id="radio-create"
|
|
{% if not households %}checked{% endif %}>
|
|
Create a new household
|
|
</label>
|
|
<div id="create-block" class="household-block">
|
|
<input type="text" name="new_household_name"
|
|
placeholder="Household name (e.g. The Smiths)"
|
|
class="text-input">
|
|
<p class="hint">You'll be the admin of this household.</p>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<button type="submit" class="btn btn-primary">Register</button>
|
|
</form>
|
|
<p class="form-footer">
|
|
Already have an account? <a href="{{ url_for('auth.login') }}">Log in</a>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var joinBlock = document.getElementById('join-block');
|
|
var createBlock = document.getElementById('create-block');
|
|
var radioJoin = document.getElementById('radio-join');
|
|
var radioCreate = document.getElementById('radio-create');
|
|
|
|
function sync() {
|
|
joinBlock.hidden = !radioJoin.checked;
|
|
createBlock.hidden = !radioCreate.checked;
|
|
}
|
|
radioJoin.onchange = sync;
|
|
radioCreate.onchange = sync;
|
|
sync();
|
|
})();
|
|
</script>
|
|
{% endblock %}
|