[feat] persist user ui customization (#3743)

lnbits/static/js/api.js

@@ -154,6 +154,9 @@ window._lnbitsApi = {
       name: name
     })
   },
+  updateUiCustomization(data = {}) {
+    return this.request('patch', '/api/v1/auth/ui', null, data)
+  },
   resetWalletKeys(wallet) {
     return this.request('put', `/api/v1/wallet/reset/${wallet.id}`).then(
       res => {

lnbits/static/js/base.js

@@ -14,7 +14,8 @@ window.LNbits = {
         fiat_providers: data.fiat_providers || [],
         super_user: data.super_user,
         extra: data.extra ?? {},
-        hasPassword: data.has_password ?? false
+        hasPassword: data.has_password ?? false,
+        uiCustomization: data.ui_customization || {}
       }
       const mapWallet = this.wallet
       obj.wallets = obj.wallets.map(mapWallet).sort((a, b) => {

lnbits/static/js/components/lnbits-header.js

@@ -69,6 +69,17 @@ window.app.component('lnbits-header', {
         window.location = '/users'
       } catch (e) {
         console.warn(e)
+      }
+    },
+    async handleLanguageChanged(lang) {
+      try {
+        await LNbits.api.updateUiCustomization({locale: lang.locale})
+        this.$q.notify({
+          type: 'positive',
+          message: 'Language Updated',
+          caption: lang.locale
+        })
+      } catch (e) {
         LNbits.utils.notifyApiError(e)
       }
     }

lnbits/static/js/components/lnbits-language-dropdown.js

@@ -1,5 +1,16 @@
 window.app.component('lnbits-language-dropdown', {
   template: '#lnbits-language-dropdown',
+  computed: {
+    currentLanguage() {
+      return (
+        this.langs.find(lang => lang.value === window.i18n.global.locale) || {
+          value: 'en',
+          label: 'English',
+          display: '🇬🇧 EN'
+        }
+      )
+    }
+  },
   methods: {
     activeLanguage(lang) {
       return window.i18n.global.locale === lang
@@ -8,6 +19,7 @@ window.app.component('lnbits-language-dropdown', {
       this.g.locale = newValue
       window.i18n.global.locale = newValue
       this.$q.localStorage.set('lnbits.lang', newValue)
+      this.$emit('language-changed', newValue)
     }
   },
   data() {

lnbits/static/js/components/lnbits-theme.js

@@ -9,6 +9,10 @@ window.app.component('lnbits-theme', {
     'g.disclaimerShown'(val) {
       this.$q.localStorage.setItem('lnbits.disclaimerShown', val)
     },
+    'g.locale'(val) {
+      this.$q.localStorage.setItem('lnbits.lang', val)
+      window.i18n.global.locale = val
+    },
     'g.isFiatPriority'(val) {
       this.$q.localStorage.setItem('lnbits.isFiatPriority', val)
     },
@@ -123,6 +127,13 @@ window.app.component('lnbits-theme', {
     if (this.g.mobileSimple === true) {
       document.body.classList.add('mobile-simple')
     }
+    Object.entries(this.g.user.uiCustomization || {}).forEach(
+      ([key, value]) => {
+        if (key in this.g) {
+          this.g[key] = value
+        }
+      }
+    )
     this.checkUrlParams()
   }
 })

lnbits/static/js/pages/account.js

@@ -39,6 +39,15 @@ window.PageAccount = {
           color: 'pink-3'
         }
       ],
+      defaultSiteCustomisation: {
+        locale: 'en',
+        themeChoice: 'salvador',
+        bgimageChoice: '',
+        gradientChoice: true,
+        darkChoice: true,
+        borderChoice: 'hard-border',
+        reactionChoice: 'confettiBothSides'
+      },
       reactionOptions: [
         'None',
         'confettiBothSides',
@@ -213,26 +222,18 @@ window.PageAccount = {
     }
   },
   methods: {
-    activeLanguage(lang) {
-      return window.i18n.global.locale === lang
-    },
     changeLanguage(newValue) {
       window.i18n.global.locale = newValue
       this.$q.localStorage.set('lnbits.lang', newValue)
     },
     async updateAccount() {
       try {
-        const {data} = await LNbits.api.request(
-          'PUT',
-          '/api/v1/auth/update',
-          null,
-          {
-            user_id: this.g.user.id,
-            username: this.g.user.username,
-            email: this.g.user.email,
-            extra: this.g.user.extra
-          }
-        )
+        const {data} = await LNbits.api.request('PATCH', '/api/v1/auth', null, {
+          user_id: this.g.user.id,
+          username: this.g.user.username,
+          email: this.g.user.email,
+          extra: this.g.user.extra
+        })
         this.untouchedUser = JSON.parse(JSON.stringify(this.g.user))
         this.hasUsername = !!data.username
         Quasar.Notify.create({
@@ -680,6 +681,23 @@ window.PageAccount = {
             l => l.name !== label.name
           )
         })
+    },
+
+    async siteCustomisationChanged(options = {}) {
+      try {
+        Object.entries(options || {}).forEach(([key, value]) => {
+          if (key in this.g) {
+            this.g[key] = value
+          }
+        })
+        await LNbits.api.updateUiCustomization(options)
+        this.$q.notify({
+          type: 'positive',
+          message: 'UI Customization updated.'
+        })
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
     }
   },