163 lines
5.4 KiB
HTML
163 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Profile — Bourbonacci</title>
|
|
<link rel="stylesheet" href="/css/style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<a href="/index.html" class="nav-brand">🥃 Bourbonacci</a>
|
|
<div class="nav-links" id="nav-links"></div>
|
|
<div id="nav-user"></div>
|
|
</nav>
|
|
|
|
<main style="max-width:560px">
|
|
<h1 class="page-title">Profile Settings</h1>
|
|
|
|
<!-- Account info -->
|
|
<div class="card">
|
|
<div class="card-title">Account Info</div>
|
|
<div id="alert-profile"></div>
|
|
<form id="form-profile">
|
|
<div class="form-group">
|
|
<label for="email-display">Email</label>
|
|
<input type="text" id="email-display" disabled style="opacity:.5;cursor:not-allowed" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="display-name">Display Name</label>
|
|
<input type="text" id="display-name" placeholder="How you appear publicly" maxlength="100" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="timezone">Time Zone</label>
|
|
<select id="timezone"></select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="btn-profile">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Change password -->
|
|
<div class="card">
|
|
<div class="card-title">Change Password</div>
|
|
<div id="alert-pw"></div>
|
|
<form id="form-pw">
|
|
<div class="form-group">
|
|
<label for="cur-pw">Current Password</label>
|
|
<input type="password" id="cur-pw" required autocomplete="current-password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="new-pw">New Password</label>
|
|
<input type="password" id="new-pw" required autocomplete="new-password" placeholder="Min 8 characters" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="conf-pw">Confirm New Password</label>
|
|
<input type="password" id="conf-pw" required autocomplete="new-password" />
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="btn-pw">Update Password</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Danger -->
|
|
<div class="card" style="border-color:var(--danger-dim)">
|
|
<div class="card-title" style="color:#e07060">Danger Zone</div>
|
|
<p style="color:var(--cream-dim);font-size:.9rem;margin-bottom:1rem">Sign out of your account on this device.</p>
|
|
<button class="btn btn-danger" onclick="Auth.logout()">Logout</button>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/auth.js"></script>
|
|
<script>
|
|
const TIMEZONES = [
|
|
'UTC',
|
|
'America/New_York','America/Chicago','America/Denver','America/Los_Angeles',
|
|
'America/Anchorage','Pacific/Honolulu',
|
|
'America/Toronto','America/Vancouver','America/Winnipeg',
|
|
'Europe/London','Europe/Paris','Europe/Berlin','Europe/Moscow',
|
|
'Asia/Tokyo','Asia/Shanghai','Asia/Kolkata','Asia/Dubai',
|
|
'Australia/Sydney','Australia/Perth',
|
|
'Pacific/Auckland',
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
if (!Auth.requireAuth()) return;
|
|
await Auth.renderNav();
|
|
|
|
// Populate timezone select
|
|
const tzSel = document.getElementById('timezone');
|
|
TIMEZONES.forEach(tz => {
|
|
const opt = document.createElement('option');
|
|
opt.value = tz;
|
|
opt.textContent = tz.replace('_', ' ');
|
|
tzSel.appendChild(opt);
|
|
});
|
|
|
|
try {
|
|
const user = await API.users.me();
|
|
Auth.saveUser(user);
|
|
document.getElementById('email-display').value = user.email;
|
|
document.getElementById('display-name').value = user.display_name || '';
|
|
tzSel.value = user.timezone || 'UTC';
|
|
} catch (err) {
|
|
document.getElementById('alert-profile').innerHTML = `<div class="alert alert-error">Failed to load profile: ${err.message}</div>`;
|
|
}
|
|
});
|
|
|
|
document.getElementById('form-profile').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const alert = document.getElementById('alert-profile');
|
|
const btn = document.getElementById('btn-profile');
|
|
alert.innerHTML = '';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
const user = await API.users.update({
|
|
display_name: document.getElementById('display-name').value.trim() || null,
|
|
timezone: document.getElementById('timezone').value,
|
|
});
|
|
Auth.saveUser(user);
|
|
alert.innerHTML = `<div class="alert alert-success">Profile updated.</div>`;
|
|
} catch (err) {
|
|
alert.innerHTML = `<div class="alert alert-error">${err.message}</div>`;
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
|
|
document.getElementById('form-pw').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const alert = document.getElementById('alert-pw');
|
|
const btn = document.getElementById('btn-pw');
|
|
const newPw = document.getElementById('new-pw').value;
|
|
const confPw = document.getElementById('conf-pw').value;
|
|
alert.innerHTML = '';
|
|
|
|
if (newPw !== confPw) {
|
|
alert.innerHTML = `<div class="alert alert-error">New passwords do not match.</div>`;
|
|
return;
|
|
}
|
|
if (newPw.length < 8) {
|
|
alert.innerHTML = `<div class="alert alert-error">Password must be at least 8 characters.</div>`;
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
try {
|
|
await API.users.changePassword({
|
|
current_password: document.getElementById('cur-pw').value,
|
|
new_password: newPw,
|
|
});
|
|
alert.innerHTML = `<div class="alert alert-success">Password updated.</div>`;
|
|
e.target.reset();
|
|
} catch (err) {
|
|
alert.innerHTML = `<div class="alert alert-error">${err.message}</div>`;
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|