Login improve UI config (#2171)

* feat: show auth configs on the admin UI
* fix: do not access settings on load
* fix: redirect for click on item (not only on text)
* fix: remove `Display Name`
* fix: do not show `Verify email with` if no auth option is available
* feat: show warning before logout
* feat: i18n of account page
* fix: show account icon for user ID login
* fix: always check `isUserAuthorized`
* fix: update the `disclaimer_dialog` message
* feat: hide user ID by default
* fix: redirect from login page when user authorized
* feat: update logout message
* fix: do not translate company names

lnbits/static/js/account.js

@@ -5,6 +5,7 @@ new Vue({
     return {
       user: null,
       hasUsername: false,
+      showUserId: false,
       passwordData: {
         show: false,
         oldPassword: null,

lnbits/static/js/base.js

@@ -407,6 +407,7 @@ window.windowMixin = {
   data: function () {
     return {
       toggleSubs: true,
+      isUserAuthorized: false,
       g: {
         offline: !navigator.onLine,
         visibleDrawer: false,
@@ -420,12 +421,6 @@ window.windowMixin = {
     }
   },
 
-  computed: {
-    isUserAuthorized() {
-      return this.$q.cookies.get('is_lnbits_user_authorized')
-    }
-  },
-
   methods: {
     activeLanguage: function (lang) {
       return window.i18n.locale === lang
@@ -452,31 +447,45 @@ window.windowMixin = {
       })
     },
     checkUsrInUrl: async function () {
-      const params = new URLSearchParams(window.location.search)
-      const usr = params.get('usr')
-      if (!usr) {
-        return
-      }
+      try {
+        const params = new URLSearchParams(window.location.search)
+        const usr = params.get('usr')
+        if (!usr) {
+          return
+        }
 
-      if (!this.isUserAuthorized) {
-        await LNbits.api.loginUsr(usr)
-      }
-      params.delete('usr')
-      const cleanQueryPrams = params.size ? `?${params.toString()}` : ''
+        if (!this.isUserAuthorized) {
+          await LNbits.api.loginUsr(usr)
+        }
 
-      window.history.replaceState(
-        {},
-        document.title,
-        window.location.pathname + cleanQueryPrams
-      )
+        params.delete('usr')
+        const cleanQueryPrams = params.size ? `?${params.toString()}` : ''
+
+        window.history.replaceState(
+          {},
+          document.title,
+          window.location.pathname + cleanQueryPrams
+        )
+      } finally {
+        this.isUserAuthorized = !!this.$q.cookies.get(
+          'is_lnbits_user_authorized'
+        )
+      }
     },
     logout: async function () {
-      try {
-        await LNbits.api.logout()
-        window.location = '/'
-      } catch (e) {
-        LNbits.utils.notifyApiError(e)
-      }
+      LNbits.utils
+        .confirmDialog(
+          'Do you really want to logout?' +
+            ' Please visit "My Account" page to check your credentials!'
+        )
+        .onOk(async () => {
+          try {
+            await LNbits.api.logout()
+            window.location = '/'
+          } catch (e) {
+            LNbits.utils.notifyApiError(e)
+          }
+        })
     }
   },
   created: async function () {

lnbits/static/js/index.js

@@ -8,6 +8,7 @@ new Vue({
         data: {},
         description: ''
       },
+      isUserAuthorized: false,
       authAction: 'login',
       authMethod: 'username-password',
       usr: '',
@@ -23,9 +24,6 @@ new Vue({
     formatDescription() {
       return LNbits.utils.convertMarkdown(this.description)
     },
-    isUserAuthorized() {
-      return this.$q.cookies.get('is_lnbits_user_authorized')
-    },
     isAccessTokenExpired() {
       return this.$q.cookies.get('is_access_token_expired')
     }
@@ -96,6 +94,7 @@ new Vue({
   created() {
     this.description = SITE_DESCRIPTION
 
+    this.isUserAuthorized = !!this.$q.cookies.get('is_lnbits_user_authorized')
     if (this.isUserAuthorized) {
       window.location.href = '/wallet'
     }

lnbits/static/js/service-worker.js

@@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 88
+const CACHE_VERSION = 95
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {