\nTaskboard Live
Total.js reference\nPrivate tasks with attachments, updated live for the people who may see them.
\n\n\n\n\n```\n\n```js public/app.js\n(function() {\n\tvar user = null;\n\tvar csrf = '';\n\tvar busy = false;\n\tvar socket = null;\n\tvar byid = id => document.getElementById(id);\n\tasync function request(path, method, body) {\n\t\tvar form = body instanceof FormData;\n\t\tvar headers = { 'x-csrf-token': csrf };\n\t\tif (!form) headers['content-type'] = 'application/json';\n\t\tvar response = await fetch(path, { method: method || 'GET', credentials: 'same-origin', headers: headers, body: body === undefined ? undefined : form ? body : JSON.stringify(body) });\n\t\tvar data = await response.json().catch(() => null);\n\t\tif (!response.ok) {\n\t\t\tif (response.status === 401) { user = null; show(); }\n\t\t\tthrow new Error('Request refused (' + response.status + ')');\n\t\t}\n\t\tif (data === null) throw new Error('Unexpected server response');\n\t\treturn data;\n\t}\n\tfunction show() {\n\t\tbyid('login').hidden = !!user;\n\t\tbyid('workspace').hidden = !user;\n\t\tbyid('identity').textContent = user ? user.name + ' ยท ' + user.role : '';\n\t\tif (!user && socket) { socket.close(); socket = null; byid('live').hidden = true; }\n\t}\n\t// The server pushes an event whenever something the user may see changes\n\tfunction connect() {\n\t\tif (socket) return;\n\t\tsocket = new WebSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/live/');\n\t\tsocket.onopen = () => { byid('live').hidden = false; };\n\t\tsocket.onclose = () => { byid('live').hidden = true; socket = null; };\n\t\tsocket.onmessage = () => { if (user && !busy) load().catch(err => byid('message').textContent = err.message); };\n\t}\n\tasync function load() {\n\t\tvar tasks = await request('/tasks/');\n\t\tvar lists = await Promise.all(tasks.map(task => request('/tasks/' + task.id + '/files/')));\n\t\tbyid('tasks').replaceChildren();\n\t\tbyid('empty').hidden = tasks.length > 0;\n\t\ttasks.forEach(function(task, index) {\n\t\t\tvar row = document.createElement('li');\n\t\t\trow.className = 'task';\n\t\t\tvar line = document.createElement('div');\n\t\t\tline.className = 'row';\n\t\t\tvar checkbox = document.createElement('input');\n\t\t\tcheckbox.type = 'checkbox'; checkbox.checked = task.done; checkbox.setAttribute('aria-label', 'Complete ' + task.title);\n\t\t\tcheckbox.addEventListener('change', () => work(async () => { await request('/tasks/' + task.id + '/', 'PATCH', { done: checkbox.checked }); await load(); }));\n\t\t\tvar title = document.createElement('span'); title.className = 'task-title'; title.textContent = task.title;\n\t\t\tvar upload = document.createElement('input');\n\t\t\tupload.type = 'file'; upload.accept = '.txt,.png,.pdf'; upload.setAttribute('aria-label', 'Attach a file to ' + task.title);\n\t\t\tupload.addEventListener('change', () => work(async () => {\n\t\t\t\tvar form = new FormData(); form.append('file', upload.files[0]);\n\t\t\t\tawait request('/tasks/' + task.id + '/files/', 'POST', form); await load();\n\t\t\t}));\n\t\t\tline.append(checkbox, title, upload);\n\t\t\tif (user.role === 'admin') {\n\t\t\t\tvar remove = document.createElement('button'); remove.type = 'button'; remove.textContent = 'Delete';\n\t\t\t\tremove.addEventListener('click', () => work(async () => { await request('/tasks/' + task.id + '/', 'DELETE'); await load(); }));\n\t\t\t\tline.append(remove);\n\t\t\t}\n\t\t\trow.append(line);\n\t\t\tvar list = document.createElement('ul'); list.className = 'files';\n\t\t\tlists[index].forEach(function(file) {\n\t\t\t\tvar item = document.createElement('li');\n\t\t\t\tvar link = document.createElement('a');\n\t\t\t\tlink.href = '/tasks/' + task.id + '/files/' + file.id + '/'; link.textContent = file.filename;\n\t\t\t\titem.append(link, ' (' + file.size + ' bytes)');\n\t\t\t\tlist.append(item);\n\t\t\t});\n\t\t\trow.append(list);\n\t\t\tbyid('tasks').append(row);\n\t\t});\n\t}\n\tasync function work(fn) {\n\t\tif (busy) return;\n\t\tbusy = true; byid('message').textContent = '';\n\t\tdocument.querySelectorAll('input,button').forEach(control => control.disabled = true);\n\t\ttry { await fn(); } catch (err) { byid('message').textContent = err.message; }\n\t\tfinally { busy = false; document.querySelectorAll('input,button').forEach(control => control.disabled = false); }\n\t}\n\tbyid('login').addEventListener('submit', function(event) {\n\t\tevent.preventDefault(); work(async function() {\n\t\t\tvar result = await request('/login/', 'POST', { name: byid('name').value, password: byid('password').value });\n\t\t\tuser = result.user; csrf = result.csrf; byid('password').value = ''; show(); connect(); await load();\n\t\t});\n\t});\n\tbyid('create').addEventListener('submit', function(event) {\n\t\tevent.preventDefault(); work(async function() { await request('/tasks/', 'POST', { title: byid('title').value }); byid('title').value = ''; await load(); });\n\t});\n\tbyid('logout').addEventListener('click', () => work(async function() { await request('/logout/', 'POST', {}); user = null; byid('tasks').replaceChildren(); show(); }));\n\twork(async function() { var result = await request('/session/'); user = result.user; csrf = result.csrf; show(); if (user) { connect(); await load(); } });\n})();\n```\n\n## What is exercised\n\nThe application applies these access and update rules:\n\n- an anonymous socket is refused and the sockets of the owner and of the administrator receive a task event while the socket of another member receives nothing,\n- an attachment is accepted only from a user who can see the task, only with a valid CSRF token and only for the allowed types, and files over the limit are refused,\n- the owner and the administrator download the file with the right headers while another member gets a 404,\n- an administrator deleting the task removes its attachments too.\n\nConnected pages receive task updates through the socket without reloading. Related recipes: [WebSocket flags](/en/total5/websocket-flags/), [file storage](/en/total5/filestorage/), [uploads](/en/total5/file-upload/) and [CSRF](/en/total5/csrf-protection/)."}],"knowledge":{"content_sha256":"85e51cdc38974e26afe30a84dcf75b118da5711946e5cb061c205315d4675c65","source_sha256":"d4566e540f8c8005a02645050f93a2997242e376d8040aa01e3508f68d8f7055","snapshot":"c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c","sources":[{"id":"total5-installed","url":"https://registry.npmjs.org/total5/-/total5-0.0.19.tgz","revision":null,"version":"total5@0.0.19","license":"MIT","attribution":"Peter Sirka and Total.js contributors","manifest_sha256":"7b43194a112c7ad00582e1cf57e6f8d28ef651b0d16ca09faa4e6d45459d02ff","license_files":[{"path":"LICENSE","sha256":"32be66ff50dc625b647118e326607c6916fa9615330bcc922caedf834b78627c","text":true,"characters":10265}],"scope":"Runtime source"}],"review":"not-recorded","symbols":["AUTH","CONF","CSRF","DEF","DELETE","DOCTYPE","Date.now","FILESTORAGE","GET","JSON","MAIN","MIDDLEWARE","NEWACTION","NODE_ENV","NOOP","NOSQL","PATCH","PATH","POST","ROUTE","SOCKET","TASKBOARD_","TASKBOARD_SECRET","Total.Crypto","Total.Crypto.scryptSync","Total.Crypto.timingSafeEqual","Total.js","UID"],"language":"en"},"files":[{"path":"config","language":"text","content":"name : Taskboard Live\ndemo : true\nfs : taskboard-files"},{"path":"definitions/taskboard.js","language":"js","content":"var crypto = Total.Crypto;\nvar demo = CONF.demo === true;\nif (demo && (process.argv.includes('--release') || process.env.NODE_ENV === 'production'))\n\tthrow new Error('Disable demo mode before a release deployment');\nvar secret = process.env.TASKBOARD_SECRET || (demo ? 'local-taskboard-demo-secret-not-for-public-use' : '');\nif (secret.length < 32)\n\tthrow new Error('TASKBOARD_SECRET needs at least 32 characters');\nCONF.secret_csrf = secret;\n\nMAIN.taskUsers = Object.create(null);\nfor (var name of ['alice', 'bob', 'admin']) {\n\tvar password = process.env['TASKBOARD_' + name.toUpperCase() + '_PASSWORD'] || (demo ? name + '-demo-password' : '');\n\tif (password.length < 12)\n\t\tthrow new Error('Configure a password of at least 12 characters for ' + name);\n\tvar salt = crypto.randomBytes(16).toString('hex');\n\tMAIN.taskUsers[name] = { id: name, name: name, role: name === 'admin' ? 'admin' : 'member', salt: salt, hash: crypto.scryptSync(password, salt, 32) };\n}\n\nMAIN.taskAuth = {\n\tsecret: secret,\n\tcookie: 'taskboard_session',\n\texpire: '30 minutes',\n\toptions: { httponly: true, samesite: 'Strict', secure: !demo },\n\tonread: function(meta, next) {\n\t\tNOSQL('task-sessions').read().where('id', meta.sessionid).callback(function(err, session) {\n\t\t\tvar user = !err && session && session.expire > Date.now() && MAIN.taskUsers[session.userid];\n\t\t\tuser ? next(null, { id: user.id, name: user.name, role: user.role }) : next('Session not found');\n\t\t});\n\t},\n\tonlogout: function(session) {\n\t\tNOSQL('task-sessions').remove().where('id', session.sessionid).callback(NOOP);\n\t},\n\tonremove: function(id) {\n\t\tNOSQL('task-sessions').remove().where('id', id).callback(NOOP);\n\t}\n};\nAUTH(MAIN.taskAuth);\n\nMIDDLEWARE('taskcsrf', function($, next) {\n\tDEF.onCSRFcheck($) ? next() : $.invalid(403);\n});\n\n// Sends an event to the sockets of the owner of a task and to the administrators only\nMAIN.live = function(owner, event) {\n\tMAIN.liveSocket && MAIN.liveSocket.send(event, function(client) {\n\t\treturn client.user.role === 'admin' || client.user.id === owner;\n\t});\n};"},{"path":"actions/tasks.js","language":"js","content":"function owned(builder, user) {\n\treturn user.role === 'admin' ? builder : builder.where('owner', user.id);\n}\n\nNEWACTION('Tasks|list', {\n\tuser: true,\n\taction: function($) {\n\t\towned(NOSQL('tasks').find(), $.user).sort('title').callback(function(err, tasks) {\n\t\t\terr ? $.invalid(500) : $.callback(tasks);\n\t\t});\n\t}\n});\n\nNEWACTION('Tasks|create', {\n\tuser: true,\n\tinput: '*title:String(80)',\n\taction: function($, model) {\n\t\tvar task = { id: UID(), title: model.title, done: false, owner: $.user.id };\n\t\tNOSQL('tasks').insert(task).callback(function(err) {\n\t\t\tif (err)\n\t\t\t\treturn $.invalid(500);\n\t\t\tMAIN.live(task.owner, { type: 'task', id: task.id });\n\t\t\t$.callback(task);\n\t\t});\n\t}\n});\n\nNEWACTION('Tasks|update', {\n\tuser: true,\n\tparams: '*id:UID',\n\tinput: '*done:Boolean',\n\taction: function($, model) {\n\t\towned(NOSQL('tasks').update({ done: model.done }).where('id', $.params.id), $.user).callback(function(err, count) {\n\t\t\tif (err)\n\t\t\t\treturn $.invalid(500);\n\t\t\tif (!count)\n\t\t\t\treturn $.invalid(404);\n\t\t\tNOSQL('tasks').read().where('id', $.params.id).callback(function(err, task) {\n\t\t\t\ttask && MAIN.live(task.owner, { type: 'task', id: task.id });\n\t\t\t\t$.success();\n\t\t\t});\n\t\t});\n\t}\n});\n\nNEWACTION('Tasks|remove', {\n\tuser: true,\n\tparams: '*id:UID',\n\taction: function($) {\n\t\tif ($.user.role !== 'admin')\n\t\t\treturn $.invalid(403);\n\t\tNOSQL('tasks').read().where('id', $.params.id).callback(function(err, task) {\n\t\t\tif (err)\n\t\t\t\treturn $.invalid(500);\n\t\t\tif (!task)\n\t\t\t\treturn $.invalid(404);\n\t\t\t// The attachments of the task go away with it\n\t\t\tNOSQL('attachments').find().where('taskid', task.id).callback(function(err, files) {\n\t\t\t\t(files || []).forEach(file => FILESTORAGE(CONF.fs).remove(file.id, NOOP));\n\t\t\t\tNOSQL('attachments').remove().where('taskid', task.id).callback(NOOP);\n\t\t\t\tNOSQL('tasks').remove().where('id', task.id).callback(function(err) {\n\t\t\t\t\tif (err)\n\t\t\t\t\t\treturn $.invalid(500);\n\t\t\t\t\tMAIN.live(task.owner, { type: 'task', id: task.id });\n\t\t\t\t\t$.success();\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n});"},{"path":"controllers/taskboard.js","language":"js","content":"var attempts = Object.create(null);\nvar allowed = ['text/plain', 'image/png', 'application/pdf'];\n\nexports.install = function() {\n\tROUTE('GET /', function($) { $.file(PATH.public('index.html')); });\n\tROUTE('GET /session/', session);\n\tROUTE('POST /login/ @json <2kb #taskcsrf', login);\n\tROUTE('+POST /logout/ @json #taskcsrf', logout);\n\tROUTE('+GET /tasks/ --> *Tasks|list');\n\tROUTE('+POST /tasks/ <2kb #taskcsrf --> *Tasks|create');\n\tROUTE('+PATCH /tasks/{id}/ <2kb #taskcsrf --> *Tasks|update');\n\tROUTE('+DELETE /tasks/{id}/ #taskcsrf --> *Tasks|remove');\n\tROUTE('+GET /tasks/{id}/files/', files);\n\tROUTE('+POST /tasks/{id}/files/ @upload <1mb #taskcsrf', attach);\n\tROUTE('+GET /tasks/{id}/files/{fileid}/', download);\n\tROUTE('+SOCKET /live/', live);\n};\n\n// The task must be visible to the user: members only reach their own tasks\nfunction visible($, next) {\n\tvar builder = NOSQL('tasks').read().where('id', $.params.id);\n\tif ($.user.role !== 'admin')\n\t\tbuilder.where('owner', $.user.id);\n\tbuilder.callback(function(err, task) {\n\t\tif (err)\n\t\t\treturn $.invalid(500);\n\t\ttask ? next(task) : $.invalid(404);\n\t});\n}\n\nfunction files($) {\n\tvisible($, function(task) {\n\t\tNOSQL('attachments').find().where('taskid', task.id).sort('filename').fields('id,filename,size,type').callback(function(err, items) {\n\t\t\terr ? $.invalid(500) : $.json(items);\n\t\t});\n\t});\n}\n\nfunction attach($) {\n\tvar file = $.files[0];\n\tif (!file || !allowed.includes(file.type))\n\t\treturn $.invalid(400);\n\tvisible($, function(task) {\n\t\tvar id = UID();\n\t\tfile.fs(CONF.fs, id, function(err) {\n\t\t\tif (err)\n\t\t\t\treturn $.invalid(500);\n\t\t\tvar meta = { id: id, taskid: task.id, filename: file.filename, size: file.size, type: file.type };\n\t\t\tNOSQL('attachments').insert(meta).callback(function(err) {\n\t\t\t\tif (err)\n\t\t\t\t\treturn $.invalid(500);\n\t\t\t\tMAIN.live(task.owner, { type: 'attachment', id: task.id });\n\t\t\t\t$.json({ id: id, filename: meta.filename, size: meta.size, type: meta.type });\n\t\t\t});\n\t\t});\n\t});\n}\n\nfunction download($) {\n\tvisible($, function(task) {\n\t\tNOSQL('attachments').read().where('id', $.params.fileid).where('taskid', task.id).callback(function(err, meta) {\n\t\t\tif (err || !meta)\n\t\t\t\treturn $.invalid(404);\n\t\t\t$.response.headers['x-content-type-options'] = 'nosniff';\n\t\t\t$.filefs(CONF.fs, meta.id, true);\n\t\t});\n\t});\n}\n\n// Only a signed-in user reaches this route; the sockets are kept to send events to them\nfunction live() {\n\tMAIN.liveSocket = this;\n}\n\nfunction session($) {\n\t$.response.headers['cache-control'] = 'no-store';\n\t$.json({ user: $.user || null, csrf: $.csrf() });\n}\n\nfunction login($) {\n\tvar key = $.ip;\n\tvar recent = (attempts[key] || []).filter(time => time > Date.now() - 600000);\n\tattempts[key] = recent;\n\tif (recent.length >= 5) return $.invalid(429);\n\tvar user = MAIN.taskUsers[String($.body.name || '').toLowerCase()];\n\tvar salt = user ? user.salt : 'dummy-salt';\n\tvar actual = Total.Crypto.scryptSync(String($.body.password || ''), salt, 32);\n\tvar valid = user && Total.Crypto.timingSafeEqual(actual, user.hash);\n\tif (!valid) {\n\t\trecent.push(Date.now());\n\t\treturn $.invalid(401);\n\t}\n\tvar id = UID();\n\tNOSQL('task-sessions').insert({ id: id, userid: user.id, expire: Date.now() + 1800000 }).callback(function(err) {\n\t\tif (err) return $.invalid(500);\n\t\tMAIN.taskAuth.authcookie($, id, user.id, '30 minutes');\n\t\t$.json({ user: { id: user.id, name: user.name, role: user.role }, csrf: $.csrf() });\n\t});\n}\n\nfunction logout($) {\n\tNOSQL('task-sessions').remove().where('id', $.sessionid).callback(function(err) {\n\t\tif (err) return $.invalid(500);\n\t\tMAIN.taskAuth.logout($);\n\t\t$.cookie(MAIN.taskAuth.cookie, '', '-1 year', MAIN.taskAuth.options);\n\t\t$.json({ ok: true });\n\t});\n}"},{"path":"public/index.html","language":"html","content":"\n