2020-03-25 13:37:11 +01:00
|
|
|
|
<!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" />
|
2021-05-24 13:48:22 +02:00
|
|
|
|
<script type="module">
|
|
|
|
|
import {UI} from './render.js'
|
|
|
|
|
window.UI = UI
|
|
|
|
|
</script>
|
2020-03-25 13:37:11 +01:00
|
|
|
|
</head>
|
2020-03-31 17:27:05 +02:00
|
|
|
|
<body onload="UI.checkConnection();">
|
2020-03-31 13:33:27 +02:00
|
|
|
|
<!-- Navigation column -->
|
|
|
|
|
<nav id="tab-bar" class="column">
|
2020-03-25 13:37:11 +01:00
|
|
|
|
<!-- Send page tab -->
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<input type="radio" id="send-selector" class="page" name="page" value="send" checked onchange="UI.setContext('send-message')" />
|
2020-03-31 13:33:27 +02:00
|
|
|
|
<label for="send-selector" class="page-label" id="send-selector-label">Write Note</label>
|
2020-03-25 13:37:11 +01:00
|
|
|
|
<!-- Inbox tab -->
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<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>
|
2020-03-25 13:37:11 +01:00
|
|
|
|
<!-- Outbox tab -->
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<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>
|
2020-03-31 13:33:27 +02:00
|
|
|
|
<input id="lookup-actor" type="text" placeholder="name@server" />
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<button onclick="UI.lookupActor()">Search</button>
|
|
|
|
|
</nav>
|
2020-03-31 13:33:27 +02:00
|
|
|
|
<!-- To display errors -->
|
|
|
|
|
<section id="error">
|
|
|
|
|
<span id="content-error"></span><br/>
|
|
|
|
|
<button onclick="UI.clearError();">×</button>
|
|
|
|
|
</section>
|
2020-03-25 13:37:11 +01:00
|
|
|
|
</nav>
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<!-- Timelines -->
|
|
|
|
|
<section id="timeline" style="display:none;">
|
2020-03-31 13:33:27 +02:00
|
|
|
|
<section id="timeline-column" class="column">
|
2020-03-30 10:34:40 +02:00
|
|
|
|
<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>
|
2020-03-27 17:08:59 +01:00
|
|
|
|
</section>
|
|
|
|
|
<!-- Content pages -->
|
2020-03-31 13:33:27 +02:00
|
|
|
|
<section id="main-content" class="column">
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<!-- 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/>
|
2020-03-31 16:00:13 +02:00
|
|
|
|
<a id="profile-address"></a><br/>
|
|
|
|
|
<span id="profile-type"></span>
|
2020-03-27 17:08:59 +01:00
|
|
|
|
</p>
|
|
|
|
|
</section>
|
2020-03-31 16:00:13 +02:00
|
|
|
|
<section class="actor-content">
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<p id="profile-summary">
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
<details>
|
|
|
|
|
<summary>Show source</summary>
|
2020-03-31 16:00:13 +02:00
|
|
|
|
<p id="profile-code-source" class="code-source"></p>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
</details>
|
2020-03-31 16:00:13 +02:00
|
|
|
|
<section id="profile-controls-connected">
|
|
|
|
|
<button onclick="UI.disconnectUser();">Disconnect</button>
|
|
|
|
|
</section>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
</main>
|
|
|
|
|
<!-- Show Activity page -->
|
|
|
|
|
<main id="show-activity" style="display:none;">
|
2020-03-30 17:51:02 +02:00
|
|
|
|
<!-- Activity info -->
|
2020-03-30 12:51:38 +02:00
|
|
|
|
<details>
|
2020-03-30 17:51:02 +02:00
|
|
|
|
<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>
|
2020-03-31 16:00:13 +02:00
|
|
|
|
<p id="activity-code-source" class="code-source"></p>
|
2020-03-30 17:51:02 +02:00
|
|
|
|
</details>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
</details>
|
2020-03-30 17:51:02 +02:00
|
|
|
|
<!-- Object info -->
|
2020-03-30 12:51:38 +02:00
|
|
|
|
<section id="activity-object">
|
2020-03-30 17:51:02 +02:00
|
|
|
|
<h4><span id="activity-object-type"></span> Object</h4>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
<p>Published: <span id="activity-object-published"></span></p>
|
|
|
|
|
<section>
|
2020-03-30 17:51:02 +02:00
|
|
|
|
Author:<br/>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
<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>
|
2020-03-30 17:51:02 +02:00
|
|
|
|
<section class="activity-object-content">
|
2020-04-02 12:12:32 +02:00
|
|
|
|
<h5><span id="activity-object-name"></span></h5>
|
2020-03-30 17:51:02 +02:00
|
|
|
|
<em><p id="activity-object-summary"><p></em>
|
|
|
|
|
<p id="activity-object-content"><p>
|
|
|
|
|
</section>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
<details>
|
2020-03-31 17:27:05 +02:00
|
|
|
|
<summary>Attachments (<span id="activity-object-attachments-number"></span>)</summary>
|
2020-03-30 12:51:38 +02:00
|
|
|
|
<ul id="activity-object-attachments" class="attachments"></ul>
|
|
|
|
|
</details>
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<details>
|
|
|
|
|
<summary>Show source</summary>
|
2020-03-31 16:00:13 +02:00
|
|
|
|
<p id="activity-object-code-source" class="code-source"></p>
|
2020-03-27 17:08:59 +01:00
|
|
|
|
</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>
|
2020-03-31 16:00:13 +02:00
|
|
|
|
<input id="send-message-subject" type="text" onchange="UI.updateSendContent()" size="80" placeholder="Summary (optional)"/> <br/>
|
2020-03-27 17:08:59 +01:00
|
|
|
|
<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>
|
2020-03-25 13:37:11 +01:00
|
|
|
|
</body>
|
|
|
|
|
</html>
|