Remove external sources from installer page (#6101)

* Remove external sources from installer page

* Remove bootstrap.min.css

* Make spinner display consistently cross-platform

* Change spinner to look better

install/web.js

@@ -26,6 +26,7 @@ winston.add(winston.transports.File, {
 
 var web = {};
 var scripts = [
+	'node_modules/jquery/dist/jquery.js',
 	'public/vendor/xregexp/xregexp.js',
 	'public/vendor/xregexp/unicode/unicode-base.js',
 	'public/src/utils.js',
@@ -53,7 +54,7 @@ web.install = function (port) {
 		extended: true,
 	}));
 
-	async.parallel([compileLess, compileJS], function (err) {
+	async.parallel([compileLess, compileJS, copyCSS], function (err) {
 		if (err) {
 			winston.error(err);
 		}
@@ -136,14 +137,15 @@ function launch(req, res) {
 	process.stdout.write('    "./nodebb log" to view server output\n');
 	process.stdout.write('    "./nodebb restart" to restart NodeBB\n');
 
-	async.parallel([
+	var filesToDelete = [
-		function (next) {
+		'installer.css',
-			fs.unlink(path.join(__dirname, '../public/installer.css'), next);
+		'installer.min.js',
-		},
+		'bootstrap.min.css',
-		function (next) {
+	];
-			fs.unlink(path.join(__dirname, '../public/installer.min.js'), next);
+
-		},
+	async.each(filesToDelete, function (filename, next) {
-	], function (err) {
+		fs.unlink(path.join(__dirname, '../public', filename), next);
+	}, function (err) {
 		if (err) {
 			winston.warn('Unable to remove installer files');
 		}
@@ -198,4 +200,15 @@ function compileJS(callback) {
 	});
 }
 
+function copyCSS(next) {
+	async.waterfall([
+		function (next) {
+			fs.readFile(path.join(__dirname, '../node_modules/bootstrap/dist/css/bootstrap.min.css'), 'utf8', next);
+		},
+		function (src, next) {
+			fs.writeFile(path.join(__dirname, '../public/bootstrap.min.css'), src, next);
+		},
+	], next);
+}
+
 module.exports = web;

public/less/install.less

@@ -1,3 +1,48 @@
+.working {
+  width: 24px;
+  height: 24px;
+
+  position: relative;
+	display: inline-block;
+	vertical-align: bottom;
+	
+	&::before, &::after {
+		content: ' ';
+
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		background-color: #fff;
+		opacity: 0.6;
+		position: absolute;
+		top: 0;
+		left: 0;
+		
+		-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+		animation: sk-bounce 2.0s infinite ease-in-out;
+	}
+	
+	&::after {
+		-webkit-animation-delay: -1.0s;
+		animation-delay: -1.0s;
+	}
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% { 
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% { 
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}
+
 .btn, .form-control, .navbar {
 	border-radius: 0;
 }
@@ -8,7 +53,7 @@
 }
 
 body, small, p, div {
-	font-family: "Roboto", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
 .input-row {

public/src/installer/install.js

@@ -46,7 +46,7 @@ $('document').ready(function () {
 
 			return false;
 		}
-		$('#submit .fa-spin').removeClass('hide');
+		$('#submit .working').removeClass('hide');
 	}
 
 	function activate(type, el) {
@@ -112,7 +112,7 @@ $('document').ready(function () {
 	}
 
 	function launchForum() {
-		$('#launch .fa-spin').removeClass('hide');
+		$('#launch .working').removeClass('hide');
 
 		$.post('/launch', function () {
 			var successCount = 0;

src/views/install/index.tpl

@@ -6,34 +6,25 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>NodeBB Web Installer</title>
 
-	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
-	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
-	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 	<link rel="stylesheet" type="text/css" href="installer.css">
 	
+	<script type="text/javascript" async defer src="installer.min.js"></script>
 </head>
 
 <body>
 	<nav class="navbar navbar-default">
 		<div class="container-fluid">
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
 				<a class="navbar-brand" href="#">NodeBB</a>
 			</div>
 
-			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 			<ul class="nav navbar-nav">
 				<li class="active"><a href="/">Installer</a></li>
 				<li><a href="https://docs.nodebb.org" target="_blank">Get Help</a></li>
 				<li><a href="https://community.nodebb.org" target="_blank">Community</a></li>
 			</ul>
 		</div>
-		</div>
 	</nav>
 
 	<div class="container <!-- IF success -->hide<!-- ENDIF success -->">
@@ -104,7 +95,7 @@
 			</div>
 			<!-- ENDIF !skipDatabaseSetup -->
 
-			<button id="submit" type="submit" class="btn btn-lg btn-success">Install NodeBB <i class="fa fa-spinner fa-spin hide"></i></button>
+			<button id="submit" type="submit" class="btn btn-lg btn-success">Install NodeBB <i class="working hide"></i></button>
 		</form>
 	</div>
 
@@ -113,7 +104,7 @@
 		<p>
 			<h1>Congratulations! Your NodeBB has been set-up.</h1>
 
-			<button id="launch" class="btn btn-lg btn-success">Launch NodeBB <i class="fa fa-spinner fa-spin hide"></i></button>
+			<button id="launch" class="btn btn-lg btn-success">Launch NodeBB <i class="working hide"></i></button>
 		</p>
 	</div>
 
@@ -131,9 +122,5 @@
 		</div>
 		<!-- END databases -->
 	</div>
-
-	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
-	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-	<script type="text/javascript" src="installer.min.js"></script>
 </body>
 </html>