452 lines
21 KiB
HTML
452 lines
21 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Settings - Masina-Dock</title>
|
||
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div class="logo">
|
||
|
|
<img src="/static/images/logo.svg" alt="Masina-Dock">
|
||
|
|
<h1>Masina-Dock</h1>
|
||
|
|
</div>
|
||
|
|
<nav>
|
||
|
|
<a href="/dashboard" data-translate="dashboard">Dashboard</a>
|
||
|
|
<button class="theme-toggle" onclick="toggleTheme()" data-translate="toggle_theme">Toggle Theme</button>
|
||
|
|
<a href="/settings" class="btn" data-translate="settings">Settings</a>
|
||
|
|
<button class="btn btn-danger" onclick="logout()" data-translate="logout">Logout</button>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h2 data-translate="settings">Settings</h2>
|
||
|
|
|
||
|
|
<form id="settings-form">
|
||
|
|
<div class="card" style="margin-bottom: 20px;">
|
||
|
|
<h3 data-translate="backup_restore_title">Backup & Restore</h3>
|
||
|
|
<p data-translate="backup_restore_desc">Create a complete backup of all your data or restore from a previous backup.</p>
|
||
|
|
<div style="display: flex; gap: 10px; margin-top: 15px;">
|
||
|
|
<button type="button" class="btn btn-success" onclick="createBackup()" data-translate="create_backup">Create Backup</button>
|
||
|
|
<button type="button" class="btn" onclick="document.getElementById('restore-file').click()" data-translate="restore_backup">Restore Backup</button>
|
||
|
|
<input type="file" id="restore-file" accept=".zip" style="display: none;" onchange="restoreBackup(this.files[0])">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" style="margin-bottom: 20px;">
|
||
|
|
<h3>User Profile</h3>
|
||
|
|
<div style="display: flex; gap: 20px; align-items: center; margin-bottom: 20px;">
|
||
|
|
<img id="user-photo-preview" src="" alt="User Photo" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; display: none;">
|
||
|
|
<div style="flex: 1;">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="user-photo">Profile Photo</label>
|
||
|
|
<input type="file" id="user-photo" accept="image/*" onchange="previewUserPhoto(this)">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="profile-username">Username</label>
|
||
|
|
<input type="text" id="profile-username" name="username" minlength="3">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="profile-email">Email</label>
|
||
|
|
<input type="email" id="profile-email" name="email">
|
||
|
|
</div>
|
||
|
|
<button type="button" class="btn" onclick="showModal('change-password-modal')">Change Password</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" style="margin-bottom: 20px;">
|
||
|
|
<h3>Two-Factor Authentication (2FA)</h3>
|
||
|
|
<p id="2fa-status" style="margin-bottom: 15px;"></p>
|
||
|
|
<div id="2fa-controls"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" style="margin-bottom: 20px;">
|
||
|
|
<h3 data-translate="language">Language</h3>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="language" data-translate="select_language">Select Language</label>
|
||
|
|
<select id="language" name="language">
|
||
|
|
<option value="en">English</option>
|
||
|
|
<option value="ro">Romana</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" style="margin-bottom: 20px;">
|
||
|
|
<h3 data-translate="units_currency">Units & Currency</h3>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="unit-system" data-translate="measurement_system">Measurement System</label>
|
||
|
|
<select id="unit-system" name="unit_system">
|
||
|
|
<option value="metric" data-translate="metric">Metric (km, litres)</option>
|
||
|
|
<option value="imperial" data-translate="imperial">Imperial (miles, gallons)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="currency" data-translate="currency">Currency</label>
|
||
|
|
<select id="currency" name="currency">
|
||
|
|
<option value="USD" data-translate="us_dollar">US Dollar (USD)</option>
|
||
|
|
<option value="GBP" data-translate="british_pound">British Pound (GBP)</option>
|
||
|
|
<option value="RON" data-translate="romanian_leu">Romanian Leu (RON)</option>
|
||
|
|
<option value="EUR" data-translate="euro">Euro (EUR)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" style="margin-bottom: 20px;">
|
||
|
|
<h3 data-translate="app_info">Application Info</h3>
|
||
|
|
<p><strong data-translate="version">Version:</strong> 1.0.0</p>
|
||
|
|
<p><strong data-translate="database">Database:</strong> SQLite</p>
|
||
|
|
<p><strong data-translate="current_user">Current User:</strong> <span id="current-user-name"></span></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="display: flex; gap: 10px; justify-content: center; margin-top: 30px;">
|
||
|
|
<button type="submit" class="btn btn-success" style="font-size: 18px; padding: 12px 40px;" data-translate="save">Save All Changes</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="change-password-modal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h2 data-translate="change_password">Change Password</h2>
|
||
|
|
<form id="change-password-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="current-password" data-translate="current_password">Current Password</label>
|
||
|
|
<input type="password" id="current-password" name="current_password" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="new-password" data-translate="new_password">New Password</label>
|
||
|
|
<input type="password" id="new-password" name="new_password" required minlength="8">
|
||
|
|
<small style="color: var(--text-secondary);">
|
||
|
|
Must be at least 8 characters with uppercase, lowercase, and numbers
|
||
|
|
</small>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="confirm-password" data-translate="confirm_password">Confirm New Password</label>
|
||
|
|
<input type="password" id="confirm-password" name="confirm_password" required minlength="8">
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; gap: 10px; margin-top: 20px;">
|
||
|
|
<button type="submit" class="btn btn-success" data-translate="update">Update Password</button>
|
||
|
|
<button type="button" class="btn" onclick="closeModal('change-password-modal')" data-translate="cancel">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="setup-2fa-modal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h2>Setup Two-Factor Authentication</h2>
|
||
|
|
<p>Scan this QR code with your authenticator app:</p>
|
||
|
|
<div style="text-align: center; margin: 20px 0;">
|
||
|
|
<img id="qr-code-image" src="" alt="QR Code" style="max-width: 250px;">
|
||
|
|
</div>
|
||
|
|
<p><strong>Backup Codes:</strong></p>
|
||
|
|
<p style="color: var(--text-secondary); font-size: 14px;">Save these codes in a safe place. You can use them if you lose access to your authenticator app.</p>
|
||
|
|
<div id="backup-codes" style="background: var(--bg-secondary); padding: 15px; border-radius: 4px; font-family: monospace; margin-bottom: 20px;"></div>
|
||
|
|
<form id="verify-2fa-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="verify-code">Enter verification code from your app:</label>
|
||
|
|
<input type="text" id="verify-code" name="code" required maxlength="6" placeholder="000000">
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; gap: 10px; margin-top: 20px;">
|
||
|
|
<button type="submit" class="btn btn-success">Enable 2FA</button>
|
||
|
|
<button type="button" class="btn" onclick="closeModal('setup-2fa-modal')">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="disable-2fa-modal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h2>Disable Two-Factor Authentication</h2>
|
||
|
|
<p>Enter your password to disable 2FA:</p>
|
||
|
|
<form id="disable-2fa-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="disable-2fa-password">Password</label>
|
||
|
|
<input type="password" id="disable-2fa-password" name="password" required>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; gap: 10px; margin-top: 20px;">
|
||
|
|
<button type="submit" class="btn btn-danger">Disable 2FA</button>
|
||
|
|
<button type="button" class="btn" onclick="closeModal('disable-2fa-modal')">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="custom-alert-modal" class="modal">
|
||
|
|
<div class="modal-content" style="max-width: 400px; text-align: center;">
|
||
|
|
<p id="alert-message" style="margin: 20px 0; font-size: 16px;"></p>
|
||
|
|
<button class="btn btn-success" onclick="closeCustomAlert()" style="width: 100px;">OK</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/static/js/translations.js"></script>
|
||
|
|
<script src="/static/js/app.js"></script>
|
||
|
|
<script>
|
||
|
|
let uploadedPhotoUrl = null;
|
||
|
|
let user2faEnabled = false;
|
||
|
|
|
||
|
|
function showCustomAlert(message) {
|
||
|
|
document.getElementById('alert-message').textContent = message;
|
||
|
|
showModal('custom-alert-modal');
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeCustomAlert() {
|
||
|
|
closeModal('custom-alert-modal');
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
||
|
|
await loadUserSettings();
|
||
|
|
await load2FAStatus();
|
||
|
|
setTimeout(() => {
|
||
|
|
translatePage();
|
||
|
|
}, 200);
|
||
|
|
});
|
||
|
|
|
||
|
|
async function loadUserSettings() {
|
||
|
|
try {
|
||
|
|
const settings = await apiRequest('/api/settings');
|
||
|
|
|
||
|
|
document.getElementById('profile-username').value = settings.username;
|
||
|
|
document.getElementById('profile-email').value = settings.email;
|
||
|
|
document.getElementById('language').value = settings.language || 'en';
|
||
|
|
document.getElementById('unit-system').value = settings.unit_system || 'metric';
|
||
|
|
document.getElementById('currency').value = settings.currency || 'GBP';
|
||
|
|
document.getElementById('current-user-name').textContent = settings.username;
|
||
|
|
|
||
|
|
if (settings.photo) {
|
||
|
|
document.getElementById('user-photo-preview').src = settings.photo;
|
||
|
|
document.getElementById('user-photo-preview').style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
localStorage.setItem('userSettings', JSON.stringify(settings));
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load settings:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function load2FAStatus() {
|
||
|
|
try {
|
||
|
|
const response = await apiRequest('/api/auth/me');
|
||
|
|
user2faEnabled = response.two_factor_enabled;
|
||
|
|
|
||
|
|
const statusEl = document.getElementById('2fa-status');
|
||
|
|
const controlsEl = document.getElementById('2fa-controls');
|
||
|
|
|
||
|
|
if (user2faEnabled) {
|
||
|
|
statusEl.innerHTML = '<span style="color: var(--success);">2FA is currently enabled on your account.</span>';
|
||
|
|
controlsEl.innerHTML = '<button type="button" class="btn btn-danger" onclick="showModal(\'disable-2fa-modal\')">Disable 2FA</button>';
|
||
|
|
} else {
|
||
|
|
statusEl.innerHTML = '<span style="color: var(--text-secondary);">2FA is not enabled. Add an extra layer of security to your account.</span>';
|
||
|
|
controlsEl.innerHTML = '<button type="button" class="btn btn-success" onclick="setup2FA()">Enable 2FA</button>';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load 2FA status:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function setup2FA() {
|
||
|
|
try {
|
||
|
|
const response = await apiRequest('/api/auth/setup-2fa', { method: 'POST' });
|
||
|
|
|
||
|
|
document.getElementById('qr-code-image').src = response.qr_code;
|
||
|
|
|
||
|
|
const backupCodesDiv = document.getElementById('backup-codes');
|
||
|
|
backupCodesDiv.innerHTML = response.backup_codes.map(code => `<div>${code}</div>`).join('');
|
||
|
|
|
||
|
|
showModal('setup-2fa-modal');
|
||
|
|
} catch (error) {
|
||
|
|
showCustomAlert('Failed to setup 2FA: ' + error.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('verify-2fa-form').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const code = document.getElementById('verify-code').value;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await apiRequest('/api/auth/enable-2fa', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({ code })
|
||
|
|
});
|
||
|
|
|
||
|
|
closeModal('setup-2fa-modal');
|
||
|
|
showCustomAlert('2FA enabled successfully!');
|
||
|
|
await load2FAStatus();
|
||
|
|
} catch (error) {
|
||
|
|
showCustomAlert('Invalid verification code. Please try again.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('disable-2fa-form').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const password = document.getElementById('disable-2fa-password').value;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await apiRequest('/api/auth/disable-2fa', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({ password })
|
||
|
|
});
|
||
|
|
|
||
|
|
closeModal('disable-2fa-modal');
|
||
|
|
showCustomAlert('2FA disabled successfully.');
|
||
|
|
await load2FAStatus();
|
||
|
|
document.getElementById('disable-2fa-form').reset();
|
||
|
|
} catch (error) {
|
||
|
|
showCustomAlert('Failed to disable 2FA: ' + error.message);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function previewUserPhoto(input) {
|
||
|
|
if (input.files && input.files[0]) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = function(e) {
|
||
|
|
document.getElementById('user-photo-preview').src = e.target.result;
|
||
|
|
document.getElementById('user-photo-preview').style.display = 'block';
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(input.files[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('settings-form').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const photoFile = document.getElementById('user-photo').files[0];
|
||
|
|
if (photoFile) {
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('photo', photoFile);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/upload/photo', {
|
||
|
|
method: 'POST',
|
||
|
|
credentials: 'include',
|
||
|
|
body: formData
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
uploadedPhotoUrl = data.photo_url;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Photo upload failed:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const username = document.getElementById('profile-username').value;
|
||
|
|
const email = document.getElementById('profile-email').value;
|
||
|
|
const language = document.getElementById('language').value;
|
||
|
|
const unitSystem = document.getElementById('unit-system').value;
|
||
|
|
const currency = document.getElementById('currency').value;
|
||
|
|
|
||
|
|
try {
|
||
|
|
if (uploadedPhotoUrl || username || email) {
|
||
|
|
await apiRequest('/api/user/update-profile', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({
|
||
|
|
username,
|
||
|
|
email,
|
||
|
|
photo: uploadedPhotoUrl
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
await apiRequest('/api/settings/language', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({ language })
|
||
|
|
});
|
||
|
|
|
||
|
|
await apiRequest('/api/settings/units', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({
|
||
|
|
unit_system: unitSystem,
|
||
|
|
currency: currency
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
const settings = JSON.parse(localStorage.getItem('userSettings') || '{}');
|
||
|
|
settings.username = username;
|
||
|
|
settings.email = email;
|
||
|
|
settings.language = language;
|
||
|
|
settings.unit_system = unitSystem;
|
||
|
|
settings.currency = currency;
|
||
|
|
if (uploadedPhotoUrl) settings.photo = uploadedPhotoUrl;
|
||
|
|
localStorage.setItem('userSettings', JSON.stringify(settings));
|
||
|
|
|
||
|
|
showCustomAlert('All settings saved successfully. Page will reload.');
|
||
|
|
setTimeout(() => window.location.reload(), 2000);
|
||
|
|
} catch (error) {
|
||
|
|
showCustomAlert('Failed to save settings: ' + error.message);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
async function createBackup() {
|
||
|
|
try {
|
||
|
|
window.location.href = '/api/backup/create';
|
||
|
|
} catch (error) {
|
||
|
|
showCustomAlert('Failed to create backup: ' + error.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function restoreBackup(file) {
|
||
|
|
if (!file) return;
|
||
|
|
|
||
|
|
if (!confirm('Restoring a backup will overwrite all current data. Are you sure?')) {
|
||
|
|
document.getElementById('restore-file').value = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('backup', file);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/backup/restore', {
|
||
|
|
method: 'POST',
|
||
|
|
credentials: 'include',
|
||
|
|
body: formData
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
showCustomAlert('Backup restored successfully. Page will reload.');
|
||
|
|
setTimeout(() => window.location.reload(), 2000);
|
||
|
|
} else {
|
||
|
|
showCustomAlert('Failed to restore backup: ' + (data.error || 'Unknown error'));
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
showCustomAlert('Failed to restore backup: ' + error.message);
|
||
|
|
} finally {
|
||
|
|
document.getElementById('restore-file').value = '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('change-password-form').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const currentPassword = document.getElementById('current-password').value;
|
||
|
|
const newPassword = document.getElementById('new-password').value;
|
||
|
|
const confirmPassword = document.getElementById('confirm-password').value;
|
||
|
|
|
||
|
|
if (newPassword !== confirmPassword) {
|
||
|
|
showCustomAlert('New passwords do not match.');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
await apiRequest('/api/auth/change-password', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({
|
||
|
|
current_password: currentPassword,
|
||
|
|
new_password: newPassword
|
||
|
|
})
|
||
|
|
});
|
||
|
|
showCustomAlert('Password changed successfully.');
|
||
|
|
closeModal('change-password-modal');
|
||
|
|
document.getElementById('change-password-form').reset();
|
||
|
|
} catch (error) {
|
||
|
|
showCustomAlert('Failed to change password: ' + error.message);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|