Show toast with deletion link for imgur uploads

css/glowingbear.css

@@ -708,7 +708,7 @@ img.emojione {
     width: auto;
 }
 
-#toast {
+.toast {
   position: fixed;
   left: 50%;
   bottom: 50px;

css/themes/base16-default.css

@@ -423,7 +423,7 @@ button.close:hover {
     color: var(--base01);
 }
 
-#toast {
+.toast {
     background-color: var(--base01);
 }
 

css/themes/blue.css

@@ -134,7 +134,7 @@ input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-se
    border: 1px solid #363943;
 }
 
-#toast {
+.toast {
     background-color: #283244;
     border: 1px solid;
     border-color: rgb(29, 94, 152);

css/themes/dark.css

@@ -2126,7 +2126,7 @@ code {
   color: #fff;
 }
 
-#toast {
+.toast {
     background-color: #333;
 }
 

css/themes/light.css

@@ -2092,7 +2092,7 @@ input[type=text].is-invalid{
     font-weight: bold;
 }
 
-#toast {
+.toast {
     background-color: #ddd;
 }
 

js/imgur.js

@@ -90,7 +90,7 @@ weechat.factory('imgur', ['$rootScope', 'settings', function($rootScope, setting
                 if( response.data && response.data.link ) {
 
                     if (callback && typeof(callback) === "function") {
-                        callback(response.data.link.replace(/^http:/, "https:"));
+                        callback(response.data.link.replace(/^http:/, "https:"), response.data.deletehash);
                     }
 
                 } else {
@@ -125,6 +125,60 @@ weechat.factory('imgur', ['$rootScope', 'settings', function($rootScope, setting
 
     };
 
+    // Delete an image from imgur with the deletion link
+    var deleteImage = function( deletehash, callback ) {
+
+        // API authorization, either via Client ID (anonymous) or access token
+        // (add to user's imgur account), see also:
+        // https://github.com/glowing-bear/glowing-bear/wiki/Getting-an-imgur-token-&-album-hash
+        var accessToken = "164efef8979cd4b";
+        var isClientID = true;
+
+        // Check whether the user has provided an access token
+        if (settings.iToken.length > 37){
+            accessToken = settings.iToken;
+            isClientID = false;
+        }
+
+        // Add the image to the provided album if configured to do so
+        if (!isClientID && settings.iAlb.length >= 6) {
+            fd.append("album", settings.iAlb);
+        }
+
+        // Create new XMLHttpRequest
+        var xhttp = new XMLHttpRequest();
+
+        // Post request to imgur api
+        xhttp.open("DELETE", "https://api.imgur.com/3/image/" + deletehash, true);
+
+        // Set headers
+        if (isClientID) {
+            xhttp.setRequestHeader("Authorization", "Client-ID " + accessToken);
+        } else {
+            xhttp.setRequestHeader("Authorization", "Bearer " + accessToken);
+        }
+        xhttp.setRequestHeader("Accept", "application/json");
+
+        // Handler for response
+        xhttp.onload = function() {
+
+            // Check state and response status
+            if(xhttp.status === 200) {
+
+                callback();
+
+            } else {
+                showErrorMsg();
+            }
+
+        };
+
+
+        // Send request with form data
+        xhttp.send(null);
+
+    };
+
     var showErrorMsg = function() {
         // Show error msg
         $rootScope.uploadError = true;
@@ -139,7 +193,8 @@ weechat.factory('imgur', ['$rootScope', 'settings', function($rootScope, setting
     };
 
     return {
-        process: process
+        process: process,
+        deleteImage: deleteImage
     };
 
 }]);

js/inputbar.js

@@ -14,10 +14,11 @@ weechat.directive('inputBar', function() {
             command: '=command'
         },
 
-        controller: ['$rootScope', '$scope', '$element', '$log', 'connection', 'imgur', 'models', 'IrcUtils', 'settings', 'utils', function($rootScope,
+        controller: ['$rootScope', '$scope', '$element', '$log', '$compile', 'connection', 'imgur', 'models', 'IrcUtils', 'settings', 'utils', function($rootScope,
                              $scope,
                              $element, //XXX do we need this? don't seem to be using it
                              $log,
+                             $compile,
                              connection, //XXX we should eliminate this dependency and use signals instead
                              imgur,
                              models,
@@ -263,8 +264,8 @@ weechat.directive('inputBar', function() {
 
             $scope.uploadImage = function($event, files) {
                 // Send image url after upload
-                var sendImageUrl = function(imageUrl) {
-                    // Send image
+                var sendImageUrl = function(imageUrl, deleteHash) {
+                    // Put link in input box
                     if(imageUrl !== undefined && imageUrl !== '') {
                         $rootScope.insertAtCaret(String(imageUrl));
                     }
@@ -276,10 +277,21 @@ weechat.directive('inputBar', function() {
                         // Process image
                         imgur.process(files[i], sendImageUrl);
                     }
-
                 }
             };
 
+            var deleteCallback = function () {
+                // Image got sucessfully deleted.
+                // Show toast with delete link
+                var toastDeleted = $compile('<div class="toast">Successfully deleted.')($scope)[0];
+                document.body.appendChild(toastDeleted);
+                setTimeout(function() { document.body.removeChild(toastDeleted); }, 5000);
+            }
+
+            $scope.imgurDelete = function (deleteHash) {
+                imgur.deleteImage( deleteHash, deleteCallback );
+            };
+
             // Send the message to the websocket
             $scope.sendMessage = function() {
                 //XXX Use a signal here
@@ -351,7 +363,7 @@ weechat.directive('inputBar', function() {
                 if (buffer.type === 'channel' && !is_online) {
                     // show a toast that the user left
                     var toast = document.createElement('div');
-                    toast.id = "toast";
+                    toast.className = "toast";
                     toast.innerHTML = nick + " has left the room";
                     document.body.appendChild(toast);
                     setTimeout(function() { document.body.removeChild(toast); }, 5000);
@@ -750,15 +762,24 @@ weechat.directive('inputBar', function() {
 
                 return true;
             };
+            
             $scope.inputPasted = function(e) {
                 if (e.clipboardData && e.clipboardData.files && e.clipboardData.files.length) {
                     e.stopPropagation();
                     e.preventDefault();
 
-                    var sendImageUrl = function(imageUrl) {
+                    var sendImageUrl = function(imageUrl, deleteHash) {
                         if(imageUrl !== undefined && imageUrl !== '') {
                             $rootScope.insertAtCaret(String(imageUrl));
                         }
+
+                        // Show toast with delete link
+                        var toastImgur = $compile('<div class="toast">Image uploaded to Imgur. <a id="deleteImgur" ng-click="imgurDelete(\'' + deleteHash + '\')" href="">Delete?</a></div>')($scope)[0];
+                        document.body.appendChild(toastImgur);
+                        setTimeout(function() { document.body.removeChild(toastImgur); }, 5000);
+
+                        // Log the delete hash to the console in case the toast was missed.
+                        console.log('An image was uploaded to imgur, delete it with $scope.imgurDelete(\'' + deleteHash + '\')');
                     };
 
                     for (var i = 0; i < e.clipboardData.files.length; i++) {