CooperandGoodman/bourbonacci
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add initial project files

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Derek Cooper
2026-03-24 19:11:00 -07:00
parent bfab8f71fb
commit 72b23c18aa
32 changed files with 1870 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
frontend/profile.html Normal file
View File

@@ -0,0 +1,162 @@
<!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>