fixing logic when there are no icons and warning icons, add more test cases

js/privatebin.js

@@ -1493,7 +1493,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         const alertType = [
             'loading', // not in bootstrap CSS, but using a plausible value here
             'info',    // status icon
-            'warning', // not used yet
+            'warning', // warning icon
             'danger'   // error icon
         ];
 
@@ -1537,28 +1537,35 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                     icon = null; // icons not supported in this case
                 }
             }
+            let $translationTarget = $element;
 
-            // handle icon
+            // handle icon, if template uses one
-            if (icon !== null && // icon was passed
+            const $glyphIcon = $element.find(':first');
-                icon !== currentIcon[id] // and it differs from current icon
+            if ($glyphIcon.length) {
-            ) {
+                // if there is an icon, we need to provide an inner element
-                let $glyphIcon = $element.find(':first');
+                // to translate the message into, instead of the parent
+                $translationTarget = $('<span>');
+                $element.html(' ').prepend($glyphIcon).append($translationTarget);
 
-                // remove (previous) icon
+                if (icon !== null && // icon was passed
-                $glyphIcon.removeClass(currentIcon[id]);
+                    icon !== currentIcon[id] // and it differs from current icon
+                ) {
+                    // remove (previous) icon
+                    $glyphIcon.removeClass(currentIcon[id]);
 
-                // any other thing as a string (e.g. 'null') (only) removes the icon
+                    // any other thing as a string (e.g. 'null') (only) removes the icon
-                if (typeof icon === 'string') {
+                    if (typeof icon === 'string') {
-                    // set new icon
+                        // set new icon
-                    currentIcon[id] = 'glyphicon-' + icon;
+                        currentIcon[id] = 'glyphicon-' + icon;
-                    $glyphIcon.addClass(currentIcon[id]);
+                        $glyphIcon.addClass(currentIcon[id]);
+                    }
                 }
             }
 
             // show text
             if (args !== null) {
                 // add jQuery object to it as first parameter
-                args.unshift($element);
+                args.unshift($translationTarget);
                 // pass it to I18n
                 I18n._.apply(this, args);
             }
@@ -1596,7 +1603,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
          */
         me.showWarning = function(message, icon)
         {
-            $errorMessage.find(':first').removeClass(currentIcon[3]);
+            $errorMessage.find(':first')
+                         .removeClass(currentIcon[3])
+                         .addClass(currentIcon[2]);
             handleNotification(2, $errorMessage, message, icon);
         };
 
@@ -2990,11 +2999,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         me.init = function()
         {
             $attachment = $('#attachment');
-            if($attachment.length){
+            $dragAndDropFileName = $('#dragAndDropFileName');
+            $dropzone = $('#dropzone');
+            if($attachment.length) {
                 $attachmentLink = $('#attachment a');
                 $attachmentPreview = $('#attachmentPreview');
-                $dragAndDropFileName = $('#dragAndDropFileName');
-                $dropzone = $('#dropzone');
 
                 $fileInput = $('#file');
                 addDragDropHandler();

js/test/Alert.js

@@ -24,6 +24,27 @@ describe('Alert', function () {
         jsc.property(
             'shows a status message (bootstrap)',
             jsc.array(common.jscAlnumString()),
+            function (message) {
+                message = message.join('');
+                const expected = '<div id="status" role="alert" ' +
+                    'class="statusmessage alert alert-info"><span ' +
+                    'class="glyphicon glyphicon-info-sign" ' +
+                    'aria-hidden="true"></span> <span>' + message + '</span></div>';
+                $('body').html(
+                    '<div id="status" role="alert" class="statusmessage ' +
+                    'alert alert-info hidden"><span class="glyphicon ' +
+                    'glyphicon-info-sign" aria-hidden="true"></span> </div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showStatus(message);
+                const result = $('body').html();
+                return expected === result;
+            }
+        );
+
+        jsc.property(
+            'shows a status message (bootstrap, custom icon)',
+            jsc.array(common.jscAlnumString()),
             jsc.array(common.jscAlnumString()),
             function (icon, message) {
                 icon = icon.join('');
@@ -31,7 +52,7 @@ describe('Alert', function () {
                 const expected = '<div id="status" role="alert" ' +
                     'class="statusmessage alert alert-info"><span ' +
                     'class="glyphicon glyphicon-' + icon +
-                    '" aria-hidden="true"></span> ' + message + '</div>';
+                    '" aria-hidden="true"></span> <span>' + message + '</span></div>';
                 $('body').html(
                     '<div id="status" role="alert" class="statusmessage ' +
                     'alert alert-info hidden"><span class="glyphicon ' +
@@ -45,6 +66,75 @@ describe('Alert', function () {
         );
     });
 
+    describe('showWarning', function () {
+        before(function () {
+            cleanup();
+        });
+
+        jsc.property(
+            'shows a warning message (basic)',
+            jsc.array(common.jscAlnumString()),
+            jsc.array(common.jscAlnumString()),
+            function (icon, message) {
+                icon = icon.join('');
+                message = message.join('');
+                const expected = '<div id="errormessage">' + message + '</div>';
+                $('body').html(
+                    '<div id="errormessage"></div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showWarning(message, icon);
+                const result = $('body').html();
+                return expected === result;
+            }
+        );
+
+        jsc.property(
+            'shows a warning message (bootstrap)',
+            jsc.array(common.jscAlnumString()),
+            jsc.array(common.jscAlnumString()),
+            function (message) {
+                message = message.join('');
+                const expected = '<div id="errormessage" role="alert" ' +
+                    'class="statusmessage alert alert-danger"><span ' +
+                    'class="glyphicon glyphicon-warning-sign" ' +
+                    'aria-hidden="true"></span> <span>' + message + '</span></div>';
+                $('body').html(
+                    '<div id="errormessage" role="alert" class="statusmessage ' +
+                    'alert alert-danger hidden"><span class="glyphicon ' +
+                    'glyphicon-alert" aria-hidden="true"></span> </div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showWarning(message);
+                const result = $('body').html();
+                return expected === result;
+            }
+        );
+
+        jsc.property(
+            'shows a warning message (bootstrap, custom icon)',
+            jsc.array(common.jscAlnumString()),
+            jsc.array(common.jscAlnumString()),
+            function (icon, message) {
+                icon = icon.join('');
+                message = message.join('');
+                const expected = '<div id="errormessage" role="alert" ' +
+                    'class="statusmessage alert alert-danger"><span ' +
+                    'class="glyphicon glyphicon-' + icon +
+                    '" aria-hidden="true"></span> <span>' + message + '</span></div>';
+                $('body').html(
+                    '<div id="errormessage" role="alert" class="statusmessage ' +
+                    'alert alert-danger hidden"><span class="glyphicon ' +
+                    'glyphicon-alert" aria-hidden="true"></span> </div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showWarning(message, icon);
+                const result = $('body').html();
+                return expected === result;
+            }
+        );
+    });
+
     describe('showError', function () {
         before(function () {
             cleanup();
@@ -72,13 +162,35 @@ describe('Alert', function () {
             'shows an error message (bootstrap)',
             jsc.array(common.jscAlnumString()),
             jsc.array(common.jscAlnumString()),
+            function (icon, message) {
+                message = message.join('');
+                const expected = '<div id="errormessage" role="alert" ' +
+                    'class="statusmessage alert alert-danger"><span ' +
+                    'class="glyphicon glyphicon-alert" ' +
+                    'aria-hidden="true"></span> <span>' + message + '</span></div>';
+                $('body').html(
+                    '<div id="errormessage" role="alert" class="statusmessage ' +
+                    'alert alert-danger hidden"><span class="glyphicon ' +
+                    'glyphicon-alert" aria-hidden="true"></span> </div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showError(message);
+                const result = $('body').html();
+                return expected === result;
+            }
+        );
+
+        jsc.property(
+            'shows an error message (bootstrap, custom icon)',
+            jsc.array(common.jscAlnumString()),
+            jsc.array(common.jscAlnumString()),
             function (icon, message) {
                 icon = icon.join('');
                 message = message.join('');
                 const expected = '<div id="errormessage" role="alert" ' +
                     'class="statusmessage alert alert-danger"><span ' +
                     'class="glyphicon glyphicon-' + icon +
-                    '" aria-hidden="true"></span> ' + message + '</div>';
+                    '" aria-hidden="true"></span> <span>' + message + '</span></div>';
                 $('body').html(
                     '<div id="errormessage" role="alert" class="statusmessage ' +
                     'alert alert-danger hidden"><span class="glyphicon ' +
@@ -92,53 +204,6 @@ describe('Alert', function () {
         );
     });
 
-    describe('showWarning', function () {
-        before(function () {
-            cleanup();
-        });
-
-        jsc.property(
-            'shows a warning message (basic)',
-            jsc.array(common.jscAlnumString()),
-            jsc.array(common.jscAlnumString()),
-            function (icon, message) {
-                icon = icon.join('');
-                message = message.join('');
-                const expected = '<div id="errormessage">' + message + '</div>';
-                $('body').html(
-                    '<div id="errormessage"></div>'
-                );
-                $.PrivateBin.Alert.init();
-                $.PrivateBin.Alert.showWarning(message, icon);
-                const result = $('body').html();
-                return expected === result;
-            }
-        );
-
-        jsc.property(
-            'shows a warning message (bootstrap)',
-            jsc.array(common.jscAlnumString()),
-            jsc.array(common.jscAlnumString()),
-            function (icon, message) {
-                icon = icon.join('');
-                message = message.join('');
-                const expected = '<div id="errormessage" role="alert" ' +
-                    'class="statusmessage alert alert-danger"><span ' +
-                    'class="glyphicon glyphicon-' + icon +
-                    '" aria-hidden="true"></span> ' + message + '</div>';
-                $('body').html(
-                    '<div id="errormessage" role="alert" class="statusmessage ' +
-                    'alert alert-danger hidden"><span class="glyphicon ' +
-                    'glyphicon-alert" aria-hidden="true"></span> </div>'
-                );
-                $.PrivateBin.Alert.init();
-                $.PrivateBin.Alert.showWarning(message, icon);
-                const result = $('body').html();
-                return expected === result;
-            }
-        );
-    });
-
     describe('showRemaining', function () {
         before(function () {
             cleanup();
@@ -174,7 +239,7 @@ describe('Alert', function () {
                 const expected = '<div id="remainingtime" role="alert" ' +
                     'class="alert alert-info"><span ' +
                     'class="glyphicon glyphicon-fire" aria-hidden="true">' +
-                    '</span> ' + string + message + number + '</div>';
+                    '</span> <span>' + string + message + number + '</span></div>';
                 $('body').html(
                     '<div id="remainingtime" role="alert" class="hidden ' +
                     'alert alert-info"><span class="glyphicon ' +
@@ -229,7 +294,7 @@ describe('Alert', function () {
                 const expected = '<ul class="nav navbar-nav"><li ' +
                     'id="loadingindicator" class="navbar-text"><span ' +
                     'class="glyphicon glyphicon-' + icon +
-                    '" aria-hidden="true"></span> ' + message + '</li></ul>';
+                    '" aria-hidden="true"></span> <span>' + message + '</span></li></ul>';
                 $('body').html(
                     '<ul class="nav navbar-nav"><li id="loadingindicator" ' +
                     'class="navbar-text hidden"><span class="glyphicon ' +

tpl/bootstrap.php

@@ -71,7 +71,7 @@ if ($MARKDOWN):
 endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-1.0.11.js" integrity="sha512-p7UyJuyBkhMcMgE4mDsgK0Lz70OvetLefua1oXs1OujWv9gOxh4xy8InFux7bZ4/DAZsTmO4rgVwZW9BHKaTaw==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-Md89PHNymixw3+CiUgdTO6GwZIPke6FZnWr88qYVTMvjnCclrKjMDQ7gsh0PwsjBSE5YHsuIj43FSeVRrH+yiw==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-V01w1T20A93BoUnM1Clrlk5F+S+z8HxLquxAVhpiIjxxrTXcWtoQDlwXzBipvKPFf/9NWE8t2uirTMOLR2vPYw==" crossorigin="anonymous"></script>
 		<!--[if IE]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;}</style>
 		<![endif]-->

tpl/page.php

@@ -49,7 +49,7 @@ if ($MARKDOWN):
 endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-1.0.11.js" integrity="sha512-p7UyJuyBkhMcMgE4mDsgK0Lz70OvetLefua1oXs1OujWv9gOxh4xy8InFux7bZ4/DAZsTmO4rgVwZW9BHKaTaw==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-Md89PHNymixw3+CiUgdTO6GwZIPke6FZnWr88qYVTMvjnCclrKjMDQ7gsh0PwsjBSE5YHsuIj43FSeVRrH+yiw==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-V01w1T20A93BoUnM1Clrlk5F+S+z8HxLquxAVhpiIjxxrTXcWtoQDlwXzBipvKPFf/9NWE8t2uirTMOLR2vPYw==" crossorigin="anonymous"></script>
 		<!--[if IE]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;}</style>
 		<![endif]-->