Shane MaynardandClaude Fable 5
8b80c3fa6f
Test and deploy / test-and-deploy (push) Successful in 59s
Co-Authored-By: Claude Fable 5 <[email protected]>
319 lines
12 KiB
HTML
319 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Account — Roast Planner</title>
|
|
<link rel="stylesheet" href="/app.css?v=__ASSET_VERSION__" />
|
|
<link rel="icon" href="/icon.svg?v=__ASSET_VERSION__" type="image/svg+xml" />
|
|
<meta name="theme-color" content="#A8481A" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<nav class="side-nav" id="side-nav" aria-label="Main navigation">
|
|
<div class="side-nav-brand">
|
|
<img class="brand-mark" src="/brand-mark.svg?v=__ASSET_VERSION__" alt="" aria-hidden="true" />
|
|
<span class="brand-name">Roast Planner</span>
|
|
</div>
|
|
<div id="nav-links"></div>
|
|
<div class="nav-spacer"></div>
|
|
<button
|
|
class="icon-btn nav-collapse-toggle"
|
|
type="button"
|
|
id="nav-collapse"
|
|
aria-label="Collapse navigation"
|
|
title="Collapse navigation"
|
|
>
|
|
«
|
|
</button>
|
|
<div class="nav-user">
|
|
<div class="nav-user-avatar" id="nav-user-avatar" aria-hidden="true"></div>
|
|
<div class="nav-user-detail">
|
|
<span class="nav-user-email" id="account-email"></span>
|
|
<button class="nav-user-logout" type="button" id="btn-logout">
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="app-workspace" id="app-workspace">
|
|
<header class="app-header">
|
|
<div class="header-row-top">
|
|
<button
|
|
class="icon-btn nav-hamburger"
|
|
type="button"
|
|
id="nav-hamburger"
|
|
aria-label="Open navigation"
|
|
aria-expanded="false"
|
|
>
|
|
☰
|
|
</button>
|
|
<div class="brand">
|
|
<div class="brand-text">
|
|
<h1>Account</h1>
|
|
<p class="brand-sub">Profile, security, plans, and devices</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="drawer-overlay hidden" id="drawer-overlay"></div>
|
|
|
|
<main class="page-content">
|
|
<section class="panel-card" id="profile">
|
|
<div class="panel-head">
|
|
<h2>Profile</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div style="display:flex;align-items:center;gap:14px;margin-bottom:8px">
|
|
<div
|
|
class="nav-user-avatar"
|
|
id="profile-avatar"
|
|
style="width:64px;height:64px;font-size:24px;flex:none"
|
|
aria-hidden="true"
|
|
></div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
|
<label class="filebtn ghost-btn small"
|
|
>Upload picture…<input
|
|
type="file"
|
|
id="avatar-file"
|
|
accept="image/png,image/jpeg,image/webp"
|
|
/></label>
|
|
<button
|
|
class="ghost-btn small hidden"
|
|
type="button"
|
|
id="avatar-remove"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
<strong id="profile-email"></strong>
|
|
<span class="badge badge-admin hidden" id="profile-role-admin"
|
|
>Admin</span
|
|
>
|
|
</p>
|
|
<p class="muted" id="profile-since"></p>
|
|
<p class="subhead">Change email</p>
|
|
<form id="email-form" class="inline-form">
|
|
<label class="field"
|
|
><span class="field-label">New email</span
|
|
><input
|
|
class="field-input"
|
|
type="email"
|
|
name="email"
|
|
required
|
|
autocomplete="email"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Current password</span
|
|
><input
|
|
class="field-input"
|
|
type="password"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
/></label>
|
|
<button class="primary-btn" type="submit">Update email</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-card" id="security">
|
|
<div class="panel-head">
|
|
<h2>Security</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="subhead">Change password</p>
|
|
<form id="password-form" class="inline-form">
|
|
<label class="field"
|
|
><span class="field-label">Current password</span
|
|
><input
|
|
class="field-input"
|
|
type="password"
|
|
name="currentPassword"
|
|
required
|
|
autocomplete="current-password"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">New password</span
|
|
><input
|
|
class="field-input"
|
|
type="password"
|
|
name="newPassword"
|
|
required
|
|
minlength="12"
|
|
autocomplete="new-password"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Confirm new password</span
|
|
><input
|
|
class="field-input"
|
|
type="password"
|
|
name="confirmPassword"
|
|
required
|
|
minlength="12"
|
|
autocomplete="new-password"
|
|
/></label>
|
|
<button class="primary-btn" type="submit">
|
|
Update password
|
|
</button>
|
|
</form>
|
|
<p class="subhead">Active sessions</p>
|
|
<div class="table-wrap">
|
|
<table class="data-table" id="sessions-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Device</th>
|
|
<th>Last seen</th>
|
|
<th>Expires</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="sessions-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<button class="ghost-btn" type="button" id="btn-revoke-others">
|
|
Sign out everywhere else
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-card" id="your-plans">
|
|
<div class="panel-head">
|
|
<h2>Your plans</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="table-wrap">
|
|
<table class="data-table" id="plans-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Updated</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="plans-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-card" id="app">
|
|
<div class="panel-head">
|
|
<h2>App</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">
|
|
Install Roast Planner for a focused, offline-capable
|
|
workspace. Updates wait for your confirmation so an
|
|
in-progress plan is never discarded.
|
|
</p>
|
|
<button id="btn-install" type="button" class="primary-btn hidden">
|
|
Install Roast Planner
|
|
</button>
|
|
<button id="btn-refresh" type="button" class="ghost-btn hidden">
|
|
Update ready — refresh safely
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-card" id="api-tokens">
|
|
<div class="panel-head">
|
|
<h2>API tokens</h2>
|
|
<a class="ghost-btn small" href="/api-docs">API docs</a>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">
|
|
Tokens authenticate API requests with an
|
|
<code>Authorization: Bearer rpt_…</code> header — full access
|
|
to your account, so treat them like passwords.
|
|
</p>
|
|
<form
|
|
id="token-form"
|
|
style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"
|
|
>
|
|
<input
|
|
class="text-input"
|
|
name="name"
|
|
placeholder="Token name (e.g. shortcuts, cli)"
|
|
style="max-width:260px"
|
|
/>
|
|
<button class="ghost-btn" type="submit" id="token-create">
|
|
Generate token
|
|
</button>
|
|
</form>
|
|
<div class="hidden" id="token-reveal-wrap" style="margin-top:10px">
|
|
<p class="field-note" style="margin:0 0 4px">
|
|
Copy it now — it will never be shown again.
|
|
</p>
|
|
<div class="token-reveal" id="token-reveal"></div>
|
|
</div>
|
|
<div class="table-wrap" style="margin-top:12px">
|
|
<table class="data-table" id="tokens-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Created</th>
|
|
<th>Last used</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tokens-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-card" id="my-data">
|
|
<div class="panel-head"><h2>Your data</h2></div>
|
|
<div class="panel-body">
|
|
<p class="muted">
|
|
Download everything you've put into Roast Planner — plans,
|
|
roasts, inventory, cupping, beans, and brews — as one JSON
|
|
file.
|
|
</p>
|
|
<a class="ghost-btn" href="/api/account/export" download
|
|
>Download my data</a
|
|
>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-card danger-zone" id="danger">
|
|
<div class="panel-head">
|
|
<h2>Danger zone</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">
|
|
Deleting your account permanently removes your plans and
|
|
cannot be undone.
|
|
</p>
|
|
<form id="delete-form" class="inline-form">
|
|
<label class="field"
|
|
><span class="field-label"
|
|
>Type your email to confirm</span
|
|
><input class="field-input" type="email" name="confirmEmail" required
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Password</span
|
|
><input
|
|
class="field-input"
|
|
type="password"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
/></label>
|
|
<button class="ghost-btn" type="submit" style="border-color:var(--fail);color:var(--fail)">
|
|
Delete my account
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/js/account.js?v=__ASSET_VERSION__"></script>
|
|
</body>
|
|
</html>
|