Added modal to confirm updating Grav as well as cool down counter before enabling Update button (fixes #1257)

CHANGELOG.md

@@ -8,6 +8,7 @@
     * Better support for array field key/value when either key or value is stored empty [#1972](https://github.com/getgrav/grav-plugin-admin/issues/1972)
     * Remember the open state of the sidebar [#1973](https://github.com/getgrav/grav-plugin-admin/issues/1973)
     * Upgraded node dependencies to latest version. Improved speed of JS compilation.
+    * Added modal to confirm updating Grav as well as cool down counter before enabling Update button [#1257](https://github.com/getgrav/grav-plugin-admin/issues/1257)
 1. [](#bugfix)
     * Fixed Safari issue with new ACL picker field [#1955](https://github.com/getgrav/grav-plugin-admin/issues/1955)
     * Stop propagation of ACL add button in ACL picker [flex-objects#83](https://github.com/trilbymedia/grav-plugin-flex-objects/issues/83)

languages/en.yaml

@@ -54,6 +54,7 @@ PLUGIN_ADMIN:
   MODAL_CHANGED_DETECTED_DESC: "You have unsaved changes.  Are you sure you want to leave without saving?"
   MODAL_DELETE_FILE_CONFIRMATION_REQUIRED_TITLE: "Confirmation Required"
   MODAL_DELETE_FILE_CONFIRMATION_REQUIRED_DESC: "Are you sure you want to delete this file? This action cannot be undone."
+  MODAL_UPDATE_GRAV_CONFIRMATION_REQUIRED_DESC: "You are about to upgrade Grav to the latest version available. Would you like to continue?"
   ADD_FILTERS: "Add Filters"
   SEARCH_PAGES: "Search Pages"
   VERSION: "Version"

themes/grav/app/updates/index.js

@@ -1,9 +1,9 @@
 import $ from 'jquery';
 import unique from 'mout/array/unique';
 import { config, translations } from 'grav-config';
-import formatBytes from '../utils/formatbytes';
 import { Instance as gpm } from '../utils/gpm';
 import Notifications from './notifications';
+
 import Feed from './feed';
 import './check';
 import './update';
@@ -13,6 +13,7 @@ export default class Updates {
     constructor(payload = {}) {
         this.setPayload(payload);
         this.task = `task${config.param_sep}`;
+        this.updateURL = '';
     }
 
     setPayload(payload = {}) {
@@ -47,7 +48,8 @@ export default class Updates {
             let bar = '';
 
             if (!payload.isSymlink) {
-                bar += `<button data-maintenance-update="${config.base_url_relative}/update.json/${task}updategrav/admin-nonce${config.param_sep}${config.admin_nonce}" class="button button-small secondary" id="grav-update-button">${translations.PLUGIN_ADMIN.UPDATE_GRAV_NOW}</button>`;
+                this.updateURL = `${config.base_url_relative}/update.json/${task}updategrav/admin-nonce${config.param_sep}${config.admin_nonce}`;
+                bar += `<button data-remodal-target="update-grav" class="button button-small secondary pointer-events-none" id="grav-update-button">${translations.PLUGIN_ADMIN.UPDATE_GRAV_NOW} <span class="cnt-down">(5s)</span></button>`;
             } else {
                 bar += `<span class="hint--left" style="float: right;" data-hint="${translations.PLUGIN_ADMIN.GRAV_SYMBOLICALLY_LINKED}"><i class="fa fa-fw fa-link"></i></span>`;
             }
@@ -65,14 +67,22 @@ export default class Updates {
             element
                 .addClass('grav')
                 .html(`${bar}`)
-                .slideDown(150)
+                .slideDown(150, function() {
+                    var c = 5;
+                    var x = setInterval(function() {
+                        c -= 1;
+                        element.find('.pointer-events-none .cnt-down').text('(' + c + 's)');
+                    }, 1000);
+
+                    setTimeout(function() {
+                        clearInterval(x);
+                        element.find('.pointer-events-none .cnt-down').remove();
+                        element.find('.pointer-events-none').removeClass('pointer-events-none');
+                    }, 5000);
+                })
                 .parent('#messages').addClass('default-box-shadow');
         }
 
-        $('#grav-update-button').on('click', function() {
-            $(this).html(`${translations.PLUGIN_ADMIN.UPDATING_PLEASE_WAIT} ${formatBytes(payload.assets['grav-update'].size)}..`);
-        });
-
         return this;
     }
 

themes/grav/app/updates/update.js

@@ -1,14 +1,17 @@
 import $ from 'jquery';
+import { translations } from 'grav-config';
+import formatBytes from '../utils/formatbytes';
 import request from '../utils/request';
+import { Instance as Update } from './index';
 
 // Dashboard update and Grav update
-$('body').on('click', '[data-maintenance-update]', function() {
-    let element = $(this);
-    let url = element.data('maintenanceUpdate');
+$(document).on('click.remodal', '[data-remodal-id="update-grav"] [data-remodal-action="confirm"]', () => {
+    const element = $('#grav-update-button');
+    element.html(`${translations.PLUGIN_ADMIN.UPDATING_PLEASE_WAIT} ${formatBytes(Update.payload.grav.assets['grav-update'].size)}..`);
 
     element.attr('disabled', 'disabled').find('> .fa').removeClass('fa-cloud-download').addClass('fa-refresh fa-spin');
 
-    request(url, (response) => {
+    request(Update.updateURL, (response) => {
         if (response.type === 'updategrav') {
             $('[data-gpm-grav]').remove();
             $('#footer .grav-version').html(response.version);

themes/grav/css-compiled/simple-fonts.css

@@ -1,2 +1,3 @@
-#admin-menu li,.badge,.fontfamily-sans .CodeMirror pre,.form-tabs>label,.grav-mdeditor-preview,.label,.note,.selectize-input,body,button,h1,h2,h3,h4,h5,h6,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Tahoma,Geneva,Arial,sans-serif}.CodeMirror pre,.mono,code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace}
-/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpbXBsZS1mb250cy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtBLGVBSkEsT0FHQSxpQ0FDZ0IsaUJBSkQsdUJBSXFCLE9BSjVCLE1BQ3lCLGlCQUZqQyxLQUV5QixPQUN6QixHQUFJLEdBQUksR0FBSSxHQUhOLEdBQUksR0FFVixNQUFPLE9BQVEsU0FJWCxZQUFhLGdCQUFBLENBQUEsU0FBQSxDQUFBLE1BQUEsQ0FBQSxNQUFBLENBQUEsS0FBQSxDQUFBLFdBQ2hCLGdCQUdxQixNQUF0QixLQUFNLElBQUssSUFBSyxLQUNaLFlBQWEsY0FBQSxDQUFBLFFBQUEsQ0FBQSxpQkFBQSxDQUFBLEtBQUEsQ0FBQSxPQUFBLENBQUEiLCJmaWxlIjoic2ltcGxlLWZvbnRzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJvZHksIGg1LCBoNixcbi5iYWRnZSwgLm5vdGUsIC5ncmF2LW1kZWRpdG9yLXByZXZpZXcsXG5pbnB1dCwgc2VsZWN0LCB0ZXh0YXJlYSwgYnV0dG9uLCAuc2VsZWN0aXplLWlucHV0LFxuaDEsIGgyLCBoMywgaDQsXG4uZm9udGZhbWlseS1zYW5zIC5Db2RlTWlycm9yIHByZSxcbiNhZG1pbi1tZW51IGxpLCAuZm9ybS10YWJzID4gbGFiZWwsIC5sYWJlbCwge1xuICAgIGZvbnQtZmFtaWx5OiBcIkhlbHZldGljYSBOZXVlXCIsIFwiSGVsdmV0aWNhXCIsIFwiVGFob21hXCIsIFwiR2VuZXZhXCIsIFwiQXJpYWxcIiwgc2Fucy1zZXJpZjtcbn1cbi8vLmNrLWVkaXRvciBzaG9ydGNvZGUsIC5jay1lZGl0b3IgdHdpZyxcbi5Db2RlTWlycm9yIHByZSxcbmNvZGUsIGtiZCwgcHJlLCBzYW1wLCAubW9ubyAge1xuICAgIGZvbnQtZmFtaWx5OiBcIlNGTW9uby1SZWd1bGFyXCIsIENvbnNvbGFzLCBcIkxpYmVyYXRpb24gTW9ub1wiLCBNZW5sbywgQ291cmllciwgbW9ub3NwYWNlO1xufVxuIl19 */
+body,h5,h6,.badge,.note,.grav-mdeditor-preview,input,select,textarea,button,.selectize-input,h1,h2,h3,h4,.fontfamily-sans .CodeMirror pre,#admin-menu li,.form-tabs>label,.label{font-family:"Helvetica Neue", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif}.CodeMirror pre,code,kbd,pre,samp,.mono{font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace}
+
+/*# sourceMappingURL=simple-fonts.css.map */

themes/grav/scss/template/_utilities.scss

@@ -1,3 +1,7 @@
+.pointer-events-none {
+    pointer-events: none;
+}
+
 @include breakpoint(mobile-only) {
     .hidden-mobile {
         display: none!important;

themes/grav/templates/partials/base-root.html.twig

@@ -130,6 +130,19 @@
                         </div>
                     </form>
                 </div>
+                <div class="remodal" data-remodal-id="update-grav" data-remodal-options="hashTracking: false">
+                    <form>
+                        <h1>{{ "PLUGIN_ADMIN.MODAL_DELETE_FILE_CONFIRMATION_REQUIRED_TITLE"|tu }}</h1>
+                        <p class="bigger">
+                            {{ "PLUGIN_ADMIN.MODAL_UPDATE_GRAV_CONFIRMATION_REQUIRED_DESC"|tu }}
+                        </p>
+                        <br>
+                        <div class="button-bar">
+                            <button data-remodal-action="cancel" class="button secondary remodal-cancel"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</button>
+                            <button data-remodal-action="confirm" class="button remodal-confirm disable-after-click"><i class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</button>
+                        </div>
+                    </form>
+                </div>
                 {% endblock %}
 
             </main>