diff options
author | nachoparker <nacho@ownyourbits.com> | 2017-10-25 12:55:59 +0300 |
---|---|---|
committer | nachoparker <nacho@ownyourbits.com> | 2017-10-27 19:44:47 +0300 |
commit | 0bc5e091b9647f379cf9c8abf0590061b139697f (patch) | |
tree | 5c2aad1be59b3f92aebfa55af23b88a0c62b59a0 /ncp-web | |
parent | 0a3289e654acbd4fa49117d33d10174faf71e07f (diff) |
wizard: chain configurations and improved feedbackv0.31.22
Diffstat (limited to 'ncp-web')
-rw-r--r-- | ncp-web/img/menu.svg | 1 | ||||
-rw-r--r-- | ncp-web/index.php | 12 | ||||
-rw-r--r-- | ncp-web/ncp-launcher.php | 1 | ||||
-rw-r--r-- | ncp-web/ncp.css | 4 | ||||
-rw-r--r-- | ncp-web/ncp.js | 2 | ||||
-rw-r--r-- | ncp-web/wizard/CSS/wizard.css | 133 | ||||
-rw-r--r-- | ncp-web/wizard/JS/wizard.js | 339 | ||||
-rw-r--r-- | ncp-web/wizard/index.php | 218 |
8 files changed, 439 insertions, 271 deletions
diff --git a/ncp-web/img/menu.svg b/ncp-web/img/menu.svg new file mode 100644 index 00000000..222b39ea --- /dev/null +++ b/ncp-web/img/menu.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2 2v2h12V2zm0 5v2h12V7zm0 5v2h12v-2z"/></svg>
\ No newline at end of file diff --git a/ncp-web/index.php b/ncp-web/index.php index bbc7c256..5782ae20 100644 --- a/ncp-web/index.php +++ b/ncp-web/index.php @@ -66,10 +66,10 @@ <h2 id="config-box-title">NextCloudPi First Run</h2> <p>Click to start the configuration wizard</p> <br> - <a href="wizard"><img id="ncp-welcome-logo" src="wizard/img/ncp-logo.png" class="wizard"></a> + <a href="wizard"><img class="wizard-btn" src="wizard/img/ncp-logo.png" class="wizard"></a> <br> - <a href="wizard"><button type="button" class="wizard">run</button></a> - <button type="button" class="first-run-close" id="skip-wizard">skip</button> + <button type="button" class="wizard-btn" id="go-wizard" >run </button> + <button type="button" class="first-run-close" id="skip-wizard" >skip </button> <button type="button" class="first-run-close" id="close-wizard">close</button> <br><br> </div> @@ -92,14 +92,14 @@ HTML; </a> </div> <div id="header-right"> - <div id="wizard"> + <div class="wizard-btn"> <div id="expand"> - <div id="expandDisplayName" class="icon-wizard-white"></div> + <div class="icon-wizard-white"></div> </div> </div> <div id="poweroff"> <div id="expand"> - <div id="expandDisplayName" class="icon-power-white"></div> + <div class="icon-power-white"></div> </div> </div> </div> diff --git a/ncp-web/ncp-launcher.php b/ncp-web/ncp-launcher.php index 4e5c518a..6a0a346a 100644 --- a/ncp-web/ncp-launcher.php +++ b/ncp-web/ncp-launcher.php @@ -99,6 +99,7 @@ else if ( $_POST['action'] == "launch" && $_POST['config'] ) // Get new token echo '{ "token": "' . getCSRFToken() . '",'; + echo ' "ref": "' . $_POST['ref'] . '",'; echo ' "output": "" , '; echo ' "ret": '; diff --git a/ncp-web/ncp.css b/ncp-web/ncp.css index 787da0f5..44ced9a6 100644 --- a/ncp-web/ncp.css +++ b/ncp-web/ncp.css @@ -1193,3 +1193,7 @@ a#versionlink{ text-indent: -9999px; border: none; } + +#wizard-btn { + cursor: pointer; +} diff --git a/ncp-web/ncp.js b/ncp-web/ncp.js index a798d4cc..ba90ab3f 100644 --- a/ncp-web/ncp.js +++ b/ncp-web/ncp.js @@ -169,7 +169,7 @@ $(function() } ); // Wizard button - $( '#wizard' ).on('click', function(e) + $( '.wizard-btn' ).on('click', function(e) { window.location = 'wizard'; } ); diff --git a/ncp-web/wizard/CSS/wizard.css b/ncp-web/wizard/CSS/wizard.css index 47f1e925..71b36fb2 100644 --- a/ncp-web/wizard/CSS/wizard.css +++ b/ncp-web/wizard/CSS/wizard.css @@ -1,62 +1,63 @@ body { - padding-top: 60px; - padding-bottom: 40px; + padding-top: 60px; + padding-bottom: 40px; } + +a:hover, a:active, a:link { + outline: 0px none; +} + .sidebar-nav { - padding: 9px 0; + padding: 9px 0; } #rootwizard { - width: 100%; + width: 100%; } #ncp-nav { - display: table; - margin: 0 auto; + display: table; + margin: 0 auto; } #bar { - margin: 5px 0 0 0; + margin: 5px 0 0 0; } .ncp-tab-pane { - display: table; - margin: 0 auto; + display: table; + margin: 0 auto; } .ncp-tab-pane p { - text-align: center; + text-align: center; } -.ncp-tab-pane h1 { - text-align: center; +.ncp-tab-pane h1, h3 { + text-align: center; } .tab-pane { - width: 100%; + width: 100%; } #ncp-pager { - width: 50%; - margin: 0 auto; + width: 50%; + margin: 0 auto; } .previous { - float: left; + float: left; } .next { - float: right; + float: right; } .ncp-hidden { - display: none; + display: none; } .instructions { - padding: 20px; - text-align: center; + padding: 20px; + text-align: center; } .buttons-area { - display: table; -margin: 0 auto; + display: table; + margin: 0 auto; } -.ddns-form form { - display: table; - text-align: center; -} .btn { - margin:5px 0; + margin:5px 0; } div.linkbox { @@ -65,7 +66,85 @@ div.linkbox { text-align: center; } +.expand { + position: relative; + display: flex; + align-items: center; + padding: 7px 20px 6px 10px; + cursor: pointer; +} + +.menu-icon { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; + background-image:url("../../../img/menu.svg"); +} + #ncp-welcome-logo { + cursor: pointer; display: block; margin: 0 auto; } + +#notifications{ + position: fixed; + bottom: 0; + right: 0; +} + +.notification { + color: white; + padding: 10px 15px; + margin: 5px; + border-radius: 4px; + width: 20em; + text-align: center; +} + +.green-bg { + background-color: green; +} + +.orange-bg { + background-color: darkorange; +} + +.gray-bg { + background-color: lightgray; +} + +#output-wrapper { + position:fixed; + top:0; + bottom:0; + height:100%; + width:100%; + z-index:9000; + text-align:center; + cursor:pointer; +} + +#output-box { + display:block; + background: white; + position:relative; + width:40em; + height:100%; +} + +#output-btn { + position:fixed; + top:5px; + left:5px; +} + +td { + width: 7em; +} + +.buttons-area label{ + margin: 0; + font-weight: 100; +}; diff --git a/ncp-web/wizard/JS/wizard.js b/ncp-web/wizard/JS/wizard.js index 10b3f8c3..7b343e51 100644 --- a/ncp-web/wizard/JS/wizard.js +++ b/ncp-web/wizard/JS/wizard.js @@ -2,31 +2,79 @@ /*global $, jQuery, alert*/ $(document).ready(function(){ + function addNotification( txt, tclass ) + { + // limit to 9 notifications + if ( $('#notifications').children().length > 8 ) + $('#notifications').children().last().remove(); + + $('#notifications').prepend( '<div class="notification ' + tclass + '">' + txt + '</div>' ); + } + + function logOutput( txt ) + { + var textarea = $('#output-box'); + textarea.val( textarea.val() + txt ); + textarea[0].scrollTop = textarea[0].scrollHeight; + } + + function showLog() + { + $('#output-wrapper').show(); + var textarea = $('#output-box'); + textarea[0].scrollTop = textarea[0].scrollHeight; + } + // launch an request for launch action to the backend - function launch_action( action /* string */, args /* object */, next /* callback */ ) + function launch_action( action /* string */, args /* object */, callback /* callback */ ) { $('input').prop('disabled', true); + $('button').prop('disabled', true); + addNotification( action, 'gray-bg' ) ; + + logOutput( '\n[ ' + action + ' ]' + '\n' ); + $.post('../ncp-launcher.php', { action:'launch', ref: action, config: JSON.stringify( args ), csrf_token: document.getElementById( 'csrf-token' ).value } - ).fail( errorMsg ).done( next ); + ).fail( errorMsg ).done( callback ); } - function nextTabOnSuccess( data ) - { + function nextOnSuccess( data, nextfunc, failfunc ) + { $('input').prop('disabled', false); + $('button').prop('disabled', false); + var res = JSON.parse( data ); - if ( res.ret && res.ret == 0 ) - $('#rootwizard').bootstrapWizard('next'); - else - alert( 'error ' + res.output ); // save next single use token if ( res.token ) $('#csrf-token').val( res.token ); + + // remove gray (loading) notification + $('#notifications').children().first().remove(); + + // continue if ok + var msg = res.ref || res.output || 'error'; + if ( res.ret && res.ret == 0 ) + { + addNotification( msg, 'green-bg' ); + nextfunc(); + } + else + { + addNotification( msg, 'orange-bg' ); + showLog(); + failfunc && failfunc(); + } + } + + function nextTabOnSuccess( data ) + { + nextOnSuccess( data, function(){ $('#rootwizard').bootstrapWizard('next') } ); } function show_with_animation( elemid ) @@ -43,6 +91,46 @@ $(document).ready(function(){ alert('There was an error with the request'); } + function post_ddns_hook( data ) + { + nextOnSuccess( data, function(){ + launch_action( 'nc-autoupdate-ncp', { "ACTIVE":"yes" }, + + function( data ){ + nextOnSuccess( data, function(){ + launch_action( 'dnsmasq', { "ACTIVE":"yes", "DOMAIN":$("#ddns-domain").val() }, + + // keep this last, because it restarts the httpd server + function( data ){ + nextOnSuccess( data, function(){ + launch_action( 'letsencrypt', { "DOMAIN":$("#ddns-domain").val() }, + + nextTabOnSuccess + + ) } ) } + ) } ) } + ) } ) + } + // Event source to receive process output in real time + if (!!window.EventSource) + var source = new EventSource('../ncp-output.php'); + else + $('#config-box-title').val( "Browser not supported" ); + + source.addEventListener('message', function(e) + { + if ( e.origin != 'https://' + window.location.hostname + ':4443') + { + $('#output-box').val( "Invalid origin" ); + return; + } + + logOutput( e.data + '\n' ); + }, false); + + // start wizard clicking logo + $('#ncp-welcome-logo ').on('click', function(){ $('#rootwizard').bootstrapWizard('next'); } ); + // This must be first or it breaks $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index){ var $total = navigation.find('li').length - 1; @@ -53,184 +141,157 @@ $(document).ready(function(){ // This is required or the tabs aren't styled $('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'}); + // Enable Automount step - $('#enable-Automount').on('click', function() { - show_with_animation( 'plug-usb' ); - dataTable[0] = { - automount: 'yes' - }; + $('#enable-automount').on('click', function() { + show_with_animation( 'plug-usb-pane' ); }); + // Disable Automount step - $('#disable-Automount').on('click', function() { - $("#plug-usb").hide(); + $('#disable-automount').on('click', function() { + $("#plug-usb-pane").hide(); $('#rootwizard').bootstrapWizard('next'); - dataTable[0] = { - automount: 'no' - }; - dataTable[1] = { - plugUSB: 'no' - }; }); + // Enable format-usb step $('#plugUSB').on('click', function() { - dataTable[1] = { - plugUSB: 'yes' - }; - - launch_action( 'nc-automount', {"ACTIVE":"yes"}, - function ( data ) - { - $('input').prop('disabled', false); - var res = JSON.parse( data ); - if ( res.ret && res.ret == 0 ) // action ran ok - show_with_animation( 'format-usb' ); - else // action failed - alert( 'error: ' + res.output ); - - // save next single use token - if ( res.token ) - $('#csrf-token').val( res.token ); - } - ); - + launch_action( 'nc-automount', + {"ACTIVE":"yes"}, + function ( data ){ + nextOnSuccess( data, function(){ show_with_animation( 'format-usb' ); } ); + } + ); }); + // Enable nextcloud-data step - $('#format-USB').on('click', function() { - dataTable[2] = { - format: 'yes', - }; - - launch_action( 'nc-format-USB', {"LABEL":"myCloudDrive"}, - function ( data ) - { - $('input').prop('disabled', false); - var res = JSON.parse( data ); - if ( res.ret && res.ret == 0 ) // action ran ok - show_with_animation( 'nc-datadir-pane' ); - else // action failed - alert( 'error: ' + res.output ); - - // save next single use token - if ( res.token ) - $('#csrf-token').val( res.token ); - } - ); + $('#format-USB').on('click', function(){ + launch_action( 'nc-format-USB', + {"LABEL":"myCloudDrive"}, + function ( data ){ + nextOnSuccess( data, function(){ show_with_animation( 'nc-datadir-pane' ); } ); + } + ); }); // Enable nextcloud data tab on skip format. - $('#skip-format-USB').on('click', function() { - show_with_animation( 'nc-datadir-pane' ); - dataTable[2] = { - format: 'no', - }; + $('#skip-format-USB').on('click', function(){ + show_with_animation( 'nc-datadir-pane' ); }); // Launch nc-datadir $('#nc-datadir').on('click', function() { - dataTable[2] = { - format: 'no', - }; - launch_action( 'nc-datadir', {"DATADIR":"/media/myCloudDrive/ncdata"}, nextTabOnSuccess ); + launch_action( 'nc-datadir', {"DATADIR":"/media/USBdrive/ncdata"}, nextTabOnSuccess ); + }); + + // Enable external access step + $('#enable-external').on('click', function(){ + launch_action( 'fail2ban', + { "ACTIVE":"yes" }, + function ( data ){ + nextOnSuccess( data, function(){ show_with_animation( 'forward-ports-pane' ) } ); + } + ); + }); + + // Skip external access step + $('#skip-external').on('click', function(){ + $('#forward-ports-manual-pane').hide(); + $('#forward-ports-pane' ).hide(); + $('#ddns-choose' ).hide(); + $("#ddns-account" ).hide(); + $("#noip" ).hide(); + $("#freedns" ).hide(); + $('#rootwizard').bootstrapWizard('next'); }); // Run port forwarding with UPnP step - $('#port-forward-run').on('click', function() { + $('#port-forward-run').on('click', function(){ // Run Port Forwarding and Test Port - dataTable[7] = { - portForwardRun: 'yes' - }; - - launch_action( 'nc-forward-ports', {"HTTPSPORT":"443","HTTPPORT":"80"}, nextTabOnSuccess ); + launch_action( 'nc-forward-ports', + {"HTTPSPORT":"443","HTTPPORT":"80"}, + function ( data ){ + nextOnSuccess( data, function(){ show_with_animation( 'ddns-choose' ) } ); + } + ); }); - // Skip port forwarding - $('#port-forward-skip').on('click', function() { - $("#port-forward-not-ok").hide(); - dataTable[7] = { - portForwardRun: 'no' - }; - $('#rootwizard').bootstrapWizard('next'); + // Manual port forwarding + $('#port-forward-manual').on('click', function() { + show_with_animation( 'forward-ports-manual-pane' ); }); - // If test after port forwarding is not ok, run this - $('#port-forward-error').on('click', function() { - show_with_animation( 'port-forward-not-ok' ); - dataTable[8] = { - portForward: 'not-ok' - }; + // Manual port forwarding done + $('#port-forward-done').on('click', function() { + show_with_animation( 'ddns-choose' ); }); + // Skip DDNS setup - $('#ddns-skip').on('click', function() { - $("#choose-ddns").hide(); + $('#ddns-skip').on('click', function(){ + $("#domain" ).hide(); + $("#noip" ).hide(); + $("#freedns").hide(); $('#rootwizard').bootstrapWizard('next'); - dataTable[9] = { - ddns: 'no' - }; }); + // Show FreeDNS step - $('#ddns-freedns').on('click', function() { - $("#noip").hide(); - show_with_animation( 'freedns' ); - - dataTable[9] = { - ddns: 'yes', - service: 'freedns' - }; + $('#ddns-freedns').on('click', function(){ + $("#noip" ).hide(); + $("#freedns").show(); + show_with_animation( 'ddns-account' ); }); - // Enable FreeDNS step - $('#ddns-enable-freedns').on('click', function() { - dataTable[9] = { - ddns: 'yes', - service: 'freedns', - domain: $("freedns-domain").val(), - updateHash: $("freedns-hash").val(), - }; + // Enable FreeDNS step + $('#ddns-enable-freedns').on('click', function(){ launch_action( 'freeDNS', { "ACTIVE":"yes", - "UPDATEHASH": $("freedns-hash").val(), - "DOMAIN": $("freedns-domain").val(), + "DOMAIN": $("#ddns-domain" ).val(), + "UPDATEHASH": $("#freedns-hash").val(), "UPDATEINTERVAL": "30" }, - nextTabOnSuccess + post_ddns_hook ); + // prevent scroll up + return false; }); + // Show noip step - $('#ddns-noip').on('click', function() { + $('#ddns-noip').on('click', function(){ + $("#noip" ).show(); $("#freedns").hide(); - show_with_animation( 'noip' ); - - dataTable[9] = { - ddns: 'yes', - service: 'noip' - }; + show_with_animation( 'ddns-account' ); }); + // Enable noip step - $('#ddns-enable-noip').on('click', function() { - dataTable[9] = { - ddns: 'yes', - service: 'noip', - user: $("#noip-user").val(), - password: $("#noip-password").val(), - domain: $("noip-domain").val(), - time: $("noip-time").val(), - }; - - launch_action( 'no-ip', + $('#ddns-enable-noip').on('click', function(){ + launch_action( 'no-ip', { "ACTIVE":"yes", - "USER": $("#noip-user").val(), - "PASS": $("#noip-password").val(), - "DOMAIN": $("noip-domain").val(), - "TIME": "30" + "DOMAIN": $("#ddns-domain" ).val(), + "USER": $("#noip-user" ).val(), + "PASS": $("#noip-password").val(), }, - nextTabOnSuccess + post_ddns_hook ); - }); + // prevent scroll up + return false; + } + ); + + // show log output + $('#output-btn').on('click', function(){ + showLog(); + } ); + + // close log output + $('.output-close').on('click', function(e){ + if( e.target.id == 'output-wrapper' ) + $('#output-wrapper').hide(); + } ); + + // make sure log box starts empty + $('#output-box').val(''); // click to nextcloud button $('#gotonextcloud').attr('href', window.location.protocol + '//' + window.location.hostname ); }); - -var dataTable = []; diff --git a/ncp-web/wizard/index.php b/ncp-web/wizard/index.php index 8ccf7ecd..d670ebbe 100644 --- a/ncp-web/wizard/index.php +++ b/ncp-web/wizard/index.php @@ -28,9 +28,8 @@ <ul id="ncp-nav"> <li><a href="#tab1" data-toggle="tab">Welcome</a></li> <li><a href="#tab2" data-toggle="tab">USB Configuration</a></li> - <li><a href="#tab3" data-toggle="tab">Port Forwarding</a></li> - <li><a href="#tab4" data-toggle="tab">DDNS</a></li> - <li><a href="#tab5" data-toggle="tab">Finish</a></li> + <li><a href="#tab3" data-toggle="tab">External access</a></li> + <li><a href="#tab4" data-toggle="tab">Finish</a></li> </ul> <div id="bar" class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div> @@ -50,11 +49,11 @@ <!-- Enable Automount --> <p class="instructions"> Do you want to save Nextcloud data in a USB drive?</p> <div class="buttons-area"> - <input type="button" class="btn" id="enable-Automount" value="Yes" /> - <input type="button" class="btn" id="disable-Automount" value="No" /> + <input type="button" class="btn" id="enable-automount" value="Yes" /> + <input type="button" class="btn" id="disable-automount" value="No" /> </div> <!-- Test mount --> - <div class="ncp-hidden" id="plug-usb"> + <div class="ncp-hidden" id="plug-usb-pane"> <p class="instructions">Plug in the USB drive and hit continue.</p> <div class="buttons-area"> <input type="button" class="btn" id="plugUSB" value="Continue"/> @@ -80,108 +79,131 @@ </div> </div> </div> - <!-- Tab 3 content - Test ports - Port Forwarding --> + <!-- Tab 3 content - External Access --> <div class="tab-pane" id="tab3"> <div class="ncp-tab-pane"> - <p class="instructions"> - To access from the outside, your need to forward ports 80 and 443 to your RPi IP address <br> - You can have NextCloudPi try to do this automatically for you<br> - To do it manually, you can access your router interface, normally at <a href="http://192.168.1.1" target="_blank">http://192.168.1.1</a><br> - </p> - <div class="buttons-area"> - <input type="button" class="btn" id="port-forward-run" value="Try to do it for me"/> - <input type="button" class="btn" id="port-forward-skip" value="I will do it manually"/> - </div> + <!-- Enable external access --> + <p class="instructions"> Do you want to access Nextcloud from outside your house?</p> + <div class="buttons-area"> + <input type="button" class="btn" id="enable-external" value="Yes" /> + <input type="button" class="btn" id="skip-external" value="No" /> </div> - <!-- Throw error message when test after UPnP fails --> - <div class="ncp-hidden" id="port-forward-not-ok"> - <p class="instructions" style="color: red"> - Couldn't configure port forwarding automatically. You must manually enable UPnP from your Router. After this, try again. - </p> - </div> - </div> - <!-- Tab 4 content - DDNS --> - <div class="tab-pane" id="tab4"> - <div class="ncp-tab-pane"> - <p class="instructions"> + <div class="ncp-tab-pane ncp-hidden" id="forward-ports-pane"> + <h3>Port forwarding</h3> + <p class="instructions"> + To access from the outside, your need to forward ports 80 and 443 to your RPi IP address <br> + You can have NextCloudPi try to do this automatically for you<br> + To do it manually yourself, you must access your router interface, usually at <a href="http://192.168.1.1" target="_blank">http://192.168.1.1</a><br> + </p> + <div class="buttons-area"> + <input type="button" class="btn" id="port-forward-run" value="Try to do it for me"/> + <input type="button" class="btn" id="port-forward-manual" value="I will do it manually"/> + </div> + </div> + + <div class="ncp-hidden" id="forward-ports-manual-pane"> + <p class="instructions"> + Click when you are finished + </p> + <div class="buttons-area"> + <input type="button" class="btn" id="port-forward-done" value="Continue"/> + </div> + </div> + <div class="ncp-tab-pane ncp-hidden" id="ddns-choose"> + <h3>DDNS</h3> + <p class="instructions"> You need a DDNS provider in order to access from outside.<br> You will get a domain URL, such as mycloud.ownyourbits.com.<br> You need to create a free account with FreeDNS, DuckDNS or No-IP. <br> - If you don't know which one to chose just <a href="https://freedns.afraid.org/signup/?plan=starter" target="_blank">click here for FreeDNS</a> <br> + If you don't know which one to choose just <a href="https://freedns.afraid.org/signup/?plan=starter" target="_blank">click here for FreeDNS</a> <br> <br> - Choose a client. - <div class="buttons-area"> - <input type="button" class="btn" id="ddns-freedns" value="FreeDNS"/> - <input type="button" class="btn" id="ddns-noip" value="No-IP"/> - <input type="button" class="btn" id="ddns-skip" value="Skip"/> - </div> - <!-- Configure FreeDNS --> - <div class="ncp-hidden" id="freedns"> - <p class="instructions"> - Fill the input area for FreeDNS. - </p> - <div class="buttons-area"> - <form class="ddns-form"> - <p>Domain - <input type="text" id="freedns-domain" placeholder="cloud.ownyourbits.com"> - </p> - <p>Update Hash - <input type="text" id="freedns-hash" placeholder="abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1234567"> - </p> - </form> - <input type="button" class="btn" id="ddns-enable-freedns" value="Enable FreeDNS"/> - </div> - </div> - <!-- Configure No-IP --> - <div class="ncp-hidden" id="noip"> - <p class="instructions"> - Fill in the input area for No-IP. - </p> - <div class="buttons-area"> - <div class="ddns-form"> - <form> - <p>User - <input type="text" id="noip-user" placeholder="user@ownyourbits.com"> - </p> - <p>Password - <input type="text" id="noip-password" placeholder="secret"> - </p> - <p>Domain - <input type="text" id="noip-domain" placeholder="cloud.ownyourbits.com"> - </p> - </form> - </div> - <input type="button" class="btn" id="ddns-enable-noip" value="Enable No-IP"/> - </div> - </div> - </div> - </div> - <!-- Tab 5 content - Finish --> - <div class="tab-pane" id="tab5"> - <div class="ncp-tab-pane"> - <p class="instructions"> - NextCloudPi is ready!</p> + Choose a client. + <div class="buttons-area"> + <input type="button" class="btn" id="ddns-freedns" value="FreeDNS"/> + <input type="button" class="btn" id="ddns-noip" value="No-IP"/> + <input type="button" class="btn" id="ddns-skip" value="Skip"/> + </div> + </div> + <!-- DDNS domain --> + <div class="ncp-hidden" id="ddns-account"> + <div class="buttons-area"> + <p class="instructions"> Account details for DDNS service. </p> + <table> + <tr> + <td><label for="ddns-domain">Domain</label></td> + <td> <input type="text" id="ddns-domain" placeholder="cloud.ownyourbits.com"> </td> + </tr> + </table> + </div> - <div class="linkbox"> - <a id='gotonextcloud' href="#"><img id="nextcloud" src="img/nc-logo.png"></a> - <br>go to your Nextcloud - </div> - <div class="linkbox"> - <a href=".."><img id="ncp-web" src="img/ncp-logo.png"></a> - <br>go back to NextCloudPi web panel - </div> + <!-- Configure FreeDNS --> + <div class="ncp-hidden" id="freedns"> + <div class="buttons-area"> + <form class="ddns-form"> + <table> + <tr> + <td><label for="freedns-hash">Update Hash</label></td> + <td><input type="text" id="freedns-hash" placeholder="abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1234567"></td> + </tr> + </table> + <div class="buttons-area"> + <button class="btn" id="ddns-enable-freedns">Finish</button> + </div> + </form> + </div> + </div> - </div> + <!-- Configure No-IP --> + <div class="ncp-hidden" id="noip"> + <div class="buttons-area"> + <div class="ddns-form"> + <form> + <table> + <tr> + <td><label for="noip-user">User</label></td> + <td><input type="text" id="noip-user" placeholder="user@ownyourbits.com"></td> + </tr> + <tr> + <td><label for="noip-password">Password</label></td> + <td><input type="text" id="noip-password" placeholder="secret"></td> + </tr> + </table> + <div class="buttons-area"> + <button class="btn" id="ddns-enable-noip">Finish</button> + </div> + </form> + </div> + </div> + </div> + </div> </div> - </div> - <!-- Navigation buttons --> - <ul class="pager wizard" id="ncp-pager"> - <li class="previous first" style="display:none;"><a href="#">First</a></li> - <li class="previous"><a href="#">Previous</a></li> - <li class="next last" style="display:none;"><a href="#">Last</a></li> - <li class="next"><a href="#">Next</a></li> - </ul> -</div> + </div> + <!-- Tab 4 content - Finish --> + <div class="tab-pane" id="tab4"> + <div class="ncp-tab-pane"> + <p class="instructions"> NextCloudPi is ready!</p> + + <div class="linkbox"> + <a id='gotonextcloud' href="#"><img id="nextcloud" src="img/nc-logo.png"></a> + <br>go to your Nextcloud + </div> + <div class="linkbox"> + <a href=".."><img id="ncp-web" src="img/ncp-logo.png"></a> + <br>go back to NextCloudPi web panel + </div> + + </div> + </div> + </div> + + <div class="expand"> + <div id="output-btn" class="menu-icon"></div> + </div> + + <div id="output-wrapper" class="output-close ncp-hidden"> + <textarea readonly id="output-box" rows="25" cols="60"></textarea> + </div> + <div id="notifications"></div> <?php include ('../csrf.php'); |