├── README.md
├── focus-and-reply.js
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # focus-reply-fastmail
2 | a hacky focus & reply feature for fastmail
3 | 


--------------------------------------------------------------------------------
/focus-and-reply.js:
--------------------------------------------------------------------------------
  1 | function restore() {
  2 |     let auth = JSON.parse(localStorage.getItem('auth'));
  3 |     app.username = auth.username;
  4 |     app.password = auth.password;
  5 | }
  6 | 
  7 | function make_jmap_query(x) {
  8 |     return {
  9 |         "using": [ "urn:ietf:params:jmap:core", "urn:ietf:params:jmap:mail" ],
 10 |         "methodCalls": x
 11 |     }
 12 | }
 13 | 
 14 | async function get_mailbox_id(accountId) {
 15 |     let mbox_query = make_jmap_query([[ "Mailbox/get", {
 16 |         "accountId": accountId,
 17 |         "ids": null
 18 |     }, "0" ]]);
 19 |     let data = await (await fetch('https://jmap.fastmail.com/api/', {
 20 |         method: 'POST',
 21 |         headers: {
 22 |             "Content-Type": "application/json",
 23 |             "Authorization": "Basic " + authBasic()
 24 |         },
 25 |         body: JSON.stringify(mbox_query)
 26 |     })).json();
 27 |     for (mailbox of data.methodResponses[0][1]['list']) {
 28 |         if (mailbox.name.toLowerCase() === "reply later") {
 29 |             return mailbox.id;
 30 |         }
 31 |     }
 32 | }
 33 | 
 34 | async function emails_query(accountId) {
 35 | 
 36 |     let mailbox_id = await get_mailbox_id(accountId);
 37 |     return [[ "Email/query", {
 38 |         "accountId": accountId,
 39 |         // todo: actually do the reply later thing
 40 |         "filter": { "inMailbox": mailbox_id },
 41 |         "sort": [{ "property": "receivedAt", "isAscending": false }],
 42 |         "collapseThreads": true,
 43 |         "position": 0,
 44 |         "limit": 20,
 45 |         "calculateTotal": true
 46 |     }, "t0" ],
 47 |         [ "Email/get", {
 48 |             "accountId": accountId,
 49 |             "#ids": {
 50 |                 "resultOf": "t0",
 51 |                 "name": "Email/query",
 52 |                 "path": "/ids"
 53 |             },
 54 |             "properties": [ "threadId" ]
 55 |         }, "t1" ],
 56 |         [ "Thread/get", {
 57 |             "accountId": accountId,
 58 |             "#ids": {
 59 |                 "resultOf": "t1",
 60 |                 "name": "Email/get",
 61 |                 "path": "/list/*/threadId"
 62 |             }
 63 |         }, "t2" ],
 64 |         [ "Email/get", {
 65 |             "accountId": accountId,
 66 |             "fetchTextBodyValues": true,
 67 |             "#ids": {
 68 |                 "resultOf": "t2",
 69 |                 "name": "Thread/get",
 70 |                 "path": "/list/*/emailIds"
 71 |             },
 72 |             "properties": [ "from", "receivedAt", "subject", "bodyValues", "threadId"]
 73 |         }, "t3" ]]
 74 | }
 75 | 
 76 | function groupEmails(emails) {
 77 |     let threads = emails.reduce((groups, item) => ({
 78 |         ...groups,
 79 |         [item.threadId]: [...(groups[item.threadId] || []), item]
 80 |     }), {});
 81 | 
 82 |     let ret = [];
 83 |     for (id in threads) {
 84 |         let thread = threads[id];
 85 |         let last = thread[thread.length - 1];
 86 |         ret.push(last);
 87 |     }
 88 |     return ret;
 89 | }
 90 | 
 91 | function authBasic() {
 92 | 
 93 |     return window.btoa(app.username + ':' + app.password);
 94 | }
 95 | 
 96 | async function get_emails() {
 97 |     localStorage.setItem('auth', JSON.stringify({
 98 |         username: app.username,
 99 |         password: app.password,
100 |     }));
101 |     let session = await (await fetch('https://jmap.fastmail.com/session', {
102 |         headers: {
103 |             "Authorization": "Basic " + authBasic()
104 |         }
105 |     })).json();
106 |     let accountId = session['primaryAccounts']['urn:ietf:params:jmap:mail'];
107 |     let query = make_jmap_query(await emails_query(accountId));
108 | 
109 |     let data = await (await fetch('https://jmap.fastmail.com/api/', {
110 |         method: 'POST',
111 |         headers: {
112 |             "Content-Type": "application/json",
113 |             "Authorization": "Basic " + authBasic()
114 |         },
115 |         body: JSON.stringify(query)
116 |     })).json();
117 |     if (data.methodResponses[0][0] === 'error') {
118 |         return
119 |     }
120 |     app.loggedIn = true;
121 |     let emails = data['methodResponses'][3][1]['list'];
122 |     app.emails = groupEmails(emails);
123 | }
124 | 
125 | async function login() {
126 |     app.loading = true;
127 |     get_emails().then(() => {
128 |         app.loading = false;
129 |         setTimeout(loadTextAreas, 100);
130 |     }).catch(err => {
131 |         console.log(err);
132 |         app.loading = false;
133 |     });
134 | }
135 | 
136 | var app = new Vue({
137 |     el: '#app',
138 |     data: {
139 |         message: 'Hello Vue!',
140 |         username: null,
141 |         password: null,
142 |         loading: false,
143 |         loggedIn: false,
144 |         emails: []
145 |     },
146 |     methods: {
147 |         login: login,
148 |         logout: function() {
149 |             app.username = null;
150 |             app.password = null;
151 |             app.loggedIn = false;
152 |             localStorage.clear();
153 |         },
154 |         fix_email: function(email) {
155 |             return Object.values(email.bodyValues)[0].value;
156 |         },
157 |     }
158 | })
159 | restore();
160 | function saveTextAreas() {
161 |     let drafts = {};
162 |     for (x of document.querySelectorAll('textarea')) {
163 |         if (x.value) {
164 |             drafts[x.id] = x.value;
165 |         }
166 |     }
167 |     if (Object.keys(drafts).length > 0) {
168 |         localStorage.setItem('drafts', JSON.stringify(drafts));
169 |     }
170 | }
171 | function loadTextAreas() {
172 |     let drafts = JSON.parse(localStorage.getItem('drafts') || '{}');
173 |     for (x of document.querySelectorAll('textarea')) {
174 |         let saved = drafts[x.id];
175 |         if (saved) {
176 |             x.value = saved;
177 |         }
178 |     }
179 | }
180 | setInterval(saveTextAreas, 1000);
181 | 
182 | if(app.username && app.password) {
183 |     login();
184 | }
185 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">.
 5 |         <title>focus and reply</title>
 6 |         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
 8 |         <link rel="stylesheet" href="style.css"> 
 9 |         <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
10 |         <!-- todo: replace with production version -->
11 |     </head> 
12 | <body>
13 | <div id="app">
14 |     <h1 class="pt-4 text-3xl text-bold text-center"> focus and reply </h1>
15 |     <div v-if="loading">
16 |         <div class="lds-dual-ring m-auto" ></div>
17 |     </div>
18 |     <div v-else-if="loggedIn">
19 |         <button v-on:click.prevent="logout" class="absolute top-0 right-0 rounded my-3 mx-8 p-3 bg-green-700 text-white">Log out</button>
20 |         <div v-for="email in emails" class="later leading-6">
21 |             <h2 class="subject text-2xl pt-4 font-bold">{{email['subject']}}</h2>
22 |             <div style="display: flex">
23 |                 <div class="left" style="width: 50%">
24 |                     <h3 class="text-xl font-bold pt-2 pb-4">{{email['from'][0]['name']}}</h3>
25 |                     <pre class="email">{{fix_email(email)}}</pre>
26 |                 </div>
27 |                 <div class="right" style="width: 50%">
28 |                     <textarea class="p-4" :name="email.id" :id ="email.id"> </textarea>
29 |                 </div>
30 |             </div>
31 |         </div>
32 |     </div>
33 |     <div v-else>
34 |         <div id="login">
35 |             <div style="padding: 1em 0">Login to your Fastmail account:</div>
36 |             <form>
37 |                 <input v-model="username" placeholder="Username" ></input>
38 |                 <input type="password" v-model="password" placeholder="App password"></input>
39 |                 <button class="text-white bg-blue-700 rounded px-3 py-1" v-on:click.prevent="login">Login</button>
40 |             </form>
41 | 
42 |             <div class="pt-4">
43 |                 <h2 class="font-bold py-3"> How to get your app password </h2>
44 |                 You can get an app password in your Fastmail settings, under "Password &amp; Security".
45 |             </div>
46 |             <div class="pt-4">
47 |                 <h2 class="font-bold py-3"> Security </h2>
48 |                 <p>
49 |                 All your authentication data is stored in your browser's local
50 |                 storage, this app has no server code at all.
51 |                 </p>
52 |             </div>
53 |         </div>
54 |     </div>
55 | </div>
56 | 
57 | <script src="focus-and-reply.js"></script>
58 | </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Inter;
 3 | }
 4 | .email {
 5 |     max-height: 300px;
 6 |     overflow: scroll;
 7 |     margin-right: 3em;
 8 |     line-height: 1.6;
 9 |     overflow-x: auto;
10 |     white-space: pre-wrap;
11 |     white-space: -pre-wrap;
12 |     white-space: -moz-pre-wrap;
13 |     white-space: -o-pre-wrap;
14 |     word-wrap: break-word;
15 |     font-family: Inter;
16 | }
17 | 
18 | .later {
19 |     background-color: white;
20 |     border-radius: 30px;
21 |     margin: 3em;
22 |     padding: 1em 2em;
23 |     box-shadow: 5px 5px 20px 10px #eee;
24 | }
25 | 
26 | textarea {
27 |     height: 300px;
28 |     border-radius: 20px;
29 |     border: 1px solid #ccc;
30 |     width: 100%;
31 |     font-family: Inter;
32 |     font-size: 1em;
33 |     padding: 1.5em;
34 |         resize: none;
35 | }
36 | 
37 | 
38 | #login {
39 |     width: 700px;
40 |     max-width: 100%;
41 |     margin: 0 auto;
42 | }
43 | 
44 | #login input {
45 |     display: block;
46 |     border: 1px solid #999;
47 |     border-radius: .5em;
48 |     margin: .5em 0;
49 |     padding: .3em;
50 | }
51 | 
52 | /** loading spinner **/
53 | 
54 | .lds-dual-ring {
55 |   display: block;
56 |   margin: auto;
57 |   padding-top: 50px;
58 |   width: 80px;
59 |   height: 80px;
60 | }
61 | .lds-dual-ring:after {
62 |   content: " ";
63 |   display: block;
64 |   width: 64px;
65 |   height: 64px;
66 |   margin: 8px;
67 |   border-radius: 50%;
68 |   border: 6px solid #fff;
69 |   border-color: #000 transparent #000 transparent;
70 |   animation: lds-dual-ring 1.2s linear infinite;
71 | }
72 | @keyframes lds-dual-ring {
73 |   0% {
74 |     transform: rotate(0deg);
75 |   }
76 |   100% {
77 |     transform: rotate(360deg);
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------