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