4951c1b04b
git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1444660 13f79535-47bb-0310-9956-ffa450edef68
466 lines
18 KiB
HTML
466 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
* or more contributor license agreements. See the NOTICE file
|
|
* distributed with this work for additional information
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
* to you under the Apache License, Version 2.0 (the
|
|
* "License"); you may not use this file except in compliance
|
|
* with the License. You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing,
|
|
* software distributed under the License is distributed on an
|
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
* KIND, either express or implied. See the License for the
|
|
* specific language governing permissions and limitations
|
|
* under the License.
|
|
-->
|
|
<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/>
|
|
|
|
<!--
|
|
TODO Disabled for now
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; ">Calendar</th>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="sched1" class="flatentry" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service1" class="flatentry" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="sched2" class="flatentry" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service2" class="flatentry" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="sched3" class="flatentry" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service3" class="flatentry" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="sched4" class="flatentry" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service4" class="flatentry" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="sched5" class="flatentry" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service5" class="flatentry" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
|
|
</table>
|
|
<br/>
|
|
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; ">Key chain</th>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name1" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value1" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name2" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value2" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name3" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value3" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name4" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value4" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name5" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value5" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name6" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value6" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name7" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value7" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name8" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value8" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name9" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value9" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
<tr><td style="padding-right: 2px;"><input type="text" id="name10" class="flatentry" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value10" class="flatentry" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
|
|
</table>
|
|
</form>
|
|
<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>
|