wizard: connect backend with frontend. Modifications for first release

changelog.md

@@ -1,5 +1,7 @@
 
-[v0.30.0](https://github.com/nextcloud/nextcloudpi/commit/ab69e1f) (2017-09-25) reviewed duckDNS: small adaptations
+[v0.31.0](https://github.com/nextcloud/nextcloudpi/commit/5d25473) (2017-09-27) wizard: connect backend with frontend. Modifications for first release
+
+[v0.30.0](https://github.com/nextcloud/nextcloudpi/commit/87319a2) (2017-09-25) reviewed duckDNS: small adaptations
 
 [v0.29.4 ](https://github.com/nextcloud/nextcloudpi/commit/caa38a3) (2017-09-23) nc-backup: apply limit before backup
 
@@ -11,7 +13,7 @@
 
 [v0.29.0 ](https://github.com/nextcloud/nextcloudpi/commit/0c1f1af) (2017-09-20) updated to NC12.0.3
 
-[v0.28.2](https://github.com/nextcloud/nextcloudpi/commit/ac3fcab) (2017-09-18) ncp-web: point changelog to master
+[v0.28.2 ](https://github.com/nextcloud/nextcloudpi/commit/ac3fcab) (2017-09-18) ncp-web: point changelog to master
 
 [v0.28.1 ](https://github.com/nextcloud/nextcloudpi/commit/3b71b3d) (2017-09-15) nc-static-IP: add new IP to trusted domain
 

ncp-web/Wizard/JS/wizard.js

@@ -1,228 +0,0 @@
-/*jslint browser: true*/
-/*global $, jQuery, alert*/
-$(document).ready(function(){
-	// This must be first or it breaks
-	$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index){
-		var $total = navigation.find('li').length;
-		var $current = index+1;
-		var $percent = ($current/$total) * 100;
-		$('#rootwizard').find('.progress-bar').css({width:$percent+'%'});
-	}});
-	/* For some reason value="USBStick" didn't work in the <input> element */
-	// document.getElementById('usb-label').value = 'USBStick';
-	// document.getElementById('data-location').value = '/media/USBdrive/ncdata';
-	document.getElementById('freedns-domain').value = 'cloud.ownyourbits.com';
-	document.getElementById('freedns-hash').value = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1234567';
-	document.getElementById('freedns-time').value = '10';
-	document.getElementById('noip-user').value = '';
-	document.getElementById('noip-password').value = '';
-	document.getElementById('noip-domain').value = 'mycloud.ownyourbits.com';
-	document.getElementById('noip-time').value = '10';
-
-	// This is required or the tabs aren't styled
-	$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'}); 
-	// Enable Automount step
-	$('#enable-Automount').on('click', function() {
-		$("#plug-usb").show(500);
-		$('html, body').animate({
-        scrollTop: $("#plug-usb").offset().top
-    }, 2000);
-		dataTable[0] = {
-			automount: 'yes'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Disable Automount step
-	$('#disable-Automount').on('click', function() {
-		$("#plug-usb").hide();
-		$('#rootwizard').bootstrapWizard('next');
-		dataTable[0] = {
-			automount: 'no'
-		};
-		dataTable[1] = {
-			plugUSB: 'no'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Enable format-usb step
-	$('#plugUSB').on('click', function() {
-		$("#format-usb").show(500);
-		$('html, body').animate({
-        scrollTop: $("#format-usb").offset().top
-    }, 2000);
-		dataTable[1] = {
-			plugUSB: 'yes'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Enable nextcloud-data step
-	$('#format-USB').on('click', function() {
-		dataTable[2] = {
-			format: 'yes',
-		};
-		$('#rootwizard').bootstrapWizard('next');
-		console.log(JSON.stringify(dataTable));
-	});
-	// Enable nextcloud data tab on skip format.
-	$('#skip-format-USB').on('click', function() {
-		$("#nextcloud-data").show(500);
-		$('html, body').animate({
-			scrollTop: $("#nextcloud-data").offset().top
-    }, 2000);
-		dataTable[2] = {
-			format: 'no',
-		};
-		$('#rootwizard').bootstrapWizard('next');
-		console.log(JSON.stringify(dataTable));
-	});
-	// Move to next tab on port forward skip.
-	$('#access-outside-no').on('click', function() {
-		dataTable[4] = {
-			accessOutside: 'no'
-		};
-		console.log(JSON.stringify(dataTable));
-		$('#rootwizard').bootstrapWizard('next');
-	});
-	// Run test ports
-	$('#test-ports-run').on('click', function() {
-		// Run test ports 
-		dataTable[5] = {
-			testPorts: 'yes' // Enable fail2ban
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// If test ports are ok, run this
-	$('#test-ports-ok').on('click', function() {
-		$("#port-forward").hide();
-		$("#port-forward-not-ok").hide();
-		dataTable[6] = {
-			testPorts: 'ok'
-		};
-		dataTable[7] = {
-			portForwardRun: 'no'
-		}
-		dataTable[8] = {
-			portForward: 'ok-before'
-		}
-		console.log(JSON.stringify(dataTable));
-		$('#rootwizard').bootstrapWizard('next');
-	});
-	// If test ports fail run this and move to next step
-	$('#test-ports-continue').on('click', function() {
-		$("#port-forward").show(500);
-		$('html, body').animate({
-        scrollTop: $("#port-forward").offset().top
-    }, 2000);
-		dataTable[6] = {
-			testPorts: 'ok'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Run port forwarding with UPnP step
-	$('#port-forward-run').on('click', function() {
-		// Run Port Forwarding and Test Port
-		dataTable[7] = {
-			portForwardRun: 'yes'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// If test after port forwarding is ok, run this
-	$('#port-forward-ok').on('click', function() {
-		$("#port-forward-not-ok").hide();
-		dataTable[7] = {
-			portForwardRun: 'yes'
-		};
-		dataTable[8] = {
-			portForward: 'ok-after'
-		}
-		console.log(JSON.stringify(dataTable));
-		$('#rootwizard').bootstrapWizard('next');
-	});
-	// If test after port forwarding is not ok, run this
-	$('#port-forward-error').on('click', function() {
-		$("#port-forward-not-ok").show(500);
-		$('html, body').animate({
-        scrollTop: $("#port-forward-not-ok").offset().top
-    }, 2000);
-		dataTable[8] = {
-			portForward: 'not-ok'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Enable DDNS step
-	$('#ddns-yes').on('click', function() {
-		$("#choose-ddns").show(500);
-		$('html, body').animate({
-        scrollTop: $("#choose-ddns").offset().top
-    }, 2000);
-		dataTable[9] = {
-			ddns: 'yes'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Skip DDNS setup
-	$('#ddns-skip').on('click', function() {
-		$("#choose-ddns").hide();
-		$('#rootwizard').bootstrapWizard('next');
-		dataTable[9] = {
-			ddns: 'no'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Show FreeDNS step
-	$('#ddns-freedns').on('click', function() {
-		$("#noip").hide();
-		$("#freedns").show(500);
-		$('html, body').animate({
-        scrollTop: $("#freedns").offset().top
-    }, 2000);
-
-		dataTable[9] = {
-			ddns: 'yes',
-			service: 'freedns'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// Enable FreeDNS step
-	$('#ddns-enable-freedns').on('click', function() {
-		dataTable[9] = {
-			ddns: 'yes',
-			service: 'freedns',
-			domain: $("freedns-domain").val(),
-			updateHash: $("freedns-hash").val(),
-			updateInterval: $("freedns-time").val(),
-		};
-		$('#rootwizard').bootstrapWizard('next');
-		console.log(JSON.stringify(dataTable));
-	});
-	// Show noip step
-	$('#ddns-noip').on('click', function() {
-		$("#freedns").hide();
-		$("#noip").show(500);
-		$('html, body').animate({
-        scrollTop: $("#onip").offset().top
-    }, 2000);
-		dataTable[9] = {
-			ddns: 'yes',
-			service: 'noip'
-		};
-		console.log(JSON.stringify(dataTable));
-	});
-	// 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(),
-		};
-		$('#rootwizard').bootstrapWizard('next');
-		console.log(JSON.stringify(dataTable));
-	});
-	
-});
-
-var dataTable = [];
-console.log("hi");

ncp-web/wizard/CSS/wizard.css

@@ -57,4 +57,15 @@ margin: 0 auto;
 }
 .btn {
 	margin:5px 0;
-}
+}
+
+div.linkbox {
+  display:inline-block;
+  padding: 10px;
+  text-align: center;
+}
+
+#ncp-welcome-logo {
+  display: block;
+  margin: 0 auto;
+}

ncp-web/wizard/JS/wizard.js

@@ -0,0 +1,236 @@
+/*jslint browser: true*/
+/*global $, jQuery, alert*/
+$(document).ready(function(){
+
+    // launch an request for launch action to the backend
+    function launch_action( action /* string */, args /* object */, next /* callback */ )
+    {
+      $('input').prop('disabled', true);
+      $.post('../ncp-launcher.php',
+        { action:'launch', 
+          ref: action,
+          config: JSON.stringify( args ),
+          csrf_token: document.getElementById( 'csrf-token' ).value
+        } 
+      ).fail( errorMsg ).done( next );
+    }
+
+    function nextTabOnSuccess( data )
+    { 
+      $('input').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 );
+    }
+
+    function show_with_animation( elemid )
+    {
+      $('#' + elemid).show(500);
+      $('html, body').animate({
+        scrollTop: $('#' + elemid).offset().top
+      }, 2000);
+    }
+
+    // Show error on failed AJAX call
+    function errorMsg( data )
+    { 
+      alert('There was an error with the request'); 
+    }
+
+	// This must be first or it breaks
+	$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index){
+		var $total = navigation.find('li').length - 1;
+		var $current = index;
+		var $percent = ($current/$total) * 100;
+		$('#rootwizard').find('.progress-bar').css({width:$percent+'%'});
+	}});
+
+	// 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'
+		};
+	});
+	// Disable Automount step
+	$('#disable-Automount').on('click', function() {
+		$("#plug-usb").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 );
+          }
+        );
+
+	});
+	// 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 );
+          }
+        );
+	});
+
+	// Enable nextcloud data tab on skip format.
+	$('#skip-format-USB').on('click', function() {
+        show_with_animation( 'nc-datadir-pane' );
+		dataTable[2] = {
+			format: 'no',
+		};
+	});
+
+	// Launch nc-datadir
+	$('#nc-datadir').on('click', function() {
+		dataTable[2] = {
+			format: 'no',
+		};
+        launch_action( 'nc-datadir', {"DATADIR":"/media/myCloudDrive/ncdata"}, nextTabOnSuccess );
+	});
+
+	// Run port forwarding with UPnP step
+	$('#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 );
+	});
+
+	// Skip port forwarding
+	$('#port-forward-skip').on('click', function() {
+		$("#port-forward-not-ok").hide();
+		dataTable[7] = {
+			portForwardRun: 'no'
+		};
+		$('#rootwizard').bootstrapWizard('next');
+	});
+
+	// 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'
+		};
+	});
+	// Skip DDNS setup
+	$('#ddns-skip').on('click', function() {
+		$("#choose-ddns").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'
+		};
+	});
+	// Enable FreeDNS step
+	$('#ddns-enable-freedns').on('click', function() {
+		dataTable[9] = {
+			ddns: 'yes',
+			service: 'freedns',
+			domain: $("freedns-domain").val(),
+			updateHash: $("freedns-hash").val(),
+		};
+
+        launch_action( 'freeDNS', 
+          {
+            "ACTIVE":"yes",
+            "UPDATEHASH": $("freedns-hash").val(),
+            "DOMAIN": $("freedns-domain").val(),
+            "UPDATEINTERVAL": "30"
+          },
+          nextTabOnSuccess
+        );
+	});
+	// Show noip step
+	$('#ddns-noip').on('click', function() {
+		$("#freedns").hide();
+        show_with_animation( 'noip' );
+
+		dataTable[9] = {
+			ddns: 'yes',
+			service: 'noip'
+		};
+	});
+	// 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', 
+          {
+            "ACTIVE":"yes",
+            "USER": $("#noip-user").val(),
+            "PASS": $("#noip-password").val(),
+            "DOMAIN": $("noip-domain").val(),
+            "TIME": "30"
+          },
+          nextTabOnSuccess
+        );
+	});
+
+    // click to nextcloud button
+    $('#gotonextcloud').attr('href', window.location.protocol + '//' + window.location.hostname );
+});
+
+var dataTable = [];

ncp-web/wizard/index.php

@@ -7,6 +7,9 @@
 		<!-- Bootstrap -->
 		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 		<link href="CSS/wizard.css" rel="stylesheet">
+        <?php 
+            session_start();
+        ?>
 	</head>
 <body>
 <div id="rootwizard">
@@ -24,8 +27,9 @@
 		<!-- Tab 1 content - Welcome -->
 		<div class="tab-pane" id="tab1">
 			<div class="ncp-tab-pane">
-				<h1>Welcome to NextCloudPi wizard</h1>
-				<p>This is the wizard to help you configure the bare minimum requirements.</p>
+				<h1>Welcome to NextCloudPi</h1>
+                <img id="ncp-welcome-logo" src="img/ncp-logo.png">
+				<p>This wizard will help you configure your personal cloud.</p>
 			</div>
 		</div>
 		<!-- Tab 2 content - USB Configuration -->
@@ -56,40 +60,31 @@
 						<input type="button" class="btn" id="skip-format-USB" value="Skip"/>
 					</div>
 				</div>
+				<!-- Move datadir -->
+				<div class="ncp-hidden" id="nc-datadir-pane">
+					<div class="buttons-area">
+						<input type="button" class="btn" id="nc-datadir" value="Move data to USB"/>
+					</div>
+				</div>
 			</div>
 		</div>
 		<!-- Tab 3 content - Test ports - Port Forwarding -->
 		<div class="tab-pane" id="tab3">
 			<div class="ncp-tab-pane">
-				<!-- Test if public ports are open -->
-					<p class="instructions">
-						To access from the outside of your house, your public ports 80 and 443 need to point to your Raspberry Pi.
-						<br>
-						Test that your ports are open.
-					</p>
-					<div class="buttons-area">
-						<input type="button" class="btn" id="test-ports-run" value="Test Ports"/>
-						<input type="button" class="btn" id="test-ports-continue" value="Continue"/>
-						<input type="button" class="btn" id="test-ports-ok" value="Test ports are OK"/>
-					</div>
-				</div>
-				<!-- Enable port forwarding with UPnP -->
-				<div class="ncp-hidden" id="port-forward">
-					<p class="instructions">
-						Your public ports are closed. Click "Forward Ports" to forward them with UPnP. 
-						<br>
-						You need UPnP enabled on your Router for this. It is recomended that you disable it after you forward, them for security reasons.
-					</p>
-					<div class="buttons-area">
-						<input type="button" class="btn" id="port-forward-run" value="Port Forward"/>
-						<input type="button" class="btn" id="port-forward-ok" value="Port Forwarding OK"/>
-						<input type="button" class="btn" id="port-forward-error" value="Port Forwarding Error"/>
-					</div>
+                  <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>
 				</div>
 				<!-- Throw error message when test after UPnP fails -->
 				<div class="ncp-hidden" id="port-forward-not-ok">
 					<p class="instructions" style="color: red">
-						Port forwarding didn"t work with UPnP. You have to manually enable port forwarding from your Router. After this run Test Ports again.
+						Couldn't configure port forwarding automatically. You must manually enable UPnP from your Router. After this, try again.
 					</p>
 				</div>	
 			</div>
@@ -97,23 +92,16 @@
 			<div class="tab-pane" id="tab4">
 				<div class="ncp-tab-pane">
 					<p class="instructions">
-						A DDNS service will keep updated your DNS record every time your Public IP changes. If you don"t have a Domain name, you can get a sub-Domain name for free. Do you want to enable a DDNS client?
-						<br>
-						You need to have a FreeDNS or No-IP account.
-					</p>
-					<div class="buttons-area">
-						<input type="button" class="btn" id="ddns-yes" value="Yes"/>
-						<input type="button" class="btn" id="ddns-skip" value="No"/>
-					</div>
-					<!-- Choose DDNS client -->
-					<div class="ncp-hidden" id="choose-ddns">
-						<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>
+                        <br>
 						Choose a client.
-						</p>
-						<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"/>
-						</div>	
+					<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">
@@ -123,13 +111,10 @@
 						<div class="buttons-area">
 							<form class="ddns-form">
 								<p>Domain
-									<input type="text" id="freedns-domain" placeholder="Domain">
+									<input type="text" id="freedns-domain" placeholder="cloud.ownyourbits.com">
 								</p>	
 								<p>Update Hash
-									<input type="text" id="freedns-hash" placeholder="Update Hash">
-								</p>
-								<p>Update Interval
-								<input type="text" id="freedns-time" placeholder="Update Interval">
+									<input type="text" id="freedns-hash" placeholder="abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1234567">
 								</p>
 							</form>
 							<input type="button" class="btn" id="ddns-enable-freedns" value="Enable FreeDNS"/>
@@ -144,16 +129,13 @@
 							<div class="ddns-form">
 								<form>
 									<p>User
-									<input type="text" id="noip-user" placeholder="User">
+									<input type="text" id="noip-user" placeholder="user@ownyourbits.com">
 									</p>
 									<p>Password
-									<input type="text" id="noip-password" placeholder="Password">
+									<input type="text" id="noip-password" placeholder="secret">
 									</p>
 									<p>Domain
-									<input type="text" id="noip-domain" placeholder="Domain">
-									</p>
-									<p>Time
-									<input type="text" id="noip-time" placeholder="Time">
+									<input type="text" id="noip-domain" placeholder="cloud.ownyourbits.com">
 									</p>
 								</form>
 							</div>	
@@ -166,7 +148,17 @@
 			<div class="tab-pane" id="tab5">
 				<div class="ncp-tab-pane">
 					<p class="instructions">
-						You now have NextCloudPi configured!</p>
+						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>
@@ -179,9 +171,14 @@
 	</ul>
 </div>
 
-<script src="http://code.jquery.com/jquery-latest.js"></script>
+<?php
+  include ('../csrf.php');
+  echo '<input type="hidden" id="csrf-token" name="csrf-token" value="' . getCSRFToken() . '"/>';
+?>
+
+<script src="JS/jquery-latest.js"></script>
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <script src="JS/jquery.bootstrap.wizard.js"></script>
 <script src="JS/wizard.js"></script>
 </body>
-</html>
+</html>