luci-base: add ui indicator when fallback theme is used

Add a ui indicator displaying error details when the configured theme
failed to load and the next available one is being used instead.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-base/ucode/runtime.uc b/modules/luci-base/ucode/runtime.uc
index a8b6812e745bdb96f99d72118503be99c7610b14..d02d8dd667d4082eb39d9597ed3849f2532defd4 100644 (file)
--- a/modules/luci-base/ucode/runtime.uc
+++ b/modules/luci-base/ucode/runtime.uc
@@ -137,6 +137,7 @@ export default function(env) {
 
        if (status !== true) {
                media = null;
+               self.env.media_error = status;
 
                for (let k, v in uci.get_all('luci', 'themes')) {
                        if (substr(k, 0, 1) != '.') {

diff --git a/modules/luci-base/ucode/template/footer.ut b/modules/luci-base/ucode/template/footer.ut
index 22d4f136f0a0a726fec184d0569e3fdba125ac6f..d0978594f8f851818d5eefe7eda9dab95745a644 100644 (file)
--- a/modules/luci-base/ucode/template/footer.ut
+++ b/modules/luci-base/ucode/template/footer.ut
@@ -18,6 +18,25 @@
        </script>
 {% endif %}
 
+{% if (media_error): %}
+       <script type="text/javascript">
+               L.require('ui').then(function(ui) {
+                       ui.showIndicator('media_error', _('Theme fallback'), function(ev) {
+                               ui.showModal(_('Error loading theme'), [
+                                       E('p', [
+                                               _('A fallback is used since the configured theme failed to load with the error below.')
+                                       ]),
+                                       E('hr'),
+                                       E('div', { 'style': 'white-space:pre-line' }, {{ sprintf('%J', trim(media_error)) }}),
+                                       E('div', { 'class': 'right' }, [
+                                               E('button', { 'class': 'btn cbi-button', 'click': ui.hideModal }, _('Dismiss'))
+                                       ])
+                               ]);
+                       });
+               });
+       </script>
+{% endif %}
+
 {% include(`themes/${theme}/footer`) %}
 
 <!-- Lua compatibility mode active: {{ lua_active ? 'yes' : 'no' }} -->