182 lines
8.4 KiB
HTML
182 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>AP.Mail</title>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||
<link href="apmail.css" rel="stylesheet" type="text/css" media="all" />
|
||
<script type="module">
|
||
import {UI} from './render.js'
|
||
window.UI = UI
|
||
</script>
|
||
</head>
|
||
<body onload="UI.checkConnection();">
|
||
<!-- Navigation column -->
|
||
<nav id="tab-bar" class="column">
|
||
<!-- Send page tab -->
|
||
<input type="radio" id="send-selector" class="page" name="page" value="send" checked onchange="UI.setContext('send-message')" />
|
||
<label for="send-selector" class="page-label" id="send-selector-label">Write Note</label>
|
||
<!-- Inbox tab -->
|
||
<input type="radio" id="inbox-selector" class="page" name="page" value="inbox" onchange="UI.setContext('my-inbox')" />
|
||
<label for="inbox-selector" class="page-label" id="inbox-selector-label">My Inbox</label>
|
||
<!-- Outbox tab -->
|
||
<input type="radio" id="outbox-selector" class="page" name="page" value="outbox" onchange="UI.setContext('my-outbox')" />
|
||
<label for="outbox-selector" class="page-label" id="outbox-selector-label">My Outbox</label>
|
||
<!-- Profile -->
|
||
<input type="radio" id="profile-selector" class="page" name="page" value="profile" onchange="UI.setContext('my-profile')" />
|
||
<label for="profile-selector" class="page-label" id="profile-selector-label">My Profile</label>
|
||
<!-- Lookup user box -->
|
||
<nav class="page-label">
|
||
<label for="lookup-actor" id="lookup-actor-label">Lookup Actor</label>
|
||
<input id="lookup-actor" type="text" placeholder="name@server" />
|
||
<button onclick="UI.lookupActor()">Search</button>
|
||
</nav>
|
||
<!-- To display errors -->
|
||
<section id="error">
|
||
<span id="content-error"></span><br/>
|
||
<button onclick="UI.clearError();">×</button>
|
||
</section>
|
||
</nav>
|
||
<!-- Timelines -->
|
||
<section id="timeline" style="display:none;">
|
||
<section id="timeline-column" class="column">
|
||
<section class="timeline-prev-next">
|
||
<button id="timeline-prev-top" onclick="UI.prevTimeline();">Previous</button>
|
||
<button id="timeline-next-top" onclick="UI.nextTimeline();">Next</button>
|
||
</section>
|
||
<section id="timeline-data"></section>
|
||
</section>
|
||
</section>
|
||
<!-- Content pages -->
|
||
<section id="main-content" class="column">
|
||
<!-- Account selection page -->
|
||
<main id="select-user" style="display:none;">
|
||
<h2>Connection</h2>
|
||
Indicate the account to connect to. <br/>
|
||
<input id="connect-username" type="text" placeholder="name@server" pattern=".*@.*" required /><br/>
|
||
<button onclick="UI.selectUser()">Next</button>
|
||
</main>
|
||
<!-- Password page -->
|
||
<main id="ask-password" style="display:none;">
|
||
<h2>Password</h2>
|
||
<section id="ask-password-user-info">
|
||
<section class="actor-display">
|
||
<span id="ask-password-user-icon"/></span>
|
||
<p style="display:inline-block;">
|
||
<strong><span id="ask-password-user-display-name"></span></strong><br/>
|
||
<a id="ask-password-user-address"></a>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
Enter the password for this account. <br/>
|
||
<input id="connect-password" type="password" placeholder="password" /><br/>
|
||
<button onclick="UI.showPage('select-user', undefined)">Back</button>
|
||
<button onclick="UI.connectUser()">Connect</button>
|
||
</main>
|
||
<!-- Profile page -->
|
||
<main id="show-profile" style="display:none;">
|
||
<section>
|
||
<span id="profile-icon"></span>
|
||
<p style="display:inline-block;">
|
||
<span id="profile-display-name"></span><br/>
|
||
<a id="profile-address"></a><br/>
|
||
<span id="profile-type"></span>
|
||
</p>
|
||
</section>
|
||
<section class="actor-content">
|
||
<p id="profile-summary">
|
||
</p>
|
||
</section>
|
||
<details>
|
||
<summary>Show source</summary>
|
||
<p id="profile-code-source" class="code-source"></p>
|
||
</details>
|
||
<section id="profile-controls-connected">
|
||
<button onclick="UI.disconnectUser();">Disconnect</button>
|
||
</section>
|
||
</main>
|
||
<!-- Show Activity page -->
|
||
<main id="show-activity" style="display:none;">
|
||
<!-- Activity info -->
|
||
<details>
|
||
<summary><h4 style="display:inline;"><span id="activity-type"></span> Activity</h4></summary>
|
||
<p>Published: <span id="activity-published"></span></p>
|
||
<h4>Actor</h4>
|
||
<span id="activity-actor-icon"></span>
|
||
<p style="display:inline-block;">
|
||
<span id="activity-actor-display-name"></span><br/>
|
||
<a id="activity-actor-address"></a>
|
||
</p>
|
||
<h4>Audience</h4>
|
||
<p>To: <ul id="activity-to" class="recipient-list"></ul></p>
|
||
<p>Cc: <ul id="activity-cc" class="recipient-list"></ul></p>
|
||
<details>
|
||
<summary>Show source</summary>
|
||
<p id="activity-code-source" class="code-source"></p>
|
||
</details>
|
||
</details>
|
||
<!-- Object info -->
|
||
<section id="activity-object">
|
||
<h4><span id="activity-object-type"></span> Object</h4>
|
||
<p>Published: <span id="activity-object-published"></span></p>
|
||
<section>
|
||
Author:<br/>
|
||
<span id="activity-object-actor-icon"></span>
|
||
<p style="display:inline-block;">
|
||
<span id="activity-object-actor-display-name"></span><br/>
|
||
<a id="activity-object-actor-address"></a>
|
||
</p>
|
||
</section>
|
||
<details>
|
||
<summary>Audience</summary>
|
||
<p>To: <ul id="activity-object-to" class="recipient-list"></ul></p>
|
||
<p>Cc: <ul id="activity-object-cc" class="recipient-list"></ul></p>
|
||
</details>
|
||
<section class="activity-object-content">
|
||
<h5><span id="activity-object-name"></span></h5>
|
||
<em><p id="activity-object-summary"><p></em>
|
||
<p id="activity-object-content"><p>
|
||
</section>
|
||
<details>
|
||
<summary>Attachments (<span id="activity-object-attachments-number"></span>)</summary>
|
||
<ul id="activity-object-attachments" class="attachments"></ul>
|
||
</details>
|
||
<details>
|
||
<summary>Show source</summary>
|
||
<p id="activity-object-code-source" class="code-source"></p>
|
||
</details>
|
||
</section>
|
||
</main>
|
||
<!-- Send message page -->
|
||
<main id="send-message" style="display:none;">
|
||
<h4>Audience</h4>
|
||
<label for="send-message-public-visibility">General visibility</label>
|
||
<select id="send-message-public-visibility" onchange="UI.updateSendVisibility()">
|
||
<option value="to">Public (to), displayed in local/global timelines</option>
|
||
<option value="cc">Public (cc), hidden from local/global timelines</option>
|
||
<option value="non">Not public</option>
|
||
</select><br/>
|
||
<label for="send-message-follower-visibility">Follower's visibility</label>
|
||
<select id="send-message-follower-visibility" onchange="UI.updateSendVisibility()">
|
||
<option value="to">Public (to)</option>
|
||
<option value="cc">Public (cc)</option>
|
||
<option value="non">Not sent to followers</option>
|
||
</select><br/>
|
||
<label for="send-message-to-recipient">To</label>
|
||
<ul id="send-message-to" class="recipient-list"></ul>
|
||
<input id="send-message-to-recipient" type="text" placeholder="user@instance" size="40" />
|
||
<button onclick="UI.addToRecipient()">Add</button><br/>
|
||
<label for="send-message-cc-recipient">Cc</label>
|
||
<ul id="send-message-cc" class="recipient-list"></ul>
|
||
<input id="send-message-cc-recipient" type="text" placeholder="user@instance" size="40" />
|
||
<button onclick="UI.addCcRecipient()">Add</button><br/>
|
||
<section id="send-message-recipient-error"></section>
|
||
<h4>Message</h4>
|
||
<input id="send-message-subject" type="text" onchange="UI.updateSendContent()" size="80" placeholder="Summary (optional)"/> <br/>
|
||
<textarea id="send-message-content" rows="20" cols="80" placeholder="What do you want to say ?" onchange="UI.updateSendContent()"></textarea> <br/>
|
||
<button onclick="UI.sendMessage()">Send</button>
|
||
</main>
|
||
</section>
|
||
</body>
|
||
</html>
|