adds a button to copy the generated config to the buffer as base64 string (#85)

* add copy base64 zip string for paste in console like
$ echo 'base64string' | base64 --decode > nginxconfig.io.zip

* preparing for merge

* copyAsBase64()

* added copy-paste steps

.eslintrc

@@ -42,6 +42,8 @@
 		"hljs": true,
 		"JSZip": true,
 		"Masonry": true,
-		"saveAs": true
+		"saveAs": true,
+		"Base64": true,
+		"FileReader": true
 	}
 }

package.json

@@ -24,6 +24,7 @@
 		"bootstrap": "^4.2.1",
 		"eslint": "^5.16.0",
 		"highlight.js": "^9.12.0",
+		"js-base64": "^2.5.1",
 		"node-sass": "^4.12.0",
 		"postcss-cli": "^5.0.1"
 	},

public/assets/js/app.js

@@ -332,6 +332,38 @@
 			}, 600);
 		}
 
+		function generateZip(callback) {
+			var zip = new JSZip();
+
+			var sourceCodes = $window.document.querySelectorAll('main .file .code.source');
+
+			for (var i = 0; i < sourceCodes.length; i++) {
+				var sourceCode = sourceCodes[i];
+
+				var name	= sourceCode.dataset.filename;
+				var content	= sourceCode.children[0].children[0].innerText;
+
+				if (!$scope.isSymlink() && name.match(/^sites-available\//)) {
+					name = name.replace(/^sites-available\//, 'sites-enabled/');
+				}
+
+				zip.file(name, content);
+
+				if (name.match(/^sites-available\//)) {
+					zip.file(name.replace(/^sites-available\//, 'sites-enabled/'), '../' + name, {
+						unixPermissions: parseInt('120755', 8),
+					});
+				}
+			}
+
+			zip.generateAsync({
+				type: 'blob',
+				platform: 'UNIX',
+			}).then(function(content) {
+				callback(content);
+			});
+		}
+
 
 
 		/////////////////////
@@ -531,33 +563,7 @@
 		};
 
 		$scope.downloadZip = function() {
-			var zip = new JSZip();
-
-			var sourceCodes = $window.document.querySelectorAll('main .file .code.source');
-
-			for (var i = 0; i < sourceCodes.length; i++) {
-				var sourceCode = sourceCodes[i];
-
-				var name	= sourceCode.dataset.filename;
-				var content	= sourceCode.children[0].children[0].innerText;
-
-				if (!$scope.isSymlink() && name.match(/^sites-available\//)) {
-					name = name.replace(/^sites-available\//, 'sites-enabled/');
-				}
-
-				zip.file(name, content);
-
-				if (name.match(/^sites-available\//)) {
-					zip.file(name.replace(/^sites-available\//, 'sites-enabled/'), '../' + name, {
-						unixPermissions: parseInt('120755', 8),
-					});
-				}
-			}
-
-			zip.generateAsync({
-				type: 'blob',
-				platform: 'UNIX',
-			}).then(function(content) {
+			generateZip(function (content) {
 				saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
 			});
 
@@ -566,6 +572,23 @@
 			});
 		};
 
+
+		$scope.copyAsBase64 = function() {
+			generateZip(function (content) {
+				var reader = new FileReader();
+				reader.readAsDataURL(content);
+				reader.onloadend = function() {
+					var base64 = reader.result.replace(/^data:.+;base64,/, '');
+					$window.document.querySelector('#base64-zip-line').innerHTML = 'echo \'' + base64 + '\' | base64 --decode > /etc/nginx/nginxconfig.io-' + $scope.getDomains().join(',') + '.zip';
+					$window.document.querySelector('#btn-base64-zip-line').click();
+				}
+			});
+
+			gtag('event', $scope.getDomains().join(','), {
+				event_category: 'download_base64',
+			});
+		};
+
 		$scope.clipboardSuccess = function(key) {
 			$scope.clipboardCopy = key;
 

public/assets/js/base64.min.js

@@ -0,0 +1 @@
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(global):typeof define==="function"&&define.amd?define(factory):factory(global)})(typeof self!=="undefined"?self:typeof window!=="undefined"?window:typeof global!=="undefined"?global:this,function(global){"use strict";global=global||{};var _Base64=global.Base64;var version="2.5.1";var buffer;if(typeof module!=="undefined"&&module.exports){try{buffer=eval("require('buffer').Buffer")}catch(err){buffer=undefined}}var b64chars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var b64tab=function(bin){var t={};for(var i=0,l=bin.length;i<l;i++)t[bin.charAt(i)]=i;return t}(b64chars);var fromCharCode=String.fromCharCode;var cb_utob=function(c){if(c.length<2){var cc=c.charCodeAt(0);return cc<128?c:cc<2048?fromCharCode(192|cc>>>6)+fromCharCode(128|cc&63):fromCharCode(224|cc>>>12&15)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}else{var cc=65536+(c.charCodeAt(0)-55296)*1024+(c.charCodeAt(1)-56320);return fromCharCode(240|cc>>>18&7)+fromCharCode(128|cc>>>12&63)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}};var re_utob=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;var utob=function(u){return u.replace(re_utob,cb_utob)};var cb_encode=function(ccc){var padlen=[0,2,1][ccc.length%3],ord=ccc.charCodeAt(0)<<16|(ccc.length>1?ccc.charCodeAt(1):0)<<8|(ccc.length>2?ccc.charCodeAt(2):0),chars=[b64chars.charAt(ord>>>18),b64chars.charAt(ord>>>12&63),padlen>=2?"=":b64chars.charAt(ord>>>6&63),padlen>=1?"=":b64chars.charAt(ord&63)];return chars.join("")};var btoa=global.btoa?function(b){return global.btoa(b)}:function(b){return b.replace(/[\s\S]{1,3}/g,cb_encode)};var _encode=buffer?buffer.from&&Uint8Array&&buffer.from!==Uint8Array.from?function(u){return(u.constructor===buffer.constructor?u:buffer.from(u)).toString("base64")}:function(u){return(u.constructor===buffer.constructor?u:new buffer(u)).toString("base64")}:function(u){return btoa(utob(u))};var encode=function(u,urisafe){return!urisafe?_encode(String(u)):_encode(String(u)).replace(/[+\/]/g,function(m0){return m0=="+"?"-":"_"}).replace(/=/g,"")};var encodeURI=function(u){return encode(u,true)};var re_btou=new RegExp(["[À-ß][€-¿]","[à-ï][€-¿]{2}","[ð-÷][€-¿]{3}"].join("|"),"g");var cb_btou=function(cccc){switch(cccc.length){case 4:var cp=(7&cccc.charCodeAt(0))<<18|(63&cccc.charCodeAt(1))<<12|(63&cccc.charCodeAt(2))<<6|63&cccc.charCodeAt(3),offset=cp-65536;return fromCharCode((offset>>>10)+55296)+fromCharCode((offset&1023)+56320);case 3:return fromCharCode((15&cccc.charCodeAt(0))<<12|(63&cccc.charCodeAt(1))<<6|63&cccc.charCodeAt(2));default:return fromCharCode((31&cccc.charCodeAt(0))<<6|63&cccc.charCodeAt(1))}};var btou=function(b){return b.replace(re_btou,cb_btou)};var cb_decode=function(cccc){var len=cccc.length,padlen=len%4,n=(len>0?b64tab[cccc.charAt(0)]<<18:0)|(len>1?b64tab[cccc.charAt(1)]<<12:0)|(len>2?b64tab[cccc.charAt(2)]<<6:0)|(len>3?b64tab[cccc.charAt(3)]:0),chars=[fromCharCode(n>>>16),fromCharCode(n>>>8&255),fromCharCode(n&255)];chars.length-=[0,0,2,1][padlen];return chars.join("")};var _atob=global.atob?function(a){return global.atob(a)}:function(a){return a.replace(/\S{1,4}/g,cb_decode)};var atob=function(a){return _atob(String(a).replace(/[^A-Za-z0-9\+\/]/g,""))};var _decode=buffer?buffer.from&&Uint8Array&&buffer.from!==Uint8Array.from?function(a){return(a.constructor===buffer.constructor?a:buffer.from(a,"base64")).toString()}:function(a){return(a.constructor===buffer.constructor?a:new buffer(a,"base64")).toString()}:function(a){return btou(_atob(a))};var decode=function(a){return _decode(String(a).replace(/[-_]/g,function(m0){return m0=="-"?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))};var noConflict=function(){var Base64=global.Base64;global.Base64=_Base64;return Base64};global.Base64={VERSION:version,atob:atob,btoa:btoa,fromBase64:decode,toBase64:encode,utob:utob,encode:encode,encodeURI:encodeURI,btou:btou,decode:decode,noConflict:noConflict,__buffer__:buffer};if(typeof Object.defineProperty==="function"){var noEnum=function(v){return{value:v,enumerable:false,writable:true,configurable:true}};global.Base64.extendString=function(){Object.defineProperty(String.prototype,"fromBase64",noEnum(function(){return decode(this)}));Object.defineProperty(String.prototype,"toBase64",noEnum(function(urisafe){return encode(this,urisafe)}));Object.defineProperty(String.prototype,"toBase64URI",noEnum(function(){return encode(this,true)}))}}if(global["Meteor"]){Base64=global.Base64}if(typeof module!=="undefined"&&module.exports){module.exports.Base64=global.Base64}else if(typeof define==="function"&&define.amd){define([],function(){return global.Base64})}return{Base64:global.Base64}});

public/index.html

@@ -1033,6 +1033,13 @@
 					<div class="grid-sizer col-xl-6"></div>
 					<div class="grid-item col-xl-12 mb-3 text-center" ng-cloak>
 						<button class="btn btn-primary btn-sm btn-download" ng-click="downloadZip()"><img src="assets/img/download.svg" alt="Download"> Generated config <small>(.zip)</small></button>
+						<button tooltips tooltip-template="Copied!" tooltip-show-trigger="click" class="btn btn-success btn-sm btn-download btn-base64" ng-click="copyAsBase64()"><img src="assets/img/download.svg" alt="Download"> Copy Base64 <small>(inline)</small></button>
+					</div>
+					<div id="base64-zip-wrapper" class="custom-control-input">
+						<button class="btn btn-light btn-clipboard" id="btn-base64-zip-line" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')">
+							<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+						</button>
+						<div id="base64-zip-line"></div>
 					</div>
 					<section class="file grid-item" ng-class="isModularized() || isWordPress() ? 'col-xl-6' : 'col-xl-12'" ng-cloak>
 						<strong>/etc/nginx/nginx.conf</strong>
@@ -1171,6 +1178,7 @@
 		<script src="assets/js/masonry.pkgd.min.js?v=4.2.1"></script>
 		<script src="assets/js/jszip.min.js?v=3.1.5"></script>
 		<script src="assets/js/filesaver.min.js?v=1.3.4"></script>
+		<script src="assets/js/base64.min.js"></script>
 		<script src="assets/js/app.js?v=COMMIT_HASH"></script>
 	</body>
 </html>

public/templates/commands.html

@@ -2,12 +2,16 @@
 
 	step: download
 
---><span class="hljs-comment"><span class="counter">.</span> Download generated config:</span> <strong><a href="#" ng-click="downloadZip()">nginxconfig.io-{{ getDomains().join(',') }}.zip</a></strong>
-<span class="hljs-comment"><span class="counter">.</span> Upload to server's <strong>/etc/nginx/</strong> directory</span>
+--><span class="hljs-comment"><span class="counter">.</span> <strong>Download</strong> generated config:</span> <strong><a href="#" ng-click="downloadZip()">nginxconfig.io-{{ getDomains().join(',') }}.zip</a></strong>
+   <span class="hljs-comment"><strong>Upload</strong> to server's</span> <strong>/etc/nginx/</strong> <span class="hljs-comment">directory</span>
+   <span class="hljs-comment">- OR -</span>
+   <span class="hljs-comment"><strong>Copy</strong> as Base64 string:</span> <strong><a href="#" ng-click="copyAsBase64()">Copy to clipboard</a></strong> <span class="hljs-comment small">(echo 'BASE64' | base64 --decode > /etc/nginx/nginxconfig.io-{{ getDomains().join(',') }}.zip)</span>
+   <span class="hljs-comment"><strong>Paste</strong> from clipboard and run the command</span>
+<span class="hljs-comment"><span class="counter">.</span> Go to NGINX directory (over SSH):</span>
+   <span class="hljs-section">cd</span> /etc/nginx
 <span class="hljs-comment"><span class="counter">.</span> Backup current configuration:</span>
    <span class="hljs-section">tar</span> <span class="hljs-attribute">-czvf</span> nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/
 <span class="hljs-comment"><span class="counter">.</span> Unzip the uploaded archive:</span>
-   <span class="hljs-section">cd</span> /etc/nginx
    <span class="hljs-section">unzip</span> <span class="hljs-attribute">-o</span> nginxconfig.io-{{ getDomains().join(',') }}.zip <span class="hljs-comment">(you probably need to install <strong>unzip</strong>:</span> <span class="hljs-section"></span><strong>sudo</strong> <span class="hljs-section">apt-get</span> <span class="hljs-attribute">install</span> unzip<span class="hljs-comment">)</span></span><!--
 
 

resources/scss/_main.scss

@@ -249,6 +249,7 @@ main {
 
 	.btn {
 		&.btn-download {
+			margin: 2px 0;
 			img {
 				vertical-align: -1px;
 				margin-right: 0.1rem;