Initial commit
This commit is contained in:
Joey Kimsey
149
src/renderer/index.html
Normal file
149
src/renderer/index.html
Normal file
@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; style-src 'self'; script-src 'self'; img-src 'self' data:;"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Capsule</title>
|
||||
<link rel="stylesheet" href="./src/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<span class="brand-mark" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="brand-name">Capsule</p>
|
||||
<p class="brand-tag">The Tempus Project</p>
|
||||
</div>
|
||||
</div>
|
||||
<p id="top-status" class="top-status" hidden></p>
|
||||
</header>
|
||||
|
||||
<main class="stage">
|
||||
<section id="view-login" class="view" hidden>
|
||||
<div class="card">
|
||||
<h1>Connect a site</h1>
|
||||
<p class="lede">
|
||||
Sign in to any Tempus Project install. Capsule talks to that site<74>s API and
|
||||
keeps the session on this machine.
|
||||
</p>
|
||||
|
||||
<form id="login-form" class="form">
|
||||
<label class="field">
|
||||
<span>Site URL</span>
|
||||
<input
|
||||
id="login-site"
|
||||
name="siteUrl"
|
||||
type="url"
|
||||
autocomplete="url"
|
||||
placeholder="https://example.com"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Username</span>
|
||||
<input id="login-username" name="username" type="text" autocomplete="username" required />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Password</span>
|
||||
<input
|
||||
id="login-password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<p id="login-error" class="error" hidden></p>
|
||||
<button id="login-submit" class="btn btn-primary" type="submit">Sign in</button>
|
||||
</form>
|
||||
|
||||
<details id="token-panel" class="token-panel">
|
||||
<summary>Use an API token instead</summary>
|
||||
<form id="token-form" class="form">
|
||||
<p class="hint">
|
||||
Paste a personal or app token from Admin ? Tokens. Username is optional and
|
||||
only used to confirm the token against <code>api/users/find</code>.
|
||||
</p>
|
||||
<label class="field">
|
||||
<span>Site URL</span>
|
||||
<input
|
||||
id="token-site"
|
||||
name="siteUrl"
|
||||
type="url"
|
||||
autocomplete="url"
|
||||
placeholder="https://example.com"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>API token</span>
|
||||
<input id="token-value" name="token" type="password" autocomplete="off" required />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Username <em>(optional)</em></span>
|
||||
<input id="token-username" name="username" type="text" autocomplete="username" />
|
||||
</label>
|
||||
<p id="token-error" class="error" hidden></p>
|
||||
<button id="token-submit" class="btn btn-secondary" type="submit">
|
||||
Connect with token
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="view-home" class="view" hidden>
|
||||
<div class="home-grid">
|
||||
<article class="card identity">
|
||||
<p class="eyebrow">Connected</p>
|
||||
<h1 id="home-username">Signed in</h1>
|
||||
<p id="home-site" class="site-line"></p>
|
||||
<dl class="meta">
|
||||
<div>
|
||||
<dt>User ID</dt>
|
||||
<dd id="home-userid"><EFBFBD></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Auth</dt>
|
||||
<dd id="home-method"><EFBFBD></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>API</dt>
|
||||
<dd id="home-api"><EFBFBD></dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p id="home-note" class="hint" hidden></p>
|
||||
<div class="actions">
|
||||
<button id="logout-button" class="btn btn-secondary" type="button">Sign out</button>
|
||||
<a id="open-site" class="btn btn-ghost" href="#" target="_blank" rel="noreferrer">
|
||||
Open site
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card workspace">
|
||||
<p class="eyebrow">Workspace</p>
|
||||
<h2>Desktop tools land here</h2>
|
||||
<p class="lede">
|
||||
This area will host the full desktop experience for the plugins enabled on
|
||||
the connected site. The current API can sign you in, refresh a token, and
|
||||
look up a user id. Feature screens wait on those API expansions.
|
||||
</p>
|
||||
<ul class="plan">
|
||||
<li>Talk to a site of your choice with a user login or an API token</li>
|
||||
<li>Keep the token in the OS keychain, not in the renderer</li>
|
||||
<li>Load plugin-backed tools as the HTTP API grows</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script type="module" src="./src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user