From 7d6284a8293f9e26ea6b11a6ca89d8313b563cb0 Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@thoughtworks.com>
Date: Fri, 25 Jan 2019 15:24:53 +0530
Subject: [PATCH] backups: Add a loader to the restore button to indicate
 progress

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 .../modules/backups/static/loading_button.js  | 28 +++++++++++++++++++
 .../backups/templates/backups_restore.html    | 21 +++++++++++---
 2 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 plinth/modules/backups/static/loading_button.js

diff --git a/plinth/modules/backups/static/loading_button.js b/plinth/modules/backups/static/loading_button.js
new file mode 100644
index 000000000..bc87c4ca1
--- /dev/null
+++ b/plinth/modules/backups/static/loading_button.js
@@ -0,0 +1,28 @@
+/*
+  This file is part of FreedomBox.
+
+  @licstart  The following is the entire license notice for the
+  JavaScript code in this page.
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+  @licend  The above is the entire license notice
+  for the JavaScript code in this page.
+*/
+
+
+function swapWithLoadingButton() {
+    $("#restore_btn").addClass("sr-only");
+    $("#loading_btn").removeClass("sr-only");
+}
diff --git a/plinth/modules/backups/templates/backups_restore.html b/plinth/modules/backups/templates/backups_restore.html
index 5a8ac624f..e940b691d 100644
--- a/plinth/modules/backups/templates/backups_restore.html
+++ b/plinth/modules/backups/templates/backups_restore.html
@@ -20,6 +20,7 @@
 
 {% load bootstrap %}
 {% load i18n %}
+{% load static %}
 
 {% block content %}
   <h2>{{ title }}</h2>
@@ -36,10 +37,17 @@
 
       {{ form|bootstrap }}
 
-      <input type="submit" class="btn btn-primary"
-             value="{% blocktrans trimmed %}
-                      Restore
-                    {% endblocktrans %}"/>
+      <input id="restore_btn" type="submit"
+             class="btn btn-primary"
+             onclick="swapWithLoadingButton();"
+             value="{% trans 'Restore' %}" />
+
+      <button id="loading_btn" class="btn btn-primary sr-only" disabled>
+        <i class="fa fa-spinner fa-pulse fa-fw"></i> {% blocktrans trimmed %}
+          Restoring
+          {% endblocktrans %}
+      </button>
+
       <a title="{% trans 'Abort' %}"
          role="button" class="btn btn-warning"
          href="{% url 'backups:index' %}">
@@ -49,3 +57,8 @@
   </p>
 
 {% endblock %}
+
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'backups/loading_button.js' %}"></script>
+{% endblock %}
+