Revamp the UI on Login / Register page (#2919)

lnbits/static/i18n/en.js

@@ -263,13 +263,14 @@ window.localisation.en = {
   enable_server_log: 'Enable Server Log',
   coming_soon: 'Feature coming soon',
   session_has_expired: 'Your session has expired. Please login again.',
-  instant_access_question: 'Want instant access?',
+  instant_access_question: 'or instant access',
   login_with_user_id: 'Login with user ID',
   or: 'or',
   create_new_wallet: 'Create New Wallet',
   login_to_account: 'Login to your account',
   create_account: 'Create account',
   account_settings: 'Account Settings',
+  signin_with_oauth: 'or Login with',
   signin_with_nostr: 'Continue with Nostr',
   signin_with_google: 'Sign in with Google',
   signin_with_github: 'Sign in with GitHub',
@@ -458,6 +459,9 @@ window.localisation.en = {
   denomination_hint: 'The name for the FakeWallet token',
   ui_qr_code_logo: 'QR Code Logo',
   ui_qr_code_logo_hint: 'URL to logo image in QR code',
+  ui_custom_image: 'Custom Image',
+  ui_custom_image_label: 'URL to custom image',
+  ui_custom_image_hint: 'Image showed at homepage/login',
   ui_custom_badge: 'Custom Badge',
   ui_custom_badge_label:
     "Custom Badge 'USE WITH CAUTION - LNbits wallet is still in BETA'",

lnbits/static/js/base.js

@@ -744,7 +744,6 @@ window.windowMixin = {
         )
         .onOk(async () => {
           try {
-            this.$q.localStorage.remove('lnbits.disclaimerShown')
             await LNbits.api.logout()
             window.location = '/'
           } catch (e) {

lnbits/static/js/components.js

@@ -498,3 +498,123 @@ window.app.component('lnbits-update-balance', {
     }
   }
 })
+
+window.app.component('user-id-only', {
+  template: '#user-id-only',
+  mixins: [window.windowMixin],
+  props: {
+    allowed_new_users: Boolean,
+    authAction: String,
+    authMethod: String,
+    usr: String,
+    wallet: String
+  },
+  data() {
+    return {
+      user: this.usr,
+      walletName: this.wallet
+    }
+  },
+  methods: {
+    showLogin(method) {
+      this.$emit('show-login', method)
+    },
+    showRegister(method) {
+      this.$emit('show-register', method)
+    },
+    loginUsr() {
+      this.$emit('update:user', this.user)
+      this.$emit('login-usr')
+    },
+    createWallet() {
+      this.$emit('update:wallet', this.walletName)
+      this.$emit('create-wallet')
+    }
+  },
+  computed: {
+    showInstantLogin() {
+      // do not show if authmethod is 'username-password' and authAction is 'register'
+      return (
+        this.authMethod !== 'username-password' ||
+        this.authAction !== 'register'
+      )
+    }
+  },
+  created() {}
+})
+
+window.app.component('username-password', {
+  template: '#username-password',
+  mixins: [window.windowMixin],
+  props: {
+    allowed_new_users: Boolean,
+    authMethods: Array,
+    authAction: String,
+    username: String,
+    password_1: String,
+    password_2: String,
+    resetKey: String
+  },
+  data() {
+    return {
+      oauth: [
+        'nostr-auth-nip98',
+        'google-auth',
+        'github-auth',
+        'keycloak-auth'
+      ],
+      username: this.userName,
+      password: this.password_1,
+      passwordRepeat: this.password_2,
+      reset_key: this.resetKey
+    }
+  },
+  methods: {
+    login() {
+      this.$emit('update:userName', this.username)
+      this.$emit('update:password_1', this.password)
+      this.$emit('login')
+    },
+    register() {
+      this.$emit('update:userName', this.username)
+      this.$emit('update:password_1', this.password)
+      this.$emit('update:password_2', this.passwordRepeat)
+      this.$emit('register')
+    },
+    reset() {
+      this.$emit('update:resetKey', this.reset_key)
+      this.$emit('update:passeord_1', this.password)
+      this.$emit('update:password_2', this.passwordRepeat)
+      this.$emit('reset')
+    },
+    validateUsername(val) {
+      const usernameRegex = new RegExp(
+        '^(?=[a-zA-Z0-9._]{2,20}$)(?!.*[_.]{2})[^_.].*[^_.]$'
+      )
+      return usernameRegex.test(val)
+    }
+  },
+  computed: {
+    showOauth() {
+      return this.oauth.some(m => this.authMethods.includes(m))
+    }
+  },
+  created() {
+    console.log('username-password created', this.passwordRepeat)
+  }
+})
+
+window.app.component('separator-text', {
+  template: '#separator-text',
+  props: {
+    text: String,
+    uppercase: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: 'grey'
+    }
+  }
+})

lnbits/static/js/index.js

@@ -9,7 +9,9 @@ window.app = Vue.createApp({
         description: ''
       },
       isUserAuthorized: false,
-      authAction: 'login',
+      authAction: Quasar.LocalStorage.getItem('lnbits.disclaimerShown')
+        ? 'login'
+        : 'register',
       authMethod: 'username-password',
       usr: '',
       username: '',
@@ -18,7 +20,9 @@ window.app = Vue.createApp({
       password: '',
       passwordRepeat: '',
       walletName: '',
-      signup: false
+      signup: false,
+      slide: 1,
+      autoplay: true
     }
   },
   computed: {
@@ -170,15 +174,10 @@ window.app = Vue.createApp({
         message: 'Processing...',
         icon: null
       })
-    },
-    validateUsername(val) {
-      const usernameRegex = new RegExp(
-        '^(?=[a-zA-Z0-9._]{2,20}$)(?!.*[_.]{2})[^_.].*[^_.]$'
-      )
-      return usernameRegex.test(val)
     }
   },
   created() {
+    console.log(Quasar.LocalStorage.getItem('lnbits.disclaimerShown'))
     this.description = SITE_DESCRIPTION
     this.isUserAuthorized = !!this.$q.cookies.get('is_lnbits_user_authorized')
     if (this.isUserAuthorized) {

lnbits/static/js/wallet.js

@@ -847,18 +847,18 @@ window.WalletPageLogic = {
     }
   },
   mounted() {
-    if (!this.$q.localStorage.getItem('lnbits.disclaimerShown')) {
+    if (!Quasar.LocalStorage.getItem('lnbits.disclaimerShown')) {
       this.disclaimerDialog.show = true
-      this.$q.localStorage.set('lnbits.disclaimerShown', true)
-      this.$q.localStorage.set('lnbits.reactions', 'confettiTop')
+      Quasar.LocalStorage.setItem('lnbits.disclaimerShown', true)
+      Quasar.LocalStorage.setItem('lnbits.reactions', 'confettiTop')
     }
-    if (this.$q.localStorage.getItem('lnbits.isPrioritySwapped')) {
-      this.isPrioritySwapped = this.$q.localStorage.getItem(
+    if (Quasar.LocalStorage.getItem('lnbits.isPrioritySwapped')) {
+      this.isPrioritySwapped = Quasar.LocalStorage.getItem(
         'lnbits.isPrioritySwapped'
       )
     } else {
       this.isPrioritySwapped = false
-      this.$q.localStorage.setItem('lnbits.isPrioritySwapped', false)
+      Quasar.LocalStorage.setItem('lnbits.isPrioritySwapped', false)
     }
   }
 }