82 lines
3.9 KiB
HTML
82 lines
3.9 KiB
HTML
|
{% extends "base.html" %}
|
|||
|
|
{% block title %}Account{% endblock %}
|
|||
|
|
{% block content %}
|
|||
|
|
<div class="section-head">
|
|||
|
|
<div>
|
|||
|
|
<span class="section-tag">// account › security</span>
|
|||
|
|
<h1>{{ current_user.username }}</h1>
|
|||
|
|
<p class="lead">{{ current_user.email }} · role <span class="role-badge role-{{ current_user.role }}">{{ current_user.role }}</span></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<section class="panel" style="margin-bottom: 20px;">
|
|||
|
|
<header class="panel-header"><h3>Profile avatar</h3></header>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="avatar-row">
|
|||
|
|
<div class="avatar-preview">
|
|||
|
|
{% if current_user.has_avatar %}
|
|||
|
|
<img src="{{ url_for('auth.avatar', user_id=current_user.id) }}?v={{ range(1,100000)|random }}" alt="Current avatar">
|
|||
|
|
{% else %}
|
|||
|
|
<span class="avatar-initials">{{ current_user.initials }}</span>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
<div class="avatar-actions">
|
|||
|
|
<form method="post" action="{{ url_for('auth.avatar_upload') }}" enctype="multipart/form-data" class="form">
|
|||
|
|
{{ avatar_form.csrf_token }}
|
|||
|
|
<div>{{ avatar_form.avatar.label }}{{ avatar_form.avatar(accept="image/*") }}</div>
|
|||
|
|
<div class="help">PNG, JPG, GIF or WebP. Squared and resized to {{ 256 }}×{{ 256 }} automatically. Max 2 MB.</div>
|
|||
|
|
<div class="btn-row">
|
|||
|
|
{{ avatar_form.submit(class_="btn btn-primary") }}
|
|||
|
|
{% if current_user.has_avatar %}
|
|||
|
|
<button type="submit" form="avatar-remove-form" class="btn btn-ghost">Remove avatar</button>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
{% if current_user.has_avatar %}
|
|||
|
|
<form method="post" action="{{ url_for('auth.avatar_remove') }}" id="avatar-remove-form" class="inline-form" data-confirm="Remove your avatar?">
|
|||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|||
|
|
</form>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 20px;">
|
|||
|
|
<section class="panel">
|
|||
|
|
<header class="panel-header"><h3>Change password</h3></header>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<form method="post" action="{{ url_for('auth.change_password') }}" class="form" novalidate>
|
|||
|
|
{{ password_form.csrf_token }}
|
|||
|
|
<div>{{ password_form.current_password.label }}{{ password_form.current_password(autocomplete="current-password") }}</div>
|
|||
|
|
<div>{{ password_form.new_password.label }}{{ password_form.new_password(autocomplete="new-password") }}</div>
|
|||
|
|
<div>{{ password_form.confirm.label }}{{ password_form.confirm(autocomplete="new-password") }}</div>
|
|||
|
|
{{ password_form.submit(class_="btn btn-primary") }}
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="panel">
|
|||
|
|
<header class="panel-header">
|
|||
|
|
<h3>Multi-factor authentication</h3>
|
|||
|
|
<span class="status-badge {{ 'status-active' if current_user.mfa_enabled else 'status-inactive' }}">
|
|||
|
|
<span class="led"></span>{{ 'enabled' if current_user.mfa_enabled else 'disabled' }}
|
|||
|
|
</span>
|
|||
|
|
</header>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
{% if current_user.mfa_enabled %}
|
|||
|
|
<p>MFA is currently <strong>active</strong> on your account. You'll be prompted for a 6-digit code on every sign-in.</p>
|
|||
|
|
<form method="post" action="{{ url_for('auth.mfa_disable') }}" class="inline-form" data-confirm="Disable MFA? This reduces your account security.">
|
|||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|||
|
|
<button type="submit" class="btn btn-danger">Disable MFA</button>
|
|||
|
|
</form>
|
|||
|
|
{% else %}
|
|||
|
|
<p>MFA is currently <strong>not configured</strong>. Strongly recommended for admin accounts.</p>
|
|||
|
|
<a href="{{ url_for('auth.mfa_setup') }}" class="btn btn-primary">Set up MFA now</a>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
<style>@media (max-width: 720px) { div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } }</style>
|
|||
|
|
{% endblock %}
|