refactor: render variables for jinja, components and window vars (#3014)

Co-authored-by: Tiago Vasconcelos <talvasconcelos@gmail.com>
Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/core/templates/core/index.html

@@ -59,9 +59,6 @@
     }
   }
 </style>
-<script>
-  const ALLOWED_REGISTER = {{ LNBITS_NEW_ACCOUNTS_ALLOWED | tojson }};
-</script>
 <script src="{{ static_url_for('static', 'js/index.js') }}"></script>
 {% endblock %} {% block page_container %}
 <q-page-container>
@@ -151,7 +148,7 @@
                 <username-password
                   v-if="authMethod != 'user-id-only'"
                   :allowed_new_users="allowedRegister"
-                  :auth-methods="{{ LNBITS_AUTH_METHODS }}"
+                  :auth-methods="LNBITS_AUTH_METHODS"
                   :auth-action="authAction"
                   v-model:user-name="username"
                   v-model:password_1="password"
@@ -182,7 +179,6 @@
                     >
                       <span v-text="$t('new_user_not_allowed')"></span>
                     </p>
-
                     <p v-else-if="authAction === 'register'" class="q-mb-none">
                       <span v-text="$t('existing_account_question')"></span>
 
@@ -252,7 +248,7 @@
           ></q-btn>
         </div>
       </div>
-      {% if AD_SPACE %}
+      {% if AD_SPACE_ENABLED and AD_SPACE %}
       <div class="q-pt-md full-width">
         <div class="row justify-center q-mb-xl">
           <div class="full-width text-center">

lnbits/core/templates/core/wallet.html

@@ -5,7 +5,7 @@
 {% block scripts %} {{ window_vars(user, wallet) }}{% endblock %} {% block page
 %}
 <div class="row q-col-gutter-md">
-  {% if HIDE_API and AD_SPACE %}
+  {% if HIDE_API and AD_SPACE_ENABLED and AD_SPACE %}
   <div class="col-12 col-md-8 q-gutter-y-md">
     {% elif HIDE_API %}
     <div class="col-12 q-gutter-y-md">
@@ -31,7 +31,7 @@
           <q-card-section style="height: 130px">
             <div class="row q-gutter-md">
               <div
-                v-if="'{{ LNBITS_DENOMINATION }}' == 'sats'"
+                v-if="isSatsDenomination"
                 class="col-1"
                 style="max-width: 30px"
               >
@@ -468,7 +468,7 @@
               </q-list>
             </q-card-section>
           </q-card>
-          {% endif %} {% if AD_SPACE %}
+          {% endif %} {% if AD_SPACE_ENABLED and AD_SPACE %}
           <q-card>
             <q-card-section>
               <h6 class="text-subtitle1 q-mt-none q-mb-sm">

lnbits/helpers.py

@@ -64,63 +64,50 @@ def template_renderer(additional_folders: Optional[list] = None) -> Jinja2Templa
     t = Jinja2Templates(loader=jinja2.FileSystemLoader(folders))
     t.env.globals["static_url_for"] = static_url_for
 
-    if settings.lnbits_ad_space_enabled:
+    window_settings = {
-        t.env.globals["AD_SPACE"] = settings.lnbits_ad_space.split(",")
+        "AD_SPACE": settings.lnbits_ad_space.split(","),
-        t.env.globals["AD_SPACE_TITLE"] = settings.lnbits_ad_space_title
+        "AD_SPACE_ENABLED": settings.lnbits_ad_space_enabled,
+        "AD_SPACE_TITLE": settings.lnbits_ad_space_title,
+        "EXTENSIONS": list(settings.lnbits_installed_extensions_ids),
+        "HIDE_API": settings.lnbits_hide_api,
+        "SITE_TITLE": settings.lnbits_site_title,
+        "SITE_TAGLINE": settings.lnbits_site_tagline,
+        "SITE_DESCRIPTION": settings.lnbits_site_description,
+        "LNBITS_ADMIN_UI": settings.lnbits_admin_ui,
+        "LNBITS_AUDIT_ENABLED": settings.lnbits_audit_enabled,
+        "LNBITS_AUTH_METHODS": settings.auth_allowed_methods,
+        "LNBITS_CUSTOM_IMAGE": settings.lnbits_custom_image,
+        "LNBITS_CUSTOM_BADGE": settings.lnbits_custom_badge,
+        "LNBITS_CUSTOM_BADGE_COLOR": settings.lnbits_custom_badge_color,
+        "LNBITS_EXTENSIONS_DEACTIVATE_ALL": settings.lnbits_extensions_deactivate_all,
+        "LNBITS_NEW_ACCOUNTS_ALLOWED": settings.new_accounts_allowed,
+        "LNBITS_NODE_UI": settings.lnbits_node_ui and get_node_class() is not None,
+        "LNBITS_NODE_UI_AVAILABLE": get_node_class() is not None,
+        "LNBITS_QR_LOGO": settings.lnbits_qr_logo,
+        "LNBITS_SERVICE_FEE": settings.lnbits_service_fee,
+        "LNBITS_SERVICE_FEE_MAX": settings.lnbits_service_fee_max,
+        "LNBITS_SERVICE_FEE_WALLET": settings.lnbits_service_fee_wallet,
+        "LNBITS_SHOW_HOME_PAGE_ELEMENTS": settings.lnbits_show_home_page_elements,
+        "LNBITS_THEME_OPTIONS": settings.lnbits_theme_options,
+        "LNBITS_VERSION": settings.version,
+        "USE_CUSTOM_LOGO": settings.lnbits_custom_logo,
+        "USE_DEFAULT_REACTION": settings.lnbits_default_reaction,
+        "USE_DEFAULT_THEME": settings.lnbits_default_theme,
+        "USE_DEFAULT_BORDER": settings.lnbits_default_border,
+        "USE_DEFAULT_GRADIENT": settings.lnbits_default_gradient,
+        "USE_DEFAULT_BGIMAGE": settings.lnbits_default_bgimage,
+        "VOIDWALLET": settings.lnbits_backend_wallet_class == "VoidWallet",
+        "WEBPUSH_PUBKEY": settings.lnbits_webpush_pubkey,
+        "LNBITS_DENOMINATION": (
+            settings.lnbits_denomination
+            if settings.lnbits_denomination == "FakeWallet"
+            else "sats"
+        ),
+    }
 
-    t.env.globals["VOIDWALLET"] = settings.lnbits_backend_wallet_class == "VoidWallet"
+    t.env.globals["WINDOW_SETTINGS"] = window_settings
-    t.env.globals["HIDE_API"] = settings.lnbits_hide_api
+    for key, value in window_settings.items():
-    t.env.globals["SITE_TITLE"] = settings.lnbits_site_title
+        t.env.globals[key] = value
-    t.env.globals["LNBITS_DENOMINATION"] = (
-        settings.lnbits_denomination
-        if settings.lnbits_backend_wallet_class == "FakeWallet"
-        else "sats"
-    )
-    t.env.globals["SITE_TAGLINE"] = settings.lnbits_site_tagline
-    t.env.globals["SITE_DESCRIPTION"] = settings.lnbits_site_description
-    t.env.globals["LNBITS_SHOW_HOME_PAGE_ELEMENTS"] = (
-        settings.lnbits_show_home_page_elements
-    )
-    t.env.globals["LNBITS_CUSTOM_IMAGE"] = settings.lnbits_custom_image
-    t.env.globals["LNBITS_CUSTOM_BADGE"] = settings.lnbits_custom_badge
-    t.env.globals["LNBITS_CUSTOM_BADGE_COLOR"] = settings.lnbits_custom_badge_color
-    t.env.globals["LNBITS_THEME_OPTIONS"] = settings.lnbits_theme_options
-    t.env.globals["LNBITS_QR_LOGO"] = settings.lnbits_qr_logo
-    t.env.globals["LNBITS_VERSION"] = settings.version
-    t.env.globals["LNBITS_NEW_ACCOUNTS_ALLOWED"] = settings.new_accounts_allowed
-    t.env.globals["LNBITS_AUTH_METHODS"] = settings.auth_allowed_methods
-    t.env.globals["LNBITS_ADMIN_UI"] = settings.lnbits_admin_ui
-    t.env.globals["LNBITS_EXTENSIONS_DEACTIVATE_ALL"] = (
-        settings.lnbits_extensions_deactivate_all
-    )
-    t.env.globals["LNBITS_AUDIT_ENABLED"] = settings.lnbits_audit_enabled
-
-    t.env.globals["LNBITS_SERVICE_FEE"] = settings.lnbits_service_fee
-    t.env.globals["LNBITS_SERVICE_FEE_MAX"] = settings.lnbits_service_fee_max
-    t.env.globals["LNBITS_SERVICE_FEE_WALLET"] = settings.lnbits_service_fee_wallet
-    t.env.globals["LNBITS_NODE_UI"] = (
-        settings.lnbits_node_ui and get_node_class() is not None
-    )
-    t.env.globals["LNBITS_NODE_UI_AVAILABLE"] = get_node_class() is not None
-    t.env.globals["EXTENSIONS"] = list(settings.lnbits_installed_extensions_ids)
-
-    if settings.lnbits_custom_logo:
-        t.env.globals["USE_CUSTOM_LOGO"] = settings.lnbits_custom_logo
-
-    if settings.lnbits_default_reaction:
-        t.env.globals["USE_DEFAULT_REACTION"] = settings.lnbits_default_reaction
-
-    if settings.lnbits_default_theme:
-        t.env.globals["USE_DEFAULT_THEME"] = settings.lnbits_default_theme
-
-    if settings.lnbits_default_border:
-        t.env.globals["USE_DEFAULT_BORDER"] = settings.lnbits_default_border
-
-    if settings.lnbits_default_gradient:
-        t.env.globals["USE_DEFAULT_GRADIENT"] = settings.lnbits_default_gradient
-
-    if settings.lnbits_default_bgimage:
-        t.env.globals["USE_DEFAULT_BGIMAGE"] = settings.lnbits_default_bgimage
 
     if settings.bundle_assets:
         t.env.globals["INCLUDED_JS"] = ["bundle.min.js"]
@@ -134,8 +121,6 @@ def template_renderer(additional_folders: Optional[list] = None) -> Jinja2Templa
             t.env.globals["INCLUDED_CSS"] = vendor_files["css"]
             t.env.globals["INCLUDED_COMPONENTS"] = vendor_files["components"]
 
-    t.env.globals["WEBPUSH_PUBKEY"] = settings.lnbits_webpush_pubkey
-
     return t
 
 

lnbits/static/js/base.js

@@ -495,8 +495,10 @@ window.windowMixin = {
         ? this.$q.localStorage.getItem('lnbits.backgroundImage')
         : USE_DEFAULT_BGIMAGE,
       isUserAuthorized: false,
+      isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
       walletEventListeners: [],
-      backgroundImage: ''
+      backgroundImage: '',
+      ...WINDOW_SETTINGS
     }
   },
 

lnbits/static/js/index.js

@@ -101,8 +101,8 @@ window.app = Vue.createApp({
     }
   },
   created() {
-    this.description = SITE_DESCRIPTION
+    this.description = this.SITE_DESCRIPTION
-    this.allowedRegister = ALLOWED_REGISTER
+    this.allowedRegister = this.LNBITS_NEW_ACCOUNTS_ALLOWED
     this.authAction =
       !this.allowedRegister ||
       Quasar.LocalStorage.getItem('lnbits.disclaimerShown')

lnbits/templates/base.html

@@ -390,42 +390,38 @@
       </q-layout>
     </div>
 
+    <script type="text/javascript">
+      const WINDOW_SETTINGS = {{ WINDOW_SETTINGS | tojson }}
+      Object.keys(WINDOW_SETTINGS).forEach(key => {
+        window[key] = WINDOW_SETTINGS[key]
+      })
+      if (LNBITS_THEME_OPTIONS && LNBITS_THEME_OPTIONS.length) {
+        window.allowedThemes = LNBITS_THEME_OPTIONS.map(str => str.trim())
+      }
+    </script>
     {% include('components.vue') %} {% block vue_templates %}{% endblock %} {%
     for url in INCLUDED_JS %}
     <script src="{{ static_url_for('static', url) }}"></script>
     {% endfor %}
     <script type="text/javascript">
-      const SITE_DESCRIPTION = {{ SITE_DESCRIPTION | tojson}}
-      const themes = {{ LNBITS_THEME_OPTIONS | tojson }}
-      const LNBITS_DENOMINATION = {{ LNBITS_DENOMINATION | tojson }}
-      const LNBITS_VERSION = {{ LNBITS_VERSION | tojson }}
-      const LNBITS_QR_LOGO = {{ LNBITS_QR_LOGO | tojson }}
-      const USE_DEFAULT_REACTION = {{ USE_DEFAULT_REACTION | tojson }}
-      const USE_DEFAULT_THEME = {{ USE_DEFAULT_THEME | tojson }}
-      const USE_DEFAULT_BORDER = {{ USE_DEFAULT_BORDER | tojson }}
-      const USE_DEFAULT_GRADIENT = {{ USE_DEFAULT_GRADIENT | lower | tojson }}
-      const USE_DEFAULT_BGIMAGE = "{{ USE_DEFAULT_BGIMAGE or None | tojson }}"
-      if (themes && themes.length) {
-        window.allowedThemes = themes.map(str => str.trim())
-      }
       window.langs = [
-        { value: 'en', label: 'English', display: '🇬🇧 EN' },
+        {value: 'en', label: 'English', display: '🇬🇧 EN'},
-        { value: 'de', label: 'Deutsch', display: '🇩🇪 DE' },
+        {value: 'de', label: 'Deutsch', display: '🇩🇪 DE'},
-        { value: 'es', label: 'Español', display: '🇪🇸 ES' },
+        {value: 'es', label: 'Español', display: '🇪🇸 ES'},
-        { value: 'jp', label: '日本語', display: '🇯🇵 JP' },
+        {value: 'jp', label: '日本語', display: '🇯🇵 JP'},
-        { value: 'cn', label: '中文', display: '🇨🇳 CN' },
+        {value: 'cn', label: '中文', display: '🇨🇳 CN'},
-        { value: 'fr', label: 'Français', display: '🇫🇷 FR' },
+        {value: 'fr', label: 'Français', display: '🇫🇷 FR'},
-        { value: 'it', label: 'Italiano', display: '🇮🇹 IT' },
+        {value: 'it', label: 'Italiano', display: '🇮🇹 IT'},
-        { value: 'pi', label: 'Pirate', display: '🏴‍☠️ PI' },
+        {value: 'pi', label: 'Pirate', display: '🏴‍☠️ PI'},
-        { value: 'nl', label: 'Nederlands', display: '🇳🇱 NL' },
+        {value: 'nl', label: 'Nederlands', display: '🇳🇱 NL'},
-        { value: 'we', label: 'Cymraeg', display: '🏴󠁧󠁢󠁷󠁬󠁳󠁿 CY' },
+        {value: 'we', label: 'Cymraeg', display: '🏴󠁧󠁢󠁷󠁬󠁳󠁿 CY'},
-        { value: 'pl', label: 'Polski', display: '🇵🇱 PL' },
+        {value: 'pl', label: 'Polski', display: '🇵🇱 PL'},
-        { value: 'pt', label: 'Português', display: '🇵🇹 PT' },
+        {value: 'pt', label: 'Português', display: '🇵🇹 PT'},
-        { value: 'br', label: 'Português do Brasil', display: '🇧🇷 BR' },
+        {value: 'br', label: 'Português do Brasil', display: '🇧🇷 BR'},
-        { value: 'cs', label: 'Česky', display: '🇨🇿 CS' },
+        {value: 'cs', label: 'Česky', display: '🇨🇿 CS'},
-        { value: 'sk', label: 'Slovensky', display: '🇸🇰 SK' },
+        {value: 'sk', label: 'Slovensky', display: '🇸🇰 SK'},
-        { value: 'kr', label: '한국어', display: '🇰🇷 KR' },
+        {value: 'kr', label: '한국어', display: '🇰🇷 KR'},
-        { value: 'fi', label: 'Suomi', display: '🇫🇮 FI' }
+        {value: 'fi', label: 'Suomi', display: '🇫🇮 FI'}
       ]
       window.LOCALE = 'en'
       window.dateFormat = 'YYYY-MM-DD HH:mm'

lnbits/templates/print.html

@@ -44,23 +44,20 @@
       </q-layout>
     </div>
 
+    <script type="text/javascript">
+      const WINDOW_SETTINGS = {{ WINDOW_SETTINGS | tojson }}
+      Object.keys(WINDOW_SETTINGS).forEach(key => {
+        window[key] = WINDOW_SETTINGS[key]
+      })
+      if (LNBITS_THEME_OPTIONS && LNBITS_THEME_OPTIONS.length) {
+        window.allowedThemes = LNBITS_THEME_OPTIONS.map(str => str.trim())
+      }
+    </script>
     {% include('components.vue') %}{% block vue_templates %}{% endblock %} {%
     for url in INCLUDED_JS %}
     <script src="{{ static_url_for('static', url) }}"></script>
-    {% endfor %}
+    {% endfor %} {% block scripts %}{% endblock %} {% for url in
-    <script>
+    INCLUDED_COMPONENTS %}
-      const SITE_DESCRIPTION = {{ SITE_DESCRIPTION | tojson}}
-      const themes = {{ LNBITS_THEME_OPTIONS | tojson }}
-      const LNBITS_DENOMINATION = {{ LNBITS_DENOMINATION | tojson }}
-      const LNBITS_VERSION = {{ LNBITS_VERSION | tojson }}
-      const LNBITS_QR_LOGO = {{ LNBITS_QR_LOGO | tojson }}
-      const USE_DEFAULT_REACTION = {{ USE_DEFAULT_REACTION | tojson }}
-      const USE_DEFAULT_THEME = {{ USE_DEFAULT_THEME | tojson }}
-      const USE_DEFAULT_BORDER = {{ USE_DEFAULT_BORDER | tojson }}
-      const USE_DEFAULT_GRADIENT = {{ USE_DEFAULT_GRADIENT | lower | tojson }}
-      const USE_DEFAULT_BGIMAGE = "{{ USE_DEFAULT_BGIMAGE or None | tojson }}"
-    </script>
-    {% block scripts %}{% endblock %} {% for url in INCLUDED_COMPONENTS %}
     <script src="{{ static_url_for('static', url) }}"></script>
     {% endfor %}
   </body>