{% extends "base.html" %}
{% block title %}Settings — allowthem{% endblock %}
{% block body %}
<div class="flex min-h-screen justify-center px-4 py-12">
<div class="w-full max-w-lg space-y-10">
<h1 class="text-2xl font-bold text-gray-900">Settings</h1>
{# --- Section 1: Profile --- #}
<section>
<h2 class="text-lg font-semibold text-gray-900 mb-4">Profile</h2>
{% if profile_success %}
<div class="mb-4 rounded bg-green-50 border border-green-200 p-3 text-sm text-green-700">
{{ profile_success }}
</div>
{% endif %}
{% if profile_error %}
<div class="mb-4 rounded bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{{ profile_error }}
</div>
{% endif %}
<form method="post" action="/settings" class="space-y-4">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">
Email
</label>
<input type="email" id="email" name="email"
value="{{ email }}"
required autocomplete="email"
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2
text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
</div>
<div>
<label for="username" class="block text-sm font-medium text-gray-700">
Username <span class="text-gray-400">(optional)</span>
</label>
<input type="text" id="username" name="username"
value="{{ username }}"
autocomplete="username"
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2
text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
</div>
<button type="submit"
class="rounded bg-blue-600 px-4 py-2 text-white font-medium
hover:bg-blue-700 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2">
Save profile
</button>
</form>
</section>
<hr class="border-gray-200">
{# --- Section 2: Change Password --- #}
<section>
<h2 class="text-lg font-semibold text-gray-900 mb-4">Change password</h2>
{% if password_success %}
<div class="mb-4 rounded bg-green-50 border border-green-200 p-3 text-sm text-green-700">
{{ password_success }}
</div>
{% endif %}
{% if password_error %}
<div class="mb-4 rounded bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{{ password_error }}
</div>
{% endif %}
<form method="post" action="/settings/password" class="space-y-4">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div>
<label for="current_password" class="block text-sm font-medium text-gray-700">
Current password
</label>
<input type="password" id="current_password" name="current_password"
required autocomplete="current-password"
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2
text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
</div>
<div>
<label for="new_password" class="block text-sm font-medium text-gray-700">
New password
</label>
<input type="password" id="new_password" name="new_password"
required minlength="8" autocomplete="new-password"
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2
text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
</div>
<div>
<label for="new_password_confirm" class="block text-sm font-medium text-gray-700">
Confirm new password
</label>
<input type="password" id="new_password_confirm" name="new_password_confirm"
required minlength="8" autocomplete="new-password"
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2
text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
</div>
<button type="submit"
class="rounded bg-blue-600 px-4 py-2 text-white font-medium
hover:bg-blue-700 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2">
Change password
</button>
</form>
</section>
<hr class="border-gray-200">
{# --- Section 3: Linked Accounts --- #}
<section>
<h2 class="text-lg font-semibold text-gray-900 mb-4">Linked accounts</h2>
{% if oauth_accounts %}
<ul class="space-y-3">
{% for account in oauth_accounts %}
<li class="flex items-center justify-between rounded border border-gray-200 px-4 py-3">
<div>
<span class="font-medium text-gray-900">{{ account.provider }}</span>
<span class="ml-2 text-sm text-gray-500">{{ account.email }}</span>
</div>
<span class="text-xs text-gray-400">Linked {{ account.created_at }}</span>
</li>
{% endfor %}
</ul>
{% else %}
<p class="text-sm text-gray-500">No linked accounts.</p>
{% endif %}
</section>
<hr class="border-gray-200">
{# --- Section 4: MFA Status --- #}
<section>
<h2 class="text-lg font-semibold text-gray-900 mb-4">Two-factor authentication</h2>
{% if mfa_enabled %}
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="inline-block h-2 w-2 rounded-full bg-green-500"></span>
<span class="text-sm text-gray-700">
Enabled — {{ mfa_recovery_remaining }} of 10 recovery codes remaining
</span>
</div>
<form method="post" action="/settings/mfa/disable">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<button type="submit"
class="rounded border border-red-300 px-3 py-1 text-sm text-red-600
hover:bg-red-50 focus:outline-none focus:ring-2
focus:ring-red-500 focus:ring-offset-2">
Disable 2FA
</button>
</form>
</div>
{% else %}
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="inline-block h-2 w-2 rounded-full bg-gray-300"></span>
<span class="text-sm text-gray-500">Not configured.</span>
</div>
<a href="/settings/mfa/setup"
class="rounded border border-blue-300 px-3 py-1 text-sm text-blue-600
hover:bg-blue-50 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2">
Enable 2FA
</a>
</div>
{% endif %}
</section>
</div>
</div>
{% endblock %}