Dmytro Tkachenko
71 lines
4.1 KiB
HTML
71 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>FORGE Snow Sync — Settings</title>
|
|
<style>
|
|
:root { --p: #6366f1; --p-h: #4f46e5; --bg: #f8fafc; --sf: #fff; --bd: #e2e8f0; --tx: #0f172a; --mut: #64748b; }
|
|
* { box-sizing: border-box; margin: 0; }
|
|
body { font: 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--tx); padding: 40px 20px; }
|
|
.card { max-width: 460px; margin: 0 auto; background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 28px; box-shadow: 0 4px 12px rgba(15,23,42,.06); }
|
|
h1 { font-size: 18px; margin-bottom: 4px; letter-spacing: .04em; }
|
|
p.sub { color: var(--mut); font-size: 13px; margin-bottom: 22px; }
|
|
label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); margin: 16px 0 6px; }
|
|
input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 8px; font-size: 14px; color: var(--tx); outline: none; }
|
|
input:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
|
|
.hint { font-size: 12px; color: var(--mut); margin-top: 6px; }
|
|
.row { display: flex; gap: 10px; margin-top: 24px; }
|
|
button { flex: 1; height: 40px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
|
|
.save { background: var(--p); color: #fff; }
|
|
.save:hover { background: var(--p-h); }
|
|
.test { background: var(--sf); color: var(--tx); border: 1px solid var(--bd); }
|
|
.test:hover { background: var(--bg); }
|
|
.feedback { margin-top: 16px; padding: 10px 12px; border-radius: 8px; font-size: 13px; display: none; }
|
|
.feedback[data-state="ok"] { display: block; background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
|
|
.feedback[data-state="error"] { display: block; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>❄ FORGE Snow Sync</h1>
|
|
<p class="sub">Point the extension at your FORGE server and paste a sync token.</p>
|
|
|
|
<form id="form">
|
|
<label for="server-url">Server URL</label>
|
|
<input id="server-url" type="url" placeholder="https://forge.mycloud.dp.ua" autocomplete="off" />
|
|
<div class="hint">Where FORGE is reachable. No trailing slash needed.</div>
|
|
|
|
<label for="api-token">Sync token</label>
|
|
<input id="api-token" type="password" placeholder="fg_…" autocomplete="off" />
|
|
<div class="hint">Mint one in FORGE → Admin → API Tokens (or <code>npx tsx server/mint-token.ts</code>).</div>
|
|
|
|
<hr style="border:none;border-top:1px solid var(--bd);margin:24px 0 4px" />
|
|
<p class="sub" style="margin:12px 0 0">Jira (optional) — syncs status/links onto matching RITM tickets.</p>
|
|
|
|
<label for="jira-url">Jira base URL</label>
|
|
<input id="jira-url" type="url" placeholder="https://support.dataart.com" autocomplete="off" />
|
|
<div class="hint">Your Jira site (Cloud or self-hosted). Issue links use <code><baseUrl>/browse/<KEY></code>.</div>
|
|
|
|
<label for="jira-email">Jira email <span style="text-transform:none;font-weight:400">(Cloud only — leave blank for a PAT)</span></label>
|
|
<input id="jira-email" type="email" placeholder="you@company.com" autocomplete="off" />
|
|
|
|
<label for="jira-token">Jira API token / PAT</label>
|
|
<input id="jira-token" type="password" placeholder="ATATT… or a Personal Access Token" autocomplete="off" />
|
|
<div class="hint">With an email → Basic auth (Jira Cloud). Without → Bearer PAT (Jira Server/DC).</div>
|
|
|
|
<label for="jira-boards">Board ID(s)</label>
|
|
<input id="jira-boards" type="text" placeholder="13793" autocomplete="off" />
|
|
<div class="hint">Comma-separated agile board ids to pull. Leave blank to skip Jira sync.</div>
|
|
|
|
<div class="row">
|
|
<button type="button" class="test" id="test">Test connection</button>
|
|
<button type="submit" class="save">Save</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="feedback" id="feedback"></div>
|
|
</div>
|
|
<script src="options.js"></script>
|
|
</body>
|
|
</html>
|