Browse Source

Updating the wizard

Make everything more user-friendly and streamlined. Port and and # of
connections are now placed under 'Show more'. Clicking SSL will change
the port to 563.
Username and option for SSL removed from the wizard, they can be enabled
in the Config.
pull/365/head
Safihre 10 years ago
committed by shypike
parent
commit
e52f73b0e6
  1. 2
      interfaces/wizard/inc_bottom.tmpl
  2. 36
      interfaces/wizard/inc_top.tmpl
  3. 52
      interfaces/wizard/index.html
  4. 148
      interfaces/wizard/one.html
  5. 170
      interfaces/wizard/static/javascript/checkserver.js
  6. 90
      interfaces/wizard/static/javascript/pagetwo.js
  7. 28
      interfaces/wizard/static/javascript/restart.js
  8. 268
      interfaces/wizard/static/style.css
  9. 70
      interfaces/wizard/three.html
  10. 84
      interfaces/wizard/two.html
  11. 23
      sabnzbd/wizard.py

2
interfaces/wizard/inc_bottom.tmpl

@ -1,2 +1,2 @@
</body> </body>
</html> </html>

36
interfaces/wizard/inc_top.tmpl

@ -1,19 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="$active_lang"> <html lang="$active_lang">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$T('wizard-quickstart')</title> <title>$T('wizard-quickstart')</title>
<link rel="stylesheet" type="text/css" href="../staticcfg/bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="../staticcfg/bootstrap/css/bootstrap.min.css?pid=$version"/>
<link rel="stylesheet" type="text/css" href="static/style.css"/> <link rel="stylesheet" type="text/css" href="static/style.css?pid=$version"/>
<link rel="shortcut icon" href="../staticcfg/ico/favicon.ico" /> <link rel="shortcut icon" href="../staticcfg/ico/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="../staticcfg/ico/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="57x57" href="../staticcfg/ico/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../staticcfg/ico/apple-touch-icon-60x60.png" /> <link rel="apple-touch-icon" sizes="60x60" href="../staticcfg/ico/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../staticcfg/ico/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="72x72" href="../staticcfg/ico/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="../staticcfg/ico/apple-touch-icon-76x76.png" /> <link rel="apple-touch-icon" sizes="76x76" href="../staticcfg/ico/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../staticcfg/ico/apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="114x114" href="../staticcfg/ico/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../staticcfg/ico/apple-touch-icon-120x120.png" /> <link rel="apple-touch-icon" sizes="120x120" href="../staticcfg/ico/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../staticcfg/ico/apple-touch-icon-144x144.png" /> <link rel="apple-touch-icon" sizes="144x144" href="../staticcfg/ico/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../staticcfg/ico/apple-touch-icon-152x152.png" /> <link rel="apple-touch-icon" sizes="152x152" href="../staticcfg/ico/apple-touch-icon-152x152.png" />
</head> <script type="text/javascript" src="../staticcfg/js/jquery-1.11.2.min.js"></script>
<body> <script type="text/javascript" src="../staticcfg/bootstrap/js/bootstrap.min.js"></script>
<img id="logo" src="static/images/icon_sab.png" alt="SABnzbd" /> </head>
<body>
<img id="logo" src="static/images/icon_sab.png" alt="SABnzbd" />

52
interfaces/wizard/index.html

@ -2,35 +2,39 @@
<form action="./one" method="post"> <form action="./one" method="post">
<div class="container"> <div class="container">
<div id="inner"> <div id="inner">
<div id="content" class="bigger"> <div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div> <div id="rightGreyText">$T('wizard-version') $version</div>
<br /><h1>$T('wizard-quickstart')</h1><br /> <br />
<hr /> <h1>$T('wizard-quickstart')</h1>
<div class="bigger"> <br />
<h3>$T('opt-language')</h3> <hr />
$T('explain-language')<br /><br /> <div class="bigger">
<div class="main-container"> <h3>$T('opt-language')</h3>
<!--#for $l, $language in $languages#--> $T('explain-language')<br /><br />
<label class="language"> <div class="main-container">
<br />$language<br /><input type="radio" name="lang" id="$l" value="$l" <!--#if $lang == $l then 'checked="checked"' else ''#--> /> <!--#for $l, $language in $languages#-->
</label> <label class="language <!--#if $lang == $l then 'language-active' else ''#-->">
<!--#end for#--> $language<br />
<div class="spacer"></div> <input type="radio" name="lang" id="$l" value="$l" <!--#if $lang == $l then 'checked="checked"' else ''#--> />
</label>
<!--#end for#-->
<div class="spacer"></div>
</div>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="full-width"> <br />
<table class="full-width"> <div class="row">
<tr> <div class="col-xs-4 text-center">
<td class="align-center"><a class="btn btn-danger" href="./exit"><span class="glyphicon glyphicon-remove"></span> $T('wizard-exit')</a></td> <a class="btn btn-danger" href="./exit"><span class="glyphicon glyphicon-remove"></span> $T('wizard-exit')</a>
<td class="align-center"><button class="btn btn-default">$T('wizard-start') <span class="glyphicon glyphicon-chevron-right"></span></button></td> </div>
</tr> <div class="col-xs-4 text-center">
</table> </div>
<div class="col-xs-4 text-center">
<button class="btn btn-default">$T('wizard-start') <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
</form> </form>
<!--#include $webdir + "/inc_bottom.tmpl"#--> <!--#include $webdir + "/inc_bottom.tmpl"#-->

148
interfaces/wizard/one.html

@ -2,70 +2,106 @@
<form action="./two" method="post" autocomplete="off"> <form action="./two" method="post" autocomplete="off">
<div class="container"> <div class="container">
<div id="inner"> <div id="inner">
<div id="content" class="bigger"> <div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div> <div id="rightGreyText">$T('wizard-version') $version</div>
<br /><h1>$T('wizard-quickstart')</h1> <h2>$num</h2><br /> <br />
<hr /> <h1>$T('wizard-quickstart')</h1>
<h2>$num</h2>
<script type="text/javascript"> <br />
var txtChecking = "$T('srv-testing')"; <hr />
</script> <script type="text/javascript">
<script type="text/javascript" src="static/javascript/jquery.js"></script> var txtChecking = "$T('srv-testing')";
<script type="text/javascript" src="static/javascript/checkserver.js"></script> <!--#include raw $webdir + "/static/javascript/checkserver.js"#-->
</script>
<h3>$T('wizard-server')</h3>
$T('wizard-explain-server')<br />
<h3>$T('wizard-server')</h3> <br /><br />
$T('wizard-explain-server')
<div style="float: right">
<iframe frameborder=0 height=375 width=315 src="http://sabnzbd.org/resources/wizard/ad/$language"></iframe>
</div>
<br /><br class="clear" /> <div class="row">
<div class="col-md-7 form-horizontal">
<div class="form-group">
<label for="host" class="col-sm-4 control-label">$T('srv-host')</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="host" id="host" value="$host" placeholder="$T('wizard-example') news.giganews.com" />
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-4 control-label">$T('srv-username')</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="username" id="username" value="$username" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-4 control-label">$T('srv-password')</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="password" id="password" value="$password" />
</div>
</div>
<div class="form-group">
<label for="ssl" class="col-sm-4 control-label">
$T('srv-ssl')
</label>
<div class="col-sm-8 input-checkbox">
<input type="checkbox" id="ssl" name="ssl" value="1" <!--#if $have_ssl then '' else 'disabled'#--><!--#if $ssl == 1 then 'checked' else ''#--> data-toggle="tooltip" data-placement="right" title="$T('wizard-server-ssl-explain')"/>
<!--#if not $have_ssl then '<span class="label label-warning">pyopenssl (python-ssl) '+$T('opt-notInstalled')+'</span>' else ''#-->
<small></small>
</div>
</div>
<div class="form-group">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<a href="#" onclick="\$('#server-hidden-settings').removeClass('hidden');\$(this).parent().parent().hide()">
<span class="glyphicon glyphicon-cog"></span> $T('showAllHis')
</a>
</div>
</div>
<div id="server-hidden-settings" class="hidden">
<div class="form-group">
<label for="port" class="col-sm-4 control-label">$T('srv-port')</label>
<div class="col-sm-8">
<input type="number" class="form-control" name="port" id="port" value="<!--#if $port then $port else '119' #-->" />
</div>
</div>
<div class="form-group">
<label for="connections" class="col-sm-4 control-label">$T('srv-connections')</label>
<div class="col-sm-8">
<input type="number" class="form-control" name="connections" id="connections" value="<!--#if $connections then $connections else '6'#-->" data-toggle="tooltip" data-placement="right" title="$T('wizard-server-con-explain') $T('wizard-server-con-eg')" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button id="serverTest" class="btn btn-default"><span class="glyphicon glyphicon-sort"></span> $T('wizard-button-testServer')</button>
</div>
<div class="col-sm-8">
<div id="serverQuote" class="btn btn-default disabled"><span id="serverResponse">$T('wizard-server-text')</span></div>
</div>
</div>
<div id="serverDetails"> </div>
<label class="label">$T('srv-host')<span class="required-star">*</span></label><input id="host" class=" clearinput text-input-wide" type="text" size="26" name="host" value="$host"> <div class="col-md-5">
<div id="host-tip" class="tips">$T('wizard-example') news.giganews.com</div> <div class="clearfix"></div>
<div id="host-error" class="error-text hidden">$T('wizard-server-required')</div> <iframe style="float: right; width: 315px; height: 315px;" frameborder="0" src="http://sabnzbd.org/resources/wizard/ad/$language"></iframe>
<br class="clear" /> </div>
<label class="label">$T('srv-port')</label><input id="port" class=" text-input-thin" type="text" size="2" name="port" value="$port"> </div>
<div id="port-tip" class="tips">$T('wizard-port-eg')</div> <input type="hidden" name="session" value="$session" />
<div id="port-error" class="error-text hidden">$T('wizard-server-number')</div>
<br class="clear" /><br class="clear" />
<label class="label">$T('srv-username')</label><input class=" validate-text clearinput text-input" type="text" size="12" name="username" value="$username">
<br class="clear" />
<label class="label">$T('srv-password')</label><input class=" validate-text text-input" type="password" size="12" name="password" value="$password">
<br class="clear" /><br class="clear" />
<label class="label">$T('srv-connections')<span class="required-star">*</span></label><input id="connections" class=" text-input-thin" type="text" size="2" name="connections" value="$connections">
<div id="connections-tip" class="tips">$T('wizard-server-con-explain') $T('wizard-server-con-eg')</div>
<div id="connections-error" class="error-text hidden">$T('wizard-server-number')</div>
<br class="clear" />
<label><!--#if $have_ssl then $T('srv-ssl') else '<span class="disabled-text">'+$T('srv-ssl')+'</span> (pyopenssl (python-ssl) '+$T('opt-notInstalled')+')'#-->
<input class="validate-text" type="checkbox" name="ssl" value="1" <!--#if $have_ssl then '' else 'disabled'#--><!--#if $ssl == 1 then 'checked' else ''#-->></label>
<div class="tips">$T('wizard-server-ssl-explain')</div>
<br class="clear" />
<input type="hidden" name="session" value="$session" />
</div> </div>
<hr />
<br/> <br/>
<div class="spacer"></div> <div class="row">
<button id="serverTest" class="btn btn-default"><span class="glyphicon glyphicon-sort"></span> $T('wizard-button-testServer')</button> <div class="col-xs-4 text-center">
<a class="btn btn-default" href="./index"><span class="glyphicon glyphicon-chevron-left"></span> $T('wizard-previous')</a>
<div id="serverQuote" class="btn quoteBlock"><span id="serverResponse">$T('wizard-server-text')</span></div> </div>
</div> <div class="col-xs-4 text-center">
<hr /><br/>
<div class="full-width">
<table class="full-width">
<tr>
<td class="align-center"><a class="btn btn-default" href="./index"><span class="glyphicon glyphicon-chevron-left"></span> $T('wizard-previous')</a></td>
<td>
<div class="align-center">
<!--#for $step in xrange($steps)#--> <!--#for $step in xrange($steps)#-->
<!--#set $step = $step + 1#--> <!--#set $step = $step + 1#-->
<span class="<!--#if $step == $number then 'selected' else 'unselected'#-->">$step</span> <span class="<!--#if $step == $number then 'selected' else 'unselected'#-->">$step</span>
<!--#end for#--> <!--#end for#-->
</div> </div>
</td> <div class="col-xs-4 text-center">
<td class="align-center"><button class="btn btn-default">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button></td> <button class="btn btn-default" id="next-button">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button>
</tr> </div>
</table>
</div> </div>
</div> </div>
</div> </div>

170
interfaces/wizard/static/javascript/checkserver.js

@ -1,110 +1,78 @@
function checkRequired() function checkRequired() {
{ if ($("#host").val() && $("#connections").val()) {
if ($("#host").val() && $("#connections").val()) $("#next-button").removeClass('disabled')
{ return true;
$("#next-button").removeAttr("disabled"); } else {
} else { $("#next-button").addClass('disabled')
$("#next-button").attr("disabled","disabled"); return false;
} }
} }
$(document).ready(function() { $(document).ready(function() {
checkRequired() // Add tooltips
$("#serverTest").click(function(){ $('[data-toggle="tooltip"]').tooltip()
$('#serverResponse').html(txtChecking);
$.getJSON( // On form-submit
"../tapi?mode=config&name=test_server&output=json", $("#serverTest").click(function() {
$("form").serialize(), $('#serverResponse').html(txtChecking);
function(result) { $.getJSON(
if (result.value.result){ "../tapi?mode=config&name=test_server&output=json",
cls = "success" $("form").serialize(),
function(result) {
if (result.value.result) {
r = '<span class="success"><span class="glyphicon glyphicon-ok"></span> ' + result.value.message + '</span>';
} else {
r = '<span class="failed"><span class="glyphicon glyphicon-minus-sign"></span> ' + result.value.message + '</span>';
}
$('#serverResponse').html(r);
}
);
return false;
});
$("#port, #connections").bind('keyup blur', function() {
if (this.value > 0) {
$(this).removeClass("incorrect");
$(this).addClass("correct");
} else { } else {
cls = "failed" $(this).removeClass("correct");
$(this).addClass("incorrect");
} }
r = '<span class="' + cls + '">' + result.value.message + '</span>'; checkRequired()
$('#serverResponse').html(r); });
}
);
return false;
});
$(".validate-text").blur(function(){
if (this.value || this.checked){
$(this).removeClass("incorrect");
$(this).addClass("correct");
} else {
$(this).removeClass("correct");
}
});
$(".validate-text-required").blur(function(){
if (this.value || this.checked){
$(this).removeClass("incorrect");
$(this).addClass("correct");
} else {
$(this).removeClass("correct");
$(this).addClass("incorrect");
}
});
$(".validate-numeric").blur(function(){
if (this.value && isFinite(this.value)){
$(this).removeClass("incorrect");
$(this).addClass("correct");
} else {
$(this).removeClass("correct");
}
});
$(".validate-numeric-required").blur(function(){
if (this.value && isFinite(this.value)){
$(this).removeClass("incorrect");
$(this).addClass("correct");
} else {
$(this).removeClass("correct");
$(this).addClass("incorrect");
}
});
$("#connections").bind('keyup blur',function(){ $("#host, #username, #password").bind('keyup blur', function() {
if (this.value && isFinite(this.value)){ if (this.value) {
$(this).removeClass("incorrect"); $(this).removeClass("incorrect");
$(this).addClass("correct"); $(this).addClass("correct");
$("#connections-tip").removeClass("hidden"); } else {
$("#connections-error").addClass("hidden"); $(this).removeClass("correct");
checkRequired(); $(this).addClass("incorrect");
} else { }
$(this).removeClass("correct"); checkRequired();
$(this).addClass("incorrect"); });
$("#connections-tip").addClass("hidden");
$("#connections-error").removeClass("hidden");
checkRequired();
}
});
$("#port").bind('keyup blur',function(){ $('#ssl').click(function() {
if (!this.value || isFinite(this.value)){ if(this.checked) {
$(this).removeClass("incorrect"); // Enabled SSL change port when not already a custom port
$(this).addClass("correct"); if($('#port').val() == '119') {
$("#port-tip").removeClass("hidden"); $('#port').val('563')
$("#port-error").addClass("hidden"); }
} else { } else {
$(this).removeClass("correct"); // Remove SSL port
$(this).addClass("incorrect"); if($('#port').val() == '563') {
$("#port-tip").addClass("hidden"); $('#port').val('119')
$("#port-error").removeClass("hidden"); }
} }
}); })
$("#host").bind('keyup blur',function(){ checkRequired()
if (this.value){
$(this).removeClass("incorrect"); $('form').submit(function(event) {
$(this).addClass("correct"); // Double check
$("#host-tip").removeClass("hidden"); if(!checkRequired()) {
$("#host-error").addClass("hidden"); event.preventDefault();
checkRequired(); }
} else { })
$(this).removeClass("correct");
$(this).addClass("incorrect");
$("#host-tip").addClass("hidden");
$("#host-error").removeClass("hidden");
checkRequired();
}
});
}); });

90
interfaces/wizard/static/javascript/pagetwo.js

@ -1,62 +1,38 @@
function toggleWebPass() function checkRequired() {
{ if ($("#bandwidth").val()) {
var web $("#next-button").removeClass('disabled')
web = $('#enable_webpass').attr('checked') return true;
if ($('#enable_webpass').attr('checked') == 1) } else {
{ $("#next-button").addClass('disabled')
$('#web_user').attr("disabled",""); return false;
$('#web_pass').attr("disabled",""); }
}
} else {
$('#web_user').attr("disabled","disabled");
$('#web_pass').attr("value","");
$('#web_pass').attr("disabled","disabled");
$('#web_user').attr("value","");
}
};
function checkRequired()
{
if ($("#bandwidth").val())
{
$("#next-button").removeAttr("disabled");
} else {
$("#next-button").attr("disabled","disabled");
}
};
$(document).ready(function() { $(document).ready(function() {
checkRequired(); // Add tooltips
toggleWebPass(); $('[data-toggle="tooltip"]').tooltip()
$(".validate-text-required").blur(function(){ // Check
if (this.value || this.checked){ $("#bandwidth").bind('keyup blur', function() {
$(this).removeClass("incorrect"); if (this.value) {
$(this).addClass("correct"); $(this).removeClass("incorrect");
} else { $(this).addClass("correct");
$(this).removeClass("correct"); $("#bandwidth-error").addClass("hidden");
$(this).addClass("incorrect"); } else {
} $(this).removeClass("correct");
}); $(this).addClass("incorrect");
$("#bandwidth").bind('keyup blur',function(){ $("#bandwidth-error").removeClass("hidden");
if (this.value){ }
$(this).removeClass("incorrect"); checkRequired()
$(this).addClass("correct"); });
$("#bandwidth-tip").removeClass("hidden");
$("#bandwidth-error").addClass("hidden"); checkRequired()
checkRequired();
} else {
$(this).removeClass("correct");
$(this).addClass("incorrect");
$("#bandwidth-tip").addClass("hidden");
$("#bandwidth-error").removeClass("hidden");
checkRequired();
}
});
$('#enable_webpass').bind('change click focus', function() { $('form').submit(function(event) {
toggleWebPass(); // Double check
}); if(!checkRequired()) {
event.preventDefault();
}
})
}); });

28
interfaces/wizard/static/javascript/restart.js

@ -1,17 +1,17 @@
function complete(){ function complete() {
$(".hidden").fadeIn("slow"); $(".hidden").fadeIn("slow");
$(".disabled").addClass('btn-success').removeClass('btn-default').removeClass('disabled'); $(".disabled").addClass('btn-success').removeClass('btn-default').removeClass('disabled');
$('#restarting').addClass("hidden"); $('#restarting').addClass("hidden");
$('#complete').removeClass("hidden"); $('#complete').removeClass("hidden");
$('#tips').removeClass("hidden"); $('#tips').removeClass("hidden");
} }
$(document).ready(function() { $(document).ready(function() {
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "../tapi", url: "../tapi",
data: "mode=restart&apikey="+$('#apikey').val() , data: "mode=restart&apikey=" + $('#apikey').val(),
complete: function(result){ complete: function(result) {
setTimeout(complete,7000); setTimeout(complete, 7000);
} }
}); });
}); });

268
interfaces/wizard/static/style.css

@ -1,231 +1,198 @@
body { body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
background-color: #E4E4E4; background-color: #E4E4E4;
padding-left:5%; text-align: center;
padding-right:5%;
padding-bottom:10px;
text-align:center;
} }
.container { .container {
max-width: 1000px; max-width: 1000px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
background-color: #fff; background-color: #fff;
text-align: left; text-align: left;
} }
#inner { #inner {
background-color: #fff; background-color: #fff;
padding:4px 32px 20px 32px; padding: 4px 32px 20px 32px;
/*margin:5px;*/ /*margin:5px;*/
} }
#content { #content {
min-height:520px; min-height: 550px;
} }
#logo { #logo {
float:center; float: center;
/*margin-top:30px;*/ /*margin-top:30px;*/
z-index:40;
margin-bottom:-40px;
}
z-index: 40;
margin-bottom: -40px;
}
.language { .language {
width:175px; min-width: 150px;
text-align: center; width: 18%;
float: left; padding: 1em 0em;
margin: 5px 5px;
text-align: center;
float: left;
}
.language:hover {
background-color: #E4E4E4;
} }
.float { .float {
float:left; float: left;
} }
.clear { .clear {
clear: left; clear: left;
} }
.spacer { .spacer {
clear: both; clear: both;
} }
.inline {
.inline{ display: inline;
display:inline;
} }
.quoteBlock { .quoteBlock {
padding:8px; padding: 8px;
border: 1px solid #ccc; border: 1px solid #ccc;
margin-top: 1px; margin-top: 1px;
background-color:#f5f5f5; background-color: #f5f5f5;
cursor: default; cursor: default;
}
.quoteBlock a {
color: blue !important;
} }
.success { .success {
color:green; color: #00cc22;
} }
.failed { .failed {
color:red; color: red;
}
#serverBlock {
width:300px;
float:right;
} }
#rightGreyText { #rightGreyText {
color:#ccc; color: #ccc;
width:100%; width: 100%;
text-align:right; text-align: right;
padding-top:3px; padding-top: 3px;
font-style:italic; font-style: italic;
} }
.indented { .indented {
padding-left:10px; padding-left: 10px;
} }
label { label {
cursor: pointer; cursor: pointer;
text-align: left;
padding-right: 20px;
padding-left: 0px !important;
color: black !important;
font-size: 1em !important;
line-height: 2em !important;
} }
.input-checkbox {
padding-top: 7px !important;
#serverDetails .label{
display: block;
width: 130px;
float: left;
margin-bottom: 15px;
text-align: left;
} }
#serverDetails input { .input-checkbox input+.help-block {
/*width: 150px;*/ display: none;
}
.input-checkbox input:checked+.help-block {
display: block;
float: right;
margin: 0;
} }
.sup { .sup {
vertical-align: sup !important; vertical-align: sup !important;
} }
h2 { h2 {
/*display:inline;*/ /*display:inline;*/
} }
h1,
h1,h2 { h2 {
display:inline; display: inline;
} }
.align-right { .align-right {
text-align:right; text-align: right;
} }
.align-center { .align-center {
text-align:center; text-align: center;
} }
.float-center { .float-center {
float:center; float: center;
}
.unselected,
.selected {
display: inline-block;
} }
.unselected { .unselected {
padding:6px 10px 6px 10px; padding: 6px 10px 6px 10px;
border: 1px solid #636363; border: 1px solid #636363;
margin-left:8px; margin-left: 8px;
margin-right:8px; margin-right: 8px;
color:#636363; color: #636363;
} }
.selected { .selected {
padding:6px 10px 6px 10px; padding: 6px 10px 6px 10px;
color: white; color: white;
background-color:#636363; background-color: #636363;
border: 1px solid #636363; border: 1px solid #636363;
margin-left:8px; margin-left: 8px;
margin-right:8px; margin-right: 8px;
} }
.bigger { .bigger {
font-size:14px; font-size: 14px;
} }
.padded { .padded {
padding:12px; padding: 12px;
} }
.bigger input { .bigger input {
font-size:16px; font-size: 16px;
} }
.required-star { .required-star {
color:red; color: red;
} }
.full-width { .full-width {
width:100%; width: 100%;
} }
.bigbutton { .bigbutton {
font-size:18px !important; font-size: 18px !important;
} }
.bold { .bold {
font-weight:bold; font-weight: bold;
} }
.correct { .correct {
border: 2px solid #00cc22; border: 2px solid #00cc22;
} }
.incorrect { .incorrect {
border: 2px solid red; border: 2px solid red;
} }
.hidden { .hidden {
display:none !important; display: none !important;
} }
.text-input {
.text-input{ width: 130px;
width:130px; }
.text-input-wide {
width: 230px;
} }
.text-input-wide{ .text-input-thin,
width:230px; #server-hidden-settings input[type="number"] {
width: 100px;
} }
.text-input-thin{ .input-group-bw {
width:70px; width: 150px;
} }
/*Fix for inputs messing up when adding a class in chrome */
.disabled-text { .disabled-text {
text-decoration: line-through; text-decoration: line-through;
color:#ccc; color: #ccc;
} }
#serverQuote {
#serverQuote{ opacity: 0.8;
width:100%; box-shadow: none !important;
height:16px; white-space: normal;
display:inline; width: 100%;
} }
#host-tip { #host-tip {
margin-bottom: 5px; margin-bottom: 5px;
} }
.tips { .tips {
display:inline; display: inline;
font-style:italic; font-style: italic;
color:#888; color: #888;
} }
.error-text { .error-text {
display:inline; display: inline;
color:red; color: red;
}
#bandwidth {
display: inline-block;
} }
/*** /***
Bootstrap overwrites Bootstrap overwrites
@ -234,7 +201,20 @@ h1,h2 {
* { * {
border-radius: 0 !important; border-radius: 0 !important;
} }
#content a,
.btn .glyphicon { #content a:hover,
#content a:active,
#content a:visited {
color: #555;
}
.btn {
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1) !important;
min-width: 150px;
}
.btn .glyphicon,
a .glyphicon {
top: 2px; top: 2px;
} }
small {
color: #777;
}

70
interfaces/wizard/three.html

@ -1,46 +1,46 @@
<!--#include $webdir + "/inc_top.tmpl"#--> <!--#include $webdir + "/inc_top.tmpl"#-->
<script type="text/javascript">
<!--#include raw $webdir + "/static/javascript/restart.js"#-->
</script>
<div class="container"> <div class="container">
<div id="inner"> <div id="inner">
<div id="content" class="bigger"> <div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div> <div id="rightGreyText">$T('wizard-version') $version</div>
<br /><h1>$T('wizard-quickstart')</h1> <h2>$num</h2><br /> <br />
<h1>$T('wizard-quickstart')</h1>
<h2>$num</h2>
<br />
<hr />
<br/><br/>
<h4 id="restarting" class="align-center">$T('wizard-restarting')</h4>
<h4 id="complete" class="align-center success hidden">$T('wizard-complete')</h4>
<br />
<br/>
<div id="tips" class="hidden">
$T('wizard-tip1') <span class="bold">$T('wizard-tip2')</span><br/>
<!--#set $tip3 = $T('wizard-tip3') % ''#-->
$tip3<br/><br/>
<div class="quoteBlock">
<!--#set $i = 0#-->
<!--#for $url in $urls#-->
<!--#set $i = $i+1#-->
<a href="$url">$url</a><!--#if $i != len($urls)#--><br /><!--#end if#-->
<!--#end for#-->
</div>
<br/>
$T('wizard-tip4')
<br/><br/>
$T('wizard-tip-wiki') <a target="_blank" href="$helpuri">wiki</a>
</div>
</div>
<hr /> <hr />
<script type="text/javascript" src="static/javascript/jquery.js"></script>
<script type="text/javascript" src="static/javascript/restart.js"></script>
<br/><br/>
<h4 id="restarting" class="align-center">$T('wizard-restarting')</h4>
<h4 id="complete" class="align-center success hidden">$T('wizard-complete')</h4>
<br />
<br/> <br/>
<div id="tips" class="hidden"> <div class="row">
$T('wizard-tip1') <span class="bold">$T('wizard-tip2')</span><br/> <div class="col-xs-12 text-center">
<!--#set $tip3 = $T('wizard-tip3') % ''#-->
$tip3<br/><br/>
<div class="quoteBlock">
<!--#set $i = 0#-->
<!--#for $url in $urls#-->
<!--#set $i = $i+1#-->
<a href="$url">$url</a><!--#if $i != len($urls)#--><br /><!--#end if#-->
<!--#end for#-->
</div><br/>
$T('wizard-tip4')
<br/><br/>
$T('wizard-tip-wiki') <a href="$helpuri">wiki</a>
</div>
</div>
<hr /><br/>
<div class="full-width">
<table class="full-width">
<tr class="align-center">
<td>
<input type="hidden" name="session" id="apikey" value="$session"/> <input type="hidden" name="session" id="apikey" value="$session"/>
<a class="btn btn-default disabled" href="$access_url">$T('wizard-goto') <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-default disabled" href="$access_url">$T('wizard-goto') <span class="glyphicon glyphicon-chevron-right"></span></a>
</td> </div>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
<!--#include $webdir + "/inc_bottom.tmpl"#--> <!--#include $webdir + "/inc_bottom.tmpl"#-->

84
interfaces/wizard/two.html

@ -1,63 +1,47 @@
<!--#include $webdir + "/inc_top.tmpl"#--> <!--#include $webdir + "/inc_top.tmpl"#-->
<script type="text/javascript" src="static/javascript/jquery.js"></script> <script type="text/javascript">
<script type="text/javascript" src="static/javascript/pagetwo.js"></script> <!--#include raw $webdir + "/static/javascript/pagetwo.js"#-->
</script>
<form action="./three" method="post" autocomplete="off"> <form action="./three" method="post" autocomplete="off">
<div class="container"> <div class="container">
<div id="inner"> <div id="inner">
<div id="content" class="bigger"> <div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div> <div id="rightGreyText">$T('wizard-version') $version</div>
<br /><h1>$T('wizard-quickstart')</h1> <h2>$num</h2><br /> <br />
<hr /> <h1>$T('wizard-quickstart')</h1>
<div class="indented bigger"> <h2>$num</h2>
<h3>$T('wizard-access')</h3> <br />
<!--#if $host in ('localhost','0.0.0.0')#--> <hr />
<input type="radio" name="access" id="all" value="0.0.0.0" <!--#if $host == '0.0.0.0' then 'checked="checked"' else ''#-->> <label for="all">$T('wizard-access-anypc')</label><br /> <h3>$T('wizard-misc')</h3>
<input type="radio" name="access" id="local" value="localhost" <!--#if $host == 'localhost' then 'checked="checked"' else ''#-->> <label for="local">$T('wizard-access-mypc')</label><br />
<br />
<!--#end if#-->
<input type="checkbox" name="enable_webpass" id="enable_webpass" value="1" <!--#if $web_user then 'checked="checked"' else ''#-->> <label for="enable_webpass">$T('wizard-access-pass')</label><br />
<br class="clear" />
<div id="serverDetails">
<label class="label">$T('srv-username'):</label><input type="text" class="" size="20" value="$web_user" name="web_user" id="web_user">
<br class="clear" />
<label class="label">$T('srv-password'):</label><input type="password" class="" size="20" value="$web_pass" name="web_pass" id="web_pass">
</div>
<br class="clear" />
<input type="checkbox" name="enable_https" id="enable_https" value="1" <!--#if $enable_https == 1 then 'checked="checked"' else ''#--><!--#if $have_ssl then '' else 'disabled'#-->> <label for="enable_https"><!--#if $have_ssl then $T('wizard-access-https') else '<span class="disabled-text">'+$T('wizard-access-https')+'</span> (pyopenssl (python-ssl) '+$T('opt-notInstalled')+')'#--></label><br />
<br />
<h3>$T('wizard-misc')</h3>
<input type="checkbox" name="autobrowser" id="autobrowser" value="1" <!--#if $autobrowser == 1 then 'checked="checked"' else ''#-->> <label for="autobrowser">$T('wizard-misc-browser')</label><br />
<br/>
<label class="label">$T('explain-bandwidth_max')<span class="required-star">*</span></label>
<input class=" clearinput text-input-thin" id="bandwidth" type="text" size="10" value="$bandwidth" name="bandwidth"/>
<div id="bandwidth-tip" class="tips">$T('wizard-bandwidth-explain')</div>
<div id="bandwidth-error" class="error-text hidden">$T('wizard-bandwidth-error')</div>
<br class="clear" />
<input type="hidden" name="dummyval" value="1" />
<div class="row">
<div class="col-sm-8">
<label for="bandwidth">$T('explain-bandwidth_max')</label><br />
<div class="input-group input-group-bw" data-toggle="tooltip" data-placement="right" title="$T('wizard-bandwidth-explain')">
<input class="form-control text-input-thin text-right" id="bandwidth" value="$bandwidth" type="text" size="10" name="bandwidth" />
<div class="input-group-addon">Bytes/s</div>
</div>
<div id="bandwidth-error" class="error-text hidden"><br />$T('wizard-bandwidth-error')</div>
</div>
</div>
</div> </div>
<hr /><br/> <hr />
<div class="full-width"> <br/>
<table class="full-width"> <div class="row">
<tr> <div class="col-xs-4 text-center">
<td class="align-center"><a class="btn btn-default" href="./one"><span class="glyphicon glyphicon-chevron-left"></span> $T('wizard-previous')</a></td> <a class="btn btn-default" href="./one"><span class="glyphicon glyphicon-chevron-left"></span> $T('wizard-previous')</a>
<td> </div>
<div class="align-center"> <div class="col-xs-4 text-center">
<!--#for $step in xrange($steps)#--> <!--#for $step in xrange($steps)#-->
<!--#set $step = $step + 1#--> <!--#set $step = $step + 1#-->
<span class="<!--#if $step == $number then 'selected' else 'unselected'#-->">$step</span> <span class="<!--#if $step == $number then 'selected' else 'unselected'#-->">$step</span>
<!--#end for#--> <!--#end for#-->
</div> </div>
</td> <div class="col-xs-4 text-center">
<td class="align-center"><button class="btn btn-default">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button></td> <button class="btn btn-default" id="next-button" type="submit">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button>
</tr> </div>
</table> </div>
</div>
</div> </div>
</div>
</div> </div>
</form> </form>

23
sabnzbd/wizard.py

@ -141,20 +141,6 @@ class Wizard(object):
info['number'] = 2 info['number'] = 2
info['active_lang'] = cfg.language() info['active_lang'] = cfg.language()
info['T'] = Ttemplate info['T'] = Ttemplate
host = cfg.cherryhost()
info['host'] = host
# Allow special operation if host is not one of the defaults
if host not in ('127.0.0.1', '::1', 'localhost', '0.0.0.0'):
info['custom_host'] = True
else:
info['custom_host'] = False
info['have_ssl'] = bool(sabnzbd.newswrapper.HAVE_SSL)
info['enable_https'] = cfg.enable_https()
info['autobrowser'] = cfg.autobrowser()
info['web_user'] = cfg.username()
info['web_pass'] = cfg.password()
info['bandwidth'] = cfg.bandwidth_max() info['bandwidth'] = cfg.bandwidth_max()
template = Template(file=os.path.join(self.__web_dir, 'two.html'), template = Template(file=os.path.join(self.__web_dir, 'two.html'),
@ -165,15 +151,8 @@ class Wizard(object):
def three(self, **kwargs): def three(self, **kwargs):
""" Accept webserver parms and show Indexers page """ """ Accept webserver parms and show Indexers page """
if kwargs: if kwargs:
if 'access' in kwargs:
cfg.cherryhost.set(kwargs['access'])
cfg.enable_https.set(kwargs.get('enable_https', 0))
cfg.autobrowser.set(kwargs.get('autobrowser', 0))
cfg.bandwidth_max.set(kwargs.get('bandwidth', '')) cfg.bandwidth_max.set(kwargs.get('bandwidth', ''))
cfg.username.set(kwargs.get('web_user', '')) sabnzbd.interface.set_auth(cherrypy.config)
cfg.password.set(kwargs.get('web_pass', ''))
if not cfg.username() or not cfg.password():
sabnzbd.interface.set_auth(cherrypy.config)
config.save_config() config.save_config()

Loading…
Cancel
Save