Added regenerate button and ajax

themes/grav/app/forms/fields/iconpicker.js

@@ -8,7 +8,7 @@ import $ from 'jquery';
 
 var defaults = {
     'mode': 'dialog', // show overlay 'dialog' panel or slide down 'inline' panel
-    'closeOnPick': true,   // whether to close panel after picking or 'no'
+    'closeOnPick': true, // whether to close panel after picking or 'no'
     'save': 'class', // save icon 'class' or 'code'
     'size': '',
     'classes': {
@@ -17,7 +17,7 @@ var defaults = {
         'highlight': '', // extra classes when highlighting an icon
         'close': '' // extra classes for close button
     },
-    'iconSets': {          // example data structure. Used to specify which launchers will be created
+    'iconSets': { // example data structure. Used to specify which launchers will be created
         'genericon': 'Genericon', // create a launcher to pick genericon icons
         'fa': 'FontAwesome' // create a launcher to pick fontawesome icons
     }

themes/grav/app/main.js

@@ -11,6 +11,7 @@ import './themes';
 import { Filter as MediaFilter, Instance as MediaFilterInstance} from './media';
 import toastr from './utils/toastr';
 import request from './utils/request';
+import './utils/2fa';
 
 // bootstrap jQuery extensions
 import 'bootstrap/js/transition';

themes/grav/app/utils/2fa.js

@@ -0,0 +1,31 @@
+import $ from 'jquery';
+import { config } from 'grav-config';
+import request from '../utils/request';
+
+const body = $('body');
+
+// Dashboard update and Grav update
+body.on('click', '[data-2fa-regenerate]', function() {
+    let element = $(this);
+    let url = `${config.base_url_relative}/ajax.json/task${config.param_sep}regenerate2FASecret`;
+
+    element.attr('disabled', 'disabled').find('> .fa').addClass('fa-spin');
+
+    request(url, { method: 'post' }, (response) => {
+        $('[data-2fa-image]').attr('src', response.image);
+        $('[data-2fa-secret]').text(response.secret);
+        $('[data-2fa-value]').val(response.secret.replace(' ', ''));
+
+        element.removeAttr('disabled').find('> .fa').removeClass('fa-spin');
+    });
+});
+
+const toggleSecret = () => {
+    const toggle = $('#toggle_twofa_enabled1');
+    const secret = $('.twofa-secret');
+
+    secret[toggle.is(':checked') ? 'addClass' : 'removeClass']('show');
+};
+
+body.on('click', '.twofa-toggle input', toggleSecret);
+toggleSecret();

themes/grav/templates/forms/fields/2fa_secret/2fa_secret.html.twig

@@ -5,28 +5,10 @@
         {% set two_fa = admin.get2FA() %}
         {% set value = (value is null ? two_fa.createSecret(160) : value) %}
 
-        <img style="border: 1px solid #ddd" src="{{ two_fa.getQRCodeImageAsDataUri(grav.user.email, value) }}" />
-        <div class="2fa-secret">{{ value|chunkSplit(4, ' ') }}</div>
+        <img style="border: 1px solid #ddd" data-2fa-image src="{{ two_fa.getQRCodeImageAsDataUri(grav.user.email, value) }}" />
+        <div class="2fa-secret" data-2fa-secret>{{ value|chunkSplit(4, ' ') }}</div>
+        <button class="button button-small" data-2fa-regenerate><i class="fa fa-fw fa-refresh"></i> Regenerate</button>
 
-        <input type="text" style="display:none;" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|join(', ') }}" />
+        <input type="text" style="display:none;" name="{{ (scope ~ field.name)|fieldName }}" data-2fa-value value="{{ value|join(', ') }}" />
     </div>
-
-    <script>
-        function twofaVisiblity() {
-            console.log('clicked');
-            if ($('#toggle_twofa_enabled1').is(':checked')) {
-                console.log('checked');
-                $('.twofa-secret').addClass("show");
-            } else {
-                console.log('unchecked');
-                $('.twofa-secret').removeClass("show");
-            }
-        }
-
-        $( document ).ready(function() {
-            twofaVisiblity();
-            $('.twofa-toggle input').click(twofaVisiblity);
-        });
-
-    </script>
 {% endblock %}