Permalink
Switch branches/tags
Find file
Fetching contributors…
Cannot retrieve contributors at this time
166 lines (153 sloc) 4.45 KB
<!doctype html>
<html>
<head>
<title>ByteSized for Chrome options</title>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<style>
#status {
position: absolute;
top:0;left:50%;
width: 200px;
background: #76857e;
border-radius: 0 0 6px 6px;
padding: 5px 10px;
text-align: center;
display: none;
}
#accounts {
margin: 20px 0;
}
#accounts .account {
font: bold 18px/1.2em Georgia, serif;
color: #f9f9f9;
padding: 5px 10px;
border-radius: 12px;
box-shadow: 0 0 4px #444;
background-color: #76857e;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #76857e),
color-stop(1, #444));
/*display: inline-block;*/
text-shadow: 1px 1px 3px #444;
margin: 20px 20px 0 0;
}
.account .user {
margin: 0 20px 0 0;
}
.account .boxes {
margin: 0 20px 0 0;
color: #888;
}
.account .delete {
border-radius: 12px;
box-shadow: 0 0 4px #444;
background-color: #CF0C13;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #CF0C13),
color-stop(1, #000));
position: relative;
float: right;
/*bottom: 10px;*/
left: 10px;
bottom: 8px;
padding: 10px;
margin-left: -20px;
}
.account .delete a {
text-decoration: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/options.js" type="text/javascript"></script>
<script>
var form = $('<section><form>'+
'<div><label for="apikey">API-key:</label><input name="apikey" type="text" required style="width: 300px"></div>'+
'<div><button class="save">Save</button></div></form></section>');
var displayAccounts = function(){
var accounts = (localStorage.accounts) ? JSON.parse(localStorage.accounts) : [];
$('.account').detach();
if(accounts.length){
accounts.forEach(function(apikey,i){
var data = JSON.parse(localStorage[apikey]);
$('#accounts').append('<div class="account a'+i+'" apikey="'+apikey+'" style="display: none;">'+
'<span class="user">'+data.login+'</span><span class="pass"></span>'+
'</div>');
var boxes = Object.keys(data.boxes);
boxes.forEach(function(box,x){
$('.a'+i).append('<span class="boxes">'+box+'</span>');
});
$('.a'+i).append('<span class="delete"><a href="#" class="a'+i+'">X</a></span>');
$('.a'+i).fadeIn(500);
});
} else {
$('#content').append(form.clone().attr('index','0'));
}
};
$(function(){
displayAccounts();
// hooks
$('#add-box').click(function(){
$('#content').append(form.clone().attr('index',$('form').length));
});
$('button.save').live('click', function(){
var $this = $(this);
chrome.extension.sendRequest({
method: 'save',
page: 'options',
apikey: $this.parent().parent().find('input[name=apikey]').val()
}, function(res){
if(res.status == 'OK'){
$('#status').fadeIn(500).delay(2000).fadeOut(1000);
$('#status').text('Account saved.');
var timeout = setTimeout(function(){
displayAccounts();
}, 1000);
$this.parent().parent().parent().detach();
} else {
$('#status').fadeIn(500).delay(2000).fadeOut(1000);
$('#status').text('Could not save account. Error '+res.status);
}
});
return false;
});
$('.delete a').live('click', function(){
var $this = $(this);
chrome.extension.sendRequest({
method: 'delete'
,page: 'options'
,apikey: $this.parent().parent().attr('apikey')
}, function(res){
if(res.status == 'OK'){
$('#status').fadeIn(500).delay(2000).fadeOut(1000);
$('#status').text('Account removed.');
var timeout = setTimeout(function(){
displayAccounts();
}, 1000);
}
});
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<span style="float:left;margin-bottom:4px">
<a href="http://bytesized-hosting.com/home">
<h1><img alt="Logo" src="http://bytesized-hosting.com/images/logo.png?1300985868" /></h1>
<span style="display:none">
<h1>Bytesized</h1>
<h2>Seedboxes</h2>
</span>
</a>
</div>
</div>
<p id="status"></p>
<div id="content">
<h1>Your ByteSized Accounts</h1>
<div id="accounts"></div>
<p><a href="#" id="add-box">Add another account</a></p>
</div>
</div>
</body>
</html>