Merge pull request #1102 from Jaekr/master

Added support for Imgur token (authed upload) and Imgur albums.

css/glowingbear.css

@@ -146,7 +146,7 @@ input[type=text], input[type=password], #sendMessage {
 .col-sm-9 {
     padding-right: 5px !important;
 }
-.glyphicon {
+#topbar .glyphicon {
     top: 0; /* Fixes alignment issue in top bar */
 }
 #topbar {
@@ -681,6 +681,10 @@ li.buffer.indent.private a {
     font-size: small;
 }
 
+.lessleftpad {
+    padding-left: 5px;
+}
+
 .unselectable {
     -webkit-user-select: none;
     -moz-user-select: none;

index.html

@@ -100,7 +100,6 @@
             <div class="panel-body">
                <form class="form-signin" role="form">
                 <div class="form-group">
-
                   <div class="input-group">
                     <div class="row no-gutter">
                       <div class="col-sm-9">
@@ -458,7 +457,7 @@ npm run build-electron-{windows, darwin, linux}</pre>
                     </div>
 
                     <label for="size" class="col-sm-1 control-label">Size</label>
-                    <div class="col-sm-2">
+                    <div class="col-sm-3">
                       <input type="text" ng-model="settings.fontsize" class="form-control" id="size">
                     </div>
                   </div>
@@ -468,7 +467,7 @@ npm run build-electron-{windows, darwin, linux}</pre>
                 <form class="form-horizontal" role="form">
                   <div class="form-group">
                     <label for="theme" class="col-sm-3 control-label make-thinner">Theme</label>
-                    <div class="col-sm-7">
+                    <div class="col-sm-8">
                       <select id="theme" class="form-control" ng-model="settings.theme" ng-options="theme for theme in themes"></select>
                     </div>
                   </div>
@@ -479,13 +478,28 @@ npm run build-electron-{windows, darwin, linux}</pre>
                 <form class="form-horizontal" role="form">
                   <div class="form-group">
                     <label for="custom-css" class="col-sm-3 control-label make-thinner">Custom CSS</label>
-                    <div class="col-sm-7">
+                    <div class="col-sm-8">
                       <textarea id="custom-css" class="form-control" ng-model="settings.customCSS"></textarea>
                     </div>
                   </div>
                 </form>
               </li>
 
+              <li class="standard-labels">
+                <form class="form-horizontal" role="form">
+                  <div class="form-group">
+                    <label class="control-label col-sm-3" for="iToken">Imgur Token <a target="_blank" href="https://github.com/glowing-bear/glowing-bear/wiki/Getting-an-imgur-token-&-album-hash"><i class="glyphicon glyphicon-info-sign"></i></a></label>
+                    <div class="col-sm-4">
+                      <input type="text" class="form-control" ng-model="settings.iToken" placeholder="Access Token" autocapitalize="off">
+                    </div>
+                    <label class="control-label col-sm-1 lessleftpad" for="iAlb">Album</label>
+                    <div class="col-sm-3">
+                      <input type="text" class="form-control" ng-model="settings.iAlb" placeholder="Album Hash" autocapitalize="off">
+                    </div>
+                  </div>
+                </form>
+              </li>
+
               <li>
                 <form class="form-inline" role="form">
                   <div class="checkbox">

js/glowingbear.js

@@ -64,6 +64,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         'enableQuickKeys': true,
         'customCSS': '',
         "currentlyViewedBuffers":{},
+        'iToken': '',
+        'iAlb': '',
     });
     $scope.settings = settings;
 

js/imgur.js

@@ -3,7 +3,7 @@
 
 var weechat = angular.module('weechat');
 
-weechat.factory('imgur', ['$rootScope', function($rootScope) {
+weechat.factory('imgur', ['$rootScope', 'settings', function($rootScope, settings) {
 
     var process = function(image, callback) {
 
@@ -26,8 +26,18 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
 
     // Upload image to imgur from base64
     var upload = function( base64img, callback ) {
-        // Set client ID (Glowing Bear)
+
-        var clientId = "164efef8979cd4b";
+        // 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;
+        }
 
         // Progress bars container
         var progressBars = document.getElementById("imgur-upload-progress"),
@@ -45,6 +55,11 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
         fd.append("image", base64img); // Append the file
         fd.append("type", "base64"); // Set image type to base64
 
+        // 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();
 
@@ -52,7 +67,11 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
         xhttp.open("POST", "https://api.imgur.com/3/image", true);
 
         // Set headers
-        xhttp.setRequestHeader("Authorization", "Client-ID " + clientId);
+        if (isClientID) {
+            xhttp.setRequestHeader("Authorization", "Client-ID " + accessToken);
+        } else {
+            xhttp.setRequestHeader("Authorization", "Bearer " + accessToken);
+        }
         xhttp.setRequestHeader("Accept", "application/json");
 
         // Handler for response