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. 54
      interfaces/wizard/index.html
  4. 154
      interfaces/wizard/one.html
  5. 174
      interfaces/wizard/static/javascript/checkserver.js
  6. 94
      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. 86
      interfaces/wizard/two.html
  11. 23
      sabnzbd/wizard.py

2
interfaces/wizard/inc_bottom.tmpl

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

36
interfaces/wizard/inc_top.tmpl

@ -1,19 +1,21 @@
<!DOCTYPE html>
<html lang="$active_lang">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="static/style.css"/>
<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="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="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="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="152x152" href="../staticcfg/ico/apple-touch-icon-152x152.png" />
</head>
<body>
<img id="logo" src="static/images/icon_sab.png" alt="SABnzbd" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$T('wizard-quickstart')</title>
<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?pid=$version"/>
<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="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="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="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="152x152" href="../staticcfg/ico/apple-touch-icon-152x152.png" />
<script type="text/javascript" src="../staticcfg/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../staticcfg/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<img id="logo" src="static/images/icon_sab.png" alt="SABnzbd" />

54
interfaces/wizard/index.html

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

154
interfaces/wizard/one.html

@ -2,70 +2,106 @@
<form action="./two" method="post" autocomplete="off">
<div class="container">
<div id="inner">
<div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div>
<br /><h1>$T('wizard-quickstart')</h1> <h2>$num</h2><br />
<hr />
<script type="text/javascript">
var txtChecking = "$T('srv-testing')";
</script>
<script type="text/javascript" src="static/javascript/jquery.js"></script>
<script type="text/javascript" src="static/javascript/checkserver.js"></script>
<h3>$T('wizard-server')</h3>
$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 id="serverDetails">
<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 id="host-tip" class="tips">$T('wizard-example') news.giganews.com</div>
<div id="host-error" class="error-text hidden">$T('wizard-server-required')</div>
<br class="clear" />
<label class="label">$T('srv-port')</label><input id="port" class=" text-input-thin" type="text" size="2" name="port" value="$port">
<div id="port-tip" class="tips">$T('wizard-port-eg')</div>
<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 id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div>
<br />
<h1>$T('wizard-quickstart')</h1>
<h2>$num</h2>
<br />
<hr />
<script type="text/javascript">
var txtChecking = "$T('srv-testing')";
<!--#include raw $webdir + "/static/javascript/checkserver.js"#-->
</script>
<h3>$T('wizard-server')</h3>
$T('wizard-explain-server')<br />
<br /><br />
<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>
<div class="col-md-5">
<div class="clearfix"></div>
<iframe style="float: right; width: 315px; height: 315px;" frameborder="0" src="http://sabnzbd.org/resources/wizard/ad/$language"></iframe>
</div>
</div>
<input type="hidden" name="session" value="$session" />
</div>
<hr />
<br/>
<div class="spacer"></div>
<button id="serverTest" class="btn btn-default"><span class="glyphicon glyphicon-sort"></span> $T('wizard-button-testServer')</button>
<div id="serverQuote" class="btn quoteBlock"><span id="serverResponse">$T('wizard-server-text')</span></div>
</div>
<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">
<div class="row">
<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>
<div class="col-xs-4 text-center">
<!--#for $step in xrange($steps)#-->
<!--#set $step = $step + 1#-->
<!--#set $step = $step + 1#-->
<span class="<!--#if $step == $number then 'selected' else 'unselected'#-->">$step</span>
<!--#end for#-->
</div>
</td>
<td class="align-center"><button class="btn btn-default">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button></td>
</tr>
</table>
</div>
<div class="col-xs-4 text-center">
<button class="btn btn-default" id="next-button">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</div>

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

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

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

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

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

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

268
interfaces/wizard/static/style.css

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

70
interfaces/wizard/three.html

@ -1,46 +1,46 @@
<!--#include $webdir + "/inc_top.tmpl"#-->
<script type="text/javascript">
<!--#include raw $webdir + "/static/javascript/restart.js"#-->
</script>
<div class="container">
<div id="inner">
<div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div>
<br /><h1>$T('wizard-quickstart')</h1> <h2>$num</h2><br />
<div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div>
<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 />
<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/>
<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 href="$helpuri">wiki</a>
</div>
</div>
<hr /><br/>
<div class="full-width">
<table class="full-width">
<tr class="align-center">
<td>
<div class="row">
<div class="col-xs-12 text-center">
<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>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--#include $webdir + "/inc_bottom.tmpl"#-->

86
interfaces/wizard/two.html

@ -1,63 +1,47 @@
<!--#include $webdir + "/inc_top.tmpl"#-->
<script type="text/javascript" src="static/javascript/jquery.js"></script>
<script type="text/javascript" src="static/javascript/pagetwo.js"></script>
<script type="text/javascript">
<!--#include raw $webdir + "/static/javascript/pagetwo.js"#-->
</script>
<form action="./three" method="post" autocomplete="off">
<div class="container">
<div id="inner">
<div id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div>
<br /><h1>$T('wizard-quickstart')</h1> <h2>$num</h2><br />
<hr />
<div class="indented bigger">
<h3>$T('wizard-access')</h3>
<!--#if $host in ('localhost','0.0.0.0')#-->
<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 />
<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 id="content" class="bigger">
<div id="rightGreyText">$T('wizard-version') $version</div>
<br />
<h1>$T('wizard-quickstart')</h1>
<h2>$num</h2>
<br />
<hr />
<h3>$T('wizard-misc')</h3>
<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>
<hr /><br/>
<div class="full-width">
<table class="full-width">
<tr>
<td class="align-center"><a class="btn btn-default" href="./one"><span class="glyphicon glyphicon-chevron-left"></span> $T('wizard-previous')</a></td>
<td>
<div class="align-center">
<hr />
<br/>
<div class="row">
<div class="col-xs-4 text-center">
<a class="btn btn-default" href="./one"><span class="glyphicon glyphicon-chevron-left"></span> $T('wizard-previous')</a>
</div>
<div class="col-xs-4 text-center">
<!--#for $step in xrange($steps)#-->
<!--#set $step = $step + 1#-->
<!--#set $step = $step + 1#-->
<span class="<!--#if $step == $number then 'selected' else 'unselected'#-->">$step</span>
<!--#end for#-->
</div>
</td>
<td class="align-center"><button class="btn btn-default">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button></td>
</tr>
</table>
</div>
</div>
<div class="col-xs-4 text-center">
<button class="btn btn-default" id="next-button" type="submit">$T('wizard-next') <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</div>
</div>
</form>

23
sabnzbd/wizard.py

@ -141,20 +141,6 @@ class Wizard(object):
info['number'] = 2
info['active_lang'] = cfg.language()
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()
template = Template(file=os.path.join(self.__web_dir, 'two.html'),
@ -165,15 +151,8 @@ class Wizard(object):
def three(self, **kwargs):
""" Accept webserver parms and show Indexers page """
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.username.set(kwargs.get('web_user', ''))
cfg.password.set(kwargs.get('web_pass', ''))
if not cfg.username() or not cfg.password():
sabnzbd.interface.set_auth(cherrypy.config)
sabnzbd.interface.set_auth(cherrypy.config)
config.save_config()

Loading…
Cancel
Save