219 lines
11 KiB
HTML
219 lines
11 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Settings - Finance Tracker{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="settings-container">
|
||
|
|
<h1>⚙️ {{ _('settings.title') }}</h1>
|
||
|
|
|
||
|
|
<div class="settings-tabs">
|
||
|
|
<button class="tab-btn active" onclick="openTab(event, 'profile')">{{ _('settings.profile') }}</button>
|
||
|
|
<button class="tab-btn" onclick="openTab(event, 'security')">{{ _('settings.security') }}</button>
|
||
|
|
<button class="tab-btn" onclick="openTab(event, 'tags')">{{ _('settings.tags') }}</button>
|
||
|
|
<button class="tab-btn" onclick="openTab(event, 'import-export')">{{ _('settings.import_export') }}</button>
|
||
|
|
{% if current_user.is_admin %}
|
||
|
|
<button class="tab-btn" onclick="openTab(event, 'users')">{{ _('settings.users') }}</button>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Profile Tab -->
|
||
|
|
<div id="profile" class="tab-content active">
|
||
|
|
<div class="glass-card">
|
||
|
|
<h2>👤 {{ _('settings.profile_settings') }}</h2>
|
||
|
|
<form method="POST" action="{{ url_for('settings.edit_profile') }}" class="form">
|
||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="username">{{ _('settings.username') }}</label>
|
||
|
|
<input type="text" id="username" name="username" value="{{ current_user.username }}" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">{{ _('settings.email') }}</label>
|
||
|
|
<input type="email" id="email" name="email" value="{{ current_user.email }}" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="currency">{{ _('settings.currency') }}</label>
|
||
|
|
<select id="currency" name="currency" class="metric-select">
|
||
|
|
<option value="USD" {% if current_user.currency == 'USD' %}selected{% endif %}>$ USD</option>
|
||
|
|
<option value="EUR" {% if current_user.currency == 'EUR' %}selected{% endif %}>€ EUR</option>
|
||
|
|
<option value="RON" {% if current_user.currency == 'RON' %}selected{% endif %}>RON (Lei)</option>
|
||
|
|
<option value="GBP" {% if current_user.currency == 'GBP' %}selected{% endif %}>£ GBP</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="new_password">{{ _('settings.new_password') }}</label>
|
||
|
|
<input type="password" id="new_password" name="new_password" placeholder="{{ _('settings.new_password_placeholder') }}">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="btn btn-primary">💾 {{ _('settings.save') }}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Security Tab (2FA) -->
|
||
|
|
<div id="security" class="tab-content">
|
||
|
|
<div class="glass-card">
|
||
|
|
<h2>🔐 {{ _('settings.2fa_title') }}</h2>
|
||
|
|
|
||
|
|
{% if current_user.is_2fa_enabled %}
|
||
|
|
<div style="padding: 1.5rem; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: 10px; margin-bottom: 1.5rem;">
|
||
|
|
<p style="color: var(--success); font-weight: 600; margin-bottom: 0.5rem;">✅ {{ _('settings.2fa_enabled') }}</p>
|
||
|
|
<p style="color: var(--text-secondary); margin: 0;">{{ _('settings.2fa_enabled_desc') }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form method="POST" action="{{ url_for('settings.disable_2fa') }}" onsubmit="return confirm('{{ _('settings.2fa_disable_confirm') }}');">
|
||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
|
|
<button type="submit" class="btn btn-danger">🔓 {{ _('settings.disable_2fa') }}</button>
|
||
|
|
</form>
|
||
|
|
{% else %}
|
||
|
|
<div style="padding: 1.5rem; background: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger); border-radius: 10px; margin-bottom: 1.5rem;">
|
||
|
|
<p style="color: var(--danger); font-weight: 600; margin-bottom: 0.5rem;">⚠️ {{ _('settings.2fa_disabled') }}</p>
|
||
|
|
<p style="color: var(--text-secondary); margin: 0;">{{ _('settings.2fa_disabled_desc') }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="{{ url_for('settings.setup_2fa') }}" class="btn btn-primary">🔒 {{ _('settings.enable_2fa') }}</a>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div style="margin-top: 2rem; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 10px;">
|
||
|
|
<h3 style="margin-top: 0;">{{ _('settings.2fa_what_is') }}</h3>
|
||
|
|
<p style="color: var(--text-secondary); margin: 0;">
|
||
|
|
{{ _('settings.2fa_what_is_desc') }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tags Tab -->
|
||
|
|
<div id="tags" class="tab-content">
|
||
|
|
<div class="glass-card">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>🏷️ {{ _('settings.manage_tags') }}</h2>
|
||
|
|
<a href="{{ url_for('settings.create_tag') }}" class="btn btn-primary">+ {{ _('settings.create_tag_btn') }}</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% if tags %}
|
||
|
|
<div class="tags-grid">
|
||
|
|
{% for tag in tags %}
|
||
|
|
<div class="tag-item glass-card" style="border-left: 4px solid {{ tag.color }}">
|
||
|
|
<span class="tag-name">{{ tag.name }}</span>
|
||
|
|
<form method="POST" action="{{ url_for('settings.delete_tag', tag_id=tag.id) }}" style="display: inline;" onsubmit="return confirm('{{ _('settings.delete_tag_confirm').replace('{name}', tag.name) }}');">
|
||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
|
|
<button type="submit" class="btn btn-small btn-danger">{{ _('common.delete') }}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<p class="empty-message">{{ _('empty.no_tags_message') }}</p>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Import/Export Tab -->
|
||
|
|
<div id="import-export" class="tab-content">
|
||
|
|
<div class="glass-card" style="margin-bottom: 2rem;">
|
||
|
|
<h2>📤 {{ _('settings.export_title') }}</h2>
|
||
|
|
<p style="margin-bottom: 1rem;">{{ _('settings.export_desc') }}</p>
|
||
|
|
<a href="{{ url_for('settings.export_data') }}" class="btn btn-primary">⬇️ {{ _('settings.export_btn') }}</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="glass-card">
|
||
|
|
<h2>📥 {{ _('settings.import_title') }}</h2>
|
||
|
|
<p style="margin-bottom: 1rem;">{{ _('settings.import_desc') }}</p>
|
||
|
|
<form method="POST" action="{{ url_for('settings.import_data') }}" enctype="multipart/form-data" class="form">
|
||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="file">{{ _('settings.import_file_label') }}</label>
|
||
|
|
<input type="file" id="file" name="file" accept=".csv" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="btn btn-primary">⬆️ {{ _('settings.import_btn') }}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- User Management Tab (Admin Only) -->
|
||
|
|
{% if current_user.is_admin %}
|
||
|
|
<div id="users" class="tab-content">
|
||
|
|
<div class="glass-card">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>👥 {{ _('settings.users_title') }}</h2>
|
||
|
|
<a href="{{ url_for('settings.create_user') }}" class="btn btn-primary">+ {{ _('settings.create_user_btn') }}</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% if users %}
|
||
|
|
<div style="overflow-x: auto;">
|
||
|
|
<table class="users-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>{{ _('settings.table_username') }}</th>
|
||
|
|
<th>{{ _('settings.table_email') }}</th>
|
||
|
|
<th>{{ _('settings.table_role') }}</th>
|
||
|
|
<th>{{ _('settings.table_currency') }}</th>
|
||
|
|
<th>{{ _('settings.table_2fa') }}</th>
|
||
|
|
<th>{{ _('settings.table_actions') }}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% for user in users %}
|
||
|
|
<tr>
|
||
|
|
<td>{{ user.username }}</td>
|
||
|
|
<td>{{ user.email }}</td>
|
||
|
|
<td>
|
||
|
|
{% if user.is_admin %}
|
||
|
|
<span style="color: #fbbf24;">⭐ {{ _('settings.role_admin') }}</span>
|
||
|
|
{% else %}
|
||
|
|
<span>{{ _('settings.role_user') }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</td>
|
||
|
|
<td>{{ user.currency }}</td>
|
||
|
|
<td>
|
||
|
|
{% if user.is_2fa_enabled %}
|
||
|
|
<span style="color: var(--success);">✅ {{ _('settings.2fa_status_enabled') }}</span>
|
||
|
|
{% else %}
|
||
|
|
<span style="color: var(--text-secondary);">❌ {{ _('settings.2fa_status_disabled') }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="{{ url_for('settings.edit_user', user_id=user.id) }}" class="btn btn-small btn-secondary">{{ _('common.edit') }}</a>
|
||
|
|
{% if user.id != current_user.id %}
|
||
|
|
<form method="POST" action="{{ url_for('settings.delete_user', user_id=user.id) }}" style="display: inline;" onsubmit="return confirm('{{ _('settings.delete_user_confirm').replace('{name}', user.username) }}');">
|
||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
|
|
<button type="submit" class="btn btn-small btn-danger">{{ _('common.delete') }}</button>
|
||
|
|
</form>
|
||
|
|
{% endif %}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<p class="empty-message">{{ _('settings.no_users') }}</p>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function openTab(evt, tabName) {
|
||
|
|
var i, tabcontent, tablinks;
|
||
|
|
tabcontent = document.getElementsByClassName("tab-content");
|
||
|
|
for (i = 0; i < tabcontent.length; i++) {
|
||
|
|
tabcontent[i].classList.remove("active");
|
||
|
|
}
|
||
|
|
tablinks = document.getElementsByClassName("tab-btn");
|
||
|
|
for (i = 0; i < tablinks.length; i++) {
|
||
|
|
tablinks[i].classList.remove("active");
|
||
|
|
}
|
||
|
|
document.getElementById(tabName).classList.add("active");
|
||
|
|
evt.currentTarget.classList.add("active");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|