some alerts added

css/styles.css

@@ -676,3 +676,44 @@ multiselect .dropdown-menu > li > a {
   color: #000;
   font-size: 14px;
 }
+
+.error-notice .oaerror {
+  width: 95%; /* Configure it fit in your design  */
+  margin: 0 auto; /* Centering Stuff */
+  background-color: #FFFFFF; /* Default background */
+  padding: 20px;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
+  margin: 0 auto;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+}
+.error-notice .danger {
+  border-left-color: #d9534f; /* Left side border color */
+  background-color: rgba(217, 83, 79, 0.1); /* Same color as the left border with reduced alpha to 0.1 */
+}
+.error-notice .danger strong {
+  color:  #d9534f;
+}
+.error-notice .warning {
+  border-left-color: #f0ad4e;
+  background-color: rgba(240, 173, 78, 0.1);
+}
+.error-notice .warning strong {
+  color: #f0ad4e;
+}
+.error-notice .info {
+  border-left-color: #5bc0de;
+  background-color: rgba(91, 192, 222, 0.1);
+}
+.error-notice .info strong {
+  color: #5bc0de;
+}
+.error-notice .success {
+  border-left-color: #3c763d;
+  background-color: rgba(43, 84, 44, 0.1);
+}
+.error-notice .success strong {
+  color: #3c763d;
+}

js/controllers/website-controller.js

@@ -58,6 +58,14 @@ app.directive('fileTree', [function () {
   };
 }]);
 
+app.directive('notificationBar', [function () {
+  return {
+    restrict: 'EA',
+    templateUrl: '/templates/widgets/website-notification-bar.html',
+    controller: 'websiteCtrl as vm'
+  };
+}]);
+
 app.controller('websiteCtrl', [
   '$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout', '$sce'
 , function ($scope, $q, Auth, Oauth3, $timeout, $sce) {
@@ -65,6 +73,10 @@ app.controller('websiteCtrl', [
   var vm = this;
   var angular = window.angular;
   vm.domains = [];
+  vm.displaySpinner = '';
+  vm.alertNotification = {
+    hidden: 'hidden'
+  };
   //vm.unzipPath = '/';
   vm.uploadPath = '/';
 
@@ -191,6 +203,8 @@ app.controller('websiteCtrl', [
     });
   };
   vm._uploadFile = function (pkg, opts) {
+    debugger;
+    vm.newFileUploaded = opts.newFile.name;
     opts.progress = opts.progress || opts;
     return pkg.add({
       hostname: opts.domain
@@ -210,8 +224,10 @@ app.controller('websiteCtrl', [
     , strip: opts.stripZip
     , path: opts.uploadPath
     }).then(function (result) {
+      var msg = vm.newFileUploaded + " has been uploaded"
       opts.progress.uploadTotal = 0;
-      window.alert(JSON.stringify(result));
+      vm.buildNotification(result, msg);
+      // window.alert(JSON.stringify(result));
     });
   };
 
@@ -355,7 +371,7 @@ app.controller('websiteCtrl', [
 
   vm.Sites.remove = function (r, opts) {
     var pkg = Auth.oauth3.pkg('www@daplie.com');
-
+    vm.pathRemoved = r.path || opts.path;
     return pkg.remove({
       hostname: r.domain
     , domain: r.domain
@@ -365,13 +381,15 @@ app.controller('websiteCtrl', [
     , path: opts.path || r.path
     , confirm: opts.confirm || r.confirm
     }).then(function (result) {
-      window.alert(JSON.stringify(result));
+      var msg = "'"+ vm.pathRemoved + "'" + ' has been removed';
+      vm.buildNotification(result, msg);
+      // window.alert(JSON.stringify(result));
     });
   };
 
   vm.deleteFilesFrom = function (r, path, opts) {
     var confirmMessage;
-    vm.autoPopulateWebPath;
+    // vm.autoPopulateWebPath;
     opts = {};
 
     if (path === undefined) {
@@ -424,7 +442,7 @@ app.controller('websiteCtrl', [
           vm.autoPopulateWebPath.push('/');
           vm.autoPopulateWebPath = vm.autoPopulateWebPath.join('');
         } else {
-          vm.currentFolder = "hidden"
+          vm.currentFolder = "hidden";
         }
         if (vm.breadcrumbPathClicked) {
           if (path === 'root') {
@@ -455,6 +473,7 @@ app.controller('websiteCtrl', [
         //, sub: r.sub,
         path: vm.breadcrumbsPath.join('/')
       }).then(function (result) {
+        vm.displaySpinner = 'hidden';
         vm.folderStructure = result;
         result.data.forEach(function(file) {
           if (file.directory) {
@@ -471,7 +490,7 @@ app.controller('websiteCtrl', [
   vm.cleanPath = function () {
     vm.savedPath = vm.autoPopulateWebPath;
     vm.autoPopulateWebPath = '';
-  }
+  };
 
   vm.showUploadButton = true;
   vm.showFolderAction = true;
@@ -479,20 +498,20 @@ app.controller('websiteCtrl', [
     if (vm.savedPath === undefined) {
       vm.savedPath = '/';
     }
-    vm.savedPath;
+    // vm.savedPath;
     vm.hideFolderInput = 'hidden';
     vm.showFileUploadBtn = true;
     r.uploadPath = vm.savedPath + vm.autoPopulateWebPath;
   };
 
   vm.autoPopulateFolderName = function () {
-    console.log('blah', vm.currentFolder);
     if (vm.currentFolder === 'hidden') {
-      vm.autoPopulateWebPath = '/'
+      vm.autoPopulateWebPath = '/';
     }
-  }
+  };
 
   vm.getDirectories = function (path) {
+    vm.displaySpinner = '';
     vm.siteDirectories = [];
     vm.siteFiles = [];
     var site = vm.siteResults;
@@ -518,8 +537,8 @@ app.controller('websiteCtrl', [
 
   vm.triggerDeleteFolder = function (folder, r) {
     console.log('DELETE FOLDER ->', folder);
-    vm.deleteFilesFrom(r, folder)
-  }
+    vm.deleteFilesFrom(r, folder);
+  };
 
   vm.Shares = {};
   vm.Shares.invite = function (r) {
@@ -543,7 +562,15 @@ app.controller('websiteCtrl', [
       var arr = r.sharedWith || [];
       arr.push(result.data);
       r.sharedWith = arr;
-      window.alert(JSON.stringify(result.data));
+      var msg;
+      var person = result.data.comment;
+      if (result.data.error) {
+        msg = result.data.error.message;
+      } else {
+        msg = 'shared with ' + person;
+      }
+      vm.buildNotification(result, msg);
+      // window.alert(JSON.stringify(result.data));
     });
   };
   vm.Shares.accept = function () {
@@ -565,6 +592,7 @@ app.controller('websiteCtrl', [
     //, sub: r.sub
     , path: r.sharePath
     }).then(function (result) {
+      vm.displaySpinner = 'hidden';
       console.log('list shares result:');
       console.log(result);
       r.sharedWith = result.data;
@@ -583,6 +611,9 @@ app.controller('websiteCtrl', [
     , path: s.sharePath
     , challenge: s.challenge
     }).then(function (result) {
+      var person = result.data.comment;
+      var msg = "revoked access from " + person;
+      vm.buildNotification(result, msg);
       console.log('remove share result:');
       console.log(result);
       var index;
@@ -709,6 +740,26 @@ app.controller('websiteCtrl', [
     }
   };
 
+  vm.buildNotification = function (result, msg) {
+    console.log('THE RESULT ->', result);
+    console.log('THE MSG', msg);
+    if (result.data.error) {
+      vm.alertNotification = {
+        className: 'danger',
+        title: 'Error',
+        hidden: '',
+        message: msg
+      };
+    } else {
+      vm.alertNotification = {
+        className: 'success',
+        title: 'Success',
+        hidden: '',
+        message: msg
+      };
+    }
+  };
+
   vm.closeAllOpenActions = function () {
     $timeout(function() {
       vm.showInviteContainer = false;

js/lib/angular/multiselect-dropdown.js

@@ -159,14 +159,14 @@ angular.module('ui.multiselect', [])
             value = [];
             angular.forEach(scope.items, function (item) {
               if (item.checked) value.push(item.model);
-            })
+            });
           } else {
             angular.forEach(scope.items, function (item) {
               if (item.checked) {
                 value = item.model;
                 return false;
               }
-            })
+            });
           }
           modelCtrl.$setViewValue(value);
         }
@@ -212,7 +212,7 @@ angular.module('ui.multiselect', [])
           } else {
             selectMultiple(item);
           }
-        }
+        };
       }
     };
   }])
@@ -249,14 +249,14 @@ angular.module('ui.multiselect', [])
         scope.focus = function focus(){
           var searchBox = element.find('input')[0];
           searchBox.focus();
-        }
+        };
 
         var elementMatchesAnyInArray = function (element, elementArray) {
           for (var i = 0; i < elementArray.length; i++)
           if (element == elementArray[i])
           return true;
           return false;
-        }
+        };
       }
-    }
+    };
   }]);

templates/website.html

@@ -135,6 +135,7 @@
           <h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.urlSafeDomain">example.com</a></h4>
         </div>
         <div class="modal-body">
+          <notification-bar></notification-bar>
           <div class="website-menu container" ng-hide="vm.websiteTiles">
             <div class="row">
               <div class="col-md-3">
@@ -209,6 +210,9 @@
             </form>
           </div>
           <div ng-show="vm.showSharesContainer">
+            <div class="text-center {{ vm.displaySpinner }}">
+              <i class="fa fa-spinner fa-spin fa-5x"></i>
+            </div>
             <span class="text-muted" ng-if="r.sharedWith.length === 1">Currently not shared with anyone...</span>
             <ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
               <li>

templates/widgets/filetree.html

@@ -8,6 +8,9 @@
   </div>
   <div class="row">
     <div class="col-lg-6">
+      <div class="text-center {{ vm.displaySpinner }}">
+        <i class="fa fa-spinner fa-spin fa-5x"></i>
+      </div>
       <ul class="tree ls-none">
         <li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
           <input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
@@ -68,7 +71,12 @@
       </div>
     </div>
     <div class="col-lg-6">
-      <pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
+      <pre style="font-size: 10px;">
+        <div class="text-center {{ vm.displaySpinner }}">
+          <i class="fa fa-spinner fa-spin fa-5x"></i>
+        </div>
+        {{ vm.folderStructure | stringify }}
+      </pre>
     </div>
   </div>
   <div class="row">

templates/widgets/website-notification-bar.html

@@ -0,0 +1,6 @@
+<div class="error-notice">
+  <div class="oaerror {{ vm.alertNotification.className }} {{ vm.alertNotification.hidden }}">
+    <strong>{{ vm.alertNotification.title }}</strong> - {{ vm.alertNotification.message }}
+    <button type="button" class="close" ng-click="vm.alertNotification.hidden = 'hidden'"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+  </div>
+</div>