Add loading indicator

Fixes https://github.com/PrivateBin/PrivateBin/issues/172

js/privatebin.js

@@ -1040,12 +1040,16 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             this.password.addClass('hidden');
             this.showStatus(i18n._('Sending paste...'), true);
 
+            this.stateSubmittingPaste();
+
             var randomkey = sjcl.codec.base64.fromBits(sjcl.random.randomWords(8, 0), 0);
             var password = this.passwordInput.val();
             if(files && files[0])
             {
                 if(typeof FileReader === undefined)
                 {
+                    // revert loading status…
+                    this.stateNewPaste();
                     this.showError(i18n._('Your browser does not support uploading encrypted files. Please use a newer browser.'));
                     return;
                 }
@@ -1138,16 +1142,22 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
                     }
                     else if (data.status === 1)
                     {
+                        // revert loading status…
+                        controller.stateNewPaste();
                         controller.showError(i18n._('Could not create paste: %s', data.message));
                     }
                     else
                     {
+                        // revert loading status…
+                        controller.stateNewPaste();
                         controller.showError(i18n._('Could not create paste: %s', i18n._('unknown status')));
                     }
                 }
             })
             .fail(function()
             {
+                // revert loading status…
+                this.stateNewPaste();
                 controller.showError(i18n._('Could not create paste: %s', i18n._('server error or not responding')));
             });
         },
@@ -1188,6 +1198,7 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             this.clearText.addClass('hidden');
             this.discussion.addClass('hidden');
             this.prettyMessage.addClass('hidden');
+            this.loadingIndicator.addClass('hidden');
             this.sendButton.removeClass('hidden');
             this.expiration.removeClass('hidden');
             this.formatter.removeClass('hidden');
@@ -1201,6 +1212,37 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             this.message.focus();
         },
 
+        /**
+         * put the screen in mode after submitting a paste
+         *
+         * @name   controller.stateSubmittingPaste
+         * @function
+         */
+        stateSubmittingPaste: function()
+        {
+            this.message.text('');
+            this.attachment.addClass('hidden');
+            this.cloneButton.addClass('hidden');
+            this.rawTextButton.addClass('hidden');
+            this.remainingTime.addClass('hidden');
+            this.pasteResult.addClass('hidden');
+            this.clearText.addClass('hidden');
+            this.discussion.addClass('hidden');
+            this.prettyMessage.addClass('hidden');
+            this.sendButton.addClass('hidden');
+            this.expiration.addClass('hidden');
+            this.formatter.addClass('hidden');
+            this.burnAfterReadingOption.addClass('hidden');
+            this.openDisc.addClass('hidden');
+            this.newButton.addClass('hidden');
+            this.password.addClass('hidden');
+            this.attach.addClass('hidden');
+            this.message.addClass('hidden');
+            this.preview.addClass('hidden');
+
+            this.loadingIndicator.removeClass('hidden');
+        },
+
         /**
          * put the screen in "Existing paste" mode
          *
@@ -1239,6 +1281,7 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             this.message.addClass('hidden');
             this.clearText.addClass('hidden');
             this.prettyMessage.addClass('hidden');
+            this.loadingIndicator.addClass('hidden');
         },
 
         /**
@@ -1650,6 +1693,7 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             this.fileWrap = $('#filewrap');
             this.formatter = $('#formatter');
             this.image = $('#image');
+            this.loadingIndicator = $('#loadingindicator');
             this.message = $('#message');
             this.messageEdit = $('#messageedit');
             this.messagePreview = $('#messagepreview');

tpl/.editorconfig

@@ -0,0 +1,9 @@
+# editorconfig.org
+
+root = false
+
+# special format for PHP templates
+[*.php]
+indent_style = tab
+indent_size = 4
+

tpl/bootstrap.php

@@ -69,7 +69,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-YW9b0ChcI/zuJwUZxdQW3zb/LO999he3fOtiio2MhickC7YyrzgvIcgvFMUYZjJ79tYiNzDLmMAZKRMvqoQoGw==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-PdZ/xcnCUmP83OR8gLOUsaxTtg7hK49XvejRAv4r5Juf42XZKZYa/a7gFzOphLKZSOG1u/Wa9Yvx37Rp3jYM6w==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->
@@ -120,6 +120,10 @@ endif;
 			</div>
 			<div id="navbar" class="navbar-collapse collapse">
 				<ul class="nav navbar-nav">
+					<li id="loadingindicator" class="navbar-text hidden">
+						<span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
+						<?php echo I18n::_('Uploading paste… Please wait.'), PHP_EOL; ?>
+					</li>
 					<li>
 <?php
 if ($isPage):

tpl/page.php

@@ -47,7 +47,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-YW9b0ChcI/zuJwUZxdQW3zb/LO999he3fOtiio2MhickC7YyrzgvIcgvFMUYZjJ79tYiNzDLmMAZKRMvqoQoGw==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-PdZ/xcnCUmP83OR8gLOUsaxTtg7hK49XvejRAv4r5Juf42XZKZYa/a7gFzOphLKZSOG1u/Wa9Yvx37Rp3jYM6w==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->