hosting/server/htdocs/account/index.html

<!DOCTYPE html>  <div id="bodydiv" class="body"> <div id="viewform" class="viewform"> <form id="userForm"> <table style="width: 100%;"> <tr><tr><td class="label">Username:</td></tr> <tr><td><input type="text" id="userName" class="readentry" size="30" readonly="readonly" placeholder="Your username" style="width: 300px;"/></td></tr> <tr><tr><td class="label">Email:</td></tr> <tr><td><input type="text" id="userEmail" class="readentry" size="30" readonly="readonly" placeholder="Your email address" style="width: 300px;"/></td></tr> <tr><tr><td class="label">Picture:</td></tr> <tr><td><img id="userPicture" style="width: 50px; height: 50px; vertical-align: top;"/><input id="uploadPicture" type="button" class="lightbutton" value="Upload"/><input id="uploadFile" type="file" accept="image/*" style="visibility: hidden;"/><span id="refreshingPicture" class="refreshing" style="display:none;"/></td></tr> <tr><tr><td class="label">Name:</td></tr> <tr><td><input type="text" id="userFullname" class="flatentry" size="30" placeholder="Your name" style="width: 300px;"/></td></tr> <tr><tr><td class="label">Bio:</td></tr> <tr><td><textarea id="userDescription" class="flatentry" cols="40" rows="3" placeholder="About yourself, in fewer than 120 characters" style="width: 300px;"></textarea></td></tr> </table> <br/>  </div> <script type="text/javascript"> (function accountbody() { /** * Setup page layout. */ (function layout() { document.title = config.windowtitle() + ' - Account'; $('viewhead').innerHTML = '<span class="cmenu">' + username + '</span>' + '<input type="button" class="redbutton plusminus" style="position: absolute; top: 4px; left: 2px;" id="deleteUser" value="-" title="Delete your account" disabled="true"/>'; if (!ui.isMobile()) $('viewform').className = 'viewform flatscrollbars'; $('userName').value = username; })(); /** * Set images. */ $('userPicture').src = ui.b64png(appcache.get('/public/user.b64')); /** * Initialize service references. */ var editorComp = sca.component("Editor"); var user= sca.defun(sca.reference(editorComp, "user")); var accounts = sca.reference(editorComp, "accounts"); var pictures = sca.reference(editorComp, "pictures"); /** * The current account entry and corresponding saved XML content. */ var savedacctxml = ''; var savedpicxml = ''; /** * Get and display the user's account. */ (function getacct() { workingstatus(true); showstatus('Loading'); return accounts.get('', function(doc) { // Stop now if we didn't get an account if (doc == null) { errorstatus('Account info not available'); workingstatus(false); return false; } var acctentry = car(elementsToValues(atom.readATOMEntry(mklist(doc)))); $('userFullname').value = cadr(assoc("'title", acctentry)); var acct = cadr(assoc("'content", acctentry)); var email = assoc("'email", acct); $('userEmail').value = isNull(email) || isNull(cdr(email))? (username.indexOf('@') != -1? username : '') : cadr(email); var desc = assoc("'description", acct); $('userDescription').innerHTML = isNull(desc) || isNull(cdr(desc))? '' : cadr(desc); /* TODO disabled for now var cal = assoc("'calendar", acct); reduce(function(i, evt) { var sched = assoc("'@schedule", evt); var svc = assoc("'@service", evt); $('sched' + i).value = isNull(sched)? '' : cadr(sched); $('service' + i).value = isNull(svc)? '' : cadr(svc); return i + 1; }, 1, isNull(cal)? mklist() : cadr(cadr(cal))); var keys = assoc("'keys", acct); reduce(function(i, key) { var kn = assoc("'@name", key); var kv = assoc("'@value", key); $('name' + i).value = isNull(kn)? '' : cadr(kn); $('value' + i).value = isNull(kv)? '' : cadr(kv); return i + 1; }, 1, isNull(keys)? mklist() : cadr(cadr(keys))); */ savedacctxml = car(atom.writeATOMEntry(valuesToElements(mklist(acctentry)))); return true; }); return true; })(); /** * Get and display the user's picture. */ (function getpic() { workingstatus(true); showstatus('Loading'); return pictures.get('', function(doc) { // Stop now if we didn't get a picture if (doc == null) { errorstatus('Picture not available'); workingstatus(false); return false; } var picentry = car(elementsToValues(atom.readATOMEntry(mklist(doc)))); savedpicxml = car(atom.writeATOMEntry(valuesToElements(mklist(picentry)))); var content = assoc("'content", picentry); var picture = assoc("'picture", content); var img = assoc("'image", picture); if (!isNull(img)) $('userPicture').src = cadr(img); onlinestatus(); workingstatus(false); return true; }); return true; })(); /** * Refresh picture. */ var refreshingpic = false; function refreshpic() { if (!refreshingpic) return false; $('refreshingPicture').style.display = 'inline-block'; return pictures.get('', function(doc) { if (doc == null) { errorstatus('Picture not available'); $('refreshingPicture').style.display = 'none'; refreshingpic = false; return false; } var picentry = car(elementsToValues(atom.readATOMEntry(mklist(doc)))); var content = assoc("'content", picentry); var picture = assoc("'picture", content); var token = assoc("'token", picture); // Update picture if (isNull(token)) { var entryxml = car(atom.writeATOMEntry(valuesToElements(mklist(picentry)))); savedpicxml = entryxml; var img = assoc("'image", picture); if (!isNull(img)) $('userPicture').src = cadr(img); $('refreshingPicture').style.display = 'none'; refreshingpic = false; return true; } // Refresh in 2 secs return ui.delay(refreshpic, 2000); }, 'remote'); return true; } /** * Save the user's account. */ function saveacct(entryxml) { if (isNull(username)) return false; workingstatus(true); showstatus('Saving'); savedacctxml = entryxml; accounts.put('', savedacctxml, function(e) { if (e) { showstatus('Local copy'); workingstatus(false); return false; } showstatus('Saved'); workingstatus(false); return true; }); return true; } /** * Save the user's picture. */ function savepic(entryxml) { if (isNull(username)) return false; workingstatus(true); showstatus('Uploading'); savedpicxml = entryxml; pictures.put('', savedpicxml, function(e) { if (e) { showstatus('Local copy'); workingstatus(false); return false; } showstatus('Uploaded'); workingstatus(false); return true; }); return true; } /** * Handle a change event */ function onaccountchange() { // Validate user input var title = $('userFullname').value; if (title.length == 0) { errorstatus('Name cannot be empty'); return false; } if (title.length > 40) { errorstatus('Name cannot be longer than 40 characters'); return false; } var email = $('userEmail').value; var description = $('userDescription').value; if (description.length > 120) { errorstatus('Bio cannot be longer than 120 characters'); return false; } /* TODO disabled for now var cal = map(function(i) { var sched = $('sched' + i).value; var svc = $('service' + i).value; return mklist("'event", mklist("'@schedule", sched), mklist("'@service", svc)); }, range(1, 6)); var keys = map(function(i) { var kn = $('name' + i).value; var kv = $('value' + i).value; return mklist("'key", mklist("'@name", kn), mklist("'@value", kv)); }, range(1, 11)); var acctentry = mklist("'entry", mklist("'title", title != ''? title : username), mklist("'id", username), mklist("'content", mklist("'account", mklist("'email", email), mklist("'description", description), cons("'keys", keys), cons("'calendar", cal)))); */ var acctentry = mklist("'entry", mklist("'title", title != ''? title : username), mklist("'id", username), mklist("'content", mklist("'account", mklist("'email", email), mklist("'description", description)))); var entryxml = car(atom.writeATOMEntry(valuesToElements(mklist(acctentry)))); if (savedacctxml == entryxml) return false; showstatus('Modified'); return saveacct(entryxml); } $('userFullname').onchange = onaccountchange; $('userDescription').onchange = onaccountchange; /* TODO disabled for now map(function(i) { $('sched' + i).onchange = onaccountchange; $('service' + i).onchange = onaccountchange; return true; }, range(1, 6)); map(function(i) { $('name' + i).onchange = onaccountchange; $('value' + i).onchange = onaccountchange; return true; }, range(1, 11)); */ /** * Handle a key event. */ var lastkeyup = null; $('userFullname').onkeyup = $('userDescription').onkeyup = function() { var t = new Date().getTime(); lastkeyup = t; ui.async(function() { return t == lastkeyup? onaccountchange() : true; }, 2000); }; /** * Handle a form submit event. */ $('userForm').onsubmit = function() { onaccountchange(); return false; }; /** * Read and upload icon file. */ function readpic(files) { if (!files || files.length == 0) return false; if (!files[0].type.match('image.*')) { errorstatus('Please select an image'); return false; } workingstatus(true); showstatus('Loading'); // Read the selected file into a 50x50 image return ui.readimage(files[0], function(e) { errorstatus('Couldn\'t read the file'); workingstatus(false); }, function(p) { showstatus('Loading ' + p + '%'); }, function(url) { // Update the user picture $('userPicture').src = url; showstatus('Loaded'); // Now upload it ui.async(function() { var picentry = mklist("'entry", mklist("'title", username), mklist("'id", username), mklist("'author", username), mklist("'content", mklist("'picture", mklist("'image", url)))); var entryxml = car(atom.writeATOMEntry(valuesToElements(mklist(picentry)))); if (savedpicxml == entryxml) { onlinestatus(); workingstatus(false); return false; } return savepic(entryxml); }); }, 50, 50); } /** * Upload a picture in an email. */ function emailpicture() { // Generate and put a picture email upload token workingstatus(true); showstatus('Uploading'); var token = uuid4(); var picentry = mklist("'entry", mklist("'title", username), mklist("'id", username), mklist("'author", username), mklist("'content", mklist("'picture", mklist("'token", token)))); var entryxml = car(atom.writeATOMEntry(valuesToElements(mklist(picentry)))); pictures.put('', entryxml, function(e) { if (e) { showstatus('Local copy'); workingstatus(false); return false; } workingstatus(false); // Open the email app var mailto = safeb64encode('p/' + username + '/' + token); ui.navigate('mailto:' + mailto + '@' + topdomainname(window.location.hostname) + '?subject=Uploading picture&body=Paste picture here', '_self'); // Refresh app icon refreshingpic = true; return ui.delay(refreshpic, 500); }, 'remote'); } /** * Handle picture upload events. */ ui.onclick($('uploadPicture'), function(e) { debug('uploadPicture.onclick()'); if (ui.isMobile() && ((ui.isWebkit() && ui.browserVersion() < 6.0) || (ui.isAndroid() && ui.browserVersion() < 2.2))) return ui.delay(function() { return emailpicture(); }); return ui.delay(function() { return $('uploadFile').click(); }); }); $('uploadFile').onchange = function(e) { return readpic(e.target.files); }; $('userPicture').ondrag = function(e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }; $('userPicture').ondrop = function(e) { e.stopPropagation(); e.preventDefault(); return readpic(e.dataTransfer.files); }; })(); </script> </div>

hosting/server/htdocs/account/index.html (355 lines of code) (raw):