From edb546de543b46b34465678d4a0d8c16415562b8 Mon Sep 17 00:00:00 2001
From: rugk <rugk@posteo.de>
Date: Sun, 5 Feb 2017 22:09:46 +0100
Subject: [PATCH] Add loading indicator

Fixes https://github.com/PrivateBin/PrivateBin/issues/172
---
 js/privatebin.js  | 44 ++++++++++++++++++++++++++++++++++++++++++++
 tpl/.editorconfig |  9 +++++++++
 tpl/bootstrap.php |  6 +++++-
 tpl/page.php      |  2 +-
 4 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 tpl/.editorconfig

diff --git a/js/privatebin.js b/js/privatebin.js
index 6ed88f0..756b20b 100644
--- a/js/privatebin.js
+++ b/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');
diff --git a/tpl/.editorconfig b/tpl/.editorconfig
new file mode 100644
index 0000000..30c7ad2
--- /dev/null
+++ b/tpl/.editorconfig
@@ -0,0 +1,9 @@
+# editorconfig.org
+
+root = false
+
+# special format for PHP templates
+[*.php]
+indent_style = tab
+indent_size = 4
+
diff --git a/tpl/bootstrap.php b/tpl/bootstrap.php
index 8938112..23a9550 100644
--- a/tpl/bootstrap.php
+++ b/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):
diff --git a/tpl/page.php b/tpl/page.php
index 66a814e..67b2ad0 100644
--- a/tpl/page.php
+++ b/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]-->