From e52f73b0e6c62d8a7e13138a456e0c9c736e42c3 Mon Sep 17 00:00:00 2001 From: Safihre Date: Mon, 12 Oct 2015 14:27:07 +0200 Subject: [PATCH] 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. --- interfaces/wizard/inc_bottom.tmpl | 2 +- interfaces/wizard/inc_top.tmpl | 36 +-- interfaces/wizard/index.html | 54 +++-- interfaces/wizard/one.html | 154 +++++++----- interfaces/wizard/static/javascript/checkserver.js | 174 ++++++------- interfaces/wizard/static/javascript/pagetwo.js | 94 +++----- interfaces/wizard/static/javascript/restart.js | 28 +-- interfaces/wizard/static/style.css | 268 ++++++++++----------- interfaces/wizard/three.html | 70 +++--- interfaces/wizard/two.html | 86 +++---- sabnzbd/wizard.py | 23 +- 11 files changed, 459 insertions(+), 530 deletions(-) diff --git a/interfaces/wizard/inc_bottom.tmpl b/interfaces/wizard/inc_bottom.tmpl index 691287b..b317cc2 100644 --- a/interfaces/wizard/inc_bottom.tmpl +++ b/interfaces/wizard/inc_bottom.tmpl @@ -1,2 +1,2 @@ - + \ No newline at end of file diff --git a/interfaces/wizard/inc_top.tmpl b/interfaces/wizard/inc_top.tmpl index f238fc6..76d6fc1 100644 --- a/interfaces/wizard/inc_top.tmpl +++ b/interfaces/wizard/inc_top.tmpl @@ -1,19 +1,21 @@ - - - $T('wizard-quickstart') - - - - - - - - - - - - - - + + + $T('wizard-quickstart') + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/interfaces/wizard/index.html b/interfaces/wizard/index.html index 94b94a8..572e841 100644 --- a/interfaces/wizard/index.html +++ b/interfaces/wizard/index.html @@ -2,35 +2,39 @@
-
-
$T('wizard-version') $version
-

$T('wizard-quickstart')


-
-
-

$T('opt-language')

- $T('explain-language')

-
- - - -
+
+
$T('wizard-version') $version
+
+

$T('wizard-quickstart')

+
+
+
+

$T('opt-language')

+ $T('explain-language')

+
+ + + +
+
-
-
- - - - - -
$T('wizard-exit')
+
+
+
+ $T('wizard-exit') +
+
+
+
+ +
-
- - + \ No newline at end of file diff --git a/interfaces/wizard/one.html b/interfaces/wizard/one.html index f955349..e9fc7d1 100644 --- a/interfaces/wizard/one.html +++ b/interfaces/wizard/one.html @@ -2,70 +2,106 @@
-
-
$T('wizard-version') $version
-

$T('wizard-quickstart')

$num


-
- - - - - -

$T('wizard-server')

- $T('wizard-explain-server') -
- -
- -

- -
- -
$T('wizard-example') news.giganews.com
- -
- -
$T('wizard-port-eg')
- -

- -
- -

- -
$T('wizard-server-con-explain') $T('wizard-server-con-eg')
- -
- -
$T('wizard-server-ssl-explain')
-
- +
+
$T('wizard-version') $version
+
+

$T('wizard-quickstart')

+

$num

+
+
+ +

$T('wizard-server')

+ $T('wizard-explain-server')
+ +

+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ data-toggle="tooltip" data-placement="right" title="$T('wizard-server-ssl-explain')"/> + + +
+
+
+
+
+ + $T('showAllHis') + +
+
+ +
+
+ +
+
+
$T('wizard-server-text')
+
+
+ +
+
+
+ +
+
+
+

-
- - -
$T('wizard-server-text')
-
-

-
- - - - - - -
$T('wizard-previous') -
+
+
+ $T('wizard-previous') +
+
- + $step -
-
+
+
+ +
diff --git a/interfaces/wizard/static/javascript/checkserver.js b/interfaces/wizard/static/javascript/checkserver.js index 5a7753b..ce46494 100644 --- a/interfaces/wizard/static/javascript/checkserver.js +++ b/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 = ' ' + result.value.message + ''; + } else { + r = ' ' + result.value.message + ''; + } + + $('#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 = '' + result.value.message + ''; - $('#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(); + } + }) }); \ No newline at end of file diff --git a/interfaces/wizard/static/javascript/pagetwo.js b/interfaces/wizard/static/javascript/pagetwo.js index 657f0c1..d85fe11 100644 --- a/interfaces/wizard/static/javascript/pagetwo.js +++ b/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(); - }); -}); \ No newline at end of file diff --git a/interfaces/wizard/static/javascript/restart.js b/interfaces/wizard/static/javascript/restart.js index 15430dd..9e00999 100644 --- a/interfaces/wizard/static/javascript/restart.js +++ b/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); + } + }); }); \ No newline at end of file diff --git a/interfaces/wizard/static/style.css b/interfaces/wizard/static/style.css index f573cf8..35a81f0 100644 --- a/interfaces/wizard/static/style.css +++ b/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; } \ No newline at end of file diff --git a/interfaces/wizard/three.html b/interfaces/wizard/three.html index 2bb47b7..5407e67 100644 --- a/interfaces/wizard/three.html +++ b/interfaces/wizard/three.html @@ -1,46 +1,46 @@ +
-
-
$T('wizard-version') $version
-

$T('wizard-quickstart')

$num


+
+
$T('wizard-version') $version
+
+

$T('wizard-quickstart')

+

$num

+
+
+

+

$T('wizard-restarting')

+ +
+
+ +
- - - -

-

$T('wizard-restarting')

- -

- -
-

-
- - - - -
+
+
$T('wizard-goto') -
+
- \ No newline at end of file diff --git a/interfaces/wizard/two.html b/interfaces/wizard/two.html index a8f3a9e..413dea2 100644 --- a/interfaces/wizard/two.html +++ b/interfaces/wizard/two.html @@ -1,63 +1,47 @@ - - +
-
-
$T('wizard-version') $version
-

$T('wizard-quickstart')

$num


-
-
-

$T('wizard-access')

- - >
- >
-
- - >
-
-
- -
- -
-
- - >
-
-

$T('wizard-misc')

- >
-
- - -
$T('wizard-bandwidth-explain')
- -
- - - - +
+
$T('wizard-version') $version
+
+

$T('wizard-quickstart')

+

$num

+
+
+

$T('wizard-misc')

+ +
+
+
+
+ +
Bytes/s
+
+ +
+
-

-
- - - - - - -
$T('wizard-previous') -
+
+
+
+
+ $T('wizard-previous') +
+
- + $step -
-
-
+
+
+ +
+
-
diff --git a/sabnzbd/wizard.py b/sabnzbd/wizard.py index a8bf84a..8539027 100644 --- a/sabnzbd/wizard.py +++ b/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()