webui: adjust behavior of bounce url

- bounce url param was renamed from 'redirect' to 'url'
- support for 'delay' param added

Behavior:

- "Continue to next page" link is shown if 'url' is present
- page is no longer automatically redirected if 'url' is present
- automatic redirect is controlled by 'delay' param - it specifies
  number of seconds until redirection
- info message 'You will be redirected in Xs' is show to notify
  the user that something will happen. It's useful even if delay
  is 0 or negative because redirection might be slow.
- counter is decremented every second
- delay is ignored if parsed as NaN

https://fedorahosted.org/freeipa/ticket/4440

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

2 files changed, 46 insertions, 2 deletions

diff --git a/install/ui/reset_password.html b/install/ui/reset_password.html
index 598fe8f1e..ec09bbfaf 100644
--- a/install/ui/reset_password.html
+++ b/install/ui/reset_password.html
@@ -50,6 +50,9 @@
                         <div class="alert alert-warning" style="display:none;">
                             <span class="fa fa-warning"></span><p></p>
                         </div>
+                        <div class="alert alert-info" style="display:none;">
+                            <span class="fa fa-info-circle"></span><p></p>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/install/ui/reset_password.js b/install/ui/reset_password.js
index 1afc76eba..2e0db7db8 100644
--- a/install/ui/reset_password.js
+++ b/install/ui/reset_password.js
@@ -134,6 +134,16 @@ RP.show_error = function(message) {
     $('.alert-success').css('display', 'none');
 };
 
+RP.show_info = function(message) {
+
+    $('.alert-info > p').text(message || '');
+    if (!message) {
+        $('.alert-info').css('display', 'none');
+    } else {
+        $('.alert-info').css('display', '');
+    }
+};
+
 RP.show_success = function(message) {
 
     $('.alert-success > p').text(message);
@@ -158,10 +168,41 @@ RP.parse_uri = function() {
 RP.redirect = function() {
 
     var opts = RP.parse_uri();
-    var url = opts['redirect'];
+    var url = opts['url'];
+    var delay = parseInt(opts['delay'], 10);
+
+    var msg_cont = $('.alert-success > p');
+    $('.redirect', msg_cont).remove();
+
+    // button for manual redirection
     if (url) {
-        window.location = url;
+        var redir_cont = $('<span/>', { 'class': 'redirect' }).
+            append(' ').
+            append($('<a/>', {
+                href: url,
+                text: 'Continue to next page'
+            })).
+            appendTo(msg_cont);
+    } else {
+        return;
+    }
+
+    if (delay <= 0 || delay > 0) { // NaN check
+        RP.redir_url = url;
+        RP.redir_delay = delay;
+        RP.redir_count_down();
+    }
+};
+
+RP.redir_count_down = function() {
+
+    RP.show_info("You will be redirected in " + Math.max(RP.redir_delay, 0) + "s");
+    if (RP.redir_delay <= 0) {
+        window.location = RP.redir_url;
+        return;
     }
+    window.setTimeout(RP.redir_count_down, 1000);
+    RP.redir_delay--;
 };