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

window.app.component('lnbits-theme', {
  watch: {
    'g.walletFlip'(val) {
      this.$q.localStorage.setItem('lnbits.walletFlip', val)
      if (val === true && this.$q.screen.lt.md) {
        this.g.visibleDrawer = false
      }
    },
    '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)
    },
    'g.reactionChoice'(val) {
      this.$q.localStorage.set('lnbits.reactions', val)
    },
    'g.themeChoice'(val) {
      document.body.setAttribute('data-theme', val)
      this.$q.localStorage.set('lnbits.theme', val)
    },
    'g.darkChoice'(val) {
      this.$q.dark.set(val)
      this.$q.localStorage.set('lnbits.darkMode', val)
      Chart.defaults.color = this.$q.dark.isActive ? '#fff' : '#000'
    },
    'g.borderChoice'(val) {
      document.body.classList.forEach(cls => {
        if (cls.endsWith('-border')) {
          document.body.classList.remove(cls)
        }
      })
      this.$q.localStorage.setItem('lnbits.border', val)
      document.body.classList.add(val)
    },
    'g.gradientChoice'(val) {
      this.$q.localStorage.set('lnbits.gradientBg', val)
      if (val === true) {
        document.body.classList.add('gradient-bg')
      } else {
        document.body.classList.remove('gradient-bg')
      }
    },
    'g.cardRoundedChoice'(val) {
      this.$q.localStorage.set('lnbits.cardRounded', val)
      if (val === true) {
        document.body.classList.add('rounded-ui')
      } else {
        document.body.classList.remove('rounded-ui')
      }
    },
    'g.cardGradientChoice'(val) {
      this.$q.localStorage.set('lnbits.cardGradient', val)
      if (val === true) {
        document.body.classList.add('card-gradient')
      } else {
        document.body.classList.remove('card-gradient')
      }
    },
    'g.cardShadowChoice'(val) {
      this.$q.localStorage.set('lnbits.cardShadow', val)
      if (val === true) {
        document.body.classList.add('card-shadow')
      } else {
        document.body.classList.remove('card-shadow')
      }
    },
    'g.burgerMenuChoice'(val) {
      this.$q.localStorage.set('lnbits.burgerMenu', val)
      if (val === true) {
        document.body.classList.remove('no-burger-background')
      } else {
        document.body.classList.add('no-burger-background')
      }
    },
    'g.mobileSimple'(val) {
      this.$q.localStorage.set('lnbits.mobileSimple', val)
      if (val === true) {
        document.body.classList.add('mobile-simple')
      } else {
        document.body.classList.remove('mobile-simple')
      }
    },
    'g.bgimageChoice'(val) {
      this.$q.localStorage.set('lnbits.backgroundImage', val)
      if (val === '') {
        document.body.classList.remove('bg-image')
      } else {
        document.body.classList.add('bg-image')
        document.body.style.setProperty('--background', `url(${val})`)
      }
    }
  },
  methods: {
    async checkUrlParams() {
      const params = new URLSearchParams(window.location.search)
      if (params.length === 0) {
        return
      }
      if (params.has('theme')) {
        const theme = params.get('theme').trim().toLowerCase()
        this.g.themeChoice = theme
        params.delete('theme')
      }
      if (params.has('border')) {
        const border = params.get('border').trim().toLowerCase()
        this.g.borderChoice = border
        params.delete('border')
      }
      if (params.has('gradient')) {
        const gradient = params.get('gradient').toLowerCase()
        this.g.gradientChoice = gradient === '1' || gradient === 'true'
        params.delete('gradient')
      }
      if (params.has('dark')) {
        const dark = params.get('dark').trim().toLowerCase()
        this.g.darkChoice = dark === '1' || dark === 'true'
        params.delete('dark')
      }

      if (params.has('usr')) {
        try {
          await LNbits.api.loginUsr(params.get('usr'))
          window.location.href = '/wallet'
        } catch (e) {
          LNbits.utils.notifyApiError(e)
        }
        params.delete('usr')
      }

      // cleanup url
      const cleanParams = params.size ? `?${params.toString()}` : ''
      const url = window.location.pathname + cleanParams

      // TODO state gets overridden somewhere else
      window.history.replaceState(null, null, url)
    }
  },
  created() {
    this.$q.dark.set(this.g.darkChoice)
    document.body.setAttribute('data-theme', this.g.themeChoice)
    Chart.defaults.color = this.$q.dark.isActive ? '#fff' : '#000'

    document.body.classList.add(this.g.borderChoice)
    if (this.g.gradientChoice === true) {
      document.body.classList.add('gradient-bg')
    }
    if (this.g.cardRoundedChoice === true) {
      document.body.classList.add('rounded-ui')
    }
    if (this.g.cardGradientChoice === true) {
      document.body.classList.add('card-gradient')
    }
    if (this.g.cardShadowChoice === true) {
      document.body.classList.add('card-shadow')
    }
    if (this.g.burgerMenuChoice !== true) {
      document.body.classList.add('no-burger-background')
    }
    if (this.g.bgimageChoice !== '') {
      document.body.classList.add('bg-image')
      document.body.style.setProperty(
        '--background',
        `url(${this.g.bgimageChoice})`
      )
    }
    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()
  }
})