Show error message

Author: styopdev

css/style.css

@@ -554,6 +554,18 @@ select:not([multiple]) {
     margin: auto;
 }
 
+#invalid-message {
+    display: none;
+    position: inherit;
+    color: red;
+    z-index: 4000;
+    font-size: 14px;
+    padding: 10px;
+    margin-top: 10px;
+    line-height: 20px;
+    background-color: white;
+}
+
 @media only screen and (max-width: 1048px) and (min-width: 992px)  {
     .warning {
         justify-content: start;

index.html

@@ -174,6 +174,7 @@
                             <label>
                                 <div class="et-form">
                                     <input autofocus id="github-url" class="et-btn-input" placeholder="Enter your github repository url..." type="text">
+                                    <div id="invalid-message"></div>
                                     <a id="generate" class="et-btn et-btn-submit cp" onclick="generateFromGithub()">Submit</a>
                                 </div>
                             </label>

js/script.js

@@ -11,7 +11,8 @@ var imageStyles = {
     lineHeight: 22,
     watermarkEnabled: true
 };
-
+var repoRegexp = new RegExp('((http(s){0,1})|(git@[\\w\\.]{1,}))(:(//){0,1})([\\w\\.@:/\\-~]{1,})(\\.git)(/){0,1}');
+var errorBlock = document.getElementById('invalid-message');
 var watermarkText = 'Generated by `foldertotree.cc`';
 
 var body = document.getElementsByTagName('body')[0];
@@ -24,6 +25,15 @@ function openSelectFile() {
     document.getElementById('my-awesome-dropzone').click();
 }
 
+function showErrorMessage(label) {
+    errorBlock.style.display = 'block';
+    errorBlock.innerHTML = label;
+}
+
+function hideErrorMessage() {
+    errorBlock.style.display = 'none';
+}
+
 function initDownload() {
     loading.style.display = 'block';
     var canvas = document.getElementById('tree-canvas');
@@ -43,21 +53,27 @@ function retry() {
 }
 
 function generateFromGithub() {
+    var githubUrl = document.getElementById('github-url').value;
+    if (!repoRegexp.test(githubUrl)) {
+        this.showErrorMessage('Invalid url, please provide url in this format: `https://github.com/styopdev/folder-to-tree.git`');
+        return;
+    }
+
     loading.style.display = 'block';
-    var githubUrl = 'https://cors-anywhere.herokuapp.com/'; 
-    githubUrl += document.getElementById('github-url').value;
-    githubUrl += '/archive/master.zip';
+    var repoUrl = 'https://cors-anywhere.herokuapp.com/'; 
+    repoUrl += githubUrl.substr(0, githubUrl.length - 4);
+    repoUrl += '/archive/master.zip';
     // TODO add githubUrl validation;
 
-    JSZipUtils.getBinaryContent(githubUrl, function(err, data) {
+    JSZipUtils.getBinaryContent(repoUrl, function(err, data) {
         if (err) {
             throw err; // or handle err
         }
 
         unzip
             .loadAsync(data)
-            .then(function(data2) {
-                processFile(data2);
+            .then(function(zipData) {
+                processFile(zipData);
             });
     });
 }
@@ -85,6 +101,7 @@ function toTree(fileNameList, files) {
 }
 
 function processFile(zip) {
+    hideErrorMessage();
     fileNames = Object.keys(zip.files);
     fileNamesTree = toTree(fileNames, zip.files);