Files
intervalsicu-mcp-ui/src/intervalsicu_mcp_ui/templates/account.html
T
Chris Farhood f13d70b45f
build-image / test (push) Successful in 15s
build-image / build (push) Successful in 17s
portal: copy-URL button + step-by-step connector setup
2026-07-07 07:11:46 -04:00

72 lines
3.2 KiB
HTML

{% extends "base.html" %}
{% block content %}
<h1>My account</h1>
<p class="muted">{{ user.email }}</p>
{% if record and record.enabled %}
<div class="banner ok">✓ Your account is <strong>approved</strong>. Once your credentials are set below, the MCP connector will work.</div>
{% else %}
<div class="banner warn">⏳ Your account is <strong>pending admin approval</strong>. You can save your credentials now — they'll take effect once an admin approves you.</div>
{% endif %}
{% if flash %}
<div class="banner {{ 'ok' if flash_ok else 'err' }}">{{ flash }}</div>
{% endif %}
<h2>Intervals.icu credentials</h2>
<p>
Athlete ID: <code>{{ record.athlete_id if record and record.athlete_id else '— not set —' }}</code><br>
API key: {% if record and record.api_key_enc %}<code>•••••••• set</code>{% else %}<code>— not set —</code>{% endif %}
</p>
<p class="muted">Find these in Intervals.icu → Settings → Developer. Your athlete ID looks like <code>i123456</code>.</p>
<form method="post" action="{{ base }}/account">
<label for="athlete_id">Athlete ID</label>
<input type="text" id="athlete_id" name="athlete_id" value="{{ record.athlete_id or '' if record else '' }}" placeholder="i123456" required>
<label for="api_key">API key</label>
<input type="password" id="api_key" name="api_key" placeholder="paste your API key" required autocomplete="off">
<button type="submit">Save &amp; test connection</button>
</form>
<h2>Connect Claude</h2>
<p>Add a custom connector in Claude pointing at this URL:</p>
<p>
<code id="mcp-url">{{ mcp_url }}</code>
<button type="button" class="secondary" style="margin-top:0;padding:.2rem .6rem;font-size:.85rem"
onclick="copyMcpUrl(this)">Copy</button>
</p>
<p class="banner warn">
<strong>Name the connector without a dot.</strong> Use something like
<code>intervals</code> &mdash; <em>not</em> <code>intervals.icu</code>.
Claude Desktop and mobile currently don&rsquo;t support a <code>.</code> in the
connector name, and it will stop the tools from loading.
</p>
<p>Step by step:</p>
<ol>
<li>In Claude, open <strong>Settings &rarr; Connectors</strong>
(on claude.ai this may be <strong>Customize &rarr; Connectors</strong>).</li>
<li>Click <strong>Add custom connector</strong>.</li>
<li><strong>Name</strong> it <code>intervals</code> &mdash; letters only, <strong>no dot</strong>.</li>
<li><strong>URL</strong>: paste the address above (use <strong>Copy</strong>).</li>
<li>Click <strong>Add</strong>, then sign in with Google when prompted.</li>
</ol>
<script>
function copyMcpUrl(btn) {
const url = document.getElementById("mcp-url").textContent.trim();
const done = () => {
const orig = btn.textContent;
btn.textContent = "Copied ✓";
setTimeout(() => { btn.textContent = orig; }, 1500);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(done).catch(() => prompt("Copy this URL:", url));
} else {
prompt("Copy this URL:", url);
}
}
</script>
{% endblock %}