ui: /me is a real page now, not raw JSON
- New ME_TEMPLATE — palette-locked, shows user identity + Mealie connection status + connect/disconnect actions + sign out - /me.json kept for programmatic callers - Extracted _PALETTE_CSS shared between /me and /connect-mealie templates (forest #1f2d1f bg, panels #2d3a2a, meadow accents #6b8e5a/#88a87a, parchment text #f0e6cc/#ddd4ba, Cormorant Garamond serif headers) - /me also fetches the Mealie /api/users/self for the connected user so the page can show 'logged in as <username>, admin: yes/no' - Connect page polished with cancel button + autocomplete=off on the token input Strict palette: no purple, no neon. As locked.
This commit is contained in:
parent
d3369bb141
commit
b18ab1103d
1 changed files with 114 additions and 28 deletions
|
|
@ -160,13 +160,25 @@ def create_app() -> Flask:
|
|||
def me():
|
||||
u = session["user"]
|
||||
connected = db.get_user_mealie_token_blob(u["sub"]) is not None
|
||||
return jsonify(
|
||||
{
|
||||
"user": u,
|
||||
"mealie_connected": connected,
|
||||
}
|
||||
mealie_user = None
|
||||
if connected:
|
||||
client = current_user_mealie()
|
||||
if client:
|
||||
try:
|
||||
mealie_user = client.who_am_i()
|
||||
except Exception:
|
||||
mealie_user = None
|
||||
return render_template_string(
|
||||
ME_TEMPLATE, user=u, connected=connected, mealie_user=mealie_user, css=_PALETTE_CSS
|
||||
)
|
||||
|
||||
@app.get("/me.json")
|
||||
@require_session
|
||||
def me_json():
|
||||
u = session["user"]
|
||||
connected = db.get_user_mealie_token_blob(u["sub"]) is not None
|
||||
return jsonify({"user": u, "mealie_connected": connected})
|
||||
|
||||
# ---------- mealie connect flow --------------------------------------
|
||||
|
||||
@app.get("/connect-mealie")
|
||||
|
|
@ -177,6 +189,7 @@ def create_app() -> Flask:
|
|||
CONNECT_TEMPLATE,
|
||||
user=u,
|
||||
mealie_url=cfg.mealie_base_url,
|
||||
css=_PALETTE_CSS,
|
||||
)
|
||||
|
||||
@app.post("/connect-mealie")
|
||||
|
|
@ -234,36 +247,109 @@ def create_app() -> Flask:
|
|||
return app
|
||||
|
||||
|
||||
_PALETTE_CSS = """
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');
|
||||
* { box-sizing: border-box; }
|
||||
body { font-family: system-ui, -apple-system, sans-serif; background: #1f2d1f; color: #f0e6cc; max-width: 720px; margin: 0 auto; padding: 3em 1.5em; line-height: 1.65; }
|
||||
h1, h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; color: #88a87a; margin: 0 0 .2em 0; letter-spacing: 0.01em; }
|
||||
h1 { font-size: 2.6em; }
|
||||
h2 { font-size: 1.6em; color: #6b8e5a; margin-top: 1.6em; }
|
||||
.lede { color: #ddd4ba; font-size: 1.05em; }
|
||||
a { color: #88a87a; text-decoration: none; border-bottom: 1px dotted #4d5d3a; }
|
||||
a:hover { color: #ddd4ba; border-bottom-color: #88a87a; }
|
||||
.panel { background: #2d3a2a; border: 1px solid #3a4a35; padding: 1.2em 1.4em; margin: 1.4em 0; border-radius: 3px; }
|
||||
.panel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
|
||||
.muted { color: #6b8e5a; font-size: .9em; }
|
||||
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4em 1em; margin: .8em 0; }
|
||||
.kv dt { color: #6b8e5a; font-size: .9em; }
|
||||
.kv dd { margin: 0; color: #f0e6cc; font-family: ui-monospace, Menlo, monospace; font-size: .92em; word-break: break-all; }
|
||||
.btn { display: inline-block; padding: .55em 1.3em; background: #6b8e5a; color: #1f2d1f !important; border: none; font-weight: 600; cursor: pointer; font-size: .95em; border-bottom: none; }
|
||||
.btn:hover { background: #88a87a; color: #1f2d1f !important; }
|
||||
.btn-secondary { background: transparent; color: #88a87a !important; border: 1px solid #4d5d3a; }
|
||||
.btn-secondary:hover { background: #2d3a2a; color: #ddd4ba !important; border-color: #88a87a; }
|
||||
.btn-row { display: flex; gap: .8em; flex-wrap: wrap; align-items: center; }
|
||||
input[type=text] { width: 100%; padding: .65em; background: #2d3a2a; border: 1px solid #4d5d3a; color: #f0e6cc; font-family: ui-monospace, Menlo, monospace; font-size: .92em; }
|
||||
input[type=text]:focus { outline: none; border-color: #88a87a; }
|
||||
ol li, ul li { margin: .4em 0; }
|
||||
code { background: #1f2d1f; padding: .1em .45em; border: 1px solid #3a4a35; font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
|
||||
.status-ok { color: #88a87a; }
|
||||
.status-warn { color: #c9b27c; }
|
||||
.brand { color: #6b8e5a; font-family: 'Cormorant Garamond', serif; font-size: .95em; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .2em; }
|
||||
hr { border: none; border-top: 1px solid #3a4a35; margin: 2em 0; }
|
||||
"""
|
||||
|
||||
|
||||
ME_TEMPLATE = """<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Cauldron</title>
|
||||
<style>{{ css|safe }}</style>
|
||||
</head><body>
|
||||
<div class="brand">Cauldron</div>
|
||||
<h1>{{ user.name or user.email }}</h1>
|
||||
<p class="lede">Welcome back.</p>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Your account</h2>
|
||||
<dl class="kv">
|
||||
<dt>email</dt><dd>{{ user.email }}</dd>
|
||||
<dt>subject</dt><dd>{{ user.sub }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-row">
|
||||
<h2 style="margin-top:0">Mealie</h2>
|
||||
{% if connected %}<span class="status-ok">connected</span>{% else %}<span class="status-warn">not connected</span>{% endif %}
|
||||
</div>
|
||||
{% if connected and mealie_user %}
|
||||
<dl class="kv">
|
||||
<dt>logged in as</dt><dd>{{ mealie_user.username or mealie_user.email }}</dd>
|
||||
<dt>full name</dt><dd>{{ mealie_user.fullName or '—' }}</dd>
|
||||
<dt>admin</dt><dd>{{ 'yes' if mealie_user.admin else 'no' }}</dd>
|
||||
</dl>
|
||||
<form method="post" action="/disconnect-mealie" class="btn-row">
|
||||
<button class="btn btn-secondary" type="submit">Disconnect</button>
|
||||
<span class="muted">Revoking on Mealie's side also works.</span>
|
||||
</form>
|
||||
{% else %}
|
||||
<p>Connect your Mealie account so cauldron can act on your behalf — your recipes, your meal plan, your shopping list.</p>
|
||||
<p><a class="btn" href="/connect-mealie">Connect Mealie</a></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<form method="post" action="/logout">
|
||||
<button class="btn btn-secondary" type="submit">Sign out</button>
|
||||
</form>
|
||||
</body></html>
|
||||
"""
|
||||
|
||||
|
||||
CONNECT_TEMPLATE = """<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Connect Mealie — Cauldron</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; background: #1f2d1f; color: #f0e6cc; max-width: 640px; margin: 4em auto; padding: 0 1em; line-height: 1.6; }
|
||||
h1 { color: #88a87a; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 2.4em; margin-bottom: 0.2em; }
|
||||
.lede { color: #ddd4ba; }
|
||||
a { color: #88a87a; }
|
||||
input[type=text] { width: 100%; padding: 0.6em; background: #2d3a2a; border: 1px solid #4d5d3a; color: #f0e6cc; font-family: monospace; font-size: 0.9em; box-sizing: border-box; }
|
||||
button { padding: 0.6em 1.4em; background: #6b8e5a; color: #1f2d1f; border: none; font-weight: 600; cursor: pointer; }
|
||||
button:hover { background: #88a87a; }
|
||||
ol li { margin: 0.4em 0; }
|
||||
code { background: #2d3a2a; padding: 0.1em 0.4em; border-radius: 2px; }
|
||||
</style>
|
||||
<style>{{ css|safe }}</style>
|
||||
</head><body>
|
||||
<div class="brand">Cauldron</div>
|
||||
<h1>Connect your Mealie</h1>
|
||||
<p class="lede">Hi {{ user.name or user.email }}. Cauldron acts on your Mealie account using your own API token. One-time setup, ~30 seconds.</p>
|
||||
<p class="lede">Hi {{ user.name or user.email }}. Cauldron acts on Mealie using your own API token. One-time, ~30 seconds.</p>
|
||||
|
||||
<ol>
|
||||
<li>Open <a href="{{ mealie_url }}/group/api-tokens" target="_blank">Mealie → API Tokens</a></li>
|
||||
<li>Click <strong>New API Token</strong>, name it <code>cauldron</code>, integration <code>generic</code></li>
|
||||
<li>Copy the long token string</li>
|
||||
<li>Paste below and click Connect</li>
|
||||
</ol>
|
||||
<div class="panel">
|
||||
<ol>
|
||||
<li>Open <a href="{{ mealie_url }}/group/api-tokens" target="_blank" rel="noopener">Mealie → API Tokens</a></li>
|
||||
<li>Click <strong>New API Token</strong>, name it <code>cauldron</code>, integration <code>generic</code></li>
|
||||
<li>Copy the long token string</li>
|
||||
<li>Paste below and click Connect</li>
|
||||
</ol>
|
||||
|
||||
<form method="post" action="/connect-mealie">
|
||||
<p><input type="text" name="mealie_token" placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." required></p>
|
||||
<p><button type="submit">Connect</button></p>
|
||||
</form>
|
||||
<form method="post" action="/connect-mealie">
|
||||
<p><input type="text" name="mealie_token" placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." required autocomplete="off" autocapitalize="off" spellcheck="false"></p>
|
||||
<div class="btn-row">
|
||||
<button class="btn" type="submit">Connect</button>
|
||||
<a class="btn btn-secondary" href="/me">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p style="color: #6b8e5a; font-size: 0.9em; margin-top: 2em;">Stored encrypted at rest. Revoke anytime in Mealie's UI; cauldron will detect and re-prompt.</p>
|
||||
<p class="muted">Stored encrypted at rest with a Fernet key that lives only in cauldron's env. Revoke anytime in Mealie's UI — cauldron will detect and re-prompt.</p>
|
||||
</body></html>
|
||||
"""
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue