├── README.md ├── style.css ├── index.html └── focus-and-reply.js /README.md: -------------------------------------------------------------------------------- 1 | # focus-reply-fastmail 2 | a hacky focus & reply feature for fastmail 3 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | . 5 | focus and reply 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

focus and reply

15 |
16 |
17 |
18 |
19 | 20 |
21 |

{{email['subject']}}

22 |
23 |
24 |

{{email['from'][0]['name']}}

25 | 26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
Login to your Fastmail account:
36 |
37 | 38 | 39 | 40 |
41 | 42 |
43 |

How to get your app password

44 | You can get an app password in your Fastmail settings, under "Password & Security". 45 |
46 |
47 |

Security

48 |

49 | All your authentication data is stored in your browser's local 50 | storage, this app has no server code at all. 51 |

52 |
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------