FinancePlanner/settings.php

<?php
// ─────────────────────────────────────────────
//  settings.php  ·  User settings
// ─────────────────────────────────────────────
require_once 'db.php';
require_once 'auth.php';
requireLogin();
require_once 'nav.php';

$user = currentUser();

renderHead('Settings');
renderTopBar('Settings');
?>
<div class="page">

    <!-- Profile ─────────────────────────────── -->
    <div class="section-label">Profile</div>
    <div class="card" style="padding:16px 16px 20px">
        <div style="display:flex;align-items:center;gap:14px;margin-bottom:18px">
            <div style="width:52px;height:52px;border-radius:50%;background:var(--accent);
                        display:flex;align-items:center;justify-content:center;
                        font-size:1.4rem;font-weight:700;color:#fff;flex-shrink:0">
                <?= strtoupper(substr($user['display_name'] ?? $user['username'], 0, 1)) ?>
            </div>
            <div>
                <div style="font-weight:600"><?= htmlspecialchars($user['display_name'] ?? $user['username']) ?></div>
                <div style="font-size:.8rem;color:var(--text-dim)">@<?= htmlspecialchars($user['username']) ?></div>
                <?php if (isAdmin()): ?>
                    <span class="badge badge-admin" style="margin-left:0;margin-top:4px">Admin</span>
                <?php endif; ?>
            </div>
        </div>
        <div class="form-group">
            <label>Display Name</label>
            <input type="text" id="displayName"
                   value="<?= htmlspecialchars($user['display_name'] ?? '') ?>"
                   placeholder="Your name">
        </div>
        <button class="btn btn-primary" onclick="saveProfile()">Save Name</button>
        <span id="profileMsg" style="margin-left:10px;font-size:.82rem"></span>
    </div>

    <!-- Change Password ──────────────────────── -->
    <div class="section-label">Change Password</div>
    <div class="card" style="padding:16px 16px 20px">
        <div class="form-group">
            <label>Current Password</label>
            <input type="password" id="pwCurrent" placeholder="••••••••">
        </div>
        <div class="form-group">
            <label>New Password</label>
            <input type="password" id="pwNew" placeholder="Minimum 6 characters">
        </div>
        <div class="form-group">
            <label>Confirm New Password</label>
            <input type="password" id="pwConfirm" placeholder="Repeat new password">
        </div>
        <button class="btn btn-primary" onclick="changePassword()">Update Password</button>
        <span id="pwMsg" style="margin-left:10px;font-size:.82rem"></span>
    </div>

    <!-- Support / Donate ─────────────────────── -->
    <?php
    $donMsg    = getSetting('donation_message', '');
    $hasPayPal = getSetting('paypal_link', '') !== '';
    $hasKofi   = getSetting('kofi_link', '') !== '';
    $hasBmc    = getSetting('buymeacoffee_link', '') !== '';
    if ($hasPayPal || $hasKofi || $hasBmc):
    ?>
    <div class="section-label">Support the App</div>
    <div class="card" style="padding:16px;text-align:center">
        <?php if ($donMsg): ?>
            <p style="color:var(--text-dim);font-size:.85rem;margin-bottom:14px">
                <?= htmlspecialchars($donMsg) ?>
            </p>
        <?php endif; ?>
        <a href="donate.php" class="btn btn-primary" style="text-decoration:none">❤️ Donate</a>
    </div>
    <?php endif; ?>

    <!-- Admin Panel link (admins only) ──────── -->
    <?php if (isAdmin()): ?>
    <div class="section-label">Administration</div>
    <div class="card">
        <a href="admin.php" style="text-decoration:none">
            <div class="card-row">
                <div style="font-size:1.3rem;margin-right:12px">🛡️</div>
                <div style="flex:1">
                    <div class="row-label">Admin Panel</div>
                    <div class="row-sub">Manage users, settings & donation links</div>
                </div>
                <div style="color:var(--text-muted)">→</div>
            </div>
        </a>
    </div>
    <?php endif; ?>

    <!-- Logout ──────────────────────────────── -->
    <div class="section-label">Session</div>
    <div class="card">
        <div class="card-row">
            <div style="flex:1">
                <div class="row-label">Sign Out</div>
                <div class="row-sub">Logged in as @<?= htmlspecialchars($user['username']) ?></div>
            </div>
            <a href="login.php?action=logout" class="btn btn-danger" style="text-decoration:none">Logout</a>
        </div>
    </div>

</div>

<?php renderNav('settings'); ?>

<script>
async function api(action, method='GET', body=null) {
    const url = `api.php?action=${action}`;
    const opt = { method };
    if (body) { opt.headers={'Content-Type':'application/x-www-form-urlencoded'}; opt.body=body; }
    const r = await fetch(url, opt);
    return r.json();
}

async function saveProfile() {
    const dn  = document.getElementById('displayName').value.trim();
    const res = await api('update_profile', 'POST', new URLSearchParams({display_name: dn}).toString());
    const el  = document.getElementById('profileMsg');
    el.style.color = res.ok ? 'var(--green)' : 'var(--red)';
    el.textContent  = res.ok ? '✓ Saved' : '✗ Failed';
    if (res.ok) setTimeout(() => el.textContent = '', 3000);
}

async function changePassword() {
    const current = document.getElementById('pwCurrent').value;
    const nw      = document.getElementById('pwNew').value;
    const confirm = document.getElementById('pwConfirm').value;
    const el      = document.getElementById('pwMsg');

    if (nw.length < 6) {
        el.style.color = 'var(--red)'; el.textContent = 'Min. 6 characters'; return;
    }
    if (nw !== confirm) {
        el.style.color = 'var(--red)'; el.textContent = 'Passwords do not match'; return;
    }
    const res = await api('change_password', 'POST', new URLSearchParams({current, new: nw}).toString());
    el.style.color = res.ok ? 'var(--green)' : 'var(--red)';
    el.textContent  = res.ok ? '✓ Password updated' : ('✗ ' + (res.error || 'Failed'));
    if (res.ok) {
        ['pwCurrent','pwNew','pwConfirm'].forEach(id => document.getElementById(id).value = '');
        setTimeout(() => el.textContent = '', 4000);
    }
}
</script>
</body>
</html>