Fix login with oauth (#2935)

lnbits/core/templates/core/index.html

@@ -98,26 +98,7 @@
             </div>
           </div>
         </div>
-        {% if lnurl and LNBITS_NEW_ACCOUNTS_ALLOWED and ("user-id-only" in
+
-        LNBITS_AUTH_METHODS)%}
-        <div class="row">
-          <div class="full-width q-mb-md">
-            <q-card>
-              <q-card-section>
-                <q-btn
-                  unelevated
-                  color="primary"
-                  @click="processing"
-                  type="a"
-                  href="/lnurlwallet?lightning={{ lnurl }}"
-                  v-text="$t('press_to_claim')"
-                  class="full-width"
-                ></q-btn>
-              </q-card-section>
-            </q-card>
-          </div>
-        </div>
-        {%else%} {% endif %}
         <div class="row">
           <q-badge
             v-if="isAccessTokenExpired"
@@ -129,13 +110,33 @@
               <span v-text="$t('session_has_expired')"></span>
             </div>
           </q-badge>
-          <q-card bordered class="full-width q-pt-md">
+          <q-card bordered class="full-width q-py-md">
             <div class="row">
               <div
                 class="col-12"
                 :class="{'col-sm-7' : '{{ LNBITS_CUSTOM_IMAGE }}', 'col-lg-6' : '{{ LNBITS_CUSTOM_IMAGE }}'}"
               >
-                {% if "username-password" in LNBITS_AUTH_METHODS %}
+                {% if lnurl and LNBITS_NEW_ACCOUNTS_ALLOWED and ("user-id-only"
+                in LNBITS_AUTH_METHODS)%}
+                <div class="full-height content-center">
+                  <q-card-section>
+                    <div class="text-body1">
+                      <span v-text="$t('claim_desc')"></span>
+                    </div>
+                  </q-card-section>
+                  <q-card-section>
+                    <q-btn
+                      unelevated
+                      color="primary"
+                      @click="processing"
+                      type="a"
+                      href="/lnurlwallet?lightning={{ lnurl }}"
+                      v-text="$t('press_to_claim')"
+                      class="full-width"
+                    ></q-btn>
+                  </q-card-section>
+                </div>
+                {%else%}
                 <username-password
                   v-if="authMethod != 'user-id-only'"
                   :allowed_new_users="{{ LNBITS_NEW_ACCOUNTS_ALLOWED | tojson }}"
@@ -171,7 +172,7 @@
                     </p>
                   </div>
                 </username-password>
-                {%endif%} {% if "user-id-only" in LNBITS_AUTH_METHODS %}
+                {% if "user-id-only" in LNBITS_AUTH_METHODS %}
                 <user-id-only
                   :allowed_new_users="{{ LNBITS_NEW_ACCOUNTS_ALLOWED | tojson }}"
                   v-model:usr="usr"
@@ -184,7 +185,7 @@
                   @create-wallet="createWallet"
                 >
                 </user-id-only>
-                {%endif%}
+                {%endif%} {% endif %}
               </div>
               <div
                 class="col-sm-5 col-lg-6 gt-xs"
@@ -202,7 +203,7 @@
           </q-card>
         </div>
       </div>
-      <div class="full-width q-mb-xl q-mt-sm">
+      <div class="full-width q-mb-lg q-mt-sm">
         <div class="flex flex-center q-gutter-md q-py-md">
           <q-btn
             outline
@@ -226,6 +227,35 @@
           ></q-btn>
         </div>
       </div>
+      {% if AD_SPACE %}
+      <div class="row justify-center q-mb-xl">
+        <div class="full-width text-center">
+          <span class="text-uppercase text-grey">{{ AD_SPACE_TITLE }}</span>
+        </div>
+        <div class="flex flex-center columm">
+          {% for ADS in AD_SPACE %} {% set AD = ADS.split(';') %}
+
+          <div class="flex flex-center column">
+            <a href="{{ AD[0] }}">
+              <img
+                v-if="($q.dark.isActive)"
+                src="{{ AD[1] }}"
+                style="max-width: 420px"
+                class="full-width"
+              />
+              <img
+                v-else
+                src="{{ AD[2] }}"
+                style="max-width: 420px"
+                class="full-width"
+              />
+            </a>
+          </div>
+
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
       <div class="full-width">
         <div class="wrapper">
           <div class="marquee">
@@ -623,35 +653,7 @@
         </div>
       </div>
     </div>
-    {% if AD_SPACE %}
+    {% endblock %}
-    <div class="row justify-center q-mt-xl">
-      <div class="full-width q-mb-md text-center">
-        <span class="text-uppercase text-grey">{{ AD_SPACE_TITLE }}</span>
-      </div>
-      <div class="flex flex-center columm">
-        {% for ADS in AD_SPACE %} {% set AD = ADS.split(';') %}
-
-        <div class="flex flex-center column">
-          <a href="{{ AD[0] }}">
-            <img
-              v-if="($q.dark.isActive)"
-              src="{{ AD[1] }}"
-              style="max-width: 420px"
-              class="full-width"
-            />
-            <img
-              v-else
-              src="{{ AD[2] }}"
-              style="max-width: 420px"
-              class="full-width"
-            />
-          </a>
-        </div>
-
-        {% endfor %}
-      </div>
-    </div>
-    {% endif %} {% endblock %}
   </q-page>
 </q-page-container>
 {% endblock %}

lnbits/core/views/generic.py

@@ -471,7 +471,7 @@ async def lnurlwallet(request: Request, lightning: str = ""):
         res2.raise_for_status()
 
     return RedirectResponse(
-        f"/wallet?wal={wallet.id}",
+        f"/wallet?usr={account.id}&wal={wallet.id}",
     )
 
 

lnbits/static/i18n/en.js

@@ -58,6 +58,8 @@ window.localisation.en = {
   currency: 'Currency',
   update_currency: 'Update currency',
   press_to_claim: 'Press to claim bitcoin',
+  claim_desc:
+    'It seems you have a claimable amount of bitcoin but you don’t have a wallet yet. Press the button below to claim it. This will create a new wallet for you.',
   donate: 'Donate',
   view_github: 'View on GitHub',
   voidwallet_active: 'VoidWallet is active! Payments disabled',
@@ -270,7 +272,8 @@ window.localisation.en = {
   login_to_account: 'Login to your account',
   create_account: 'Create account',
   account_settings: 'Account Settings',
-  signin_with_oauth: 'or Login with',
+  signin_with_oauth: 'Login with',
+  signin_with_oauth_or: 'or Login with',
   signin_with_nostr: 'Continue with Nostr',
   signin_with_google: 'Sign in with Google',
   signin_with_github: 'Sign in with GitHub',

lnbits/static/js/components.js

@@ -523,7 +523,7 @@ window.app.component('user-id-only', {
       this.$emit('show-register', method)
     },
     loginUsr() {
-      this.$emit('update:user', this.user)
+      this.$emit('update:usr', this.user)
       this.$emit('login-usr')
     },
     createWallet() {
@@ -599,9 +599,7 @@ window.app.component('username-password', {
       return this.oauth.some(m => this.authMethods.includes(m))
     }
   },
-  created() {
+  created() {}
-    console.log('username-password created', this.passwordRepeat)
-  }
 })
 
 window.app.component('separator-text', {

lnbits/static/js/index.js

@@ -20,9 +20,7 @@ window.app = Vue.createApp({
       password: '',
       passwordRepeat: '',
       walletName: '',
-      signup: false,
+      signup: false
-      slide: 1,
-      autoplay: true
     }
   },
   computed: {
@@ -177,7 +175,6 @@ window.app = Vue.createApp({
     }
   },
   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/templates/components.vue

@@ -1157,140 +1157,152 @@
 </template>
 
 <template id="username-password">
-  <q-card-section class="q-pb-none">
+  <div v-if="authMethods.includes('username-password')">
-    <div class="text-center text-h6 q-mb-sm q-mt-none q-pt-none">
+    <q-card-section class="q-pb-none">
-      <span
+      <div class="text-center text-h6 q-mb-sm q-mt-none q-pt-none">
-        v-if="authAction === 'login'"
+        <span
-        v-text="$t('login_to_account')"
+          v-if="authAction === 'login'"
-      ></span>
+          v-text="$t('login_to_account')"
-      <span
+        ></span>
-        v-if="authAction === 'register'"
+        <span
-        v-text="$t('create_account')"
+          v-if="authAction === 'register'"
-      ></span>
+          v-text="$t('create_account')"
-      <span v-if="authAction === 'reset'" v-text="$t('reset_password')"></span>
+        ></span>
-    </div>
+        <span
-  </q-card-section>
+          v-if="authAction === 'reset'"
-  <!-- LOGIN -->
+          v-text="$t('reset_password')"
-  <q-card-section v-if="authAction === 'login'">
+        ></span>
-    <q-form @submit="login" class="q-gutter-sm">
-      <q-input
-        dense
-        filled
-        v-model="username"
-        name="username"
-        :label="$t('username_or_email') + ' *'"
-      ></q-input>
-      <q-input
-        dense
-        filled
-        v-model="password"
-        name="password"
-        :label="$t('password') + ' *'"
-        type="password"
-      ></q-input>
-      <div class="row justify-end">
-        <q-btn
-          :disable="!username || !password"
-          color="primary"
-          type="submit"
-          :label="$t('login')"
-          class="full-width"
-        ></q-btn>
       </div>
-    </q-form>
+    </q-card-section>
-  </q-card-section>
+    <!-- LOGIN -->
-  <!-- REGISTER -->
+    <q-card-section v-if="authAction === 'login'">
-  <q-card-section v-if="authAction === 'register'">
+      <q-form @submit="login" class="q-gutter-sm">
-    <q-form @submit="register" class="q-gutter-sm">
+        <q-input
-      <q-input
+          dense
-        dense
+          filled
-        filled
+          v-model="username"
-        required
+          name="username"
-        v-model="username"
+          :label="$t('username_or_email') + ' *'"
-        :label="$t('username') + ' *'"
+        ></q-input>
-        :rules="[val => validateUsername(val) || $t('invalid_username')]"
+        <q-input
-      ></q-input>
+          dense
-      <q-input
+          filled
-        dense
+          v-model="password"
-        filled
+          name="password"
-        v-model="password"
+          :label="$t('password') + ' *'"
-        :label="$t('password') + ' *'"
+          type="password"
-        type="password"
+        ></q-input>
-        :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
+        <div class="row justify-end">
-      ></q-input>
+          <q-btn
-      <q-input
+            :disable="!username || !password"
-        dense
+            color="primary"
-        filled
+            type="submit"
-        v-model="passwordRepeat"
+            :label="$t('login')"
-        :label="$t('password_repeat') + ' *'"
+            class="full-width"
-        type="password"
+          ></q-btn>
-        :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
+        </div>
-      ></q-input>
+      </q-form>
-      <div class="row justify-end">
+    </q-card-section>
-        <q-btn
+    <!-- REGISTER -->
-          unelevated
+    <q-card-section v-if="authAction === 'register'">
-          color="primary"
+      <q-form @submit="register" class="q-gutter-sm">
-          :disable="
+        <q-input
-            !password ||
+          dense
-            !passwordRepeat ||
+          filled
-            !username ||
+          required
-            password !== passwordRepeat
+          v-model="username"
-          "
+          :label="$t('username') + ' *'"
-          type="submit"
+          :rules="[val => validateUsername(val) || $t('invalid_username')]"
-          class="full-width"
+        ></q-input>
-          :label="$t('create_account')"
+        <q-input
-        ></q-btn>
+          dense
-      </div>
+          filled
-    </q-form>
+          v-model="password"
-  </q-card-section>
+          :label="$t('password') + ' *'"
-  <slot></slot>
+          type="password"
-  <!-- RESET -->
+          :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
-  <q-card-section v-if="authAction === 'reset'">
+        ></q-input>
-    <q-form @submit="reset" class="q-gutter-sm">
+        <q-input
-      <q-input
+          dense
-        dense
+          filled
-        filled
+          v-model="passwordRepeat"
-        required
+          :label="$t('password_repeat') + ' *'"
-        :disable="true"
+          type="password"
-        v-model="reset_key"
+          :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
-        :label="$t('reset_key') + ' *'"
+        ></q-input>
-      ></q-input>
+        <div class="row justify-end">
-      <q-input
+          <q-btn
-        dense
+            unelevated
-        filled
+            color="primary"
-        v-model="password"
+            :disable="
-        :label="$t('password') + ' *'"
+              !password ||
-        type="password"
+              !passwordRepeat ||
-        :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
+              !username ||
-      ></q-input>
+              password !== passwordRepeat
-      <q-input
+            "
-        dense
+            type="submit"
-        filled
+            class="full-width"
-        v-model="passwordRepeat"
+            :label="$t('create_account')"
-        :label="$t('password_repeat') + ' *'"
+          ></q-btn>
-        type="password"
+        </div>
-        :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
+      </q-form>
-      ></q-input>
+    </q-card-section>
-      <div class="row justify-end">
+    <slot></slot>
-        <q-btn
+    <!-- RESET -->
-          unelevated
+    <q-card-section v-if="authAction === 'reset'">
-          color="primary"
+      <q-form @submit="reset" class="q-gutter-sm">
-          :disable="
+        <q-input
-            !password ||
+          dense
-            !passwordRepeat ||
+          filled
-            !reset_key ||
+          required
-            password !== passwordRepeat
+          :disable="true"
-          "
+          v-model="reset_key"
-          type="submit"
+          :label="$t('reset_key') + ' *'"
-          class="full-width"
+        ></q-input>
-          :label="$t('reset_password')"
+        <q-input
-        ></q-btn>
+          dense
-      </div>
+          filled
-    </q-form>
+          v-model="password"
-  </q-card-section>
+          :label="$t('password') + ' *'"
+          type="password"
+          :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
+        ></q-input>
+        <q-input
+          dense
+          filled
+          v-model="passwordRepeat"
+          :label="$t('password_repeat') + ' *'"
+          type="password"
+          :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
+        ></q-input>
+        <div class="row justify-end">
+          <q-btn
+            unelevated
+            color="primary"
+            :disable="
+              !password ||
+              !passwordRepeat ||
+              !reset_key ||
+              password !== passwordRepeat
+            "
+            type="submit"
+            class="full-width"
+            :label="$t('reset_password')"
+          ></q-btn>
+        </div>
+      </q-form>
+    </q-card-section>
+  </div>
   <!-- OAUTH -->
   <q-card-section v-if="showOauth">
-    <separator-text :text="$t('signin_with_oauth')"></separator-text>
+    <div v-if="authMethods.includes('username-password')">
+      <separator-text :text="$t('signin_with_oauth_or')"></separator-text>
+    </div>
+    <q-card-section v-else class="q-pb-none">
+      <div class="text-center text-h6">
+        <span v-text="$t('signin_with_oauth')"></span>
+      </div>
+    </q-card-section>
     <div class="flex justify-center q-mt-md" style="gap: 1rem">
       <q-btn
         v-if="authMethods.includes('nostr-auth-nip98')"