{% extends "_partials/_app_shell.html" %}
{% block title %}Settings — allowthem{% endblock %}
{% block pagetitle %}Settings{% endblock %}
{% block crumbs %}Account · Settings{% endblock %}
{% block content %}
<div class="wf-panel wf-shrink-0">
<div class="wf-panel-head">
<div class="wf-panel-title">Profile</div>
</div>
<div class="wf-panel-body">
{% if profile_error %}<div class="wf-alert err"><div class="wf-alert-bar"></div>{{ profile_error }}</div>{% endif %}
{% if profile_success %}<div class="wf-alert ok"><div class="wf-alert-bar"></div>{{ profile_success }}</div>{% endif %}
<form method="post" action="/settings" class="wf-f wf-col wf-gap-5">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div class="wf-field">
<label class="wf-label" for="email">Email</label>
<input class="wf-input" type="email" id="email" name="email" value="{{ email }}" required autocomplete="email">
</div>
<div class="wf-field">
<label class="wf-label" for="username">Username</label>
<input class="wf-input" type="text" id="username" name="username" value="{{ username }}" autocomplete="username">
</div>
<div class="wf-f wf-jc-e">
<button class="wf-btn primary" type="submit">Save profile</button>
</div>
</form>
</div>
</div>
<div class="wf-panel wf-shrink-0">
<div class="wf-panel-head">
<div class="wf-panel-title">Change password</div>
</div>
<div class="wf-panel-body">
{% if password_error %}<div class="wf-alert err"><div class="wf-alert-bar"></div>{{ password_error }}</div>{% endif %}
{% if password_success %}<div class="wf-alert ok"><div class="wf-alert-bar"></div>{{ password_success }}</div>{% endif %}
<form method="post" action="/settings/password" class="wf-f wf-col wf-gap-5">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div class="wf-field">
<label class="wf-label" for="current_password">Current password</label>
<input class="wf-input" type="password" id="current_password" name="current_password" required autocomplete="current-password">
</div>
<div class="wf-field">
<label class="wf-label" for="new_password">New password</label>
<input class="wf-input" type="password" id="new_password" name="new_password" required minlength="8" autocomplete="new-password">
</div>
<div class="wf-field">
<label class="wf-label" for="new_password_confirm">Confirm new password</label>
<input class="wf-input" type="password" id="new_password_confirm" name="new_password_confirm" required minlength="8" autocomplete="new-password">
</div>
<div class="wf-f wf-jc-e">
<button class="wf-btn primary" type="submit">Change password</button>
</div>
</form>
</div>
</div>
<div class="wf-panel wf-shrink-0">
<div class="wf-panel-head">
<div class="wf-panel-title">Two-factor authentication</div>
</div>
<div class="wf-panel-body">
{% if mfa_enabled %}
<p>MFA is <span class="wf-tag ok"><span class="dot"></span>Enabled</span>.
{{ mfa_recovery_remaining }} of 10 recovery codes remaining.</p>
<form method="post" action="/settings/mfa/disable">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<button class="wf-btn danger" type="submit">Disable 2FA</button>
</form>
{% else %}
<p>MFA is <span class="wf-tag">Not configured</span>.</p>
<a class="wf-btn primary" href="/settings/mfa/setup">Enable 2FA</a>
{% endif %}
</div>
</div>
<div class="wf-panel wf-shrink-0">
<div class="wf-panel-head">
<div class="wf-panel-title">Linked accounts</div>
</div>
<div class="wf-panel-body">
{% if oauth_accounts %}
<dl class="wf-dl flush">
{% for account in oauth_accounts %}
<div class="wf-dl-row">
<dt>{{ account.provider }}</dt>
<dd>{{ account.email }}</dd>
</div>
{% endfor %}
</dl>
{% else %}
<div class="wf-empty dense">
<div class="wf-empty-title">No linked accounts</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}